(文章目录) <hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

一、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循环一样,是代替forarr.map()是修改数组中的数据,并返回新的数据。
  • arr.forEach() 没有returnarr.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)
  1. Array.of(value)
var array = Array.of(1,2,3,5,5);
console.log(array)
  1. 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"]

二十二、拓展阅读