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,3var newArr = arr.join('')
  console.log(newArr)// 123var 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)// falsevar 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))// truevar 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 为1const arr2 =[0,1,undefined,null,'',2,[[[3,4]]]];// 全局属性 Infinity 是一个数值，表示无穷大。
console.log('Infinity',Infinity)// Infinity
console.log('Infinity typeof',typeofInfinity)// number// Infinity 展开任意深度
console.log(arr2.flat(Infinity));// [ 0, undefined, null, '', 2, 3, 4 ]const arr =newArray(2)// // flat会移除数组中的空项
arr[0]='aaaa'
console.log(arr.flat())// [ 'aaaa' ]

18. Array 创建一个数组实例

• 数组的构造函数const arr =newArray(10) console.log('arr',arr)// 创建了一个数组长度为10的数组 console.log(arr[0]===null)// false console.log(arr[0]===undefined)// undefined console.log('1111',typeof arr[0])// undefinedconst arr1 =newArray(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 =newSet(['foo','bar','baz','foo']);

console.log(Array.from(set))// [ 'foo', 'bar', 'baz' ]functionf(){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)=>{return1})
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