js常用数组操作（javascript常用的数组方法）

-1 序言

本文档统计了数组的常用方法,其中有参数可能不完整.请转至mdn查看

0. delete 数组元素的删除

a.语法: delete arr[2] b.描述 删除数组的某一项的内容,或者说将某一项的内容置为空, c.返回值 d.特点 改变原数组,长度不发生变化 var arr = [1,6,8,9,6] delete arr[3] console.log(arr) // [1, 6, 8, empty, 6] console.log(arr[3]) // undefined

1. push 数组元素的添加

a.语法 arr.push(1,2,5) b.描述 向数组末尾追加 一个 或 多个 元素 c.返回值 追加元素之后的数组的 长度 d.特点 改变原数组,长度发生变化

2. pop 删除数组末尾元素

a.语法 arr.pop() b.描述 删除数组 末尾 的 一个 元素 c.返回值 被删除的元素 d.特点 改变原数组,长度发生变化

3. unshift 数组最前面添加元素

a.语法 arr.unshift(1,2,3) b.描述 在数组最前面添加 一个 或 多个 元素 c.返回值 追加元素之后的数组的 长度 d.特点 改变原数组,长度发生变化

4. shift 删除数组最前面的元素

a.语法 arr.shift() b.描述 删除数组最前面的一个元素 c.返回值 被删除的那个元素 d.特点 改变原数组,长度发生变化

5 . splice 数组元素的截取

a.语法 arr.splice(索引位置,[截取个数],[追加的新元素]) b.描述 截取数组元素
  
  
  
  
  
 。 ​ 第一个参数:从索引位置,包括索引,开始截取 ​ 第二个参数:截取个数,可选,---- 不写 将当前索引及以后的元素全部截取 ​ 第三个参数:将截取的元素替换追加为新元素 c. 返回值 一个数组,数组中为截取的元素 d.特点 改变原数组,返回新数组 var arr = [1,5,6,6,9,7,8,25,4] var newArr = arr.splice(2) arr = [1,5] newArr = [6,6,9,7,8,25,4] var newArr = arr.splice(2,3) arr = [1,5,7,8,25,4] newArr = [6,6,9] var newArr = arr.splice(2,3,aa,5,6,bb) arr = [1,5,aa,5,6,bb,7,8,25,4] newArr = [6,6,9]

6. reverse 数组元素的反转

a.语法 arr.reverse() b.描述 反转数组 c.返回值 反转后的数组 === arr d.特点 改变原数组 var arr = [1,5,6,9] var newArr = arr.reverse() console.log(arr === newArr) //true console.log(arr) [9,6,5,1] console.log(newArr) [9,6,5,1]

7. sort 数组元素的排序

a.语法 arr.sort(function(a,b){return a-b}) // 升序 a.语法 arr.sort(function(a,b){return b-a}) // 降序 b.描述 数组排序 可选参数            ，不传按照字符编码 升序 排序 c.返回值 反转后的数组 === arr d.特点 改变原数组 var arr = [1,2,3,5,6,8,7,22,23,45] var newArr = arr.sort() console.log(arr === newArr) //true console.log(arr) [1, 2, "22", 23, 3, 45, 5, "6", 7, 8,] console.log(newArr) [1, 2, "22", 23, 3, 45, 5, "6", 7, 8,] arr.sort(function(a,b){return a-b}) // 升序 console.log(arr) [1, 2, 3, 5, "6", 7, 8, "22", 23, 45] console.log(newArr) [1, 2, 3, 5, "6", 7, 8, "22", 23, 45] arr.sort(function(a,b){return b-a}) // 降序 console.log(arr) [45, 23, "22", 8, 7, "6", 5, 3, 2, 1] console.log(newArr) [45, 23, "22", 8, 7, "6", 5, 3, 2, 1]

8. concat 数组的拼接

a.语法 : arr.concat(arr1,arr2,arr3) b.描述 : 数组拼接,将多个数组拼接成一个数组 c.返回值 : 一个拼接后的新数组 d.特点 : 不改变原数组 var arr = [1,2,3] var arr1 = [25,36,78] var arr2 = [25,78,1,45] var newArr = arr.concat(arr1,arr2) console.log(arr) [1, 2, 3] console.log(newArr) [1, 2, 3, 25, 36, 78, 25, 78, 1, 45] console.log(newArr===arr1,newArr===arr1) // false

9. join 数组元素的拼接

a.语法 : arr.join(分隔符) b.描述 : 将数组内元素以一定分隔符拼接成字符串,分隔符如下案例 c.返回值 : 字符串 d.特点 : 不改变原数组 e.案例 var arr = [1,2,3] var newArr = arr.join() console.log(newArr) // 1,2,3 var newArr = arr.join() console.log(newArr) // 123 var newArr = arr.join(aa) console.log(newArr) // 1aa2aa3

10. split 字符串的切割

a.语法 : str.split(分隔符) b.描述 : 将字符串 以一定分隔符号转换成数组 c.返回值 : 返回切割好的数组 var str = 465a76a986a6769 var arr = str.split() console.log(arr) // ["465a76a986a6769"] var arr = str.split() console.log(arr) // ["4", "6", "5", "a", "7", "6", "a", "9", "8", "6", "a", "6", "7", "6", "9"] var arr = str.split(6) console.log(arr) // ["4", "5a7", "a98", "a", "7", "9"] var arr = str.split(a) console.log(arr) // ["465", "76", "986", "6769"]

11. indexOf 数组元素的查找

a.语法 : arr.indexOf(内容) b.描述 : 用来查找数组中某一项的索引, c.返回值 : 若查找的内容在数组中不存在,则返回 -1 ,存在返回 顺序开始找到的 索引 var arr = [1,6,8,9,6] var newArr = arr.indexOf(3) // -1 console.log(newArr) var newArr = arr.indexOf(6) console.log(newArr) // 1

13. lastIndexOf 数组元素的查找

a.语法 : arr.lastIndexOf(内容) b.描述 : 用来查找数组中某一项的索引, c.返回值 : 若查找的内容在数组中不存在,则返回 -1 ,存在返回 倒序 开始找到的 索引 var arr = [1,6,8,9,6] var newArr = arr.indexOf(3) // -1 console.log(newArr) var newArr = arr.indexOf(6) console.log(newArr) // 4

13. includes 数组元素的查找

a.语法 : arr.includes(内容) b.描述 : 判断内容是否数组中存在 c.返回值 : 若查找的内容在数组中不存在,则返回 false ,存在返回 true var arr = [1,2,3,5] var a = arr.includes(6) // false var a = arr.includes(2) // true

14. slice 数组的截取

a.语法 : const newArr = arr.slice([start],[end]) b.参数: start 开始索引 end 结束索引 b.描述 : 对数组元素从一定位置进行截取,返回一个截取后的新数组,不改变原数组,不包含结束索引 c.返回值 : 截取后的新数组 const arr = [1,2,3] const newArr = arr.slice(1,2) console.log(aa1,newArr) // aa1 [ 2 ] console.log(aa2,arr) // aa2 [ 1, 2, 3 ]

16. isArray 判断是否为数组

a.语法 : Array.isArray(arr) b.描述 : 判断传入的对象是否是一个数组 c.返回值 : false true var arr = [1,2,3] console.log(Array.isArray(arr)) // true var arr = {name:123} console.log(Array.isArray(arr)) // false

16. toString

a.语法 : arr.toString() b.描述 : 将数组转化为字符串 c.返回值 : 转化后的字符串 let arr = [1, 2, 3, 4, 5]; let str = arr.toString() console.log(str)// 1,2,3,4,5

17. flat 数组的扁平化

数组的扁平化 按照一个可指定的深度递归遍历数组
  
 
  
 
  
 
  
 
  
 
  
，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回  
  
  
  
  
  。 不改变原数组 返回新数组 const arr1 = [0, 1, 2, [3, 4]]; console.log(arr1.flat()); // 默认depth 为1 const arr2 = [0, 1,undefined,null,, 2, [[[3, 4]]]];// 全局属性 Infinity 是一个数值










，表示无穷大
 


 


 


 


 


 

。 console.log(Infinity,Infinity) // Infinity console.log(Infinity typeof,typeof Infinity) // number // Infinity 展开任意深度 console.log(arr2.flat(Infinity)); // [ 0, undefined, null, , 2, 3, 4 ] const arr = new Array(2) // // flat会移除数组中的空项 arr[0] = aaaa console.log(arr.flat()) // [ aaaa ]

18. Array 创建一个数组实例

数组的构造函数

const arr = new Array(10) console.log(arr,arr) // 创建了一个数组长度为10的数组 console.log(arr[0] === null) // false console.log(arr[0] === undefined) // undefined console.log(1111, typeof arr[0]) // undefined const arr1 = new Array(10,20,30) // 创建一个数组 [10,20,30]

19. fill 数组的填充

数组的填充 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素, 不包括终止索引 语法: arr.fill(value,[start],[end]) 参数: value: 填充的值 start: 开始索引位置 end: 结束索引位置 [1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] [1, 2, 3].fill(4, 1, 2); // [1, 4, 3] [1, 2, 3].fill(4, 1, 1); // [1, 2, 3] [1, 2, 3].fill(4, 3, 3); // [1, 2, 3] [1, 2, 3].fill(4, -3, -2); // [4, 2, 3] [1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] [1, 2, 3].fill(4, 3, 5); // [1, 2, 3] Array(3).fill(4); // [4, 4, 4]

20. from 转换类数组为标准的数组

转换类数组为标准的数组 对一个类似数组或可迭代对象创建一个新的 
  
  
  
  
  
 ，浅拷贝的数组实例 const set = new Set([foo, bar, baz, foo]); console.log(Array.from(set)) // [ foo, bar, baz ] function f() { return Array.from(arguments); } console.log( f(1, 2, 3)) // [ 1, 2, 3 ]

21 fouEach 数组的遍历

遍历数组 语法: arr.forEach((ele,[index],[arr]) =>{}) 参数: ele:每一个元素 index: 数组索引 arr数组本身 const arr = [1,2,3] arr.forEach((ele,index,arr) =>{})

22. map 数组的遍历并映射

数组的映射 对原数组进行遍历,并返回一个新的数组,新的数组元素为每一次遍历回调函数的返回值, 不改变原数组,返回新数组 语法: arr.map((ele,[index],[arr]) =>{ return ele}) 参数: ele: 数组的每一个元素 index 数组元素索引 arr 数组本身 const arr = [1,2,3] const newArr = arr.map((ele,index,arr) =>{ return 1 }) console.log(11,newArr) // 11 [ 1, 1, 1 ]

23. filter 数组的遍历并过滤

数组的过滤

对原数组进行遍历,并返回新的数组,新的数组的元素是遍历时回调函数返回为true时的那一项

不改变原数组,返回新数组

const arr = [1,2,3] const newArr = arr.filter((ele,index,arr) =>{ return ele > 1 }) console.log(11,newArr) // 11 [ 2, 3 ]

24. reduce

可以将每一次回调的返回值当作参数传递给下一次的回调 对数组中的每个元素按序执行一个由您提供的 reducer 函数
  
  
  
  
  
 ，每一次运行 reducer 会将先前元素的计算结果作为参数传入
 


 


 


 


 


 
，最后将其结果汇总为单个返回值
 
 
 
 
 
。 语法: const total = arr.reduce((pre,cur,index,arr) =>{return pre + cur},initValue) 参数: initValue: 初始值 pre: 上一次的返回值 cur 当前的数组的元素 const arr = [1,2,3] const total = arr.reduce((pre,cur,index,arr) =>{ return pre + cur },0) console.log(aa,total) // 6