【前端八股文】JavaScript系列：Array方法

本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主

创建数组

Array.from

1 转换为数组实例的要求

从类数组对象或可迭代对象中创建一个新的数组实例。

类数组对象：具有length属性的对象。

想要将一个类数组对象转换为一个真正的数组，需要：

• 必须具有length属性。否则会转换为一个空数组。
• 属性名必须为 数值型 或 字符串型的数字
• 属性名可以加引号也可以不加（0或’0’）

如：属性名不是数值，但有length。

let arrayLike = {
    
    
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

如：没有length。

let arrayLike = {
    
    
    '0': 'tom', 
    '1': '65',
    '2': '男',
    '3': ['jane','john','Mary'],
}
let arr = Array.from(arrayLike)
console.log(arr)  // []

2 第二个参数

可以接受第二个参数，作用类似于数组的map方法，对每个元素进行处理，将处理后的元素放入返回的数组。如：

let arr = [12, 45, 97, 9797, 564, 134, 45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

3 将字符串转为数组

每个字符都是一个数组元素。

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

4 浅拷贝

Array.from 是浅拷贝。

关于深浅拷贝：

浅拷贝和深拷贝都是只针对于像Object，Array这样的引用数据类型。
浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。即，新指针和旧指针都指向同一块内存。
深拷贝：会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。即，开辟了新内存。
换言之：浅拷贝只是基础类型的拷贝，对于对象和数组只是复制其指针。而深拷贝是和源对象没有任何共享的，一般深拷贝通过循环遍历实现。

代码验证 浅拷贝：arrr和arrr1的test都变为22，说明确实是浅拷贝。
注意：这里{ 'test': 1 }是对象，是引用数据类型。只有引用数据类型才有深浅拷贝之说。

let arrr = [{
    
     'test': 1 }, 2, 3]
let arrr1 = Array.from(arrr);
arrr1[0].test = '22';
console.log(arrr);//[ { test: '22' }, 2, 3 ]
console.log(arrr1);//[ { test: '22' }, 2, 3 ]

提问：为什么这里的arr和arr1不一样了？
答：这里的0、1都是基本数据类型，没有深浅拷贝之说。

let arr = [1, 2, 3, 4, 5]
let arr1 = Array.from(arr);
arr[0] = 0
console.log(arr, 'arr')//[ 0, 2, 3, 4, 5 ] arr
console.log(arr1, 'arr1')//[ 1, 2, 3, 4, 5 ] arr1

copyWithin

这个总结很全：js数组操作方法copyWithin_js

fill

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

没有start和end默认整个数组。

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
console.log(fruits)//[ 'Runoob', 'Runoob', 'Runoob', 'Runoob' ]

有start和end，end=min(end,Array.length)

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
console.log(fruits)//[ 'Banana', 'Orange', 'Runoob', 'Runoob' ]

若填充类型为对象，则为浅拷贝。

排序与查找

sort原理

对数组进行排序，默认排序顺序是将元素转换为字符串，按照ASCII码进行排序，如：

let arr=[1,2,3,12]
arr.sort()
console.log(arr)//[ 1, 12, 2, 3 ]

升序排序：从小到大

let arr=[1,2,22,12]
arr.sort((a,b)=>(a-b))
console.log(arr)//[ 1, 2, 12, 22 ]

降序排序：从大到小

let arr=[1,2,22,12]
arr.sort((a,b)=>(b-a))
console.log(arr)//[ 22, 12, 2, 1 ]

find

• find() 方法返回通过测试（函数内判断）的数组的第一个元素的值

• 若没有符合条件的元素返回 undefined

• 对于空数组，函数不会执行

• 不改变数组

• array.find(function(currentValue, index, arr),thisValue)，其中currentValue为当前值，index为当前索引，arr为当前数组

let test = [1, 2, 3, 4, 5];
let a = test.find(item => item > 3);
console.log(a); //4

let b = test.find(item => item == 0);
console.log(b); //undefined

findIndex

find返回对应数值，findIndex返回对应索引。
没找到为返回-1。

let test = [1, 2, 3, 4, 5];
let a = test.findIndex(item => item > 3);
console.log(a); //3

let b = test.findIndex(item => item == 0);
console.log(b); //-1

对原数组有影响

返回数组新长度：

• push：末尾添加
• unshift：头部添加

返回删除的元素：

• pop：末尾移除
• shift：头部移除

返回在数组中被删除的数值的数组：splice

• 删除：传入2个参数：要删除的第一个元素的位置和要删除的元素数量
• 插入/替换：传 3 个参数：开始位置、要删除元素的数量和要插入的任意多个元素
• 始终返回一个数组，它包含从数组中被删除的元素（如果没有删除元素，则返回空数组[]）

[2, 3, 4].splice(0, 1); // 0位置删除⼀个，返回[2]
[2, 3, 4].splice(0, 1, 5); // 0位置删除1个，插⼊5，原数组是[5, 3, 4]，返回[2]

对原数组无影响

• concat
• slice
• reduce
• filter
• some
• every
• join
• flat、flatMap

concat

连接两个数组，返回新数组。

slice

返回数组切片。

reduce

let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum); // 15 

filter

对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult); // 3,4,5,4,3 

some

对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true。

every

对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回 true。

join

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符（参数）进行分隔的。

flat、flatMap

拍平数组，参数为拍平几个维度。
参数可以为Infinity，表示变为一维数组。

具体：
JavaScript 数组展平方法： flat() 和 flatMap() - 掘金 (juejin.cn)
JS数组方法 flat()，flatMap() - Kaiqisan_js flatmap_kaiqisan的博客-CSDN博客

参考

Array.from ()方法详解_一晌贪欢i的博客-CSDN博客
Array方法之Array.from（），附带对浅拷贝和深拷贝的理解_array.from深拷贝_web_sea的博客-CSDN博客
浅拷贝深拷贝之理解及应用场景_深浅拷贝的应用场景_炉火纯青-旺的博客-CSDN博客
JS Array.from() 是浅拷贝还是深拷贝?为什么？_词不达意难知的博客-CSDN博客
js数组操作方法copyWithin_js
JS中find方法_js find()
JavaScript 数组展平方法： flat() 和 flatMap() - 掘金 (juejin.cn)
JS数组方法 flat()，flatMap() - Kaiqisan_js flatmap_kaiqisan的博客-CSDN博客