面试之JavaScript系列——数组常用API

250 阅读7分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第0天

增加

1、push(...items)

含义:尾插,从数据的尾巴追加任意个(...items)数据,用“,”逗号隔开
返回值:追加后的数组长度
原数组:改变

let array = [1,2,3];
let tailAdd = array.push(4,5);

console.log(array)//[1,2,3,4,5]
console.log(tailAdd)//5

2、unshift(...items)

含义:头插,从数据的头顶追加任意个(...items)数据,用“,”逗号隔开
返回值:追加后的数组长度
原数组:改变

let array = [1,2,3];
let headAdd = array.unshift(4,5);

console.log(array)//[4,5,1,2,3]
console.log(headAdd)//5

3、splice(start, deleteCount, ...items)

入参含义
start:开始的位置,0为头插,从这开始往后插;
deleteCount:删除的数量,加时为0;
...items:追加一/多个的数据
返回值:空数组
原数组:改变

let array = [1,2,3];
let freeAdd = array.splice(1,0,1.5);

console.log(array)//[1,1.5,2,3]
console.log(freeAdd)//[]

4、concat(...items)

含义:复制原数组,并尾插任意个(...items)数据,用“,”逗号隔开
返回值:复制并添加后的新数组
原数组:不变

let array = [1,2,3];
let copyAdd = array.concat(4,5);

console.log(array)//[1,2,3]
console.log(copyAdd)//[1,2,3,4,5]

删除

1、pop()

含义:尾删,从数据的尾巴一个数据
返回值:删除的元素
原数组:改变

let array = [1,2,3];
let tailDel = array.pop();

console.log(array)//[1,2]
console.log(tailDel)//3

2、shift()

含义:头删,从数据的头顶删除一个数据
返回值:删除的元素
原数组:改变

let array = [1,2,3];
let headDel = array.shift();

console.log(array)//[2,3]
console.log(headDel)//1

3、splice(start, deleteCount, ...items)

入参含义
start:开始的位置,从这开始往后删;
deleteCount:删除的数量;
...items:追加一/多个的数据,不写有删除效果
返回值:删除元素组成的数组
原数组:改变

let array = [1,2,3];
let freeDel = array.splice(1,2);

console.log(array)//[1]
console.log(freeDel)//[2,3]

4、slice(start,end)

入参含义
start:开始删除的位置
end:结束删除的位置
返回值:删除元素组成的新数组
原数组:不变

let array = [1,2,3];
let newDel = array.slice(0,2);

console.log(array)//[1,2,3]
console.log(newDel)//[1,2]

修改

splice(start, deleteCount, ...items)

入参含义
start:开始的位置,从这开始往后删;
deleteCount:删除的数量;
...items:追加一/多个的数据
返回值:修改/删除元素组成的数组
原数组:改变

let array = [1,2,3];
let modify = array.splice(1,1,2.5,2.6);

console.log(array)//[1,2.5,2.6,3]
console.log(modify)//[2]

查询

indexOf(searchElement, fromIndex)

入参含义
searchElement:查询的元素;
fromIndex:开始寻找的下标
返回值:找到返该元素第一次在数组中的位置,否则返-1
原数组:不变

let array = [1,2,3,2,4,5,6,3];
let index = array.indexOf(3,1);
let index1 = array.indexOf(7)

console.log(array)//[1,2,3,2,4,5,6,3]
console.log(index)//2
console.log(index1)//-1

includes(startElement, fromIndex)

入参含义
startElement:查询的元素;
fromIndex:开始寻找的下标
返回值:找到true,否则false
原数组:不变

let array = [1,2,3,2,4,5,6,3];
let exist = array.includes(3,1);
let missing = array.includes(7)

console.log(array)//[1,2,3,2,4,5,6,3]
console.log(exist)//true
console.log(missing)//false

find(startElement, fromIndex)

入参含义
callback:回调函数,接收element元素、index下标、array数组;
thisArg:执行回调时用作this的对象
返回值:找到返第一个满足的元素,否则undefined
原数组:不变

let array = [1,2,3,2,4,5,6,3];
let existElement = array.find(element=>element>1);
let lostElement = array.find(element=>element>7);

console.log(array)//[1,2,3,2,4,5,6,3]
console.log(existElement)//2
console.log(lostElement)//undefined

排序

reserve()

含义:反向排列数组
返回值:反向排列后的数组
原数组:改变

let array = [1,2,3,4,5];
let yarra = array.reverse()

console.log(array)//[5,4,3,2,1]
console.log(yarra)//[5,4,3,2,1]

sort(compareFn)

入参含义
compareFunction:两个参数,first第一个比较的元素,second第二个比较的元素,指定某种循序进行排列,不写默认按字符串的码点位排序;
返回值:排序后的数组
原数组:改变

let array = [1,2,3,2,4,5,6,3];
let existElement = array.find(element=>element>1);
let lostElement = array.find(element=>element>7);

console.log(array)//[1,2,3,2,4,5,6,3]
console.log(existElement)//2
console.log(lostElement)//undefined

转字符串

join(?separator)

入参含义
separator:指定一个字符串来分隔数组的每个元素。()默认逗号分隔,如果separator是空字符串(""),则所有元素之间都没有任何字符;
返回值:一个所有数组元素连接的字符串
原数组:不变

let array = [1,2,3,4,5,6];
let string1 = array.join();
let string2 = array.join("")

console.log(array)//[1,2,3,4,5,6]
console.log(string1)//'1,2,3,4,5,6'
console.log(string2)//'123456'

批处理

some(callback,?thisArg)

入参含义
callback:

   element:数组中正在处理的元素。
   index(可选):数组中正在处理的元素的索引值。
   array(可选):被调用的数组。

thisArg:(可选),执行callback时使用的this值。

返回值:至少一个元素通过返回true;否者false。
原数组:不变

let array = [1,2,3,4,5,6];
let result = array.some(item=>item>5);

console.log(array)//[1,2,3,4,5,6]
console.log(result)//true

every(callback,?thisArg)

入参含义
callback:

   element:数组中正在处理的元素。
   index(可选):数组中正在处理的元素的索引值。
   array(可选):被调用的数组。

thisArg:(可选),执行callback时使用的this值。

返回值:每个元素通过返回true;否者false。
原数组:不变

let array = [1,2,3,4,5,6];
let result = array.every(item=>item>5);

console.log(array)//[1,2,3,4,5,6]
console.log(result)//false

forEach(callback,?thisArg)

按升序为数组中含有效值的每一项执行一次callback函数

入参含义
callback:

   currentValue:数组中正在处理的元素。
   index(可选):数组中正在处理的元素的索引值。
   array(可选):被调用的数组。

thisArg:(可选),执行callback时使用的this值。

返回值:undefined
原数组:不变

let array = [1,2,3,4,5,6];
let result = array.forEach(item=>item+1);

console.log(array)//[1,2,3,4,5,6]
console.log(result)//undefined

filter(callback,?thisArg)

入参含义
callback:

   element:数组中正在处理的元素。
   index(可选):数组中正在处理的元素的索引值。
   array(可选):被调用的数组。

thisArg:(可选),执行callback时使用的this值。

返回值:一个新的、由通过测试的元素组成的新数组,如果没有任何数组元素通过测试,则返回空数组。
原数组:不变

let array = [1,2,3,4,5,6];
let result = array.filter(item=>item>3);

console.log(array)//[1,2,3,4,5,6]
console.log(result)//[4, 5, 6]

map(callback,?thisArg)

入参含义
callback:

   currentValue:数组中正在处理的元素。
   index(可选):数组中正在处理的元素的索引值。
   array(可选):被调用的数组。

thisArg:(可选),执行callback时使用的this值。

返回值:一个由原数组每个元素执行回调函数的结果组成的新数组。
原数组:不变

let array = [1,2,3,4,5,6];
let result = array.map(item=>item+1);

console.log(array)//[1,2,3,4,5,6]
console.log(result)//[2,3,4,5,6,7]

reduce(callbackFn,?initialValue)

按升序为数组中含有效值的每一项执行一次callback函数

入参含义
每次运算会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值,第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。

callbackFn:

   previousValue:上一次调用callbackFn时的返回值。在第一次调用时,若指定了初始值initialValue,其值则为initialValue,否则为array[0]。
   currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值initialValue,其值则为array[0],否则为array[1]。
   currentIndex:数组中正在处理的元素的索引。若指定了初始值initialValue,则起始索引号为0,否则从索引1起始。
   array:用于遍历的数组。

initialValue:(可选),作为第一次调用callback函数时参数previousValue的值。若指定了初始值initialValue,则currentValue则将使用数组第一个元素;否则previousValue将使用数组第一个元素,而currentValue将使用数组第二个元素。

返回值:回调函数遍历整个数组后的结果。
原数组:不变

注意:TypeError,数组为空且初始值initialValue未提供出现此错误。

let array = [1,2,3,4,5,6];
let initialValue = 0
let result = array.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(array)//[1,2,3,4,5,6]
console.log(result)//21