js-数组的所有方法

遍历数组的方法：

1、for循环

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

2、forEach()----ES5

let arr=[1, 2, 3, 4, 5];
arr.forEach((value, index, arr) => {
  console.log(value, index);
});

　　forEach()中回调函数的第一个参数是必填的，其他可选。第三个参数指向调用forEach()方法的数组，它可以用来做数组的去重：

let arr1 = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let arr2 = [];
arr1.forEach(function (value, index, arr) {
  arr.indexOf(value) === index ? arr2.push(value) : null;
});
console.log(arr2);

3、map()----ES5

let arr=[1,2,3,4,5];
arr.map((value,index,arr)=>{
  console.log(value,index,arr)
})

　　forEach()和map()的区别：

　　　　①forEach()没有返回值，map()有返回值

　　　　②forEach()会改变原数组，map()不会改变原数组

    let arr=[1,2,3,4,5];
    let arr1=arr.forEach((item,i,currentArr)=>{
      currentArr[i]=item*10 // currentArr就是调用forEach()的数组，这里把currentArr改变了，就改变了原数组
      return currentArr // 这里写return等于没写
    })
    console.log(arr)// [ 10, 20, 30, 40, 50 ]
    console.log(arr1)// undefined

    let arr = [1, 2, 3, 4, 5];
    let arr1 = arr.map((item, i, currentArr) => {
      return item * 10; // 这里返回的值就是arr1的每一项，map()里支持return
    });
    console.log(arr); // [ 1, 2, 3, 4, 5 ] // map()并不会改变原数组
    console.log(arr1); // [ 10, 20, 30, 40, 50 ]

 4、filter()----ES5

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.filter((item, i, arr) => {
  // console.log(item, i, arr);
  return item > 1; // 筛选出原数组中大于1的项
});
console.log(arr); // [1,2,3,4,5] filter()不会改变原数组
console.log(arr1); // [2,3,4,5]

　　利用filter()进行数组去重：

    let arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
    let arr1 = arr.filter((item, i, arr) => {
    return arr.indexOf(item) === i;
    });
    console.log(arr1);

5、some()----ES5

let arr = [1, 2, 3, 4, 5];
let flag = arr.some((item, i, arr) => {
  return item > 4;
});
console.log(arr); // [ 1, 2, 3, 4, 5 ] 不改变原数组
console.log(flag); // true 只要有一项成立就返回true

6、every()----ES5

let arr = [1, 2, 3, 4, 5];
let flag = arr.every((item, i, arr) => {
  return item > 4;
});
console.log(arr); // [ 1, 2, 3, 4, 5 ] 不改变原数组
console.log(flag); // false 必须所有项都满足条件才会返回true

　　注意：空数组，some()返回false，every()返回true

    console.log([].some(()=>{})) // false
    console.log([].every(()=>{})) // true

7、reduce()----ES5

　　数组去重：

    let arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
    var arr1 = arr.reduce(function (prev, next) {
      if (!prev.includes(next)) {
        prev.push(next);
      }
      return prev;
    }, []);
    console.log(arr); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5] 不改变原数组
    console.log(arr1); // [ 1, 2, 3, 4, 5 ]

　　数组求和、求乘积：

    let arr = [1, 2, 3, 4];
    var sum = arr.reduce((x, y) => x + y);
    var mul = arr.reduce((x, y) => x * y);
    console.log(sum); // 10
    console.log(mul); // 24

　　二维数组扁平化：

    let arr = [
      [0, 1],
      [2, 3],
      [
        [4, 5],
        [6, 7],
      ],
    ];
    let flattened = arr.reduce(function (a, b) {
      return a.concat(b);
    });
    console.log(flattened); // [ 0, 1, 2, 3, [ 4, 5 ], [ 6, 7 ] ]  只能扁平化第一层

　　多维数组扁平化：

    let arr = [
      [0, 1],
      [2, 3],
      [4, [5, 6, 7]],
    ];
    const newArr = function (arr) {
      return arr.reduce(
        (pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur),
        []
      );
    };
    console.log(newArr(arr)); // [0,1,2,3,4,5,6,7]

8、for of----ES6和for in---ES5

let arr=[1,2,3,4,5];
for(item of arr){
  console.log(item) // 1 2 3 4 5
}
for(i in arr){
  console.log(i,arr[i])
}

　　for of遍历的是值，fon in遍历的是下标

　　for in还可以遍历对象，但是for in的效率低下

 

增删改查：

push()和pop()：

let arr = [1, 2, 3, 4, 5];
let length = arr.push(6);
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]
console.log(length); // 6

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

　　push()在数组后面追加一项，返回新数组的长度。pop()删除数组最后一项，返回被删的那一项。

unshift()和shift()：

let arr = [1, 2, 3, 4, 5];
let length = arr.unshift(0);
console.log(arr); // [ 0, 1, 2, 3, 4, 5 ]
console.log(length); // 6

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

　　unshift()在数组前面插入一项，返回新数组的长度。shift()删除数组第一项，返回被删除的那一项。

　　push()、pop()、unshift()、shift()都会改变原数组

concat()：

基本使用：

let arr = [1, 2, 3];
let arr1 = [4, 5, 6];
let newArr = arr.concat(arr1); // 合并数组
console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ]
let arr2 = [7, 8, 9];
let newArr1 = arr.concat(arr1, arr2);
console.log(newArr1); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

实现数组浅拷贝：

let arr = [1, 2, 3];
let arr1 = arr.concat(); // 实现数组浅拷贝
console.log(arr); // [ 1, 2, 3 ]
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr == arr1); // false

追加数组的项：

let arr = [1, 2, 3];
let arr1 = arr.concat("4", null, undefined, 5, true, { name: "wql" });
console.log(arr); // [ 1, 2, 3 ]
console.log(arr1); // [ 1, 2, 3, '4', null, undefined, 5, true, { name: 'wql' } ]
let arr2 = arr.push("4", null, undefined, 5, true, { name: "wql" });
// push()方法
console.log(arr); // [ 1, 2, 3, '4', null, undefined, 5, true, { name: 'wql' } ]
console.log(arr2); // 9

　　这里的效果和push()很像，但是push()是修改原数组，而concat()不改变原数组；push()的返回值是修改后数组的长度，而concat()是返回新数组。

slice()：----不改变原数组

语法：array.slice(start, end)

　　start：可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

　　end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：截取的项组成的新数组

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.slice(1); // 从下标1开始截取到最后一位，返回新数组 [ 20, 30, 40, 50 ]
let arr2 = arr.slice(2); // 从下标2开始截取到最后一位，返回新数组 [ 30, 40, 50 ]
let arr3 = arr.slice(-1); // 从后往前数，截取倒数第一个到最后一个，也就是截取最后一个值，返回新数组 [ 50 ]
let arr4 = arr.slice(-2); // 从后往前数，截取倒数第二个到最后一个，也就是截取最后两个值，返回新数组 [ 40, 50 ]
let arr5 = arr.slice(1, 3); // 从下标1开始截取到下标3前面一个值，也就是[1, 3)，返回新数组 [ 20, 30 ]
let arr6 = arr.slice(1, -1); // 从下标1开始截取到从后往前数最后一位前面一个值，也就是[1, arr.length-1)，返回新数组 [ 20, 30, 40 ]
let arr7 = arr.slice(1, arr.length - 1); // [ 20, 30, 40 ]
let arr8 = arr.slice(); // 数组浅拷贝 [ 10, 20, 30, 40, 50 ]
let arr9 = arr.slice(1, 6); // 参数二超出数组下标大小，相当于没写，截取到最后一个 [ 20, 30, 40, 50 ]
let arr10 = arr.slice(-3, -1); // 从后往前数倒数第三个下标截取到从后往前数倒数第一个下标的前一个值，也就是[倒数第三个下标,倒数第一个下标) [ 30, 40 ]

splice()：----会改变原数组

语法：array.splice(index,howmany,item1,.....,itemX)

　　index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。

　　howmany：可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

　　item1, ..., itemX：可选。要添加到数组的新元素

返回值：被删除元素组成的新数组

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1); // 从下标1的位置开始截取到末位，不插入元素，将截取的元素组成新的数组赋给arr1，arr保留剩下的元素
console.log(arr); // [ 10 ]
console.log(arr1); // [ 20, 30, 40, 50 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(2); // 从下标2的位置开始截取到末位，不插入元素，将截取的元素组成新的数组赋给arr1，arr保留剩下的元素
console.log(arr); // [ 10, 20 ]
console.log(arr1); // [ 30, 40, 50 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1, 3); // 截取[1, 3)的元素赋给arr1，不插入元素，arr中保留剩下的元素
console.log(arr); // [ 10, 50 ]
console.log(arr1); // [ 20, 30, 40 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1, 3, 100); // 截取[1, 3)的元素赋给arr1，在下标1的位置插入数字100这个元素，arr中保留剩下的元素
console.log(arr); // [ 10, 100, 50 ]
console.log(arr1); // [ 20, 30, 40 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1, 3, '100'); // 截取[1, 3)的元素赋给arr1，在下标1的位置插入字符100这个元素，arr中保留剩下的元素
console.log(arr); // [ 10, '100', 50 ]
console.log(arr1); // [ 20, 30, 40 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1, 3, 100, 200, 300, 400); // 截取[1, 3)的元素赋给arr1，在下标1的位置依次插入数字100,200,300,400这些元素，arr中保留剩下的元素
console.log(arr); // [ 10, 100, 200, 300, 400, 50 ]
console.log(arr1); // [ 20, 30, 40 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1, 3, null, undefined, true, {name:'wql'}); // 截取[1, 3)的元素赋给arr1，在下标1的位置依次插入null,undefined,true,{name:'wql'}这些元素，arr中保留剩下的元素
console.log(arr); // [ 10, null, undefined, true, { name: 'wql' }, 50 ]
console.log(arr1); // [ 20, 30, 40 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(1, 0, 100); // 在下标1的位置截取0个元素赋给arr1，并在下标1的位置插入数字100，arr中保留剩下的元素
console.log(arr); // [ 10, 100, 20, 30, 40, 50 ]
console.log(arr1); // []

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(0, 0, 100); // 在下标0的位置截取0个元素赋给arr1，并在下标0的位置插入数字100，arr中保留剩下的元素。就是在数组的前面插入元素，相当于unshift()，但是unshift()返回新数组长度，而splice()返回截取下来的元素组成的新数组
console.log(arr); // [ 100, 10, 20, 30, 40, 50 ]
console.log(arr1); // []

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(arr.length, 0, 100); // 在数组最后一项的下一个下标的位置截取0个元素赋给arr1，并在该位置插入数字100，arr中保留剩下的元素。就是在数组的前面插入元素，相当于push()，但是push()返回新数组长度，而splice()返回截取下来的元素组成的新数组
console.log(arr); // [ 10, 20, 30, 40, 50, 100 ]
console.log(arr1); // []

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(0, 1); // 截取[0, 1)的元素赋给arr1，插入0个元素，相当于shift()，但是shift()返回第一个元素，而splice()返回被删除的元素组成的数组
console.log(arr); // [ 20, 30, 40, 50 ]
console.log(arr1); // [ 10 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(arr.length - 1, 1); // 截取[arr.length - 1, arr.length)的元素赋给arr1，插入0个元素，相当于pop()，但是pop()返回最后一个元素，而splice()返回被删除的元素组成的数组
console.log(arr); // [ 10, 20, 30, 40 ]
console.log(arr1); // [ 50 ]

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(2, 0, 999); // 第一个参数表示下标，第二个参数为0时，表示在下标位置插入第三个及后面的参数
console.log(arr); // [ 10, 20, 999, 30, 40, 50 ]
console.log(arr1); // []

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.splice(2, 1, 999, 1000); // 第一个参数表示下标，第二个参数为1时，表示将下标位置的元素替换为第三个及后面的参数
console.log(arr); // [ 10, 20, 999, 40, 50 ]
console.log(arr1); // [ 30 ]

 反转数组：

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.reverse(); // 直接改变原数组，再复制给arr1
console.log(arr); // [ 5, 4, 3, 2, 1 ]
console.log(arr1); // [ 5, 4, 3, 2, 1 ]
console.log(arr==arr1); // true

查找下标：

let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(10)); // -1
console.log(arr.lastIndexOf(4)); // 6
console.log(arr.lastIndexOf(10)); // -1

数组排序：

let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
let arr1 = arr.sort(); // 改变原数组，再复制给arr1
console.log(arr); // [ 1, 1, 2, 2, 3, 3, 4, 4, 5, 5 ]
console.log(arr1); // [ 1, 1, 2, 2, 3, 3, 4, 4, 5, 5 ]
console.log(arr == arr1); // true

升序：

let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
let arr1 = arr.sort((a, b) => {
  return a - b;
}); // 改变原数组，再复制给arr1
console.log(arr); // [ 1, 1, 2, 2, 3, 3, 4, 4, 5, 5 ]
console.log(arr1); // [ 1, 1, 2, 2, 3, 3, 4, 4, 5, 5 ]
console.log(arr == arr1); // true

降序：

let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
let arr1 = arr.sort((a, b) => {
  return b - a;
}); // 改变原数组，再复制给arr1
console.log(arr); // [ 5, 5, 4, 4, 3, 3, 2, 2, 1, 1 ]
console.log(arr1); // [ 5, 5, 4, 4, 3, 3, 2, 2, 1, 1 ]
console.log(arr == arr1); // true

将数组转为字符串：

join()：

let arr = [1, 2, 3, 4, 5]; 
let str = arr.join(); 
let str1 = arr.join('');
let str2 = arr.join(' ');  
let str3 = arr.join('#'); 
console.log(arr); // [ 1, 2, 3, 4, 5 ] 不改变原数组
console.log(str); // 1,2,3,4,5 默认用英文逗号分隔
console.log(str1); // 12345 不采用符号分隔
console.log(str2); // 1 2 3 4 5 采用空格分隔
console.log(str3); // 1#2#3#4#5 采用#号分隔

ES6新增：

includes()：-判断数组中有没有这个元素

let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1,NaN];
let a = arr.includes(10); // false
let b = arr.includes(5); // true
let c = arr.includes(5, 6); // false 从下标6开始找5
let d = arr.includes(NaN); // true 
let e = arr.indexOf(NaN); // -1 indexOf()查找NaN时找不到

　　和indexOf()的区别：

　　　　①indexOf()返回下标值，找不到则返回-1，includes()返回布尔值

　　　　②indexOf()不能判断NaN，返回-1，includes()可以判断出来有没有NaN

keys()、values()、entries()：

let arr = [1, 2, 3, null, undefined, true, "100", { name: "wql" }];
let arr1 = arr.keys(); // 遍历数组的键名，返回键名
for (let key of arr1) {
  console.log(key); // 0 1 2 3 4 5 6 7
}
let arr2 = arr.values(); // 遍历数组的键值，返回键值
for (let value of arr2) {
  console.log(value); // 1, 2, 3, null, undefined, true, "100", { name: "wql" }
}
let arr3 = arr.entries(); // 遍历数组中的元素，返回元素键值对
for (let e of arr3) {
  console.log(e); // [ 0, 1 ] [ 1, 2 ] [ 2, 3 ] [ 3, null ] [ 4, undefined ] [ 5, true ] [ 6, '100' ] [ 7, { name: 'wql' } ]
}

find()、findIndex()：

let arr = [1, 2, 3, 4, 5];
let item = arr.find((value, index, array) => value > 2); // 返回第一个符合条件的元素
let index = arr.findIndex((value, index, array) => value > 2); // 返回第一个符合条件的元素的下标
console.log(item); // 3
console.log(index); // 2

fill(value,start,end)：

　　value：需要替换成什么值

　　start：开始的下标

　　end：结束的下标

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.fill(50); // 将数组中所有元素都替换为50 会改变原数组
console.log(arr); // [ 50, 50, 50, 50, 50 ]
console.log(arr1); // [ 50, 50, 50, 50, 50 ]
console.log(arr == arr1); // true

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.fill(50, 2); // 从下标2开始到末位的元素都替换为50 会改变原数组
console.log(arr); // [ 1, 2, 50, 50, 50 ]
console.log(arr1); // [ 1, 2, 50, 50, 50 ]

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.fill(50, 2, 3); // 将[2, 3)替换为50 会改变原数组
console.log(arr); // [ 1, 2, 50, 4, 5 ]
console.log(arr1); // [ 1, 2, 50, 4, 5 ]

copyWithin(target,start,end)：

　　target：复制元素到该位置

　　start：从这里开始复制元素

　　end：到这里结束

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
let arr1 = arr.copyWithin(1, 3, 6); // 将[3, 6)位置的元素复制到下标1的位置，复制了几个元素就从下标1开始往后覆盖几个元素，直接改变原数组
console.log(arr); // [ 1, 4, 5, 6, 5, 6, 7, 8, 9, 10, 11 ]
console.log(arr1); // [ 1, 4, 5, 6, 5, 6, 7, 8, 9, 10, 11 ]
console.log(arr == arr1); // true

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr.copyWithin(1, 3); // 从下标3开始复制到末位，将这些元素覆盖到下标1开始的位置上，复制了多少位，就往后覆盖多少位
console.log(arr); // [ 1, 4, 5, 6, 7, 8, 9, 10, 11, 10, 11 ]

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr.copyWithin(13, 3, 6); // 参数1大于arr.length，不发生拷贝
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr.copyWithin(1, -5); // 参数二为负数，则为arr.length+start即11-5=6，从下标6开始复制到末位覆盖从下标1开始的位置
console.log(arr); // [1, 7, 8, 9, 10, 11, 7, 8, 9, 10, 11]

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr.copyWithin(1, -5, -3); // 同理，[-5, -3)即为[6, 8)，就是将7, 8复制了覆盖掉2, 3
console.log(arr); // [1, 7, 8, 4, 5, 6, 7, 8, 9, 10, 11]

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr.copyWithin(1, -5, -8); // 同理，[-5, -8)即为[6, 3)，找不到这个范围的元素，所以返回原数组
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

ES6新增的数组静态方法：

Array.form()：

let str='12345'
let arr=Array.from(str)
console.log(arr) // [ '1', '2', '3', '4', '5' ]

Array.of()：

let arr = Array.of(1, 2, [3, 4]);
let arr1 = Array(1, 2, [3, 4]);
console.log(arr); // [ 1, 2, [ 3, 4 ] ]
console.log(arr1); // [ 1, 2, [ 3, 4 ] ]
console.log(arr == arr1); // false

　　Array.of()可以用来代替Array()或new Array()，但是当参数是一个正整数时，Array()中该值表示数组的长度，而Array.of()是以该数为数组的第一项：

let arr = Array.of(7);
let arr1 = Array(7);
console.log(arr, arr.length); // [ 7 ] 1
console.log(arr1, arr1.length); // [ <7 empty items> ] 7

Array.isArray()：

let flag = Array.isArray([]);
let flag1 = Array.isArray("");
console.log(flag); // true
console.log(flag1); // false

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

未完待续。。。。。。