【Js】数组的内置方法及几种遍历

1.1、forEach()-不改变数组，数组的方法

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的value；第对应的数组索引，数组本身。
简单理解就是为遍历数组，执行函数。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

console.log(arr);
// [1, 2, 3, 4, 5]

1.2、for in -- 数组和对象都可以使用！！

for in遍历的是数组的索引，即键名

var arr = [1, 2, 3, 4, 5];
for(let index in arr){
    console.log(index,arr[index])
}
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5

for-in循环实际是为循环”enumerable“对象而设计的

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
    console.log(o)    //遍历的实际上是对象的属性名称 a,b,c,d
    console.log(obj[o])  //这个才是属性对应的值1，2，3，4
}

1.3、for of -- 不能对普通对象使用

它是ES6中新增加的语法，但是它并不能循环一个普通对象
循环一个数组

let arr = ['China', 'America', 'Korea']
for (let v of arr) {
    console.log(v) //China, America, Korea
}

如果我们按对象所拥有的属性值进行循环，可使用内置的Object.values()方法

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

对字符串使用

var str = 'asdfag'
for (value of str){console.log(value)}
// a s d f a g

2、Array.map() -- 不改变原数组

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x*2)
//arr= [1, 2, 3, 4, 5]   原数组保持不变
//newArr = [2, 4, 6, 8, 10] 返回新数组

3、Array.filter() -- 不改变原数组

此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

var arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(v=> v>3)
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
console.log(newArr); // 4, 5
console.log(arr); // 1, 2, 3, 4, 5

4、Array.every() -- 不改变原数组

此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：

var arr = [1, 2, 3, 4, 5]
let res = arr.every(v=> v>3)
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
console.log(res); // false
console.log(arr); // 1, 2, 3, 4, 5

5、Array.some() -- 不改变原数组

此方法是将所有元素进行判断返回一个布尔值，如果存在元素满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false：

var arr = [1, 2, 3, 4, 5]
let res = arr.every(v=> v>3)
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
console.log(res); // true
console.log(arr); // 1, 2, 3, 4, 5

5、Array.reduce() -- 不改变原数组

reduce(function(pre,cur,index,array){}, initValue)
pre相当于一个容器，存放每次执行的结果；每次return的值会作为下次的pre。
回调函数第一次执行时，previousValue 和 currentValue 可以是一个值，如果 initialValue 在调用 reduce 时被提供，那么第一个 previousValue 等于 initialValue ，并且currentValue 等于数组中的第一个值；如果initialValue 未被提供，那么previousValue 等于数组中的第一个值，currentValue等于数组中的第二个值。

var arr = [1,2,3,4];
arr.reduce(function(previousValue, currentValue){
  return previousValue * currentValue;
}); // 24
console.log(arr); // [1,2,3,4]

// 数组去重
var arr = [1,2,3,2,3,4];
var newarr = arr.reduce(function(acc, cur){
  !acc.includes(cur) && acc.push(cur);
  return acc;
},[]); 
console.log(newArr); // [1,2,3,4]

5、Array.slice() -- 不改变原数组

splice(start,end) 第一个参数是起始的index，第二个参数是结束的index(不包括结束的位置)

var arr = [0,1,2,3,4];
arr.slice(1,3); // 实际切出来arr[1],arr[2], [1,2]
console.log(arr); // [0,1,2,3,4];

6、Array.splice() -- 改变原数组

Array.splice(index,howmany,arr1,arr2...) ，删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2...数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。

var arr = [0,1,2,3,4];
arr.splice(1,3); // [1, 2, 3]
console.log(arr); // [0,4];