js中频次较高的数组方法

总结一波数组操作的相关方法

数据声明如下

 let arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89],
            len = 0,
            item = '',
            newArr = [];

1.push()修改原数组 往数组最后面添加数组项 返回新数组的长度 可以一次添加多个

 len = arr.push({
            name: '张三',
            age: 20
        }, 100);
        console.log(len);  // 9

2. pop()修改原数组 删除数组中最后一条数组项 返回移除的数组项 不需要传参

 item = arr.pop();
         console.log(item); // 100

3. unshift() 修改原数组 往数组最前面添加数组项 返回新数组的长度 可以一次添加多个

 len = arr.unshift({
            name: "lisi",
            score: 90
        },100);
        console.log(len);//10
        console.log(arr);//[{…}, 100, 1, 2, 3, "天元", {…}, 4, 89, {…}]

4. shift() 修改原数组 删除数组中最前面一条数组项 返回移除的数组项 不需要传参

 item = arr.shift();
         console.log(item);//{name: "lisi", score: 90}

5.slice() 不修改原数组 通过下标切割数组 （参数1 开始位置，参数2 结束位置）左开右闭 返回一个新数组

不写参数时或者参数为0时，可以复制数组  只写一个参数时 ，从此处开始一直到结束

 newArr = arr.slice(1,3);
         console.log(arr);//[100, 1, 2, 3, "天元", {…}, 4, 89, {…}]
         console.log(newArr);//[1, 2]

6. splice() 数组替换 修改原数组 返回新数组为替换的子项组成的数组    参数1 开始替换的下标，参数2 替换的个数  参数3 替换的内容,可以不写

 newArr = arr.splice(0,2,'wp10');
         console.log(arr);////["wp10", 2, 3, "天元", {…}, 4, 89, {…}]
         console.log(newArr);// [100, 1]

7.concat() 数组拼接 可一次拼接多个参数 主项调用方法 参数为要拼接的项目

返回新数组，不改变原数组（参数可以是数组、单独项）无参可以复制数组

 let arr1 = ['我','爱','你'];
           newArr = arr.concat(1,2,arr1);
           console.log(arr);//["wp10", 2, 3, "天元", {…}, 4, 89, {…}]
           console.log(newArr);// ["wp10", 2, 3, "天元", {…}, 4, 89, {…}, 1, 2, "我", "爱", "你"]

8. join() 数组变为字符串 参数 替换数组中间的逗号 不写参数时不替换

let arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
let str = arr.join();
             console.log(str);//1,2,3,天元,[object Object],4,89
             str = arr.join("");
             console,log(str);//123天元[object Object]489
             str = arr.join("-");
             console.log(str);//1-2-3-天元-[object Object]-4-89

9. sort() 数组排序操作 改变原数组 返回新数组===改变后的原数组

arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
         newArr = arr.sort((a, b) => a - b);
         console.log(arr);//[1, 2, 3, "天元", {…}, 4, 89]
         console.log(newArr);//[1, 2, 3, "天元", {…}, 4, 89]
         newArr = arr.sort((a, b) => b - a);
         console.log(arr);//[3, 2, 1, "天元", {…}, 89, 4]
         console.log(newArr);//[3, 2, 1, "天元", {…}, 89, 4]

10. reverse() 数组反转 改变原数组 返回新数组===改变后的原数组

 arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
 newArr = arr.reverse();
         console.log(arr);//[89, 4, {…}, "天元", 3, 2, 1]
         console.log(newArr);//[89, 4, {…}, "天元", 3, 2, 1]

11. forEach() 遍历数组 不改变原数组 不返回数据

参1 callback ---》 参数1 ele 数组项

参数2 index 索引

参数3 arr 原数组

参2 【可选】改变回调函数的this指向，注意不能是箭头函数 默认不写参数时 this指向window

 arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.forEach(function(ele,index,arr){
            /*  console.log(ele);
             console.log(index);
             console.log(arr); */
             console.log(this);//[1, 2, 3, "天元", {…}, 4, 89]
         },arr);
         console.log("newArr = ",newArr);//undefined

12.map() 遍历数组 映射方法 类似forEach() 不修改原数组 返回一个新数组 参数为回调函数

对参数不操作时 可以起到复制数组的作用

可以对参数进行 加 减 乘 除等操作

arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.map(value => value);
         console.log(arr);//[1, 2, 3, "天元", {…}, 4, 89]
         console.log(newArr);//[1, 2, 3, "天元", {…}, 4, 89]

13. filter() 数组过滤 不改变原数组 返回新数组      callback return ture; 返回满足条件的值

arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
          newArr = arr.filter((ele) => ele > 0);
          console.log(arr);//[1, 2, 3, "天元", {…}, 4, 89]
          console.log(newArr);//[1, 2, 3, 4, 89]

14. forin() 只能获取对象的键名或者索引 不能直接获取值    typeof key 得到的是字符串类型的。

 arr = [1, 2, 3];
        for (let key in arr) {
            console.log(key + ':' + arr[key],typeof key);//0:1 string  1:2 string  2:3 string
        }

15. forof() 遍历获取值

arr = [1, 2, 3,'mm'];
         for(let key of arr){
             console.log(key);// 1 2 3 mm
             newArr.push(key);
         }

16. every() 判断数组 对每个项进行逐项进行判断 全部满足返回true 否则返回false

参数为回调函数callback

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

arr = [1, 2, 3];
        let bl = arr.every(value => value > 0);
        console.log(bl);//true

17. some() 同上 有一个满足条件就返回true ，都不满足条件返回false

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

arr = [1, 2, 3,-1];
        let bl = arr.every(value => value > 0);
        console.log(bl);//true

18.  arr.reduce(callback,[initialValue])

                   callback （执行数组中每个值的函数，包含四个参数）

                   previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））

                  currentValue （数组中当前被处理的元素）

                   index （当前元素在数组中的索引）

                  array （调用 reduce 的数组）

                initialValue （作为第一次调用 callback 的第一个参数。）

              reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右) 开始缩减，最终为一个值。

              reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。