js中的Array

Posted 2021-02-07 叶家伟的博客

js中的Array

1. 啥是ArrayLike对象

   类似，下面这种对象的就是ArrayLike
   var arraylike = {
       0: "a",
       1: "b",
       2: "c",
       length: 3
   }
   arraylike.forEach(element => { // 报错
       console.log(element);
   });
   ArrayLike对象和数组类似，但是不能使用数组的方法，因为它是继承自Object.prototype而不是Array.prototype
   
   获取dom元素的方法，一般都会产生ArrayLike对象

2. 将ArrayLike对象转换成Array

   方式一：
       var array = Array.from(arraylike);
   
   方式二：
       var array = Array.from(arraylike, item => item+item);

3. reduce方法

   reduce方法其实类似于叠罗汉，取数组中第一个参数和第二个参数做运算，然后将结果返回，作为下一次运算的第一个元素与数组中的第三个元素运算，重复这种操作
   var array = [1,2,3,4,5];
   var res = array.reduce((a, b) => a + b);            // 15 求和运算
   var res = array.reduce((a, b) => a + b, 10);        // 25 传递第二个参数作为运算的起始第一个参数
   
   数组格式化成对象，这对于处理后端api数据，方便前端渲染很有用
       var array = [
           {name: "小明", age: "10"},
           {name: "小张", age: "20"},
           {name: "小王", age: "30"},
       ]
   
       方式一:
           var obj = array.reduce((a, b) => {
               a[b.name] = b.age;
               return a;
           }, {});   // { ‘小明‘: ‘10‘, ‘小张‘: ‘20‘, ‘小王‘: ‘30‘ }
   
       方式二：
           var obj = array.reduce((a, b) => Object.assign(a, {
               [b.name]: b.age
           }), {});
   
       方式三：
           var obj = array.reduce((a, b) => ({...a, [b.name]: b.age}), {});

4. map方法

   map方法循环便利所有元素，产生一个新的数组
   
   var arr = [1,2,3,4,5];
   var res = arr.map(item => item+1); // [ 2, 3, 4, 5, 6 ]
   
   var res = arr.map(function(item){
       return item+this.init;
   }, {
       init: 1
   });  // [ 2, 3, 4, 5, 6 ]

5. filter方法

   filter方法循环便利所有元素，根据条件筛选出符合的元素，产生一个新的数组
       var arr = [1,2,3,4,5];
       var res = arr.filter(item => item > 3) // [ 4, 5 ]

6. sort方法

   sort方法在原数组的基础上进行排序
       按照字母表顺序排序
           var arr = ["c", "b", "f", 1, "g", 2];
           arr.sort((a, b) => a.toString().localeCompare(b));  // [ 1, 2, ‘b‘, ‘c‘, ‘f‘, ‘g‘ ]
   
       升序排序
           var arr = [3,5,2,1,9];
           arr.sort((a, b) => a - b);

7. for...of

   遍历数组
   var arr = [3,5,2,1,9];
   for(let item of arr) {
       console.log(item);
   }

8. every

   有条件的暂停遍历
   var arr = [3,5,2,"end",1,9];
   arr.every(item => {
       console.log(item);
       return item != "end";
   })

9. some

   和上面的every逻辑上正好相反
   var arr = [3,5,2,"end",1,9];
   arr.some(item => {
       console.log(item);
       return item === "end";
   })

10. find和findIndex

    var arr = [
        {name: "小明", age: "10"},
        {name: "小张", age: "20"},
        {name: "小王", age: "30"},
    ];
    
    var res = arr.find(item => item.age==20);       // { name: ‘小张‘, age: ‘20‘ }
    var res = arr.findIndex(item => item.age==20);  // 1

11. 解构

    var arr = [1,2,3,4,5];
    var [a,,b, ...c] = arr;
    console.log(a, b, c);   // 1 3 [ 4, 5 ]

12. 去重

    var arr = [1,1,2,1,1,2,3,3];
    
    利用reduce进行数组去重
        var res = arr.reduce((a,b) => {
            if(a.indexOf(b) === -1) {
                a.push(b);
            }
            return a;
        }, []) // [ 1, 2, 3 ]
    
    利用filter进行去重
        var res = arr.filter((a,b,c) => {
            return c.indexOf(a) === b;
        }) 
    
    利用Set去重
        var res = [...new Set(arr)];