数组表达式操作手册

总是花费大量的时间去记忆数组操作函数，整理一下，提高学习效率,希望对前端同行有所帮助，其实很简单，但是能非常熟练的掌握还是有点小困难的。

一、数组元素操作

1、数组创建

    ES5:创建方式

    var  array1 = new Array(); // [ ]

    var array2 =new Array(3); // [ , , ,]

    var array3 = new Array(13,12,100); // [13, 12, 100]

    ES6:创建方式

    var  array4 = Array.of(13,110,18) //[13,110,18]

    Array.of(13,110,18).length; // 3

    var  array5 = Array.of(3);//[3]

    Array.of(3).length; // 1

    Array.from:用法详解

    (1)、通过字符串创建数组

    var array6 = Array.from("hello"); // ["h", "e", "l", "l", "o"]

    (2)、通过Set创建数组

    let demoSet =new Set(['jack','rose'])

    Array.from(demoSet); // ['jack','rose']

    (3)、通过数组创建数组

    Array.from([1,2,3,4,5,6,7]); //返回一模一样的新数组 [1,2,3,4,5,6,7]

   (3)、通过Map创建数组

    const map1 = new Map();
    map1.set('k1', 1);
    map1.set('k2', 2);
    map1.set('k3', 3);

    console.log('%s', Array.from(map1))

    (4)、unicode字符串拆解成数组

    Array.from('\u767d\u8272\u7684\u6d77')
    //["白", "色", "的", "海"]

2、数组元素的访问

    let array11 = [1,2,3,4,5,7]

    array11[1]; // 2

    array11[0]=100 ; // [100, 2, 3, 4, 5, 7] 修改数组第一个

3、数组元素的添加

        (1)、从数组尾部添加

            let array =[1,2,3]

            array.push(4);// 添加一项，[1,2,3,4]

            array.push(5,6,7)//添加多项[1, 2, 3, 4, 5, 6, 7]

        (2)、从数组头部添加

            array.unshift(0); // [0,1, 2, 3, 4, 5, 6, 7]

            array.unshift(-3,-2);//  [-3, -2, 0, 1, 2, 3, 4, 5, 6, 7]

        (3)、数组指定位置添加

            array.splice(insertPos,0,item);将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回[]空数组。

               array.splice(1,0,250) //  [-3, 250, -2, 0, 1, 2, 3, 4, 5, 6, 7]

4、数组元素的删除 

        (1)、从数组尾部删除

            let array12 =[1,2,3]

          var deleteItme  array12.pop();// 返回删除的项 deleteItme  =3， array12 为 [1, 2]

        (2)、从数组头部删除

            array12.shift(); // [2] 返回 删除的项 array12变为 [2]

        (3)、数组指定位置删除

           arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

              let array13 = [1,2,3,4,5,6,7,8,9];

              array13.splice(1,2) ; 返回删除的 [2,3] , array13变为 [1, 4, 5, 6, 7, 8, 9]  指定位置删除多项

              array13.splice(1,1) ; 返回删除的 [4] , array13变为 [1,  5, 6, 7, 8, 9] 删除指定位置的数组元素

5、数组的截取和合并

        arrayObj.slice(start, end); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

        let array14 =[1,2,3,4,5,6,7,8,9,10]

        array14.slice(1,3) // 返回  [2, 3],对原数组没有影响 array 为  [1,2,3,4,5,6,7,8,9,10]

        arrayObj.concat(item); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

        let array16 =[1,2,3];

        let array17 = [4,5,6];

        let array18 =[7,8]

        array16.concat(array17,array18 ); // [1, 2, 3, 4, 5, 6,7,8]  array16 和 array17,array18合并 根据顺序，首尾相连

6、数组的拷贝

        (1)、slice方法截取

       arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向

        let array19 =[1,2,3,4,5,6,7,8];

        array19.slice(0);// 从数组位置0，截取到尾部，复制整个数组 [1,2,3,4,5,6,7,8]

        (2)、concat 合并方法

         arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向

        array19.concat();//array合并项为空，返回数组本身，[1,2,3,4,5,6,7,8]

         (3)、for循环

           var newArray=[];

           for (let i =0;i<=array19.length;i++){

            newArray.push(array19[i]);

            } //newArray复制array19所有数组元素

         (4)、Array.from() 复制数组

            Array.from(array19); // Array.from(array19) 返回  [1, 2, 3, 4, 5, 6, 7, 8]

          (5)、ES6扩展运算符实现数组的深拷贝

            var array20 =[...array19];//[1, 2, 3, 4, 5, 6, 7, 8]

            

7、数组排序   

        arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回新数组

        array19.reverse(); // 反转元素  [8, 7, 6, 5, 4, 3, 2, 1]

        arrayObj.sort();  //对数组元素排序，返回新数组

        array19.sort() //[1, 2, 3, 4, 5, 6, 7, 8]

8、数组元素字符串化

        arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

        array19.join('-') ;// 返回 "1-2-3-4-5-6-7-8"

        array19.join(',') ;// 返回 "1,2,3,4,5,6,7,8"

9、字符串的数组化

        string.split(separator);//返回数组，这个数组将字符串以separator为分界，拆分成数组的元素。

          "one,two,three,four,five,six,seven,eight,nine,ten".split(',')

        

10、splice 用法详解     

    1)删除：splice(要删除第一项的位置,要删除的项数)；两个参数的用法,用法详见删除数组操作

    

    2) 插入添加： splice( 起始位置 ,0, 要插入的项 )  ；    在起始位置前插入，项数不定，   用法详见数组添加数组操作

    

    

    3) 替换： splice( 起始位置 , 删除的项数 , 插入的项 ) ；     

   

  splice()方法会返回一个数组，包含删除的项。如果没有删除，返回的是一个空数组。

11、数组元素查找

       (1)find()操作

        [1,2,3,4,5,6,7,8,9].find((n)=> n>8)

        

        (2)findIndex()操作

        

12、数组实例的fill();

    fill 方式使用给定值填充数组

    [1,2,3,4,5,6,7,8,9].fill(100);

    

13、数组实例的 includes();

    表示某个数组是否包含给定的值，与字符串的includes 方法类似。

    [1,2,3,4,5,6,7,8,9].includes(8);//true

    

[1,2,3,4,5,6,7,8,9].includes(8,8);第一个参数是寻找的值，第二个是搜索的起始位置，如果第二个是负数，则表示倒数的位置，如果位置超出数组长度，则会重置为从0开始。

二、Array的六种迭代方法

    (1)、map

map()是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。这个数组的每一项都是在原始数据中的对应项上运行传入函数的结果，例如：

var numbers=[1,2,3,4,5,4,3,2,1];

  var mapResult=numbers.map(function(item,index,array){

return item*2;

});    

    (2)、forEach

    

    (3)、every

every()是对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

var numbers=[1,2,3,4,5,4,3,2,1];

  var everyResult=numbers.every(function(item,index,array){

return (item>2);

});

console.log(everyResult);//false

    (4)、filter

filter()是对数组中的每一项运行给定函数，返回该函数会返回true的项所组成的数组。它利用指定的函数确定是否在返回的数组中包含某一项。例如：

var numbers=[1,2,3,4,5,4,3,2,1];

var filterResult=numbers.filter(function(item,index,array){

return (item>2);

});

alter(filterResult); //[3,4,5,4,3];

此例子中，传入的函数要返回一个所有数值都大于2的数组，通过调用filter()方法创建并返回了包含3/4/5/4/3的数组，因为传入的函数对它们的每一项都返回true。这个方法对查询符合某些条件的所有数组项非常有用。

var filter1 = [ 1,100,200,400,300,500,600,800,10000]
var filterArray = filter1.filter(function(item,index,array){
return item%100==0
})
console.log(filterArray);

    (5)、some

some()是对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

var someResult=numbers.some(function(item,index,array){

return (item>2);

});

console.log(someResult);//true

二、数组属性详解

 1、length属性详解

    表示数组的长度，也就是数组的元素个数，数组索引从0开始，所以数组的索引为0 至 length-1;js数组长度是可变的，当改变数组长度，只是数组的length属性发生变化，如果length，变成比数组length小，数组多余的元素就会被删除掉。

    希望大家多多提意见，如果疑问随时提问，码字不容易，转载标注出处，感谢：欢迎预览我的个人网站www.suykan.com