Home

Appearance

Array ​

会修改变原数组的 9 个方法 ​

push() ​

  • 用法：将一个或者多个元素添加到数组末尾，并且返回该数组的新长度。

pop() ​

  • 用法：删除数组最后一个元素，并返回删除的元素。

unshift() ​

  • 用法：将一个或者多个元素添加到数组的第一位，并且返回该数组的新长度。

shift() ​

  • 用法：删除数组的第一个元素，并返回删除的元素。

sort() ​

  • 用法：数组排序。

reverse() ​

  • 用法：数组逆序。

splice() ​

  • 用法：裁剪数组(删除或替换或添加新元素)。

copyWithin() es6 ​

  • 用法：在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组。

fill() es6 ​

  • 用法：使用给定值，填充一个数组。
js
// 第一个元素(必须): 要填充数组的值。
// 第二个元素(可选): 填充的开始位置,默认值为 0。
// 第三个元素(可选): 填充的结束位置，默认是为 this.length。
Array.fill(value, start, end);
// 第一个元素(必须): 要填充数组的值。
// 第二个元素(可选): 填充的开始位置,默认值为 0。
// 第三个元素(可选): 填充的结束位置，默认是为 this.length。
Array.fill(value, start, end);

不会修改变原数组的 10 个方法 ​

concat() ​

  • 用法：数组拼接（合并两个或多个数组，返回一个新数组）。

slice() ​

  • 用法：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。

jion() ​

  • 用法：数组转字符串（数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串）。

indexOf() ​

  • 用法：查找数组是否存在某个元素，返回下标，如果不存在，则返回-1。

lastIndexOf() ​

  • 用法：返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。

includes() es7 ​

  • 用法：查找数组是否包含某个元素，返回布尔。

flat()es6 ​

  • 用法：用于将嵌套的数组“拉平”。

flatMap()es6 ​

  • 用法：对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。

toLocaleString() ​

  • 用法：返回一个表示数组元素的字符串。

toString() ​

  • 用法：数组转字符串，返回字符串。

遍历数组的 12 个方法 ​

forEach() ​

  • 用法：方法按升序为数组中含有效值的每一项执行一次 callback 函数。

注意：

  • 无法中途退出循环，只能用 return 退出本次回调，进行下一次回调。
  • 它总是返回 undefined 值,即使你 return 了一个值。

filter() ​

  • 用法：过滤原始数组，返回新数组。

map() ​

  • 用法：对数组中的每个元素进行处理，返回新的数组。

some() ​

  • 用法：数组中的是否有满足判断条件的元素，返回布尔值。

every() ​

  • 用法：组所有元素是否都符合判断条件，返回布尔值。

find() es6 ​

  • 用法：方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

findIndex() es6 ​

  • 用法：方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

符合以上遍历数组的通式

js
// fn指代 forEach、map、some、every
// currentValue(必须),数组当前元素的值
// index(可选), 当前元素的索引值
// arr(可选),数组对象本身
// thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
 array.fn(function(currentValue, index, arr), thisValue)
// fn指代 forEach、map、some、every
// currentValue(必须),数组当前元素的值
// index(可选), 当前元素的索引值
// arr(可选),数组对象本身
// thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
 array.fn(function(currentValue, index, arr), thisValue)

reduce()、reduceRight() ​

这个方法唯一区别就是方向不一样，一个从左往右，一个从右往左。

  • 用法：为数组提供累加器，返回最终计算结果。
js
// accumulator（必选）:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值。
// currentValue（必选）：当前值
// currentIndex（可选）：当前索引
// array（可选）：调用reduce()的数组
// initialValue（可选）：作为第一次调用 callback函数时的第一个参数的值。

array.reduce(callback(accumulator, currentValue, index, array), initialValue);
// accumulator（必选）:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值。
// currentValue（必选）：当前值
// currentIndex（可选）：当前索引
// array（可选）：调用reduce()的数组
// initialValue（可选）：作为第一次调用 callback函数时的第一个参数的值。

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

注意：

  • 如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。如果提供 initialValue，从索引 0 开始。
  • 如果没有提供初始值，则默认为数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

keys()、values()、entries() 遍历键名、遍历键值、遍历键名+键值 es6 ​

  • 用法：三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。
js
array.keys(); // 键名 index
array.values(); // 键值 值
array.entries(); // 键名+键值
array.keys(); // 键名 index
array.values(); // 键值 值
array.entries(); // 键名+键值

Array上的方法 ​

isArray() ​

  • 判断是否为数组

from() ​

  • 1、返回一个数组实例
  • 2、入参为：一个类数组或者一个可迭代对象

of() ​

for 循环 while 循环性能对比 ​

js
let arr = new Array(9999999).fill(1)

// for
console.time('forTime')
for(let i = 0; i< arr.length; i++){}
console.timeEnd('forTime')

// while
console.time('whileTime')
let i = 0
while(i< arr.length){i ++ }
console.timeEnd('whileTime')

// forTime: 6.72802734375 ms
// whileTime: 20.7080078125 ms
let arr = new Array(9999999).fill(1)

// for
console.time('forTime')
for(let i = 0; i< arr.length; i++){}
console.timeEnd('forTime')

// while
console.time('whileTime')
let i = 0
while(i< arr.length){i ++ }
console.timeEnd('whileTime')

// forTime: 6.72802734375 ms
// whileTime: 20.7080078125 ms

原因：

  • 使用 let 声明下的循环，由于 for 中块级作用域的影响，内存得到释放，运行的运行的速度会更快一些。
  • 使用 var 声明时因为for while 的循环都不存在块级作用域的影响，两者运行的速度基本一致。

forEach、for...of、for...in 区别 ​

  • forEach：
    • 是Array.prototype上的方法。用于遍历数组中的每个元素，执行回调函数，没有返回值。
    • 不能使用break跳出循环，只能使用try/catch捕捉异常来跳出循环。
js
arr.forEach((item) => {
  if (item === 3) {
    throw new Error('End loop');
  }
  console.log(item);
});
arr.forEach((item) => {
  if (item === 3) {
    throw new Error('End loop');
  }
  console.log(item);
});

  • for...of：

    • for of 循环的原理是按照是否有迭代器规范来循环的，所有带有 Symbol.iterator 的都是实现了迭代器规范(Array,Set,Map,generator...)。
    • 对象没有实现 Symbol.iterator 规范，所以不能使用for of循环。
    • 可以使用break跳出循环。

  • for...in：

    • 循环主要用于对象
    • 可以使用break跳出循环。
    • for...in无法遍历 Symbol属性（不可枚举）。

for in 的循环性能循环很差。性能差的原因是因为：for in 会迭代对象原型链上所有可以枚举的属性。

拓展: ​

如何实现类数组可以使用 for of 循环:

  • 只需要给类数组对象添加Symbol.iterator接口规范就可以了。
js
let obj = { 0:'a',1:'b',2:'3' }
obj[Symbol.iterator] = Array.prototype[Symbol.iterator]
let obj = { 0:'a',1:'b',2:'3' }
obj[Symbol.iterator] = Array.prototype[Symbol.iterator]

类数组转换为数组方法：

arguments 是类数组(其实是一个对象)属性从0开始排，依次为0，1，2... 最后还有 callee和length 属性，arguments 的 proto 直接指向基类的 object，不具备数组的方法。

  • 方法一：[].slice.call()
js

function fn(){
    let arr = [].slice.call(arguments)
    return arr
}
fn(1,2,3,4,5)   // [1,2,3,4,5]

function fn(){
    let arr = [].slice.call(arguments)
    return arr
}
fn(1,2,3,4,5)   // [1,2,3,4,5]
  • 方法二：拓展运算符
js
function fn(){
    let arr = [...arguments]
    return arr
}
fn(1,2,3,4,5)   // [1,2,3,4,5]
function fn(){
    let arr = [...arguments]
    return arr
}
fn(1,2,3,4,5)   // [1,2,3,4,5]
  • 方法三：Array.from()
js
function fn(){
    return Array.from(arguments)
}
fn(1,2,3,4,5)   // [1,2,3,4,5]
function fn(){
    return Array.from(arguments)
}
fn(1,2,3,4,5)   // [1,2,3,4,5]