浅谈JavaScript数组，数组操作方法，ES5新增数组操作方法，ES6新增数组操作方法

太过爱你忘了你带给我的痛 2022-05-27 12:20 319阅读 0赞

## 一.定义数组的方法 ##

##### 1.字面量的方式定义数组 #####

//定义一个空数组
    var arr = [];
    
    //定义一个初始值分别是啊a,b,c的数组
    var arr1 = ['a', 'b', 'c']

##### 2.调用数组构造函数定义数组 #####

//定义一个空数组
    var arr = new Array();
    
    //定义一个初始数组长度是8的数组
    var arr1 = new Array(8);
    
    //定义一个初始值是a,b,c的数组
    var arr2 = new Array('a','b','c');

## 二. 数组操作方法 ##

##### 1. instanseof  #####

判断一个对象是否位数组

(function(){
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array); // 输出 true
        console.log(obj instanceof Array); // 输出 false
     })()

##### 2.Array.isArray(arg) #####

判断一个对象是否位数组另一个方法，该方法只适用于高版本浏览器（IE9+, firefox4+, chrome）

(function(){
        var arr = [];
        var obj = {};
        console.log(Array.isArray(arr)); // 输出 true
        console.log(Array.isArray(obj)); // 输出 false
    })()

##### 3. join(separator) #####

将数组以 separator分隔成字符串，并返回该字符串，若省略 separator则默认以 “逗号进行分隔”

(function(){
        var arr = [1,2,3,4,5,6];
        console.log(arr.join()) // 输出：1,2,3,4,5,6
        console.log(arr.join(';')) // 输出：1;2;3;4;5;6
    })()

##### 4.concat(arg1, arg2, arg3,.....)    #####

concat()方法可以接受任意个参数，将参数添加到原数组中，并返回新的数组。concat()方法先复制原来的数组，将接收到参数添加到数组的末尾，然后返回新的数组。如果不添加参数就只复制原来的数组并返回。该方法不影响原始数组的值

(function(){
       var arr = [1,2,3,4,5,6];
       console.log(arr.concat(7)) // 输出：[1, 2, 3, 4, 5, 6, 7]
       console.log(arr.concat(7,8,9)) // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]
       console.log(arr.concat(7,8,9,[10,11,12])) // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
       console.log(arr.concat([7,8,9],[10,11,12])) // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
       console.log(arr.concat([7,8,9,10,11,12])) // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
       console.log(arr.concat([7,8,9,10,11,12],'abc')) // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "abc"]
       console.log(arr.concat()) // 输出：[1, 2, 3, 4, 5, 6]
    })()

##### 5.reverse() #####

反转（颠倒）数组中元素的顺序, 并返回颠倒后的数组

(function(){
       var arr = [1, 2, 3, 4, 5, 6];
       console.log(arr.reverse()); // 输出： [6, 5, 4, 3, 2, 1]
       console.log(arr) // 输出： [6, 5, 4, 3, 2, 1]
    })()

##### 6. sort(sortby) #####

对数组进行排序，参数sortby必须是一个函数，用来规定排序顺序，可省略，省略后默认按升序排列。注：参数“sortby函数”必须带两个参数。sort()方法在比较前，会调用toString()方法对数组项进行转型，然后再比较。字符串比较请看：[字符串比较][Link 1]

参数sortby形式：function(value1, value2)\{\}

*  value1 位于value2之前返回一个负数
 *  value1 等于 value2, 返回 0
 *  value1 位于 value2 之后返回一个正数

##### 7.push()和pop() #####

push() 可以接受任意个参数，向数组末尾添加一个或者多个元素，并返回新数组的长度

pop() 删除并返回数组的最后一个元素

(function(){
           var arr = [1, 2, 3];
           console.log(arr.length); // 输出：3
           var len = arr.push(4,5,6);
           console.log(len); // 输出：6
           console.log(arr); // 输出：[1,2,3,4,5,6]
           arr.push([7,8]);
           console.log(arr); // 输出： [1, 2, 3, 4, 5, 6, Array(2)]
    
           var el = arr.pop();
           console.log(el); // 输出：[7,8]
           console.log(arr); // 输出：[1,2,3,4,5,6]
     })()

##### 8.shift()和unshift() #####

shift() 删除数组中的第一个元素，并返回该元素的值，如果数组为空，则返回undefined

unshift() 向数组添加一个或者多个元素，并返回新数组的长度

(function(){
            var arr = [1, 2, 3];
            var len = arr.unshift(4,[5,6]);
            console.log(len); // 输出：5
            console.log(arr); // 输出：[4, Array(2), 1, 2, 3]
    
            var el = arr.shift();
            console.log(el); //输出：4
            console.log(arr); //输出：[4, Array(2), 1, 2, 3]
    
            var arr2 = [];
            var el2 = arr2.shift();
            console.log(el2) // 输出：undefined
     })()

##### 9.toSource() #####

返回对象源代码的字符串，该方法只有gecko内核的浏览器支持，IE, Safari, Chrome, Opera都不支持，不建议在生产环境中使用

(function(){
            var arr = [1, 2, 3];
            var arr2 = new Array();
            console.log(arr.toSource()); // firefox下输出：[1, 2, 3]，其它浏览器报错
            console.log(arr2.toSource()); // firefox下输出：[]，其它浏览器报错
    })()

##### 10. toString() #####

把数组转换成功字符串，并返回

(function(){
            var arr = [1, 2, 3];
            var arr2 = new Array(1,'ad2sfda');
            var arr3 = [1,2,3,'abc',[4,5,6,[7,8]],new Date()];
            console.log(arr.toString()); // 输出：1,2,3
            console.log(arr2.toString()); // 输出：1,ad2sfda
            console.log(arr3.toString()); // 输出：1,2,3,abc,4,5,6,7,8,Thu Apr 19 2018 16:31:28 GMT+0800 (CST)
    })()

##### 11.toLocalString() #####

把数组转换成本地字符串，并返回

(function(){
            var arr = [1, 2, 3];
            var arr2 = new Array(1,'ad2sfda');
            var arr3 = [1,2,3,'abc',[4,5,6,[7,8]],new Date()];
            console.log(arr.toLocaleString()); // 输出：1,2,3
            console.log(arr2.toLocaleString()); // 输出：1,ad2sfda
            console.log(arr3.toLocaleString()); // 输出：1,2,3,abc,4,5,6,7,8,2018/4/19 下午4:28:36
     })()

##### 12.valueOf() #####

返回数组的原始值

(function(){
            var arr = [1, 2, 3];
            var arr2 = new Array(1,'ad2sfda');
            var arr3 = [1,2,3,'abc',[4,5,6,[7,8]],new Date()];
            console.log(arr.valueOf()); // 输出：[1, 2, 3]
            console.log(arr2.valueOf()); // 输出：[1, "ad2sfda"]
            console.log(arr3.valueOf()); // 输出：[1, 2, 3, "abc", Array(4), Thu Apr 19 2018 16:34:23 GMT+0800 (CST)]
    })()

##### 13.slice(start, end) #####

*  返回从start开始到end(不包括)组成的数组，参数start必须，end可选，如果end不传则返回从start开始到结尾的所有元素。
 *  参数start和end可以为负数。-1指的是最后一个元素，依次类推-2指的是倒数第二个元素
 *  无论参数start和end为正数还是负数，数组截取的顺序都是从左到右。即start为最左边开始往右到end

(function(){
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            console.log(arr.slice(0, 3)) //输出：[1,2,3]
            console.log(arr.slice(0)) //输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]
            console.log(arr.slice(3, 6)) //输出：[ 4, 5, 6]
            console.log(arr.slice(-3)) //输出：[7, 8, 9]
            console.log(arr.slice(-3, -1)) //输出：[7, 8]
            console.log(arr.slice(-3, 6)) //输出：[]
            console.log(arr.slice(-3, 7)) //输出：[7]
            console.log(arr.slice(0, -6)) //输出：[1, 2, 3]
            console.log(arr.slice(0, -1)) //输出：[1, 2, 3, 4, 5, 6, 7, 8]
            console.log(arr.slice(-1, -6)) //输出：[]
     })()

##### 14.splice(index, howmany, item1, ......, itemN) #####

注：改方法会改变原始数组，并返回从数组中删除的元素

***（1）参数***

*  index, 必须传递，且为整数，规定添加/删除元素的位置。可以为负值，为负值时从数组结尾规定位置
 *  howmany,必须传递，且为整数，规定要删除元素的数量，如果设置为0，或者小于0则不会删除元素
 *  item1,.....itemN, 可选，向数组中添加的新元素

*** （2）功能***

*  删除，需要传递两个参数，且第二个参数不能为0
 *  插入，需要传递多个参数，且第二个参数必须为0，第二个参数以后的参数是向数组中添加的元素
 *  替换，需要传递多个参数，且第二个参数不能为0，第二个参数规定要删除多少个元素。第二个参数以后的参数会作为新元素在第一个参数的位置开始插入到数组中

(function(){
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var delArr = arr.splice(2,3);
            console.log(delArr); // 输出：[3, 4, 5]
            console.log(arr); // 输出：[1, 2, 6, 7, 8, 9]
    
            var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var delArr2 = arr.splice(-1,2);
            console.log(delArr2); // 输出：[9]
            console.log(arr2); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]
    
            var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var delArr3 = arr3.splice(1, 0, 'a','b', 'c');
            console.log(delArr3); // 输出：[]
            console.log(arr3); //输出：[1, 'a','b', 'c',2, 3, 4, 5, 6, 7, 8, 9]
    
            var arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var delArr4 = arr4.splice(-4, 0, 'a', 'b', 'c');
            console.log(delArr4); // 输出：[]
            console.log(arr4); // 输出： [1, 2, 3, 4, 5, 'a', 'b', 'c', 6, 7, 8, 9]
    
            var arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var delArr5 = arr5.splice(2, 3, 'a', 'b', 'c');
            console.log(delArr5); // 输出：[3, 4, 5]
            console.log(arr5); // 输出：[1, 2, 'a', 'b', 'c', 6, 7, 8, 9]
    
            var arr6 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var delArr6 = arr6.splice(-7, 3, 'a', 'b', 'c');
            console.log(delArr6); // 输出：[3, 4, 5]
            console.log(arr6); // 输出：[1, 2, 'a', 'b', 'c', 6, 7, 8, 9]
    })()

## 三. ES5 新增数组操作方法 ##

注：es新增数组操作方法，需要高版本浏览器支持。各个厂商浏览器支持情况：Opera11+, Firefox3.6+, Safari5+, chrome8+, IE9+

##### 1.map(function(currentValue, index, arr), thisValue) #####

即“映射”，该方法返回一个新数组，改数组的元素为原始数组的元素调用函数处理后的值

*  map()方法按照原始数组的顺序依次处理元素
 *  map()方法不会改变原始数组
 *  map()方法不会对空数组进行检测

***参数：***

*  function(currentValue, index, arr)，必须，数组中每个元素都会通过这个函数进行处理。 currentValue:必须，当前元素的值。 index:可选，当前元素的索引值。 arr:可选，当前元素属于的数组。
 *  thisValue, 可选，传递给函数用作this的值，如果省略thisValue函数的this值为默认值

(function(){
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            console.log(arr.map(function(value){
                return value*2
            })) // 输出：[2, 4, 6, 8, 10, 12, 14, 16, 18]
    
            console.log(arr.map(function(value, index){
                return value*index
            })) // 输出： [0, 2, 6, 12, 20, 30, 42, 56, 72]
    
            console.log(arr.map(function(value, index, arr){
                return arr[5]
            })) // 输出：[6, 6, 6, 6, 6, 6, 6, 6, 6]
    
            arr.map(function(value, index, arr){
                console.log(this) //输出9次：{pro: "this"}
            },{'pro':'this'})
    })()

##### 2.filter(function(currentValue, index,  arr), thisValue) #####

既“过滤”， 该方法返回一个新数组，新数组中的每一个元素都是通过给定函数进行对原始数组进行过滤，并满足条件的元素。

*  filter()不会对空数组进行检测
 *  filter()不会改变原始数组

***参数：***

##### 3.every(function(currentValue, index, arr), thisValue) #####

判断数组中是否每一项都符合给定函数的过滤条件，如果都符合就返回true, 只要有一项不符合就返回false

*  every()方法遇到一个不满足条件的元素就返回false, 剩余元素不会检查
 *  every()方法不会改变原始数组
 *  ever()方法不会检测空数组

***参数：***

(function(){
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            console.log(arr.every(function(currentValue){
                return currentValue > 6
            })) // 输出 false
    
            console.log(arr.every(function(currentValue, index){
                return currentValue > 0 && index%2 == 0
            })) // 输出 false
    
            console.log(arr.every(function(currentValue, index){
                return true
            })) // 输出 true
    
            console.log(arr.every(function(currentValue, index){
                return false
            })) // 输出 false
    
            console.log(arr.every(function(currentValue, index, arrArg){
                return arr === arrArg
            })) // 输出 true
    
            console.log(arr.every(function(currentValue, index, arrArg){
                return index < currentValue
            })) // 输出 true
    
            console.log(arr.every(function(currentValue, index, arrArg) {
                console.log(this) // 输出1次：{}, 想想为什么是1次，不是9次
            }, {})) // 输出 false，想一下为什么这里是false
    
    })()

##### 4.some(function(currentValue, index, arr), thisValue) #####

判断数组中是否有一项满足过滤条件的元素，只要有一个元素满足过滤条件就返回true, 否则返回false

*  some()方法不会检测空数组
 *  some()方法不会改变原始数组
 *  some()方法检测时只要遇到满足条件的元素就会返回true, 不会再继续检测剩余的元素

***参数：***

(function(){
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            console.log(arr.some(function(currentValue){
                return currentValue > 8
            })) // 输出：true
    
            console.log(arr.some(function(currentValue, index){
                return index > currentValue
            })) // 输出：false
    })()

##### 5.forEach(function(currentValue, index, arr), thisValue) #####

遍历数组的每一个元素，并执行回调函数

*  forEach()改方法没有返回值
 *  forEach()方法不会修改原始数组
 *  forEach()方法不会对空数组执行回调函数

#####  #####

***参数：***

##### 6.indexOf(item, start)和lastIndexOf(item, start) #####

indexOf(): 指定的“元素”在数组中首次出现的位置，检索时从数组第一项开始查找，如果找到返回对应的索引值，找不到返回-1

lastIndexOf(): 指定的“元素”在数组中最后出现的位置，检索时从数组末尾开始查找，如果找到返回对应的索引值，找不到返回-1

注：indexOf()和lastIndexOf()整个两个方法同样适用于字符串

***参数：***

item: 必须。要查找的元素

start: 可选。必须是整数。合法取值是0-arrayObject.length。如果省略则从数组的开头或者末尾开始查找

(function(){
            var arr = [1, 2, 9, 9, 5, 6, 9, 8, 9];
    
            console.log(arr.indexOf(9)); // 输出： 2
            console.log(arr.lastIndexOf(9)) // 输出：8
    
            console.log(arr.indexOf(9, 5)); // 输出： 6
            console.log(arr.lastIndexOf(9, 5)) // 输出：4
     })()

##### 7.reduce(function(total, currentValue, index, arr), initialValue)和reduceRight(function(total, currentValue, index, arr), initialValue) #####

遍历(迭代)数组的元素，调用回调函数，返回一个函数处理后的值；reduce()从左到右遍历，reduceRight()从右到做遍历

*  reduce()和reduceRight()不会修改原始数组的值
 *  reduce()和reduceRight()不会遍历空数组执行回调函数

##  ##

***参数：***

*  function(total, currentValue, index, arr)，必须，数组中每个元素都会通过这个函数进行处理。 total: 必须，首次遍历时该值为initialValue或者数组遍历的第一个值，之后为回调函数return的值。 currentValue: 必须，当前元素的值。 index:可选，当前元素的索引值。 arr:可选，当前元素属于的数组。

*  initialValue, 可选，传递给函数的初始值

## 四.ES6新增数组操作方法 ##

##### 1.copyWithin() #####

#####     #####

##### 2.fill() #####

#####     #####

##### 3.find() #####

#####     #####

##### 4.findIndex() #####

#####     #####

##### 5.includes() #####

##### 6.from() #####