js数组中的方法

161 阅读8分钟

Array数组可以包含任意数据类型,并通过索引访问对应的数组元素

数组的方法

join()

用于把数组中的所有的元素放入一个字符串,返回值是一个字符串

语法: ​arr.join([separator])

其中separtor参数可选。如果不添加任何参数,将以 ","分隔,如果是添加了空字符串"",返回的字符串将没有任何分隔字符。

let arr = ["姓名",18,23]
arr.join() //输出结果为 "姓名,18,23"
arr.join("-") //或者参数添加个-,输出结果为 "姓名-18-23"

shift()

用于删除数组中的第一个元素,该方法会修改原数组,返回值是该元素的值,空数组的话返回的是 ​undefined​ 。数组的长度将会改变

let arr = [5,6,7,8]
console.log(arr.shift()) //结果为5,为删除的第一个元素

unshift()

将一个或者多个元素添加到数组的开头,该方法会修改原数组。返回值是修改后数组的长度。

语法: ​arr.join([separator])

添加的元素可以为一个或者多个

let arr = [1,2,3,4]
console.log(arr.unshift(7,8))  //输出为6,数组的长度

push()

该方法向数组添加一个或者多个元素到数组的尾部,该方法会修改原数组。返回值为数组的长度

语法: ​arr.push(el1...eln)

let arr = [1,2,3]
console.log(7,8) //输出结果为5,数组的长度

pop()

该方法删除数组中的最后一个元素,数组的长度会修改。返回值为删除的元素

语法: ​arr.pop()

let arr = [1,2,3,4]
console.log(arr.pop()) //输出结果为4,删除的元素

reverse()

该方法会颠倒数组元素,第一个元素变为最后一个,最后一个为第一个,会修改原数组,返回值为颠倒后的数组

语法: ​arr.reverse()

let arr = [1,2,3,4]
console.log(arr.reverse()) //输出结果为[4,3,2,1]

concat()

该方法用于合并两个或者多个数组,此方法不会改变现有数组,而是返回一个新的数组.

语法: ​newArray = arr1.concat(arr2,arr3)

let arr = [1,2,3]
    arr2 = [4,5,6]
  arr3 = [7,8,9]
  console.log(arr.concat(arr2,arr3)) //输出结果为[1,2,3,4,5,6,7,8,9]

slice()

该方法返回一个新的数组,是有begin和end决定的原数组的浅拷贝,原数组不会改变。可以理解为给函数开始和结束的位置,截取原函数返回一个新的函数

语法: ​arr.slice(begin[,end])

begin和end元素都是可选的。begin参数如果为负数,则表示从数组的倒数的第 几个元素开始截取;如果begin参数为空,则从索引为0开始截取;如果超过数 组长度,则返回一个空的数组.end参数可选,例如slice(1,4),截取的是第二到第 四的所有元素(索引为1,2,3的元素)

let arr = [1,2,3,4]
console.log(arr.slice(1,3)) // 输出结果为2,3

splice()

该方法用于删除,替换,或者添加新的元素,返回值为被删除的数组,如果没有删除元素则返回一个空数组,该方法会改变原数组

语法: ​arr.splice(start[,deletecount[,item1,item2,[...]]])

start为修改开始的位置,如果参数超出数组长度,则从数组末尾开始添加;如 果为负值,则从数组末尾倒数第几位开始添加,如果负值绝对值大于数组长 度,则从数组索引为0开始添加

deletecount,参数可选,表示要删除的个数。如果deletecount大于start后元素的总和,那么从start开始的后面的元素都会被删除

如果startcount为0,则不删除元素,至少需要添加元素。

item参数可选,要添加的元素,可以为一个或者多个,如果没有就代表只是删除数组元素

let arr = ['j','k','l']
arr.splice(1,0,'z')
console.log(arr) //输出结果为['j','z','k','l']

indexOf()

该方法查找给定元素在数组中首次出现的索引,如果不存在则返回-1.

语法: ​arr.indexOf(el,[,fromIndex])

el表示查找的元素

fromIndex表示查找的位置。索引值大于等于数组的长度,则不会从数组中查 找,返回-1;如果为负数,则从数组倒数位置向后查找,如-1从倒数第一个元

素查找,-4从倒数第四个元素查找.

let arr = [1,2,3,4]
console.log(arr.indexOf(4)) //返回值为4首次出现的索引值3

lastIndexOf

该方法返回指定元素在数组中最后一个的索引,如果不存在则返回-1,该方法从数组的后面向前查找

语法: ​arr.lastIndexOf(el[,fromIndex])

其中el为查找的元素,fromIndex为查找位置,默认数组长度-1;值大于等于数 组长度,整个数组都会查找;如果负值则从数组末尾向前偏移,如果负值绝对 值大于数组数组长度,则返回-1.数组不会查找

let arr = [3,4,5,1,2,3,4]
console.log(arr.lastIndexOf(3,-1)) //输出结果为5

forEach()

该方法对数组的每一个元素执行一次指定的函数,返回值为undefined

语法: ​arr.forEach(callback(currentValue[,index[,array]]))[,thisArg]

callback为执行的函数,可以接受一到三个参数

currentValue为当前正在处理的元素

index,参数可选,当前正在处理元素的索引

array,参数可选,该方法操作的数组

thisArg,参数可选,当执行回调函数时,用作this的值

let arr = [1,4,5,7]
arr.forEach(element => console.log(element)) //输出结果为1457

map()

该方法创建一个新数组,其结果是返回该数组中每一个元素调用一次提供的函数后的返回值。返回值为一个新的数组

语法:var new_array = arr.map(function callback(currentValue[, index[, array]]) {

// Return element for new_array

}[, thisArg])

其中,currentValue为当前正在处理的元素,index为当前元素索引值,array为调用该方法的数组,thisArg为执行callback函数时值被用作this

let arr = [2,4,6,8]
let arr2 = arr.map(element => element*=2)
console.log(arr2) //返回结果[4,8,12,16]

filter()

filter方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素

语法:var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback为执行每个元素的函数,返回true表示元素通过,保留元素;返回false则不保留.

element为当前正在处理的元素

index处理元素的索引值

array调用函数本身的数组

thisArg为执行callback函数时值被用作this

let arr = [1,2,3,5,1,4,5]
let arr2 = arr.filter((el,index,arr)=> arr.indexOf(el) === index)
console.log(arr2)//输出结果[1,2,3,5,4] 利用filter去重

every()

该方法测试一个数组内的所有元素是否都能通过某个指定函数的测试,返回值是一个boolean值。如果收到一个空数组,在一切情况下都返回true。它不会改变原数组。

语法:arr.every(callback(element[, index[, array]])[, thisArg])

callback为测试每个元素的函数

element为当前正在处理的元素

index处理元素的索引值

array调用函数本身的数组

thisArg为执行callback函数时值被用作this

let arr = [1,5,8,7]
let foo = (currentValue) => currentValue>10
console.log(arr.every(foo)) //检测数组中每个元素是否大于10 结果返回false

some()

该方法测试一个数组内元素是否有一个通过测试,返回值是boolean值。如果使用空数组,它在任何情况下都返回的是false。不会改变原函数

语法:arr.some(callback(element[,index[,array]]))[,thisArg]

callback为测试每个元素的函数

element为当前正在处理的元素

index处理元素的索引值

array调用函数本身的数组

thisArg为执行callback函数时值被用作this

let arr = [1,5,8,7]
let foo = (currentValue) => currentValue<2
console.log(arr.every(foo))//检测数组中是否有一项满足条件 结果返回true

find()

该方法查找满足测试函数的第一个元素的值。否则返回undefned。该方法不会改变原数组

语法:arr.find(callback[,thisArg])

callback为测试每个元素的函数

thisArg为执行callback函数时值被用作this

let arr = [1,2,3,4,5,6]
let foo = (element) => element>3
console.log(arr.find(foo)) //大于三的第一个元素 结果返回4

findIndex()

该方法返回数组中满足测试函数的第一个元素的索引值,没有就返回-1

语法:arr.findIndex(callback[,thisArg])

callback为测试每个元素的函数

thisArg为执行callback函数时值被用作this

let arr = [1,2,3,4,5,6]
let foo = (element) => element>3
console.log(arr.findIndex(foo)) //大于三的第一个元素de索引值 结果返回4

reduce()

该方法对数组中的每一个元素执行一个自己提供的reducer函数,将其结果汇总为单个返回值.

语法:arr.reduce(callback(accumulator,currentValue[,index[,array]])[,initialValue])

reduce接受4个参数

  1. Accumulator (acc) (累计器)
  2. Current Value (cur) (当前值)
  3. Current Index (idx) (当前索引)
  4. Source Array (src) (源数组)

您的 reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值,返回函数累计处理的值

index为可选值,如果提供initiValue值,索引从0开始,否则索引都是从1开始

initialValue,作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

let arr = [1,2,3,4,5].reduce((acc,cur) => acc+cur ,0)
console.log(arr)//饭hi结果为数组的和  15