JS中数组和对象的遍历方法

方法一、for循环

for循环是使用最多，也是性能有话最好的一种遍历方式。

var arr = ["a","b","c"];
for(var i=0;i<arr.length;i++){console.log(arr[i])}；//a,b,c

• 同样常规的循环还有while循环和do/while循环。
• 他们之间的区别在于，for循环预先知道了循环次数，while do/while循环不知道循环次数

方法二、for-of遍历

• for-of是ES6新增的语法，他直接遍历值，而不是数组下标

var arr = ["a","b","c"];
for(let item of arr){ console.log(item) }； //a,b,c
let  obj = {a:1,b:2,c:3};
for(let key of obj){ console.log(key)}；//obj is not iterable;

• for of 主要用于遍历数组，直接遍历数组值。遍历对象会报错 obj is not iterable;；
• for…in：遍历对象可以使用for in 进行遍历，遍历出属性名；

let array = ['a', 'b', 'c'];
for (const value in array) { console.log(value) } // 分别打印 '0' '1' '2'
let  obj = {name:1,age:2,height:3};
for(let key in obj){ console.log(key) }//name,age,height

为了适应不同方式的遍历，js内置了许多数组方法

1.forEach()方法

var arr = ["a", "b", "c"];
arr.forEach((item, index) => {
  console.log(item, index)
})
// a 0
// b 1
// c 2

2.map()方法

var arr = [1, 2, 3];
var newArr = arr.map(item => {
  return item * 2;
});
console.log(newArr);  // [2, 4, 6]

3.filter()方法

var arr = [1, 2, 3];
var newArr = arr.filter(item => {
  return item > 1;
});
console.log(newArr); // [2, 3]

4.reduce() ES5新增 为累加操作而设计

var arr = [1, 2, 3, 4]
var sum = arr.reduce((pre, cur) => {
    return pre + cur;
});
console.log(sum)
//10

5.every() 用于检测数组元素是否全部符合指定条件

var arr = [1, 2, 3, 4]
var bool = arr.every(item=>{
    return item<5
})
console.log(bool);//true

6.some() 检测数组是否存在一个符合指定条件的元素

 var arr = ["a", 2, "c"]
 var bool = arr.some(item => {
     return typeof item === "number"
 })
 console.log(bool); //true

7.find()方法返回通过测试（函数内判断）的数组的第一个元素的值。

• find()方法为数组中的每个元素都调用一次函数执行；
• 当数组中的元素在测试条件时返回true时，find()返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回undefind
• find()对于空数组，函数时不会执行的；
• find()并没有改变数组的原始值；

    let arr = [0, 1, , , 4]
    const reasult = arr.find((m, index) => {
      console.log({m, index})
      return m > 3
    })
    console.log(reasult)
    // {m: 0, index: 0}
    // {m: 1, index: 1}
    // {m: undefined, index: 2}
    // {m: undefined, index: 3}
    // {m: 4, index: 4}
    // // 4  [0, 1, empty × 2, 4]

8.slice()方法可从已有的数组中返回选定的元素；

• 该方法不会改变原数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法Array.splice();
• slice(start,end);包含开头，不包含结尾；不填end默认截取到最后

    var arr = ["a", "b", "c", "d", "e", "f", "g"];
    console.log( arr.slice(3)); //['d', 'e', 'f', 'g']
    console.log( arr.slice(3,5)); //['d', 'e']

• 索引可以为负数，从后往前截取，-1倒数第一个，-2倒数第二个；

  var arr = ["a", "b", "c", "d", "e", "f", "g"];
  console.log( arr.slice(-1)); //['g']
  console.log( arr.slice(-3)); //['e','f', 'g']
  console.log( arr.slice(1,-3)); //['b', 'c', 'd']
  console.log(arr);//['a', 'b', 'c', 'd', 'e', 'f', 'g'] 不改变原数组

9.splice()方法用于添加或删除数组中的元素；

• 如果删除一个元素，则返回删除元素的数组。如果未删除任何元素，则返回空数组。
• array.splice(index,howmany,item1,…..,itemx)
• index 删除元素的开始位置；
• howmany 删除的数量；
• item1,…,itemx 传递新元素，这些元素可以插入到开始位置索引前；
• 改变原数组；

  var arr = ["a", "b", "c", "d", "e"];
  console.log(arr.splice(0, 2));//['a','b']
  console.log(arr);// ['c', 'd', 'e'] 改变了原数组 
  // 从索引为0开始，删除a,b,c和d 在e前加'zm', 'xc'
  console.log(arr.splice(0, 4, 'zm', 'xc'));//['a', 'b', 'c', 'd'] 
  console.log(arr);// ['zm', 'xc', 'e'] 改变了原数组

• slice和splice的总结
• splice改变原数组，slice不改变原数组。
• splice除了可以删除以外，还可以插入。
• splice可传入3个参数，slice接受2个参数。

对象的遍历方法

方法一：for-in循环 用于遍历对象的可枚举属性

var obj = {
    a: 1,
    b: 3,
    c: 4
}
for (var key in obj) {
    console.log(key)
}
//a,b,c

方法二：Object.keys() 和 Object.getOwnPropertyNames()

Object.key()会返回一个数组，包含所有可枚举属性；Object.getOwnPropertyNames()也会返回一个数组，包含所有元素，不管是否可枚举

本作品采用《CC 协议》，转载必须注明作者和本文链接