Array操作从入门到精通

返回：常用类型数据处理

数组

随着前端深入的不断学习，发现数组这个数据结构在前端中有着相当大的存在感
数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
除了在定义时赋值，数组也可以先定义后赋值。
任何类型的数据，都可以放入数组。
本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object

• JavaScript语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串。之所以可以用数值读取，是因为非字符串的键名会被转为字符串。
• 对象有两种读取成员的方法：“点”结构（object.key）和方括号结构（object[key]）。但是，对于 数值的键名，不能使用点结构。
• 数组创建有两种方式，分别是[]字面量方式、new Array()构造函数方式，本质上创建方式是一致的，使用字面量的方式要比构造函数的方式简单的多，推荐。

🐉 数组处理的另类需求

一、数组变形 Transform (函数范式的纯函数）

reduce

进入reduce学习

array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。
在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器。

map

返回一个数组，其中每个元素都使用指定函数进行过转换

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

flat

array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：

const arrays = [0, [1, 3, 5], [2, 4, 6]];

const flatArray = arrays.flat();

flatArray; // [0, 1, 3, 5, 2, 4, 6]

arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平，使其仅包含数字。

WARNING

array.flat() 创建一个新数组，而不会改变原始数组。

fill

array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。

例如，使用用零值填充数组：

const numbers = [1, 2, 3, 4];

numbers.fill(0);

numbers; // => [0, 0, 0, 0]

不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。

const length = 3;
const zeros = Array(length).fill(0);

zeros; // [0, 0, 0]

WARNING

array.fill() 会改变原数组。

二、数组逻辑判断 logic predicates（函数范式的纯函数）

filter

array.filter() 创建一个新数组，而不改变原始数组。

array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

通过arr.filter()可以对数组进行带条件的筛选，在filter()里面写入相应条件，这里要注意执行arr.filter()会返回一个数组，我们需要定义一个新数组来接收它。
这一组方法是用来判断数组中有没有相应值的，arr.every()判断的值必须所有都满足条件才会返回true，而arr.some()判断的值只需要有一项满足就会返回true。

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

find

find返回与指定条件匹配的第一个实例，array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
如果查到不会继续查找其他匹配的实例。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

includes

• includes 是 find 应用于一个元素
• 数组中含有某值返回true，没有返回false。ES6新方法。
• array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 是否包含itemToSearch。 可选参数fromIndex，默认为0，表示开始搜索的索引。

let arr = [1,2,3,4];
if(arr.includes(2)){
  console.log("数组中有2");
}else{
  console.log("数组中无2");
}

findIndex

这与find几乎完全相同，但不是返回第一个匹配元素，而是返回第一个匹配元素的索引。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

indexOf

array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。

如果找不到该项，则array.indexOf(itemToSearch)返回-1
indexOf 则是 findIndex 用于一个元素
array.findIndex(predicate)是使用predicate函数查找索引的替代方法。

if (arr.indexOf(2) != -1){
   console.log("数组含有2")
}else {
   console.log("数组不含2")
}

every

如果每个项都通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

some

如果每个项只要一个通过predicate 检查，则array.some(predicate)返回true。

三、非函数式的数组变形（纯函数）

concat

concat()创建一个新的数组，而不改变原来的数组
[].concat(array) 创建一个浅拷贝。
array.concat(array1 [，array2，...]) 接受多个要连接的数组。

通过arr.concat()可以将字符添加到数组元素中，也可以将其他数组添加到当前数组中，但如果是嵌套数组，concat()默认不会对它进行扁平化处理。

array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示，连接两个数组：

join

通过arr.join()可以将数组元素拼接成字符串，并在每个元素中添加指定字符，如不设置，则默认添加逗号。

slice

array.slice() 创建一个新数组，而不改变原始数组。

• 通过arr.slice()可以对数组进行查询，如果传入两个参数(x,y)，则意义为从下标x到y（不包含y）之间的元素；如果传入一个参数(x)，则意义为从下标x开始一直到末尾的所有元素。此方法不会修改数组，而是返回所需的子集
• slice() 创建一个浅拷贝。

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

如果你想获取数组中的最后一项，你可以使用 slice 函数，同时带上一个负数作为参数。

let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
// >>>[7]
console.log(array.slice(-2));
// >>>[6, 7]
console.log(array.slice(-3));
// >>>[5, 6, 7]

splice

array.splice() 会改变原数组。

splice()是数组操作中很重要的方法，使用splice()可以更为自由的对数组进行相应的增加删除，通过splice()方法也可以很轻松的实现push()、pop()、unshift()和shift()四个方法，splice()方法会修改了数组本身。

array.splice(index,howmany,item1,.....,itemX);

• index 必需。规定从何处添加/删除元素。
  该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
• howmany 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。
  如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
• item1, ..., itemX 可选。要添加到数组的新元素

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：

const colors = ['blue', 'green', 'black'];

colors.splice(0);

colors; // []

splice返回值

• Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

let arr = ['limin', 'hut', 'hucy'];
arr.splice(2,1);//返回[hucy]
arr.splice(1,0);//返回空数组[]

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')
//在数组的位置 1 上删除 0 个元素，并插入 b。此时arr:[a,b,c,d,e]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");//此时fruits：Banana,Orange,Lemon,Kiwi,Apple,Mango

四、操作数据结构 （非纯函数）

push

array.push() 会改变原数组
array.push(item1, item2, ..., itemN) 可以添加多个元素。

• push()在数组末尾添加:这是一个相对简单的方法，它将一个项添加到数组的末尾。它就地修改数组，函数本身会返回添加到数组中的项。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(pushed); // 5

pop

array.pop() 会改变原数组。

• pop()删除末尾元素:这将从数组中删除最后一项。同样，它在适当的位置修改数组，函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr); // [1, 2, 3]
console.log(popped);// 4

unshift

array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头，返回数组的新长度

array.unshift() 会改变原数组
array.unshift(item1, item2, ..., itemN) 可以添加多个元素。

• unshift()在数组头部添加:将一个或多个元素添加到数组的开头。同样，它在适当的位置修改数组。与许多其他方法不同，函数本身返回数组的新长度。

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr); // [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted); // 7

shift

array.shift() 会改变原数组。
array.shift() 具有O(n)复杂度。

• shift()删除头部元素:从数组中删除第一项。同样，它在适当的位置修改数组。函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(shifted); // 1

delete

• 这里应该注意delete和length的区别，使用delete操作后的数组元素会被设置为empty，不会改变原数组长度。
• 使用length操作后
  • 若设置长度大于原数组长度，则新添的元素设置为empty
  • 若设置长度小于原数组长度，则删除多余元素，并改变数组长度(清空当前设置长度到数组原长度之间的数据)，
  • 若设置length为0，则清空数组，使数组长度改变为零。

五、数组排序 （非纯函数）

reverse

通过arr.reverse()可以将数组中每一个元素调到顺序进行排列。

sort

• 默认是走字符串排序
• array.sort([compare])方法对数组的元素进行排序。
  • 可选参数compare(a, b)是一个自定义排序顺的回调函数。

let arr = [1, 7, 3, -1, 5, 7, 2];
arr.sort();
//(7) [-1, 1, 2, 3, 5, 7, 7]
arr.push(13);
//8
arr.sort();
//(8) [-1, 1, 13, 2, 3, 5, 7, 7]

通过arr.sort()可以将数组元素按照顺序进行排列，比如数字先后顺序或者字母排序。
根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或 0，则顺序保持不变。如果返回正数，则交换元素顺序。

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;// 升序，const sorter = (firstEl, secondEl) => secondEl-firstEl;降序
arr.sort(sorter);
console.log(arr); // [-1, 1, 2, 3, 5, 7, 7]

对象数组排序

var arr = [{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '王五', age: 37},{'name': '赵六', age: 4}];
var objectArraySort = function (keyName) {
 return function (objectN, objectM) {
  var valueN = objectN[keyName]
  var valueM = objectM[keyName]
  if (valueN < valueM) return 1
  else if (valueN > valueM) return -1
  else return 0
 }
}
arr.sort(objectArraySort('age'))
console.log(arr) // [{'name': '王五', age: 37},{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '赵六', age: 4}]

如果比较compare(a, b)返回的结果：

如果 a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。
如果a等于b，就返回0。
如果a大于b，就返回一个大于0的值。

如下所示，对数组 numbers 时行排序

const numbers = [4, 3, 1, 2];
numbers.sort();
numbers; // => [1, 2, 3, 4]

numbers.sort() 以升序对数字进行排序。

使用比较函数，让偶数排在奇数前面：

const numbers = [4, 3, 1, 2];

function compare(n1, n2) {
  if (n1 % 2 === 0 && n2 % 2 !== 0) {
    return -1;
  }
  if (n1 % 2 !== 0 && n2 % 2 === 0) {
    return 1;
  }
  return 0;
}

numbers.sort(compare);

numbers; // => [4, 2, 3, 1]

array.sort() 会改变原数组。

in运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false

// 上面代码表明，数组存在键名为2的键。由于键名都是字符串，所以数值2会自动转成字符串。
// 注意，如果数组的某个位置是空位，in运算符返回false。

var arr = [];
arr[100] = 'a';

100 in arr // true
1 in arr // false

数组相关判断

是否为空

let arr = [];
if (arr.length == 0){
   console.log("数组为空")
}else {
   console.log("数组不为空")
}

是否含有某个值: for循环结合if判断

for (let i = 0;i < arr.length;i++){
   if (arr[i] === 2){
      console.log("数组含有2")
　　}
}

• arr.find(callback)

arr.find(value => {
   if (value === 2){
      console.log("数组含有2")
　　}
})

遍历数组

for_in循环和数组的遍历

for...in循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象。

不推荐使用for...in遍历数组，因为会遍历非数字键。

var a = [1, 2, 3];

for (var i in a) {
  console.log(a[i]);
}
// 1
// 2
// 3
// 但是，for...in不仅会遍历数组所有的数字键，还会遍历非数字键。
var a = [1, 2, 3];
a.foo = true;
for (var key in a) {
  console.log(key);
}
// 0
// 1
// 2
// foo

数组的空位

var a = [1, , 1];
a.length // 3

// 上面代码表明，数组的空位不影响length属性。

// 需要注意的是，如果最后一个元素后面有逗号，并不会产生空位。也就是说，有没有这个逗号，结果都是一样的。
var a = [1, 2, 3,];
a.length // 3
a // [1, 2, 3]

// 数组的空位是可以读取的，返回undefined。
var a = [, , ,];
a[1] // undefined

// 使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。
var a = [1, 2, 3];
delete a[1];

a[1] // undefined
a.length // 3

// 数组的某个位置是空位，与某个位置是undefined，是不一样的。
// 如果是空位，使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历，空位都会被跳过。
var a = [, , ,];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
})
// 不产生任何输出

for (var i in a) {
  console.log(i);
}
// 不产生任何输出

Object.keys(a)
// []

// 如果某个位置是undefined，遍历的时候就不会被跳过。
var a = [undefined, undefined, undefined];
a.forEach(function (x, i) {
  console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined

for (var i in a) {
  console.log(i);
}
// 0
// 1
// 2
Object.keys(a)
// ['0', '1', '2']

// 这就是说，空位就是数组没有这个元素，所以不会被遍历到，而undefined则表示数组有这个元素，值是undefined，所以遍历不会跳过。

Array对象

Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。

构造函数

Array是JavaScript的内置对象，同时也是一个构造函数，可以用它生成新的数组。

var arr = new Array(2);
arr.length // 2
arr // [ undefined x 2 ]
// 上面代码中，Array构造函数的参数2，表示生成一个两个成员的数组，每个位置都是空值。

// 如果没有使用new，运行结果也是一样的。
var arr = new Array(2);
// 等同于
var arr = Array(2);

注意，如果参数是一个正整数，返回数组的成员都是空位。虽然读取的时候返回undefined，但实际上该位置没有任何值。虽然可以取到length属性，但是取不到键名。

var arr = new Array(3);
arr.length // 3
arr[0] // undefined
arr[1] // undefined
arr[2] // undefined

0 in arr // false
1 in arr // false
2 in arr // false
// 上面代码中，arr是一个长度为3的空数组。虽然可以取到每个位置的键值undefined，但是所有的键名都取不到。

Array.isArray()

Array.isArray方法用来判断一个值是否为数组。它可以弥补typeof运算符的不足。

var a = [1, 2, 3];
typeof a // "object"
Array.isArray(a) // true
// 上面代码中，typeof运算符只能显示数组的类型是Object，而Array.isArray方法可以对数组返回true。

Array实例的方法

• valueOf方法返回数组本身。

var a = [1, 2, 3];
a.valueOf() // [1, 2, 3]

• toString方法返回数组的字符串形式。

var a = [1, 2, 3];
a.toString() // "1,2,3"
var a = [1, 2, 3, [4, 5, 6]];
a.toString() // "1,2,3,4,5,6"

• push
  push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。( 返回新的数组长度，改变原数组 )

var a = [];
a.push(1) // 1
a.push('a') // 2
a.push(true, {}) // 4
a // [1, 'a', true, {}]

如果需要合并两个数组，可以这样写。

var a = [1, 2, 3];
var b = [4, 5, 6];
Array.prototype.push.apply(a, b)
// 或者
a.push.apply(a, b)
// 上面两种写法等同于
a.push(4, 5, 6)
a // [1, 2, 3, 4, 5, 6]

push方法还可以用于向对象添加元素，添加后的对象变成类似数组的对象，即新加入元素的键对应数组的索引，并且对象有一个length属性。

var a = {a: 1};
[].push.call(a, 2);
a // {a:1, 0:2, length: 1}

[].push.call(a, [3]);
a // {a:1, 0:2, 1:[3], length: 2}

15组数组常用方法介绍

• 1.1 for..of 循环

const colors = ['blue', 'green', 'white'];

for (const color of colors) {
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

咱们可以随时使用break语句停止遍历。

• 1.2 for 循环

const colors = ['blue', 'green', 'white'];

for (let index = 0; index < colors.length; index++) {
  const color = colors[index];
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

index变量从0递增到colors.length-1。此变量用于按以下索引访问项：colors [index]。可以随时使用break语句停止遍历。

• 1.3 array.forEach() 方法
  array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。
  在每次遍历中，都使用以下参数调用callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本身。

const colors = ['blue', 'green', 'white'];

colors.forEach(function callback(value, index) {
  console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2

咱们不能中断array.forEach()迭代。

15_数组的映射

• 2.1 Array.map()方法
  array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。
  在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身，并应该返回新项。

const numbers = [0, 2, 4];

const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});

newNumbers; // => [1, 3, 5]

array.map()创建一个新的映射数组，而不改变原始数组。

• 2.2 Array.from()方法
  Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。
  在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。

const numbers = [0, 2, 4];

const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);

newNumbers; // => [1, 3, 5]

Array.from()创建一个新的映射数组，而不改变原始数组。
Array.from()更适合从类似数组的对象进行映射。

• 4.2 展开操作符号
  将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]。

15_数组的拷贝： 6.1 展开操作符

拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：

[...array] 创建一个浅拷贝。

15_数组的插入： 10.3 展开操作符

const names = ['小智', '大治']
const names2 = [...names, '王大冶']
names2 // ["小智", "大治", "王大冶"]

const names = ['小智', '大治']
const names2 = ['王大冶',...names]
names2 // ["王大冶", "小智", "大治"]

在任何索引处插入元素：

const names = ['小智', '大治']
const indexToInsert = 1

const names2 = [
  ...names.slice(0, indexToInsert),
  '前端小智',
  ...names.slice(indexToInsert)
]

names2  // ["小智", "前端小智", "大治"]

15_删除数组元素： 11.4 展开操作符号

可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。

const names = ['张三', '李四', '王五', '赵六']
const fromIndex = 1
const removeCount = 2

const newNames = [
   ...names.slice(0, fromIndex),
   ...names.slice(fromIndex + removeCount)
]

newNames // ["张三", "赵六"]

15_清空数组： 12.1 array.length属性

array.length是保存数组长度的属性。 除此之外，array.length是可写的。
如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。

如下所示：使用array.length = 0删除数组中的所有项目：

const colors = ['blue', 'green', 'black'];

colors.length = 0;

colors; // []

15_填充数组： 13.2 Array.from() 函数

Array.from() 有助于初始化带有对象的特定长度的数组：

const length = 4;
const emptyObjects = Array.from(Array(length), function() {
  return {};
});

emptyObjects; // [{}, {}, {}, {}]

Array对象的扩展

• Array.prototype.copyWithin()：把指定位置的成员复制到其他位置，返回原数组

const array1 = ['a', 'b', 'c', 'd', 'e']
console.log(array1.copyWithin(0, 3, 4)) // ["d", "b", "c", "d", "e"]
console.log(array1.copyWithin(1, 3)) // ["d", "d", "e", "d", "e"]

• Array.prototype.keys()：返回以索引值为遍历器的对象

const array1 = ['a', 'b', 'c']
const iterator = array1.keys()

for (const key of iterator) {
      console.log(key)
}

// 0
// 1
// 2

• Array.prototype.values()：返回以属性值为遍历器的对象

const array1 = ['a', 'b', 'c']
const iterator = array1.values()

for (const key of iterator) {
      console.log(key)
}

// a
// b
// c

• Array.prototype.entries()：返回以索引值和属性值为遍历器的对象

const array1 = ['a', 'b', 'c']
const iterator = array1.entries()

console.log(iterator.next().value) // [0, "a"]
console.log(iterator.next().value) // [1, "b"]

• 数组空位：ES6明确将数组空位转为undefined或者empty

Array.from(['a',,'b']) // [ "a", undefined, "b" ]
[...['a',,'b']] // [ "a", undefined, "b" ]
Array(3) //  [empty × 3]
[,'a'] // [empty, "a"]