前端八股文——javascript中Array⽅法总结

1. 创建数组

1.1 Array.from（）

这里首先讲一下浅拷贝和深拷贝的概念

浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝：会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

Array.from就是一个浅拷贝

首先通过一个例子，看一下Array.from的使用：

	var str = "this is string";
    var arr = Array.from(str);
    console.log("arr:",arr);
    //arr: [ 't', 'h', 'i', 's', ' ', 'i', 's', ' ', 's', 't', 'r', 'i', 'n', 'g' ]
    //从结果得知from方法默认将str（不知道怎么描述^_^）拆分、组合成一个新的数组实例。

下面证明一下这是一个浅拷贝：

//浅拷贝和深拷贝是只针对object和Array这样的引用数据类型
   
    //我们用一个引用类型的实例看一下吧：
     var obj = new Object( {
         name:"web_sea",
         age:18,
         isRich:[false,true]
     })
     //将对象转成数组
     var objs = [];
       for(var i in obj){
        objs.push(obj[i]);
       }

     var arrObj = Array.from(objs);
     console.log("objs:",objs);//objs: [ 'web_sea', 18, [false,true] ]
     console.log("arrObj:",arrObj);//arrObj:[ 'web_sea', 18, [false,true] ]
	  //我们要改变objs子对象的值；
     objs[2][0]=true;
     //改变第一层数据的值
     objs[1]=50;
     console.log("改变objs后objs:",objs);//[ 'web_sea', 50, [ true, true ] ]
     console.log("改变objs后arrObj:",arrObj);//arrObj:[ 'web_sea', 18, [ true, true ] ]

总结一下Array.from的语法：

• 语法：Array.from(arrayLike[, mapFn[, thisArg]])
• 参数：
  • arrayLike :想要转换成数组的伪数组对象或可迭代对象。
  • mapFn(可选参数)：如果指定了该参数，新数组中的每个元素会执行该回调函数。
  • thisArg(可选参数)：执行回调函数mapFn时的this对象
• 返回值：
  • 一个新的数组实例
    举个例子：

	var aas = "123";
    var arrfun = Array.from(aas,i=>i*2);
    console.log("arrfun:",arrfun);//arrfun: [ 2, 4, 6 ]

1.2 Array.of()方法

这个方法用于一组值，将其转换成数组：

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

下面是Array构造器的方法的使用：

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

1.3 sort()排序函数原理

1. sort()使用原地算法对数组进行排序，如果不传入参数，则数组按照元素的字典序升序排列（在此过程中含有隐式转换，因此数组的每个元素都会调用一次toString()方法转换为字符串），所谓的按字典序排列，就是对两个字符串的第一个不同字符的 Unicode 编码值进行比较并排序；
2. arr.sort(function(a,b){ return a-b }) 升序
arr.sort(function(a,b){ return b-a }) 降序

1.4 copyWithin()

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

• target（必需）：从该位置开始替换数据。如果为负值，表⽰倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表⽰从末尾开始
  计算。
• end（可选）：到该位置前停⽌读取数据，默认等于数组长度。如果为负值，表⽰
  从末尾开始计算

[1, 2, 3, 4, 5].copyWithin(0, 3);
// 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了
原来的 1 和 2
// [4, 5, 3, 4, 5]

1.5 find()

let arr1 = [1, 2, 3, 4, 5];
let num = arr1.find(item => item > 1);
console.log(num)  //輸出的結果是2

1.6 findIndex()

var arr = ['a','b','c','d'];
   var flag = arr.findIndex(item => {
        return item === 'c';
    })
    console.log(flag) // 得到： 2

2. 对原数组有影响

2.1 push

push函数返回数组最新长度

var arr = []
var length = arr.push('first')
console.log(arr) // ['first']
console.log(length)  // 1 push方法会改变原有数组，且返回改变后数组的长度

• index : 必需。添加/删除项⽬位置，使⽤负数可从数组结尾处规定位置。
• howmany :必需。要删除项⽬数量。如果设置为 0，则不会删除项⽬。
• item1, …, itemX: 可选。向数组添加新项⽬。

2.2 unshift()

返回新数组长度

let numbers = [30, 40];
const length = numbers.unshift(20);
console.log({ length });
console.log({ numbers });

输出为：

{ length: 3 }
{ numbers: [ 20, 30, 40 ] }

2.3 splice

返回空数组，返回包含删除元素的数组

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

2.4 pop()

 let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // 移除 "Pear" 然后 alert 显示出来
alert( fruits ); // Apple, Orange

2.5 shift()

取出数组的第一个元素并返回它：

let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // 移除 Apple 然后 alert 显示出来
alert( fruits ); // Orange, Pear

3.对原数组⽆影响

3.1 concat()

需要注意的是，concat返回的是一个浅拷贝

const arr = [1, 2, 3].concat([4, 5])
console.log(arr) // [1,2,3,4,5]

3.2 slice()

arrayObject.slice(start, end)
注意：

1. start表示从何处开始选取， end表示从何处结束选取，start和end表示一个选取的范围；
2. start可以为负数，此时它规定从数组尾部开始算起的位置。也就是-1 ，指最后一个元素，-2 指倒数第二个元素，以此类推
3. end如果没有被指定参数，数组会包含从 start 到最后一个数组元素的所有元素
4. slice()方法不会修改数组本身，而是返回所选取范围的数组元素。如果想删除数组中的某一个元素，需要使用splice()
   下面来看一些例子
5. 这里的取值范围是0-2（start-end），因为数组的下标是从0开始，所以这里的2就是下面数组中的 javascript元素
   这里需要注意的是0-2选取的元素是html和css，并不包括javascript

var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(0, 2);
//sliceArr值为['html', 'css']

3.3 reduce()

定义：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

prev：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 init，其值则为 init，否则为数组索引为 0 的元素 arr[0]。
cur：数组中正在处理的元素。在第一次调用时，若指定了初始值 init，其值则为数组索引为 0 的元素 arr[0]，否则为 arr[1]。
index：数组中正在处理的元素的索引。若指定了初始值 init，则起始索引号为 0，否则从索引 1 起始。
arr：用于遍历的数组。

求和案例：

var arr = [1,5,8,10,15,66,65,25,48,55]
 
//  reduce
 var sum = arr.reduce(function(prev,cur){
  return prev+cur;
 });
 
console.log(sum); //298

3.4 filter()

filter用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

实例：返回数组中所有大于5的元素：

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 5;
});
 
console.log(res);  // [6, 7, 8, 9, 10]

3.5 some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

isSome:function(){
				let a = [2,3,5,7,9]
				let status = a.some(function(currentValue,index,arr){
					console.log(currentValue) // 必须。当前元素的值 
					console.log(index)        // 可选。当前元素的索引值
					console.log(arr)          // 可选。当前元素属于的数组对象
					return currentValue >= 1  // 判断数组中是否有值大于等于1
				})
				console.log(status)
			}
 // currentValue:2
 // index:0
 // arr:2,3,5,7,9
 // true

3.6 every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

isEvery:function(){
				let a = [2,3,5,7,9]
				let status = a.every(function(currentValue,index,arr){
					console.log(currentValue) // 必须。当前元素的值 
					console.log(index)        // 可选。当前元素的索引值
					console.log(arr)          // 可选。当前元素属于的数组对象
					return currentValue >= 1  // 判断数组中是否所有值都大于等于1
				})
				console.log(status)
			}
				 // currentValue:2
				 // index:0
				 // arr:2,3,5,7,9,
				 
				 // currentValue:3
				 // index:1
				 // arr:2,3,5,7,9,
				 
				 // currentValue:5
				 // index:2
				 // arr:2,3,5,7,9,
				 
				 // currentValue:7
				 // index:3
				 // arr:2,3,5,7,9,
				 
				 // currentValue:9
				 // index:4
				 // arr:2,3,5,7,9,
				 
				 // status:true

every()和some()的主要区别
every()会对数组中的每一个元素，即currentValue进行匹配，只有全部满足条件才会返回true，而some()中，只需有一个currentValue满足条件即可返回true，后面的currentValue不会再进行比较

3.7 join()

arryObject.join(separator)
参数：
separator: 可省略，如指定则以传入的字符串来分割数组元素，省略则默认以逗号分割数组元素

let arr = new Array()
arr[0] = 'feiniaomy.com'
arr[1] = 'mochu'
arr[2] = '飞鸟慕鱼'

let str = arr.join();
console.log("str => ", str)

3.8 flat()，flatMap()

将数组扁平化处理，返回⼀个新数组，对原数据没有影响

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

// 相当于 [2, 3, 4].map(x => [x, x*2]).flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

参考文献

[1] Array方法之Array.from（），附带对浅拷贝和深拷贝的理解
[2] Array.of()方法
[3] sort()排序函数原理
[4] 代码随想录前端八股文；
[5] findIndex()的用法
[6]js中push方法小结
[7]JavaScript 中 数组（Array）的 pop/push, shift/unshift 方法以及性能比较
[8] 详解JS中slice函数和splice函数区别
[9] JS中的reduce()函数介绍
[10] Javascript中的every()与some()的区别和应用
[11] JavaScript中join()方法详解
[12] flat()，flatMap() 超全详细用法