30.超全数组方法归纳

81 阅读6分钟

js中我们有用到很多关于数组的方法,今天就来总结一下把,主要为方法,作用,参数,返回值,是否修改原数组,及代码和注释

  • 1.concat() 合并数组,参数为需要合并的数组,返回合并之后的数组,不修改原数组
[1,2].concat([3,4]) // [1,2,3,4]
  • 2.join() 转字符串,参数为分隔符,返回字符串,不修改原数组
[1,2].join("-")  // '1-2'
  • 3.pop() 从后删除一个元素,不需要参数,返回删除元素,修改数组
[1,2].pop() // 2
  • 4.push() 从后增加一个元素,参数是新增元素,返回数组长度,修改数组
["a"].push(1) // 2
  • 5.shift() 从前删除一个元素,不需要参数,返回删除元素,修改数组
[1,2].shift() // 1
  • 6.unshift() 从前增加一个元素,参数是新增元素,返回数组长度,修改数组
["a"].unshift(1) // 2
  • 7.reverse() 翻转数组,不需要参数,返回翻转后的数组,修改原数组
[1,2,3,4].reverse() // [4, 3, 2, 1]
  • 8.sort() 数组排序,参数为一个回调/也可不带,返回值是翻转之后的数组,修改原数组
// 简单排序
[1,3,2,4].sort() // [1,2,3,4]
// 带规则排序
 [1, 10, 2, 12].sort((a, b) => b - a) // 降序排列 [12,10,2,1]
 [1, 10, 2, 12].sort((a, b) => a - b) // 升序排列 [1,2,10,12]
  • 9.slice() 数组截取,参数可以为0个/1个/2个,返回值是截取的数组,不修改原数组
[1,2,3,4].slice() // [1,2,3,4] 相当于数组的浅拷贝
[1,2,3,4].slice(1) // [2, 3, 4] 一个参数,从头开始截取几位,如果是负数就数组+数组长度,如果非数字隐式转为数字,NaN就是0
[1,2,3,4].slice(1,3) // [2, 3] 2个参数,第一个是开始角标(包含),第二个是结束角标(不包含),如果数字不合规参照上面
  • 10.splice() 数组删除,参数可以为多个,返回值是删除的元素,修改原数组
[1, 2, 3, 4].splice(1) // [2,3,4] 一个参数,从第几位开始删除后面全部的
[1, 2, 3, 4].splice(1,2) // [2,3] 2个参数,从第几位开始删除几个元素的
[1, 2, 3, 4]splice(1,2,3,4,5,6) // [2,3] 大于2个参数 从第几个开始删除几个元素,后面的元素在原位置添加进去 原数组[1, 3, 4, 5, 6, 4]
  • 11.toString() 转字符串,没有参数,返回值是字符串,不改变原数组
[1, 2, 3, 4]toString() // '1,2,3,4'
  • 12.valueOf() 返回自身 且还是空一个内存地址 没啥意义
  • 13.indexOf() 查找元素,1-2个参数素,返回值是位置,不改变原数组
[1, 2, 3, 4].indexOf(1) // 0 一个参数 从头开始查找
[1, 2, 3, 4].indexOf(1,2) // 1 2个参数 从第二个参数开始查找
  • 14.lastIndexOf() 查找元素,1-2个参数,返回值是位置,不改变原数组
[1, 2, 3, 4].lastIndexOf(1) // 0 一个参数 从尾开始查找
[1, 2, 3, 4].lastIndexOf(1,2) // 1 2个参数 从第二个参数开始查找
  • 15.forEach 遍历数组,参数为回调,没有返回值,不改变原数组
['a','b','c'].forEach((item,index,array)=>{ // 三个参数分别是数组元素,序号,原数组
    console.log(item,index,array)
})
a 0  ['a', 'b', 'c']
b 1  ['a', 'b', 'c']
c 2  ['a', 'b', 'c']
  • 16.filter 遍历筛选元素 参数为回调 返回符合条件的数组元素组成的新数组 不改变原数组
[1,2,3,4].filter(item=>item>1) // [2, 3, 4] 注意需要在回调中return 不然就是一个空数组
  • 17.every 遍历是否全部符合 参数为回调 返回布尔值 不改变原数组
[1,2,3,4].every(item=>item>1) // false
[1,2,3,4].every(item=>item>0) // true
  • 18.some() 遍历查找 参数为回调 返回布尔值 不改变原数组
[1,2,3,4].some(item=>item==1) // true 找到就会返回true
  • 19 reduce 遍历操作 接收一个或两个参数 返回结果值 不改变原数组
[1,2,3,4].reduce((sum,item)=>sum+=item) // 10
[1,2,3,4].reduce((sum,item)=>sum+=item,10) // 20 2个参数 第二个参数是初始值
  • 20.reduceRight() 遍历操作 接收一个或两个参数 返回结果值 不改变原数组 和reduce一样 从后往前
  • map 映射 接受一个回调 返回映射后的数组 不改变原数组
[1,2,3,4].map(item => item+=1) // [2, 3, 4, 5]
  • 21.Array.from() 可遍历(iterable)的对象转数组 接受可遍历(iterable)的对象 返回数组
console.log(Array.from(new Set([1,2,3,,3,3,3,5]))); //[1,2,3,5] 数组去重
Array.from([1,2,3] , item => item *2)    //[2,4,6] 接受2个参数  类似于map
  • 22.Array.isArray 判断是否是一个数组 接受一个参数 返回布尔值
Array.isArray([]) // true
Array.isArray(1) // false
  • 23.Array.of() 生成数组 接受刀哥参数 返回一个数组
Array.of(5,5,5) // [5,5,5] 类似于new Array
Array.of(5) // [5] 不同于new Array
  • 24.find() 遍历向后查找 接收回调 返回数组元素 不改变原数组
[1,2,3,4].find(item=>item==2) // 2
  • 25.findIndex() 遍历向前查找 接收回调 返回数组元素 不改变原数组
[1,2,3,4].findIndex(item=>item==2) // 2
  • 26.fill() 填充数组 接受多个参数 返回结果数组 不改变原数组
new Array(3).fill(1) // [1,1,1] 1个参数 填充值
new Array(3).fill(1,1,2) // [空白, 1, 空白] 3个参数 1,2表示填充的起始点和结束点
  • 27.entries() 遍历器 无参数 返回键名遍历器对象 不改变原数组
  • 28.values() 遍历器 无参数 返回键值遍历器对象 不改变原数组-
  • 29.entries() 遍历器 无参数 返回键值对名遍历器对象 不改变原数组
for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0 1
for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// a b
for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
  • 30.includes() 查找类似于indexof 接受查找参数 返回t布尔值 不改变原数组
  • 31.flat() 数组扁平化 参数代表几层 返回新数组 不改变原数组
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
  • 32.flatMap() 和map一样 但是只能展开一层数组
  • 33.copywithin() 复制成员 接受1-3个参数 返回新数组 会改变原数组
[1,2,3,4,5].copyWithin(3) // [1, 2, 3, 1, 2] 1个参数 从那个位置开始替换
[1,2,3,4,5].copyWithin(0,3) // [4, 5, 3, 4, 5] 2个参数 0开始替换位置 3目标参数
[1,2,3,4,5].copyWithin(1,3,4) // [1, 4, 5, 4, 5] 3个参数 1开始替换位置 3目标参数起始点 4目标参数结束点
  • 34.toLocaleString() 转字符串 没意义
  • 35.length 数组长度