js常用数组方法

js常用数组方法

会改变原数组

1.Array.push(),向数组的末尾添加一个或多个元素，并返回新的数组长度。会改变原数组。

let arr = [1,2,3]
let res = arr.push(6) //返回数组的长度，原数组改变
console.log(arr) //[ 1, 2, 3, 6 ]
console.log(res) //4 

2.Array.pop(),删除并返回数组的最后一个元素，若数组为空，则返回undefined。会改变原数组。

let arr = [1,2,3]
let res = arr.pop() //删除数组的最后一个元素，并返回删除的数据，原数组改变
console.log(res) //3
console.log(arr) //[ 1, 2]

let arrs = []
let b = arrs.pop()
console.log(arrs,b)//[] undefined

3.Array.unshift(),向数组的开头添加一个或多个元素，并返回新的数组长度。会改变原数组。

let arr = [1,2,3]
let res = arr.unshift(1)// 向数组的开头添加一个或多个元素，并返回新的数组长度，原数组改变
console.log(res) //4
console.log(arr) //[ 1, 1, 2, 3]

4.Array.shift(),删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。会改变原数组。

let arr = [1,2,3]
let res = arr.shift()//删除数组的第一项，并返回第一个元素的值
console.log(res) //1
console.log(arr) //[ 2, 3 ]

let a = []
let b = a.shift()
console.log(a,b)//[] undefined

5.Array.reverse(),将数组倒序。会改变原数组。

let arr1 = [1,2,3]
let arr2 = [4,5]
let res = arr1.reverse()
console.log(res,typeof res) //   [ 3, 2, 1 ] object
console.log(arr1) //[ 3, 2, 1 ]
console.log(arr2) //[ 4, 5 ]

6.Array.sort()，对数组按照字符串UniCode码排序或自定义的函数排序,注意不是按照大小排序。会改变原数组。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.sort()
console.log(res,typeof res) //   [ 1, '10', 'a1', 'f' ] object
console.log(arr1) //[ 1, '10', 'a1', 'f' ]
console.log(arr2) //[ 4, 5 ]

// 按照大小排序如下
let arr3 = [4,5,188,12,24,52]
let arr4 = arr3.sort((a,b) =>{
  return a - b
})
console.log(arr4,typeof arr4) //   [ 4, 5, 12, 24, 52, 188 ] object
console.log(arr3) //[ 4, 5, 12, 24, 52, 188 ]

7.Array.splice(index（开始的位置的索引）,delNum(删除元素的个数，为0则不删除),arr1,arr2…),对数组进行增删查改。arr1,arr2…为插入的元素。会改变原数组。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.splice(1,2,3,4,5)
console.log(res) //[ 1, '10' ]
console.log(arr1)//[ 'a1', 3, 4, 5, 'f' ]

不会改变原数组

8.Array.concat(arr1,arr2…),合并两个或多个数组，生成一个新的数组。原数组不变。

let arr1 = [1,2,3]
let arr2 = [4,5]
let res = arr1.concat(arr2)
console.log(res) //[ 1, 2, 3, 4, 5 ] //合并两个或多个数组，生成一个新的数组
console.log(arr1) //[ 1, 2, 3 ]
console.log(arr2) //[ 4, 5 ]

9.Array.join(),将数组的每一项用指定字符连接形成一个字符串。默认连接字符为“,”逗号。原数组不变。

let arr1 = [1,2,3]
let arr2 = [4,5]
let res = arr1.join('/')
console.log(res,typeof res) //   1/2/3 string
console.log(arr1) //[ 1, 2, 3 ]
console.log(arr2) //[ 4, 5 ]

10.Array.includes() 判断一个数组是否包含一个指定的值。有则返回true，没有则返回false。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.includes('10')
console.log(res) //true

11.Array.slice(start,end),从start（在数组中的下标）开始，到end(不包括end)，截取这些数组元素并返回到一个新数组。如果没有end，则截取start之后的所有数组元素。start和end可以给负值（加负号后就是倒着数的）。原数组不变。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.slice(1)
console.log(res) //[ 1, '10', 'f' ]

12.Array.filter(),通过自定义条件来过滤数组，会将满足条件的元素会返回到一个新的数组。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.filter((v)=>v>3)
console.log(res) //[ '10' ]
console.log(arr1)//[ 'a1', 1, '10', 'f' ]

13.Array.every(),通过自定义条件来判断，若所有数组元素都满足条件则返回true，否则返回false。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.every((v)=>v>3)
console.log(res) //false

14.Array.some(),通过自定义条件来判断，有一个数组元素满足条件则返回true，否则返回。

let arr1 = ['a1',1,'10','f']
let arr2 = [4,5]
let res = arr1.some((v)=>v>3)
console.log(res) //true

15.Array.reduce(),通过回调函数来对数组中的每一个值(从第一个元素开始)，开始计算，最后返回最终结果。

let arr1 = [1,2,3,43]
let arr2 = [4,5]
let res = arr1.reduce((a,b)=> a+b)
console.log(res) //49
console.log(arr1)//[ 1, 2, 3, 43 ]

16.Array.indexOf() 搜索数组中的元素，并返回它所在的位置。返回的结果是元素的索引，没有的话则会返回-1。

let arr1 = [1,2,3,43]
let arr2 = [4,5]
let res = arr1.indexOf(1)
console.log(res) //0
console.log(arr1)//[ 1, 2, 3, 43 ]

17.Array.findIndex() 返回符合回调函数的数组元素的索引。只会返回第一个符合条件的元素的索引。

let arr1 = [1,2,3,43,1,3]
let arr2 = [4,5]
let res = arr1.findIndex(item => item>2)
console.log(res) //2
console.log(arr1)//[ 1, 2, 3, 43, 1, 3 ]

18.**Array.find()**返回符合回调函数的数组元素。只会返回第一个符合条件的数组元素。

let arr1 = [1,2,3,43,1,3]
let arr2 = [4,5]
let res = arr1.find(item => item>2)
console.log(res) //3
console.log(arr1)//[ 1, 2, 3, 43, 1, 3 ]

19.Array.flat() 嵌套数组转一维数组，参数是数字，表示转换几维数组，参数为Infinity时，无论多少维数组都转为一维数组。

var arr = [1,2,[3,4],[5,6,[7,8]]];
var newArr1 = arr.flat(2);
var newArr2 = arr.flat(Infinity);
console.log(newArr1); // [1,2,3,4,5,6,[7,8]]
console.log(newArr2); // [1,2,3,4,5,6,7,8]

20.**Array.map()**方法,遍历数组中的每一项并操作，同时返回一个新的数组。原数组不变。（类似forEach）。

var arr = [1,2,3,4,5];
var newArr = arr.map(v => v*2);
console.log(newArr); // [2,4,6,8,10]
console.log(arr); // [ 1, 2, 3, 4, 5 ]

21.Array.forEach(),和for方法一样，遍历数组中的每一个元素，并将元素值和索引传进回调函数。原数组不变。

var arr = [1,2,3,4,5];
arr.forEach((v) => {
	console.log(v); // 1 2 3 4 5
});

ES6新增了两个方法

批量复制方法copyWithin()，以及填充数组方法fill()。
这两个方法的函数比较类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引，使用这个方法不会改变数组的大小。

1.Array.fill(),使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。

（1）用1填充整个数组

const arr = [0,0,0,0,0]
arr.fill(1);
console.log(arr);//[1,1,1,1,1]
arr.fill(0);
console.log(arr);//[0,0,0,0,0]//重置为0

（2）用2填充索引大于等于2的元素

const arr = [0,0,0,0,0]
arr.fill(2,3);
console.log(arr);//[ 0, 0, 0, 2, 2 ]
arr.fill(0);
console.log(arr);//[0,0,0,0,0]//重置为0

（3）使用3填充索引大于等于1且小于3的元素

const arr = [0,0,0,0,0]
arr.fill(3,1,3);
console.log(arr);//[ 0, 3, 3, 0, 0 ]

（4）用4填充索引大于等于1且小于4的元素

const arr = [0,0,0,0,0]
arr.fill(4,1,4);
console.log(arr);//[ 0, 4, 4, 4, 0 ]

注意：fill()会自动忽略超出数组边界、零长度及方向相反的索引范围。

2.Array.copyWithin(index1-插入位置索引，index2-开始位置索引，index3-复制元素的数量),会按照指定范围浅复制数组中的部分内容，然后将他们插入到指定索引开始的位置。

（1）从arr中复制索引2开始的内容，插入到索引0的位置

let arr =[0,1,2,3,4,5,6,7,8,9]
arr.copyWithin(0,2);
console.log(arr);//[2, 3, 4, 5, 6,7, 8, 9, 8, 9]

（2）从arr中复制索引0开始2个元素，插入到索引2的地方

let arr =[0,1,2,3,4,5,6,7,8,9]
arr.copyWithin(2,0,2);
console.log(arr);//[0,1,0,1,4,5,6,7,8,9]

测试题-测试自己的掌握程度

// 改变原数组 规律：插入-> 返回长度，删除->返回被删除的值，倒序和排序返回结果，splice除外，返回插入时删除的数据,没有删除，返回空数组
let arr1 = [1,2,3,4,5]
let res = arr1.push(6)
console.log(arr1,res)//
res = arr1.pop()
console.log(arr1,res)//
res = arr1.shift() 
console.log(arr1,res)//
res = arr1.unshift(1)
console.log(arr1,res)//
res = arr1.splice(1,2,6,7)
console.log(arr1,res)//
res = arr1.reverse() 
console.log(arr1,res)//
res = arr1.sort()
console.log(arr1,res)//

// 不改变原数组  规律:操作返回结果，判断返回true/false，有index的方法返回下标，find 第一个符合判断的元素，flat 转一维数组，map/foreach 遍历
let arr2 = [1,2,3,4,5]
res = arr2.concat([6,7])
console.log(res)// 
res = arr2.join('/')
console.log(res)// 
res = arr2.includes(1)
console.log(res)// 
res = arr2.slice(2,3)
console.log(res)// 
res = arr2.filter(v=> v>2)
console.log(res)// 
res = arr2.every(v=>v>2)
console.log(res)// 
res = arr2.some(v=>v>2)
console.log(res)// 
res = arr2.reduce((v,c)=> v+c)
console.log(res)// 
res = arr2.indexOf(5)
console.log(res)// 
res = arr2.findIndex(v => v>2)
console.log(res)// 
res = arr2.find(v => v>2)
console.log(res)// 
arr2 = [1,[2,[3,[4,5]]]]
res = arr2.flat(Infinity)
console.log(res)// 
res = arr2.map(v => v*2)
console.log(res)// 
res = arr2.forEach(v => v*2)
console.log(res)// 

// 运行结果如下
[ 1, 2, 3, 4, 5, 6 ] 6
[ 1, 2, 3, 4, 5 ] 6
[ 2, 3, 4, 5 ] 1
[ 1, 2, 3, 4, 5 ] 5
[ 1, 6, 7, 4, 5 ] [ 2, 3 ]
[ 5, 4, 7, 6, 1 ] [ 5, 4, 7, 6, 1 ]
[ 1, 4, 5, 6, 7 ] [ 1, 4, 5, 6, 7 ]
[
  1, 2, 3, 4,
  5, 6, 7
]
1/2/3/4/5
true
[ 3 ]
[ 3, 4, 5 ]
false
true
15
4
2
3
[ 1, 2, 3, 4, 5 ]
[ 2, NaN ]
undefined