js数组常用方法总结(包括ES6)

Posted 2021-10-21 她还会来吗

目录

• js数组方法
• • Array.push( )
  • Array.pop( )
  • Array.unshift( )
  • Array.shift( )
  • Array.concat(arr1,arr2...)
  • Array.slice(start,end)
  • Array.join ( )
  • Array.splice(index,many,...args)
  • Array.reverse( )
• es6数组方法
• • Array.every( function)
  • Array.map(function)
  • Array.find( function)
  • Array.findIndex( function)
  • Array.includes()
  • Array.reduce(callback, initialValue)
  • Array.filter() Array.some() Array.foreach()

js数组方法

Array.push( )

Array.push( ),向数组末尾添加一个或多个新的元素,方法返回新数组的长度

const arr = [1,2,3,4,5,6];
var index = arr.push(7,8)
console.log(arr); // [1,2,3,4,5,6,7,8]
console.log(index);//8

Array.pop( )

Array.pop( ),删除并返回数组的最后一个元素，若该数组为空，则返回undefined

const arr1 = [1,2,3,4,5,6]
var x = arr1.pop() 
console.log(arr1);//[1,2,3,4,5]
console.log(x);// 6 此处的6是所删除数组的最后一个值

const arr2 =[]
const y = arr2.pop()
console.log(y);//undefined

Array.unshift( )

Array.unshift( ),向数组的开头添加一个或多个元素，方法返回新的数组长度

const arr3 = ['a','b','c','d']
var z = arr3.unshift('e')
console.log(arr3);// [ 'e', 'a', 'b', 'c', 'd' ]
console.log(z);// 5

Array.shift( )

Array.shift( ), 删除并返回首个数组元素，若数组为空,则返回undefined

const arr4 = ['a','b','c','d']
var h = arr4.shift()
console.log(arr4);// [ 'b', 'c', 'd' ]
console.log(h);// a

const arr5 =[]
const w = arr5.pop()
console.log(w);//undefined

Array.concat(arr1,arr2…)

Array.concat( ) 通过合并(连接)现有数组来创建一个新数组,它总是返回一个新数组

var arr6 = ['a','b','c','d']
var arr7 = [1,2,3,4,5,6]
var newArr = arr6.concat(arr7);
console.log(newArr);// ['a', 'b', 'c', 'd', 1, 2, 3, 4, 5, 6]

Array.slice(start,end)

Array.slice( ) 该方法会从开始参数选取元素，直到结束参数（不包括）为止 ,如果结束参数被省略,就会返回数组的剩余部分 (类似于字符串中的substring方法,不过该方法参数可以为负数)

 var arr6 = ['a','b','c','d']
var newArr = arr6.slice(1,3)
var newArr1 = arr6.slice(-3,-1)
console.log(newArr);// [ 'b', 'c' ]
console.log(newArr1);// [ 'b', 'c' ]

Array.join ( )

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

var arr6 = ['a','b','c','d']
var newArr = arr6.join("~")
console.log(newArr);// a~b~c~d

Array.splice(index,many,…args)

Array.splice( ) 方法可用于向数组添加新项,该方法返回一个包含已删除项的数组

• index定义了应添加新元素和应删除元素的位置
• many定义应删除多少元素
• …args则定义要添加的新元素.

var arr = ['a','b','c','d'] 
var newArr = arr.splice(0,2,'e','f');
console.log(newArr);// [ 'a', 'b' ]
console.log(arr);// [ 'e', 'f', 'c', 'd' ]

Array.reverse( )

Array.reverse()对数组进行翻转倒置,返回新数组

var arr6 = [1,2,3,4,5,6]
var newArr = arr6.reverse()
console.log(newArr);// [ 6, 5, 4, 3, 2, 1 ]

es6数组方法

Array.every( function)

Array.every(function)对数组中的每一项进行判断,若都符合则返回true,否则返回false

const arr = [1,2,3,4,5]
var newArr = arr.every(v => v > 1)
console.log(newArr);// false

Array.map(function)

Array.map()对数组进行遍历,并返回一个新的数组

• map()不会对空数组进行检测
• map()不会改变原始数组

 var arr = [1,2,3,4,5]
var newArr = arr.map(v=>v*v)
console.log(newArr);// [ 1, 4, 9, 16, 25 ]

Array.find( function)

Array.find(function)用于找到第一个符合条件的数组成员,没有找到就返回undefined,

const arr = [1,2,3,4,5]
var newArr = arr.find(v => v > 1)
console.log(newArr);//2

const arr = [1,2,3,4,5]
var newArr = arr.findIndex(v => v > 5)
console.log(newArr);//undefined

Array.findIndex( function)

Array.findIndex(function)用于找到符合条件的数组成员的位置,没有找到就返回-1,

const arr = [1,2,3,4,5]
var newArr = arr.findIndex(v => v > 1)
console.log(newArr);//1

const arr = [1,2,3,4,5]
var newArr = arr.findIndex(v => v > 5)
console.log(newArr);//-1

Array.includes()

Array.includes()表示某个数组是否包含给定的值，返回布尔值

 var arr = [1,2,3,4,5]
var newArr = arr.includes(2)
console.log(newArr);// true

 var arr = [1,2,3,4,5]
var newArr = arr.includes(8)
console.log(newArr);// false

Array.reduce(callback, initialValue)

Array.reduce()该方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值.

• callback:回调函数,包括四个参数
  1.previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)
  2.currentValue:数组中当前被处理的元素
  3.index:当前元素在数组中的索引
  4.array:调用reduce的数组
• initialValue:初始值,非必选参数

var arr = [1,2,3,4,5]
var newArr = arr.reduce((pre,cur)=>{
return pre + cur})
console.log(newArr);// 15

Array.filter() Array.some() Array.foreach()

因为以上三种方法我在之前的博客中有写到,所以在此就不一一赘述了,传送门ES5中新增数组遍历方法