Array 方法的使用

186 阅读7分钟

Array.prototype.at()

const array1 = [5, 12, 8, 130, 44];

let index = 2;

console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// "Using an index of 2 the item returned is 8"

index = -2;

console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
// "Using an index of -2 item returned is 130"

Array.prototype.concat()

concat()  方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

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

Array.prototype.copyWithin()

copyWithin()  方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

const array1 = ['a', 'b', 'c', 'd', 'e'];

// 复制下标3到下标4结束(不包含下标4)的元素 到下标0
console.log(array1.copyWithin(0, 3, 4)); // ["d", "b", "c", "d", "e"]
const array1 = ['a', 'b', 'c', 'd', 'e'];

// 复制下标3到结尾的元素 到下标1
console.log(array1.copyWithin(1, 3)); // ["a", "d", "e", "d", "e"]

Array.prototype.entries()

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

将数组转换为链表

const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

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

Array.prototype.every()

every()  方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold)); // true

Array.prototype.fill()

fill()  方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

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

// 向数组中填充0 从下标2开始 到下标4结束
console.log(array1.fill(0, 2, 4)); // [1, 2, 0, 0]

// 向数组中填充5 从下标1开始
console.log(array1.fill(5, 1)); // [1, 5, 5, 5]

// 向数组中填充6
console.log(array1.fill(6)); // [6, 6, 6, 6]

Array.prototype.filter()

filter()  方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

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

const result = words.filter(word => word.length > 6);

console.log(result); // ["exuberant", "destruction", "present"]

Array.prototype.find()

find()  方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found); // 12

Array.prototype.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber)); // 3

Array.prototype.flat()

flat()  方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

扁平化嵌套数组

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

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

Array.prototype.flatMap()

flatMap()  方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与map连着深度值为1的flat几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

Array.prototype.forEach()

forEach()  方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// "a"
// "b"
// "c"

Array.from()

Array.from()  方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

console.log(Array.from('foo'));
// ["f", "o", "o"]

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

Array.prototype.includes()

includes()  方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

const array1 = [1, 2, 3];
console.log(array1.includes(2)); // true

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

const array2 = [1, 2, 3, 4];
// 查找数组中是否有元素2, 从下标2开始查找
console.log(array2.includes(2, 2)); // false

Array.prototype.indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison')); // 1
console.log(beasts.indexOf('giraffe')); // -1

// 从下标2开始查找
console.log(beasts.indexOf('bison', 2)); // 4
// 从下标2开始查找
console.log(beasts.indexOf('ant', 2)); // -1

Array.prototype.lastIndexOf()

lastIndexOf()  方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.lastIndexOf('bison')); // 1
console.log(beasts.lastIndexOf('giraffe')); // -1

// 从下标2开始查找
console.log(beasts.lastIndexOf('bison', 2)); // 4
// 从下标2开始查找
console.log(beasts.lastIndexOf('ant', 2)); // 0

Array.prototype.join()

join()  方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

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

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

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

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

Array.prototype.keys()

 keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

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

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

// 0
// 1
// 2

Array.prototype.map()

map()  方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

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

const map1 = array1.map(x => x * 2);

console.log(map1);
// [2, 8, 18, 32]

Array.prototype.pop()

pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

详见 数组 新增 | 替换 | 删除

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

console.log(plants.pop()); // "tomato"

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

plants.pop();

console.log(plants); // ["broccoli", "cauliflower", "cabbage"]

Array.prototype.push()

push()  方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

详见 数组 新增 | 替换 | 删除

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"]

Array.prototype.reduce()

reduce()  方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

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

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

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

Array.prototype.reduceRight()

reduceRight()  方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

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

Array.prototype.reverse()

reverse()  方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

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

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

// 此时array1 也发生了改变
console.log(array1); // ["three", "two", "one"]

Array.prototype.shift()

shift()  方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

详见 数组 新增 | 替换 | 删除

const array1 = [1, 2, 3];

const firstElement = array1.shift();

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

console.log(firstElement); // 1

Array.prototype.slice()

slice()  方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

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(1, 5)); // ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); // ["duck", "elephant"]
console.log(animals.slice(2, -1)); // ["camel", "duck"]

Array.prototype.some()

some()  方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

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

const even = (element) => element % 2 === 0;

console.log(array.some(even)); // true

Array.prototype.sort()

sort()  方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

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

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

// 用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
// firstEl 第一个用于比较的元素。
// secondEl 第二个用于比较的元素。
const array2 = [1, 30, 4, 21, 100000];
array2.sort(function(firstEl, secondEl) { return firstEl - secondEl; });
console.log(array2); // [1, 100000, 21, 30, 4]

Array.prototype.splice()

splice()  方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

详见 数组 新增 | 替换 | 删除

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months); // ["Jan", "Feb", "March", "April", "May"]

# Array.prototype.toLocaleString()

toLocaleString()  返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
// 第一个参数: locales[可选] 带有BCP 47语言标记的字符串或字符串数组
// 第二个参数: options[可选] 一个可配置属性的对象,对于数字 Number.prototype.toLocaleString(),对于日期Date.prototype.toLocaleString().
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });

console.log(localeString); // "1,a,12/21/1997, 2:12:00 PM",

Array.prototype.toString()

toString()  返回一个字符串,表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString()); // "1,2,a,1a"

Array.prototype.unshift()

unshift()  方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组 )

详见 数组 新增 | 替换 | 删除

const array1 = [1, 2, 3];

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

Array.prototype.values()

values()  方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

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

for (const value of iterator) {
  console.log(value);
}

// "a"
// "b"
// "c"