JS 内置对象之 Array

一、属性

1、length

设置或返回数组中元素的数目。

如果设置的值比其当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。
如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。

const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];
console.log(clothing.length); // 4

clothing.length = 5;
console.log(clothing)    // ["shoes", "shirts", "socks", "sweaters", empty]

clothing.length = 3;
console.log(clothing)    // ["shoes", "shirts", "socks"]

二、方法

1、concat

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

功能：

用于连接两个或多个数组，该方法不会改变现有的数组，而是返回被连接数组的一个副本。
如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

参数：valueN（可选）：数组/值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝。

返回值：新的 Array 实例。

示例：

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = arr1.concat(arr2);

console.log(arr3);
// ["a", "b", "c", "d", "e", "f"]

2、join

arr.join([separator])

功能：

把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。
若省略了分隔符参数，则使用逗号作为分隔符。

参数：separator（可选）：指定一个字符串来分隔数组的每个元素。

返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

示例：

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// "Fire,Air,Water"

console.log(elements.join(''));
// "FireAirWater"

console.log(elements.join('-'));
// "Fire-Air-Water"

3、push 和 pop

3-1、push

arr.push(element1, ..., elementN)

功能：向数组的末尾添加一个或多个元素，并返回新的数组长度。

参数：elementN：被添加到数组末尾的元素。

返回值：当调用该方法时，新的 length 属性值将被返回。

示例：

const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');

console.log(count);   // 4
console.log(animals); // ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// 输出 ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

3-2、pop

arr.pop()

功能：

用于删除数组的最后一个元素，把数组长度减1，并返回被删除元素。
如果数组为空，则 pop() 不改变数组，并返回 undefined。

参数：无

返回值：从数组中删除的元素（当数组为空时返回 undefined）。

示例：

const plants = ['broccoli', 'cauliflower', 'kale', 'tomato'];

console.log(plants.pop());  // tomato
console.log(plants);        // ["broccoli", "cauliflower", "kale"]

const plant = [];
console.log(plant.pop());  // undefined
console.log(plant);        // []

4、unshift 和 shift

4-1、unshift

arr.unshift(element1, ..., elementN)

功能：

向数组的开头添加一个或更多元素，并返回新的数组长度。
该方法会改变原数组。

参数：无

返回值：当一个对象调用该方法时，返回其 length 属性值。

示例：

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));  // 5
console.log(array1);  // [4, 5, 1, 2, 3]

4-2、shift

arr.shift()

功能：

用于把数组的第一个元素从其中删除，并返回被移除的这个元素。
如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined。
该方法会改变原数组。

参数：无

返回值：从数组中删除的元素（如果数组为空则返回 undefined）。

示例：

const array1 = [1, 2, 3];
const firstElement = array1.shift();

console.log(firstElement);  // 1
console.log(array1);        // [2, 3]

const array2 = [];
const secondElement = array2.shift();

console.log(secondElement);  // undefined
console.log(array2);         // []

5、reverse

arr.reverse()

功能：

用于颠倒数组中元素的顺序。
该方法会改变原数组，不会创建新数组。

参数：无

返回值：颠倒后的数组。

示例：

const array1 = ['one', 'two', 'three'];

const reversed = array1.reverse();
console.log(reversed);  // ["three", "two", "one"]
console.log(array1);    // ["three", "two", "one"]

6、sort

arr.sort([compareFunction])

功能：

用于对数组的元素进行排序。
该排序直接修改原数组，不生成副本。
该方法接受一个可选参数，若未使用参数，将按字母顺序（字符编码的顺序）对数组元素进行排序。可以先把数组的元素都转换成字符串，以便进行比较。

参数：compareFunction（可选）：用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。

返回值：排序后的数组。数组已原地排序，并且不进行复制。

示例：

const months = ['March', 'Jan', 'Feb', 'Dec'];

console.log(months.sort()); // ["Dec", "Feb", "Jan", "March"]
console.log(months);        // ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];

console.log(array1.sort()); // [1, 100000, 21, 30, 4]
console.log(array1);        // [1, 100000, 21, 30, 4]

如果想按照其他标准进行排序，可以提供比较函数 compareFunction，该函数返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

如果 compareFunction(a, b) < 0 ，那么 a 会被排列到 b 之前；
如果 compareFunction(a, b) = 0 ，a 和 b 的相对位置不变；
如果 compareFunction(a, b) > 0 ，b 会被排列到 a 之前。

var numbers = [4, 2, 5, 1, 3];

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

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

7、slice

arr.slice([start[, end]])

功能：

截取原数组从 start 到 end 位置（不包含它）元素组成的子数组。
该方法返回一个新数组，不会修改原数组。
若未指定 end 参数，那么截取尾巴直到原数组最后一个元素（包含它）。

参数：

begin（可选）：从该索引开始提取原数组元素，如果为负数则从倒数第 n 位开始提取，如果省略则从索引 0 开始，如果超出数组长度则返回空数组。
end（可选）：在该索引处前提取原数组元素，如果为负数则从倒数第 n 位结束抽取，如果省略则提取到原数组末尾，如果大于数组长度也提取到原数组末尾。

返回值：一个含有被提取元素的新数组。

示例：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));    // ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4)); // ["camel", "duck"]

console.log(animals.slice(2, 5)); // ["camel", "duck", "elephant"]

console.log(animals.slice(-2));   // ["duck", "elephant"]

console.log(animals.slice(2, -1));// ["camel", "duck"]

console.log(animals);             // ['ant', 'bison', 'camel', 'duck', 'elephant']

8、splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

功能：

删除从 start 处开始的 deleteCount 个元素，用可选参数声明的一个或多个值来替换被删除的元素。
如果有删除元素，则返回被删元素组成的数组
如果没有删除元素，则返回空数组。
若参数只有 start，那么原数组将从 start 开始删除直至结尾。
该方法直接修改原数组。

参数：

start：修改的开始位置，如果为负数则从倒数第 n 位开始添加，如果超出数组长度则从数组末尾开始添加内容。
deleteCount（可选）：表示要移除的数组元素的个数，如果省略或值大于 start 之后元素的总数则从 start 后面的元素都将被删除，如果是 0 或负数则不移除元素。
item1, item2, ...（可选）：要添加进数组的元素，如果不指定，则 splice() 将只删除数组元素。

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

示例：

const arr1 = ['a', 'b', 'c', 'd'];
console.log(arr1.splice(1, 0, 'e')); // []
console.log(arr1);                   // ["a", "e", "b", "c", "d"]

const arr2 = ['a', 'b', 'c', 'd'];
console.log(arr2.splice(4, 1, 'f')); // []
console.log(arr2);                   // ["a", "b", "c", "d", "f"]

const arr3 = ['a', 'b', 'c', 'd'];
console.log(arr3.splice(2, 1));      // ["c"]
console.log(arr3);                   // ["a", "b", "d"]

const arr4 = ['a', 'b', 'c', 'd'];
console.log(arr4.splice(2));         // ["c", "d"]
console.log(arr4);                   // ["a", "b"]

9、map 和 forEach

9-1、map

arr.map(callback)

功能：返回一个新数组，新数组每个元素为执行回调函数的结果。

参数：

callback(currentValue[, index, array])：生成新数组元素的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、map 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。

示例：

const arr1 = [1, 4, 9, 16];

console.log(arr1.map(x => x * 2)) // [2, 8, 18, 32]
console.log(arr1);                // [1, 4, 9, 16]

console.log(arr1.map((a, b, c) => console.log(a, b, c)))
// 1   0  [1, 4, 9, 16]
// 4   1  [1, 4, 9, 16]
// 9   2  [1, 4, 9, 16]
// 16  3  [1, 4, 9, 16]

9-2、forEach

arr.forEach(callback)

功能：没有返回值，只是对数组的每个元素执行一次给定的函数。

参数：

callback(currentValue[, index, array])：为数组中每个元素执行的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、forEach 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：undefined。

示例：

const arr1 = [1, 4, 9, 16];
console.log(arr1.forEach(x => x * 2)) // undefined
console.log(arr1);                    // [1, 4, 9, 16]

const arr2 = ['a', 'b', 'c'];
arr2.forEach(element => console.log(element));
// a
// b
// c
arr2.forEach((x, y, z) => console.log(x, y, z));
// a   0   ["a", "b", "c"]
// b   1   ["a", "b", "c"]
// c   2   ["a", "b", "c"]
console.log(arr2);                    // ["a", "b", "c"]

10、filter

arr.filter(callback)

功能：返回一个新数组，新数组每个元素为符合回调函数条件的元素。

参数：

callback(currentValue[, index, array])：用来测试数组的每个元素的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、filter 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

示例：

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

console.log(words.filter(word => word.length > 6))  // ["exuberant", "destruction", "present"]
console.log(words);      // ["spray", "limit", "elite", "exuberant", "destruction", "present"]

11、some 和 every

11-1、some

arr.some(callback)

功能：返回一个 boolean，判断是否有元素是否符合回调函数的条件。

参数：

callback(currentValue[, index, array])：用来测试每个元素的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、some 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：数组中有至少一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。

示例：

const arr1 = [1, 2, 3, 4, 5];

console.log(arr1.some((item) => item % 2 === 0))  // true
console.log(arr1);                                // [1, 2, 3, 4, 5]

11-2、every

arr.every(callback)

功能：返回一个 boolean，判断每个元素是否都符合回调函数的条件。

参数：

callback(currentValue[, index, array])：用来测试每个元素的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、every 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

示例：

const arr1 = [1, 30, 49, 29, 10, 13];

console.log(arr1.every((val) => val < 40)); // false
console.log(arr1)                           // [1, 30, 49, 29, 10, 13]

12、includes

arr.includes(valueToFind[, fromIndex])

功能：返回一个 boolean，判断数组是否包含一个指定值（区分大小写）。

参数：

valueToFind：需要查找的元素值。
fromIndex（可选）：从该索引处开始查找，如果为负值则从末尾开始往前跳，默认为 0。

返回值：如果在数组中找到了则返回 true，否则返回 false。

示例：

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));    // true
console.log(pets.includes('cat', 1)); // false
console.log(pets.includes('at'));     // false
console.log(pets);                    // ['cat', 'dog', 'bat']

13、find 和 findIndex

13-1、find

arr.find(callback[, thisArg])

功能：返回数组中满足提供函数的第一个元素的值。如果没有满足的值则返回 undefined。

参数：

callback(currentValue[, index, array])：在数组每一项上执行的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、find 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

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

示例：

const arr1 = [5, 12, 8, 109, 44];

console.log(arr1.find(element => element > 10))   // 12
console.log(arr1.find(element => element > 110))  // undefined
console.log(arr1);                                // [5, 12, 8, 109, 44]

13-2、findIndex

arr.findIndex(callback[, thisArg])

功能：返回数组中满足提供函数的第一个元素的索引。若没有找到对应元素则返回 -1。

参数：

callback(currentValue[, index, array])：在数组每一项上执行的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、findIndex 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回 -1

示例：

const arr1 = [5, 12, 8, 109, 44];

console.log(arr1.findIndex(element => element > 10))   // 1
console.log(arr1.findIndex(element => element > 110))  // -1
console.log(arr1);                                     // [5, 12, 8, 109, 44]

14、reduce 和 reduceRight

14-1、reduce

arr.reduce(callback)

功能：对数组中的每个元素执行一个提供的 reducer 函数，将其结果汇总为单个返回值。

参数：

callback(accumulator, currentValue[, index, array])：执行数组中每个值的函数，使用四个参数：累计器累计回调的返回值、数组中正在处理的当前元素、数组中正在处理的当前元素的索引、map 方法调用的数组。
initialValue（可选）：传入的初始值，如果没有提供则将使用数组中的第一个元素。

返回值：函数累计处理的结果。

示例：

const arr1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(arr1.reduce(reducer));    // 10

// 5 + 1 + 2 + 3 + 4
console.log(arr1.reduce(reducer, 5)); // 15

console.log(arr1)                     // [1, 2, 3, 4]

14-2、reduceRight

arr.reduceRight(callback)

功能：接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

参数：

callback(accumulator, currentValue[, index, array])：执行数组中每个值的函数，使用四个参数：累计器累计回调的返回值、数组中正在处理的当前元素、数组中正在处理的当前元素的索引、map 方法调用的数组。
initialValue（可选）：传入的初始值，如果没有提供则将使用数组中的第一个元素。

返回值：函数累计处理的结果。

示例：

const arr1 = [1, 2, 3, 10];
const reducer = (previousValue, currentValue) => previousValue - currentValue;

console.log(arr1.reduce(reducer))       // -14
console.log(arr1.reduceRight(reducer))  // 4
console.log(arr1);                      // [1, 2, 3, 10]

15、from

Array.from(arrayLike[, mapFn[, thisArg]])

功能：将一个类数组或可迭代对象转为数组，并返回这个新数组。

参数：

arrayLike：想要转换成数组的伪数组对象或可迭代对象。
mapFn（可选）：如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg（可选）：执行回调函数 mapFn 时 this 对象。

返回值：一个新的数组实例。

示例：

console.log(Array.from('foo'));                 // ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)); // [2, 4, 6]

16、of

Array.of(element0[, element1[, ...[, elementN]]])

功能：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为 7 的空数组（注意：这是指一个有 7 个空位(empty)的数组，而不是由 7 个 undefined 组成的数组）。

参数：elementN：任意个参数，将按顺序成为返回数组中的元素。

返回值：新的 Array 实例。

示例：

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

17、fill

arr.fill(value[, start[, end]])

功能：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

参数：

value：用来填充数组元素的值。
start（可选）：起始索引，默认为 0。
end（可选）：终止索引，默认值为 this.length。

返回值：修改后的数组。

示例：

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

console.log(arr1.fill(0, 2, 4));  // [1, 2, 0, 0]
console.log(arr1.fill(5, 1));     // [1, 5, 5, 5]
console.log(arr1.fill(6));        // [6, 6, 6, 6]

18、flat 和 flatMap

18-1、flat

var newArray = arr.flat([depth])

功能：按指定层数减少嵌套深度，并返回这个新数组。

参数：depth（可选）：降维层数，默认为 1。

返回值：一个包含将数组与子数组中所有元素的新数组。

示例：

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());     // [0, 1, 2, 3, 4]
console.log(arr1);            // [0, 1, 2, [3, 4]]

const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));    // [0, 1, 2, [3, 4]]

18-2、flatMap

arr.flatMap(callback)

功能：首先使用映射函数映射每个元素，然后将结果按一层 depth 压缩成一个新数组。

参数：

callback(currentValue[, index, array])：可以生成一个新数组中的元素的函数，使用三个参数：数组中正在处理的当前元素、数组中正在处理的当前元素的索引、flatMap 方法调用的数组。
thisArg（可选）：执行 callback 函数时值被用作 this。

返回值：一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

示例：

var arr1 = [1, 2, 3, 4];

console.log(arr1.map(x => [x * 2]))       // [[2], [4], [6], [8]]
console.log(arr1.flatMap(x => [x * 2]))   // [2, 4, 6, 8]
console.log(arr1.flatMap(x => [[x * 2]])) // [[2], [4], [6], [8]]
console.log(arr1)                         // [1, 2, 3, 4]

一、属性​

1、length​

二、方法​

1、concat​

2、join​

3、push 和 pop​

3-1、push​

3-2、pop​

4、unshift 和 shift​

4-1、unshift​

4-2、shift​

5、reverse​

6、sort​

7、slice​

8、splice​

9、map 和 forEach​

9-1、map​

9-2、forEach​

10、filter​

11、some 和 every​

11-1、some​

11-2、every​

12、includes​

13、find 和 findIndex​

13-1、find​

13-2、findIndex​

14、reduce 和 reduceRight​

14-1、reduce​

14-2、reduceRight​

15、from​

16、of​

17、fill​

18、flat 和 flatMap​

18-1、flat​

18-2、flatMap​

一、属性

1、length

二、方法

1、concat

2、join

3、push 和 pop

3-1、push

3-2、pop

4、unshift 和 shift

4-1、unshift

4-2、shift

5、reverse

6、sort

7、slice

8、splice

9、map 和 forEach

9-1、map

9-2、forEach

10、filter

11、some 和 every

11-1、some

11-2、every

12、includes

13、find 和 findIndex

13-1、find

13-2、findIndex

14、reduce 和 reduceRight

14-1、reduce

14-2、reduceRight

15、from

16、of

17、fill

18、flat 和 flatMap

18-1、flat

18-2、flatMap