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