ES 数组操作常用方法

一、arr.push()

注：改变原数组

从后面添加元素, 返回值为添加完后的数组的长度。

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

二、arr.pop()

注：改变原数组

从后面删除元素, 只能是一个, 返回值是删除的元素、

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

三、arr.shift()

注：改变原数组

从前面删除元素, 只能删除一个, 返回值是删除的元素。

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

四、arr.unshift()

注：改变原数组

从前面添加元素, 返回值是添加完后的数组的长度。

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

五、arr.splice(index,len,[item])

注：改变原数组

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值。

• index:数组开始下标；
• len: 替换/删除的长度；
• item:替换的值，删除操作时 item为空；

let arr = [‘a’, 'b', 'c', 'd']
1.1 删除 ---- item不设置
arr.splice(1,1) //[‘a‘,‘c‘,‘d‘]  删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变
arr.splice(1,2) //[‘a‘,‘d‘]   删除起始下标为1，长度为2的一个值，len设置的2
1.2 替换 ---- item为替换的值
arr.splice(1,1,‘ttt’)//[‘a‘,‘ttt‘,‘c‘,‘d‘]  替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
arr.splice(1,2,‘ttt’)//[‘a‘,‘ttt‘,‘d‘]  替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1 
1.3 添加 ---- len设置为0，item为添加的值
arr.splice(1,0,‘ttt’) //[‘a‘,‘ttt‘,‘b‘,‘c‘,‘d‘]   表示在下标为1处添加一项‘ttt’

六、delete()

注：改变原数组

delete删除掉数组元素后，会把该下标处的值置为undefined,数组的长度不会变如：delete arr[1] //[‘a‘, ,‘c‘,‘d‘] 中间出现两个逗号，数组长度不变，有一项为undefined。

七、arr.concat()

注：不改变原数组

连接两个数组，返回值为连接后的新数组。

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

八、str.split()

注：不改变原数组

将字符串转化为数组。

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]

九、arr.sort()

注：改变原数组

将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的，见例子。

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

十、arr.reverse()

注：改变原数组

将数组反转,返回值是反转后的数组。

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

十一、arr.slice(start,end)

注：不改变原数组

切去索引值start到索引值end的数组，不包含end索引处的值，返回值是切出来的新数组。

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

十二、arr.forEach(callback)

遍历数组,无return。
参数：

• value --当前索引值
• index --索引
• array --原数组

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    //  value:1    index:0     array:1,2,3,4,5
    //  value:2    index:1     array:1,2,3,4,5
    //  value:3    index:2     array:1,2,3,4,5
    //  value:4    index:3     array:1,2,3,4,5
    //  value:5    index:4     array:1,2,3,4,5

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    console.log(arr)
    // value:2    index:0     array:1,2,3,4,5
    // value:4    index:1     array:1,2,3,4,5
    // value:6    index:2     array:1,2,3,4,5
    // value:8    index:3     array:1,2,3,4,5
    // value:10   index:4     array:1,2,3,4,5
    // [1, 2, 3, 4, 5]

十三、arr.map(callback)

映射数组(遍历数组),有return， 返回一个新数组。
参数：

• value --当前索引值
• index --索引
• array --原数组

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

arr.forEach() 和 arr.map() 的区别

• arr.forEach()和for循环一样，是代替for。arr.map()是修改数组中的数据，并返回新的数据。
• arr.forEach() 没有return； arr.map() 有return。

十四、 arr.filter(callback)

注：改变原数组

过滤数组，返回一个满足要求的数组。

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3)
console.log(arr1)    // [1, 2]

十五、arr.every(callback)

依据判断条件，数组的元素是否全满足，若满足则返回ture。

let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1)    // false
let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2)    // true

十六、arr.some()

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture。

let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3)
console.log(arr1)    // true
let arr2 = arr.some( (i, v) => i > 10)
console.log(arr2)    // false

十七、arr.reduce(callback, initialValue)

迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
参数：
　callback: previousValue 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）
　currentValue 必选 --数组中当前被处理的数组项
　index 可选 --当前数组项在数组中的索引值
　array 可选 --原数组
　initialValue: 可选 --初始值
　实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 10

十八、ES6 创建新数组

1. Array(数量)

let array = Array(5);
console.log(array)

2. Array.of(value)

var array = Array.of(1,2,3,5,5);
console.log(array)

3. Array(数量).fill(value)

var array = Array(5).fill(7);
console.log(array)

let array1 = [1,2,3,4,5];
console.log(array1.fill(8,2,4))

语法array.fill(value,start ,end) //不包括end

十九、数组去重

19.1 第一种方式

ES6判断数组是否存在重复元素

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

if(new Set(array).size !== array.length){
    console.log("存在相同的元素");
}else {
    console.log("不存在相同的元素")
}

19.2 第二种方式

var array = [1,2,3,3,4,5];
console.log(Array.from(new Set(array)))
//输出
[1, 2, 3, 4, 5]

注意，以上2种方法不适合数组元素为对象或子数组的情况。

二十、数组元素交换

var array = [1,2,3,4,5,6];
//对下标为2和3的元素进行交换
[array[3],array[2]]=[array[2],array[3]]
console.log(array)
//输出
//[1, 2, 4, 3, 5, 6]

二十一、ES6复制合并数组concat()

注：若使用=号连接数组的话,就是一个指向的复制,这两个数组会同时变化的。

第一种方式

var arr1=['a','b','c','d'];
var cc=arr1.concat();
cc[1]='yy';
console.log(arr1);//["a", "b", "c", "d"]
console.log(cc);//["a", "yy", "c", "d"]

第二种方式

var arr1=['a','b','c','d'];
var  dd=[...arr1];
dd[0]='es6';
console.log(dd);//["es6", "b", "c", "d"]
console.log(arr1);//["a", "b", "c", "d"]

第三种方式

var arr1=['a','b','c','d'];
var arr2=['d'];
var arr3=['e','f'];
var cc=arr1.concat(arr2,arr3);
console.log(cc);//["a", "b", "c", "d", "d", "e", "f"]

第四种方式

var arr1=['a','b','c','d'];
var arr2=['d'];
var arr3=['e','f'];
var dd=[...arr1,...arr2,...arr3];
console.log(dd);//["a", "b", "c", "d", "d", "e", "f"]

二十二、拓展阅读

• 《Vue进阶（五十七）：ES数组操作：find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()》

• 《Vue进阶（五十九）：ES数组操作：使用splice方法实现数组中删除、替换、增加指定元素》

• 《Vue进阶（幺叁贰）：ES数组操作：数组合并》