面试复习JS之常用数组方法

增加与删除

push

• 作用: 向数组末尾追加项(可以多项,多项直接用逗号分隔)
• 参数: 需要添加到数组的项
• 返回值: 数组追加项之后的长度
• 原数组是否发生改变: 是

let a = [1, 2, 3];
let b = a.push(4, 5); 
console.log(a, b); // [1,2,3,4,5]   5->数组追加项之后的长度

pop

• 作用: 删除数组末尾一项
• 参数: 无
• 返回值: 被删除后的数组项
• 原数组是否发生改变: 是

let a = [1, 2, 4];
let b = a.pop();
console.log(a, b); // [1,2] 4
    

unshift

• 作用: 向数组的开头添加项
• 参数: 需要追加到开头的项
• 返回值: 追加内容后的数组线长度
• 原数组是否改变: 是

let a = [1, 2, 3];
let b = a.unshift(4, 5);
console.log(a, b); // [4,5,1,2,3] (5)

shift

• 作用: 删除数组起始项
• 参数: 无
• 返回值: 被删除的项
• 原数组是否改变: 是

let a = [1, 2, 3];
let b = a.shift();
console.log(a, b); // [2,3] 1

splice(n,m)

• 作用: 从索引n开始删除m个
• 参数: 起始索引n,要删除的个数m
• 返回值: 由删除的项组成的新数组
• 原数组是否发生改变: 是

let a = [1, 2, 3];
let b = a.splice(1, 2);
console.log(a, b); // a=[1] b=[2, 3]

splice(n,m,x)

• 作用: 从索引n开始删除m个,用x替换删除部分
• 参数: 起始索引n,要删除的个数m,用来替换的删除部分的x
• 返回值: 由删除的项组成的新数组
• 原数组是否发生改变: 是

let a = [1, 2, 3];
let b = a.splice(1, 2, 5);
console.log(a, b); // a=[1, 5] b=[2, 3]

splice(n,0,x)

• 作用: 从索引n开始删除0个,用x插入n的前面
• 参数: 起始索引n,要0个数,用来插入的x
• 返回值: 空数组
• 原数组是否发生改变: 是

let a = [1, 2, 3];
let b = a.splice(1, 0, 5);
console.log(a, b); // a=[1, 5, 2, 3] b=[]

数组复制拼接拼接

slice(n,m)

• 作用: 从索引 n 开始复制到索引 m (不包含)
• 参数: 起始索引 n, 终点索引 m; 注意: m 不写就是复制到最后一项,如果 n 和 m 都不写就是从开头复制到末尾
• 返回值: 复制的组成的新数组
• 原数组不发生改变

let ary = [1,2,3];
let ary1 = ary.slice(1,2);
let ary2 = ary.slice(1);
let ary3 = ary.slice();
let ary4 = ary.slice(0);
console.log(ary1); // 2 从索引1开始复制到索引2不包含索引2
console.log(ary2); // 2,3 从索引1开始没有m所以复制到末尾 
console.log(ary3); // 1,2,3 没有n,m两个参数默认从头到尾复制
console.log(ary4); // 1,2,3 // 从索引0开始没有m复制到末尾

concat() 数组拼接

• 作用: 将数组拼接起来
• 参数: 需要拼接的数组或者数组项
• 返回值: 拼接过后的数组
• 原素组不发生改变

let ary = [1,2,3,4,5]; 
let ary1 = ary.concat([6,7]); // 参数传递一个数组
console.log(ary1); // [1, 2, 3, 4, 5, 6, 7] 拼接过后的数组

let ary2 = ary.concat(8,9); // 参数传递数组项
console.log(ary2); // [1, 2, 3, 4, 5, 8, 9] 拼接过后的数组

let ary3 = ary.concat(); // 什么都不传相当于复制一遍数组
console.log(ary3); // [1, 2, 3, 4, 5] 复制的数组 并且与原数组不是一个堆内空间储存
ary === ary3
false

fill(value,start,end)

• 作用:value 从start开始到end结束进行替换
• 参数: 目标值value,起始索引start,结束索引end 不包含end
• 返回值: 替换后的原数组
• 是否改变原数组: 是

let a = [1,2,3,4,5]
let b = a.fill(9,2,4)
console.log(a,b) // a[1, 2, 9, 9, 5] b[1, 2, 9, 9, 5]

数组转换字符串

join()

• 作用: 根据参数指定的分隔符把数组拼接成字符串
• 参数: ""内根据需要的分隔符,不指定时默认空逗号拼接,如果是""没有分隔符就是一整个字符串
• 返回值: 拼接过后的字符串
• 原数组不会改变

let ary = [1,2,3,4];
let str = ary.join()
console.log(str) // 1,2,3,4
let str1 = ary.join(".")
console.log(str1) // 1.2.3.4
let str1 = ary.join("")
console.log(str1) // 1234

toString()

• 作用: 把数组转换成字符串
• 参数: 无
• 返回值 转换过后的字符串
• 原数组是否改变: 否

let a = [1,2,3,4]
let b = a.toString();
console.log(b) // "1,2,3,4"

数组项是否在数组中出现过

indexOf()

• 作用: 数组项 X 在数组中第一次出现的索引位置
• 参数: 需要查找的数组项 X
• 返回值: 如果数组中存在该项,就返回第一次出现的索引位置,如果不存在就返回 -1
• 原数组是否改变: 否

let a = [1,2,3,4]
let c = a.indexOf(2);
console.log(c) // 1

lastIndexOf()

• 作用: 数组项 X 最后一次出现在数组中的位置
• 参数: 需要查找的数组项 X
• 返回值: 如果数组中存在该项,就返回最后一次出现的索引位置,如果不存在就返回 -1
• 原数组是否改变: 否

let a = [1,4,2,2,3,4]
let b = a.lastIndexOf(2);
console.log(b) // 3 没有就返回-1

includes()

• 作用: 查找数组项是否存在数组中
• 参数: 无
• 返回值: 如果有就返回 true, 反之 false
• 是否改变原数组: 否

let a = [1,2,3]
let b = a.includes(4);
console.log(a,b) // [1, 2, 3] false

数组的排序和倒序

sort(function(a,b){return a-b })

• 作用: 给数组按照升序或者降序进行排序
• 参数: 回调函数
• 返回值: 如果回调函数 return a-b 就返回升序后的数组,如果是b-a 则相反是降序后的数组
• 原数组是否改变: 是

let a = [2,3,6,5,4,7,1]
let b = a.sort((a,b)=>a-b)
console.log(b) // [1, 2, 3, 4, 5, 6, 7]

reverse()

• 作用: 让数组反转过来排序
• 参数: 无
• 返回值:反转过后的数组
• 原数组是否改变: 是

let a = [2,3,5,1,4]
let b = a.reverse()
console.log(b) // [4, 1, 5, 3, 2]

数组遍历方法

forEach(function(item,index){在回调函数里面可以操作这些值})

• 作用: 遍历数组
• 参数: 回调函数(回调函数的参数是item 遍历数组时的每一项,index 是每一项对应的索引)
• 返回值: 无
• 原数组是否改变: 否

let a = [2,3,5,1,4]
let b = a.forEach((item,index)=>console.log(item,index))
2 0
3 1
5 2
1 3
4 4
console.log(a,b) //  [2, 3, 5, 1, 4] undefined

map(function((item,index){})

• 作用: 将原数组映射成一个新数组
• 参数: 回调函数(回调函数的参数是item 遍历数组时的每一项,index 是每一项对应的索引)
• 返回值: 由回调函数的返回值组成的新数组
• 原数组是否改变: 否

let a = [2,3,5,1,4]
let b = a.map((item,index)=>item*2)
console.log(a,b) // a=[2, 3, 5, 1, 4] (5) b=[4, 6, 10, 2, 8]

filter(function((item,index){})

• 作用: 过滤数组项
• 参数: 回调函数
• 返回值: 根据回调函数return条件相符的数组项组成的新数组
• 原数组是否改变: 否

let a = [2,3,5,1,4]
let b = a.filter((item,index)=>item<2)
console.log(a,b)a=[2, 3, 5, 1, 4] b=[1]

every((item,index选填,array选填)=> 条件)

• 作用: 通过回调函数return的条件筛选每一个数组项 如果碰到一个不满足条件的数组项即可终止遍历数组项 并返回false 相反则返回true
• 参数: 回调函数
• 返回值: boolean值
• 原数组是否改变: 否

let a = [2, 3, 5, 1, 8]
let b = a.every((item) => {
    console.log(item)
    2
    3
    4
    5
    1
    8
    每一项都满足说一会逐个遍历数组项
    return item > 0
})
console.log(b) // true 所有项都满足条件
// 
let b = a.every((item) => {
    console.log(item) // 2
    return item < 0
})
console.log(b) // false 有一项不满足条件就返回false 数组项遍历终止

some((item,index选填,array,选填)=>条件)

• 作用: 通过回调函数return的条件筛选每一个数组项 如果碰到一个满足条件的数组项即可终止遍历数组项 并返回true 相反则返回false
• 参数: 回调函数
• 返回值: boolean值
• 原数组是否改变:否

let a = [2, 3, 5, 1, 8]
let b = (item, index, array) => {
    console.log(item)
            2
            3
            4
            5
            1
            8
    return item < 0
}
let c = a.some(b)
console.log(c); // false 正因为每一项都不符合条件才要每项逐个遍历
// 
let b = (item, index, array) => {
    console.log(item) //2
    return item > 0
}
let c = a.some(b)
console.log(c); // true 第一项就满足条件了直接返回true 终止遍历 

find((item,index选填,array选填)=> 条件)

• 作用:找出数组中符合条件的数组项
• 参数: 回调函数
• 返回值: 符合条件的数组项,没有符合的返回undefined
• 是否改变原数组:否

let a = [1,2,3];
<!--let b = a.find((item)=> item < 1)//  没有符合条件的返回undefined-->
let b = a.find((item)=> item < 2)
console.log(a,b) // [1,2,3], 1

findIndex((item,index选填,array,选填)=>条件)

• 作用: 查找数组中是否有满足条件的数组项
• 参数: 回调函数
• 返回值: 如果满足条件 返回第一个符合条件的数组项索引位置 反之 返回-1
• 是否改变原数组: 否

let a = [1,2,3]
let b = a.findIndex((item)=> item > 1)
console.log(a,b) // a=[1,2,3] b=1
let b = a.findIndex((item)=> item > 9)
console.log(a,b) // a=[1,2,3] b= -1 

转化数组

Array.from()

• 作用: 用于将两类对象转化为真正的数组,类似数组的对象和可遍历的对象
• 1. 伪数组(拥有一个length属性和若干索引属性的任意对象)
• 2. 可迭代对象(可以获取对象中的元素，如Map和Set等)
• 参数:无
• 返回值:转化过后的数组
• 是否改变原数组: 否

let a = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    'length': 3
};
let b = Array.from(a);
console.log(a,b); // a= {0: 'a', 1: 'b', 2: 'c', length: 3} b=['a', 'b', 'c']

Array.of()

• 作用: 将一组值转化为数组
• 参数: 需要被转化的值
• 返回值: 转化后的数组
• 原数组是否改变: 否

let b = Array.of(1,2,3)
console.log(b); // [1,2,3]

展开数组

扩展运算符 ...

• 作用: 展开数组
• 参数: 需要展开的数组
• 返回值: 展开后的数组
• 是否改变原数组: 否

let a = [1,2,3]
let b = [...a,4,5,6]
console.log(a,b); // [1, 2, 3] [1, 2, 3, 4, 5, 6]

flat()

• 作用: 展开数组
• 参数: 需要展开数组的层数 不传默认展开一层 或者 Infinity 关键字 代表不管多少层嵌套都可以全部展开
• 返回值: 扁平化后的数组
• 是否改变原数组: 否

let a = [1,2,3,[4,5,[6,[7]]]]
let b = a.flat();
console.log(a,b); // 
a = [1,2,3,[4,5,[6,[7]]]]
b = [1,2,3,4,5,[6,[7]]]
let c = b.flat(2);
console.log(c) // 
c = [1,2,3,4,5,6,7]
let d = a.flat(Infinity);
console.log(d); // [1, 2, 3, 4, 5, 6, 7]

flatMap()

• 作用: 扁平化数组
• 参数: 回调函数
• 返回值: 扁平化后的数组
• 是否改变原数组: 否

let a = ["闫大飞","你工资 会变高的"]
let b = a.map(item => item.split(" "))
console.log(b); // ["闫大飞",[["你工资"],["会变高的"]]]
let c = a.flatMap(item => item.split(" "))
console.log(a,c); //
a = ['闫大飞', '你工资 会变高的']
c = ['闫大飞', '你工资', '会变高的']

如果对你有所帮助 记得点赞鸭!

ps: 最后祝愿大家 工资都能高高的