javascript Array方法总结(上篇)

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

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

Array.from()

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

语法

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:返回的新数组。

例子

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

Array.isArray()

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

语法

new_boolean = Array.isArray(obj);

参数

  1. obj:需要检测的值。

返回值

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

Array.of()

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

语法

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

参数

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

返回值

  1. new_array:返回的新数组。

例子

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

Array.prototype.concat()

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

语法

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

参数

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

返回值

  1. new_array:返回的新数组。

Array.prototype.copyWithin()

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

语法

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, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

Array.prototype.entries()

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

语法

new_array_iterator = old_array.entries();

参数

  1. old_array:原数组。

返回值

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

例子

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()

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

语法

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, 3, 4, 5].every(x => x > 0); // true
[1, 2, 3, 4, 5].every(x => x > 2); // false

Array.prototype.fill()

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

语法

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, 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()

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

语法

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, 2, 3, 4, 5].filter(x => x > 2); // [3, 4, 5]

Array.prototype.find()

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

语法

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, 2, 3, 4, 5].find(x => x > 2); // 3

Array.prototype.findIndex()

描述:返回通过测试的函数的第一个元素的索引,否则返回-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, 2, 3, 4, 5].findIndex(x => x > 2); // 2

Array.prototype.flat()

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

语法

new_array = old_array.flat(depth);

参数

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

返回值

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

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

[[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()效果相同,除了效率略微高一些。

语法

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

参数

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

返回值

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

例子

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()

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

语法

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循环,除了抛出一个异常。

例子

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

语法

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].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。

语法

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

参数

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

返回值

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

注意项

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

例子

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

Array.prototype.join()

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

语法

string = old_array.join([separator]);

参数

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

返回值

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

注意项

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

例子

['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对象。

语法

new_iterator = old_array.keys();

参数

  1. old_array:原数组。

返回值

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

注意项

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

例子

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]

你可能感兴趣的:(JavaScript,web开发录)