文章目录
  1. 1. Array.from()
  2. 2. Array.isArray()
  3. 3. Array.of()
  4. 4. Array.prototype.concat()
  5. 5. Array.prototype.copyWithin()
  6. 6. Array.prototype.entries()
  7. 7. Array.prototype.every()
  8. 8. Array.prototype.fill()
  9. 9. Array.prototype.filter()
  10. 10. Array.prototype.find()
  11. 11. Array.prototype.findIndex()
  12. 12. Array.prototype.flat()
  13. 13. Array.prototype.flatMap()
  14. 14. Array.prototype.forEach()
  15. 15. Array.prototype.includes()
  16. 16. Array.prototype.indexOf()
  17. 17. Array.prototype.join()
  18. 18. Array.prototype.keys()

每个方法都有相应的描述、语法、参数、返回值、注意项(可选)、例子(可选)。
语法中的[]里面中的内容表示参数为可选参数。

原文出自:https://fxss5201.github.io/practical-code-snippet/js/javascript/Array.html

Array.from()

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

语法

1
new_array = Array.from(arrayLike[, callback(element[, index[, array]])[, thisArg]]);

参数

  1. arrayLike:类似数组或可迭代对象。
  2. callback:新数组中的每个元素都执行的回调函数,效果等同于:Array.from(arrayLike).map(callback(element[, index[, array]])[, thisArg])
    1. element:当前在数组中处理的元素。
    2. index:当前在数组中处理的元素的索引。
    3. array:当前数组。
  3. thisArg:执行回调函数mapFn时的this对象。

返回值

  1. new_array:返回的新数组。

例子

1
2
Array.from('foo'); // ["f", "o", "o"]
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

Array.isArray()

描述:用于确定传递的值是否是一个数组。

语法

1
new_boolean = Array.isArray(obj);

参数

  1. obj:需要检测的值。

返回值

  1. new_boolean:如果检测的值是数组,则返回true,否则返回false

Array.of()

描述:传入可变数量的参数,生成相应的数组。

语法

1
new_array = Array.of(element0[, element1[, ...[, elementN]]]);

参数

  1. element0~elementN:任意个参数,将按顺序成为返回数组中的元素。

返回值

  1. new_array:返回的新数组。

例子

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

Array.prototype.concat()

描述:用于合并两个或多个数组。

语法

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

参数

  1. old_array/value1~valueN:将数组或者值合并为新的数组。

返回值

  1. new_array:返回的新数组。

Array.prototype.copyWithin()

描述:复制数组中的一部分值到某个位置,数组长度不变,并返回,会修改原数组。

语法

1
array = old_array.copyWithin(target[, start[, end]]);

参数

  1. old_array:原数组。
  2. target:将复制的值安放的位置,索引以0开始,如果指定负数,将从数组的末尾开始往回算。
  3. start:复制元素的起始位置,索引以0开始,如果指定负数,将从数组的末尾开始往回算。默认值为:0。
  4. end:复制元素的起始位置,索引以0开始,如果指定负数,将从数组的末尾开始往回算。默认值为:old_array.length

返回值

  1. array:在原数组上复制粘贴,然后将其返回。

例子

1
[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

Array.prototype.entries()

描述:返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

语法

1
new_array_iterator = old_array.entries();

参数

  1. old_array:原数组。

返回值

  1. new_array_iterator:一个新的Array迭代器对象。可以通过new_array_iterator.next().value遍历迭代器取得原数组的[key,value]

例子

1
2
3
4
5
6
7
8
9
10
11
var iterator = ['a', 'b', 'c'].entries();
iterator.next().value; // [0, "a"]
iterator.next().value; // [1, "b"]

var iterator1 = ['a', 'b', 'c'].entries();
for (let e of iterator1) {
console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

Array.prototype.every()

描述:测试数组的所有元素是否都通过了指定函数的测试。

语法

1
boolean = old_array.every(callback[, thisArg]);

参数

  1. old_array:原数组。
  2. callback:用来测试每个元素的函数。
  3. thisArg:执行callback时使用的this值。

返回值

  1. boolean:返回一个Boolean值,every方法为数组中的每个元素执行一次callback函数,直到找到一个使callback返回falseFalsy的元素。如果发现了一个这样的元素,every方法将会立即返回false。否则,callback为每一个元素返回trueevery方法才会返回true

注意项

  1. callback只会为已经被赋值的索引调用,不会被删除或从来没被赋值的索引调用。
  2. every不会改变原数组。
  3. every遍历的元素范围在第一次调用callback之前就已经确定了。在调用every之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改,则他们传入callback的值是 every访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
  4. 空数组返回true

例子

1
2
[1, 2, 3, 4, 5].every(x => x > 0); // true
[1, 2, 3, 4, 5].every(x => x > 2); // false

Array.prototype.fill()

描述:用一个固定值填充数组中从起始索引到终止索引之间的全部元素,不包括终止索引。

语法

1
array = old_array.fill(value[, start[, end]]);

参数

  1. old_array:原数组。
  2. value:用来填充数组元素的值。
  3. start:起始索引,索引以0开始,如果指定负数,将从数组的末尾开始往回算。默认值为:0。
  4. end:终止索引,索引以0开始,如果指定负数,将从数组的末尾开始往回算。默认值为:old_array.length

返回值

  1. array:修改后的数组。

例子

1
2
[1, 2, 3, 4, 5].fill(0, 2, 4); // [1, 2, 0, 0, 5]
[1, 2, 3, 4, 5].fill(0, -3, 4); // [1, 2, 0, 0, 5]

Array.prototype.filter()

描述:创建一个新数组, 其包含通过所提供函数测试的所有元素。

语法

1
new_array = old_array.filter(callback(element[, index[, array]])[, thisArg]);

参数

  1. old_array:原数组。
  2. callback:用来测试数组的每个元素的函数,返回trueTruthy则测试元素会被添加到返回的新数组,falseFalsy则不会。
    1. element:当前在数组中处理的元素。
    2. index:当前在数组中处理的元素的索引。
    3. array:当前数组。
  3. thisArg:执行callback时使用的this值。

返回值

  1. new_array:所有通过测试的元素组成的新数组,如果没有通过测试的元素则返回空数组。

注意项

  1. filter遍历的元素范围在第一次调用callback之前就已经确定了。在调用filter之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改,则他们传入callback的值是filter访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

例子

1
[1, 2, 3, 4, 5].filter(x => x > 2); // [3, 4, 5]

Array.prototype.find()

描述:返回通过测试的函数的第一个元素的值,否则返回undefined

语法

1
elementN = old_array.find(callback(element[, index[, array]])[, thisArg]);

参数

  1. old_array:原数组。
  2. callback:用来测试数组的每个元素的函数,直至callback返回true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回undefined
    1. element:当前在数组中处理的元素。
    2. index:当前在数组中处理的元素的索引。
    3. array:当前数组。
  3. thisArg:执行callback时使用的this值。

返回值

  1. elementN:通过测试的函数的第一个元素的值,否则返回undefined

注意项

  1. 空数组返回undefined
  2. callback函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引(稀疏数组也会全部调用)。
  3. find遍历的元素范围在第一次调用callback之前就已经确定了。在调用find之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改,则他们传入callback的值是find访问到他们那一刻的值。被删除的元素仍旧会被访问到。

例子

1
[1, 2, 3, 4, 5].find(x => x > 2); // 3

Array.prototype.findIndex()

描述:返回通过测试的函数的第一个元素的索引,否则返回-1。

语法

1
number = old_array.findIndex(callback(element[, index[, array]])[, thisArg]);

参数

  1. old_array:原数组。
  2. callback:用来测试数组的每个元素的函数,直至callback返回true。当找到了这样一个元素后,该方法会立即返回这个元素的索引,否则返回-1。
    1. element:当前在数组中处理的元素。
    2. index:当前在数组中处理的元素的索引。
    3. array:当前数组。
  3. thisArg:执行callback时使用的this值。

返回值

  1. number:通过测试的函数的第一个元素的索引,否则返回-1。

注意项

  1. 空数组返回-1。
  2. callback函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引(稀疏数组也会全部调用)。
  3. findIndex遍历的元素范围在第一次调用callback之前就已经确定了。在调用findIndex之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改,则他们传入callback的值是findIndex访问到他们那一刻的值。被删除的元素仍旧会被访问到。

例子

1
[1, 2, 3, 4, 5].findIndex(x => x > 2); // 2

Array.prototype.flat()

描述:会递归到指定深度将所有子数组连接,并返回一个新数组。

语法

1
new_array = old_array.flat(depth);

参数

  1. old_array:原数组。
  2. depth:指定嵌套数组中的结构深度,默认值为1。

返回值

  1. new_array:将子数组连接起来的新数组。

例子
一般可用于将多维数组转化为一维数组,例如:

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

Array.prototype.flatMap()

描述:首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与先执行相应的map函数在执行flat()效果相同,除了效率略微高一些。

语法

1
new_array = old_array.flatMap(callback(element[, index[, array]])[, thisArg]);

参数

  1. old_array:原数组。
  2. callback:可以生成一个新数组中的元素的函数。
    1. element:当前在数组中处理的元素。
    2. index:当前在数组中处理的元素的索引。
    3. array:当前数组。

返回值

  1. new_array:一个新的数组,其中每个元素都是回调函数的结果。

例子

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

Array.prototype.forEach()

描述:对数组的每个元素执行一次提供的函数。

语法

1
old_array.forEach(callback(element[, index[, array]])[, thisArg]);

参数

  1. old_array:原数组。
  2. callback:为数组中每个元素执行的函数。
    1. element:当前在数组中处理的元素。
    2. index:当前在数组中处理的元素的索引。
    3. array:当前数组。

返回值undefined

注意项

  1. forEach遍历的元素范围在第一次调用callback之前就已经确定了。在调用forEach之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改,则他们传入callback的值是forEach访问到他们那一刻的值。被删除的元素将不会被访问到。
  2. 没有办法中止或者跳出forEach循环,除了抛出一个异常。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var a = [1, 2, 3, 4].forEach(x => console.log(x * 2));
// 2
// 4
// 6
// 8

console.log(a); // undefined

/** 如果数组在迭代时被修改了,则其他元素会被跳过。
* 数组到two的时候移除第一个元素,所以每个位置上的元素都会往前移动一位,并且当前index为2,所以就得到对应值为four
*/
var words = ["one", "two", "three", "four"];
words.forEach(function(word, index) {
console.log('No' + index + '. ' + word);
if (word === "two") {
words.shift();
}
});
// No0. one
// No1. two
// No2. four

Array.prototype.includes()

描述:用来判断一个数组是否包含一个指定的值,如果包含则返回true,否则返回false

语法

1
boolean = old_array.includes(searchElement[, fromIndex]);

参数

  1. old_array:原数组。
  2. searchElement:需要查找的元素值。
  3. fromIndex:从该索引处开始查找searchElement。如果为负值,则按升序从array.length - fromIndex的索引开始搜索。默认为 0。

返回值

  1. boolean:如果包含则返回true,否则返回false

例子

1
2
3
4
5
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

Array.prototype.indexOf()

描述:返回在数组中找到给定元素的第一个索引,如果不存在,则返回-1。

语法

1
number = old_array.indexOf(searchElement[, fromIndex]);

参数

  1. old_array:原数组。
  2. searchElement:需要查找的元素值。
  3. fromIndex:从该索引处开始查找searchElement。如果为负值,则按升序从array.length - fromIndex的索引开始搜索。默认为 0。

返回值

  1. number:返回在数组中找到给定元素的第一个索引,如果不存在,则返回-1。

注意项

  1. indexOf使用严格等于进行判断(仅当两个操作数的类型相同且值相等才为true)。

例子

1
2
[2, 5, 9].indexOf(2); // 0
[2, 5, 9].indexOf('2'); // -1

Array.prototype.join()

描述:将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。

语法

1
string = old_array.join([separator]);

参数

  1. old_array:原数组。
  2. separator:数组元素组合成字符串时之间的分隔符,默认为,,如不希望使用分隔符,则指定''

返回值

  1. string:所有元素连接成的字符串。

注意项

  1. 如果元素是undefined或者null,则会转化成空字符串''

例子

1
2
3
4
5
['a', 'b', 'c'].join();        // "a,b,c"
['a', 'b', 'c'].join(''); // "abc"
['a', 'b', 'c'].join('-'); // "a-b-c"

['a', undefined, null].join(); // "a,,"

Array.prototype.keys()

描述:返回一个包含数组中每个索引键的Array Iterator对象。

语法

1
new_iterator = old_array.keys();

参数

  1. old_array:原数组。

返回值

  1. new_iterator:返回一个包含数组中每个索引键的Array Iterator对象。

注意项

  1. 索引迭代器会包含那些没有对应元素的索引。

例子

1
2
3
4
5
6
7
8
9
var iterator = ['a', 'b', 'c'].keys();
iterator.next(); // {value: 0,done: false}
iterator.next(); // {value: 1,done: false}
iterator.next(); // {value: 2,done: false}
iterator.next(); // {value: undefined,done: true}

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr); // ["0", "2"]
var denseKeys = [...arr.keys()]; // [0, 1, 2]
文章目录
  1. 1. Array.from()
  2. 2. Array.isArray()
  3. 3. Array.of()
  4. 4. Array.prototype.concat()
  5. 5. Array.prototype.copyWithin()
  6. 6. Array.prototype.entries()
  7. 7. Array.prototype.every()
  8. 8. Array.prototype.fill()
  9. 9. Array.prototype.filter()
  10. 10. Array.prototype.find()
  11. 11. Array.prototype.findIndex()
  12. 12. Array.prototype.flat()
  13. 13. Array.prototype.flatMap()
  14. 14. Array.prototype.forEach()
  15. 15. Array.prototype.includes()
  16. 16. Array.prototype.indexOf()
  17. 17. Array.prototype.join()
  18. 18. Array.prototype.keys()