全部 / 前端 / 技术 · 2022年4月19日 0

8 – Array 的实例方法一

广告位招租 (vx: ghostcode, 备注:网站广告)

原文地址:https://dev.to/bhagatparwinder/array-instance-methods-59a2

Array 的实例方法存在于 prototype 上。

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

你也可以使用数组连接一个值:

const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric); // ["a", "b", "c", 1, 2, 3]

也可以连接一个嵌套的数组:

const num1 = [[1]];
const num2 = [2, [3]];
const numbers = num1.concat(num2);

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

// modify the first element of num1
num1[0].push(4);
console.log(numbers); // [[1, 4], 2, [3]]

entries

使用对象上的 entrieskeysvalues 方法很常见,但是数组也支持它们。

entries 方法返回 key/value 的 iterator

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

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

keys

keys 返回 iterator 的键。

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

console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2

values

values 返回 iterator 的值。

const array2 = ["a", "b", "c"];
const i = array2.values();

console.log(i.next().value); // a
console.log(i.next().value); // b
console.log(i.next().value); // c

includes

includes 方法判断数组是否包含一个指定的元素,根据结果返回 true 和 false。

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

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

includes 方法还包含第二个参数:index,此参数使得 includes 方法检测给定值的下标是否大于或等于给定的下标。

let example = ["a", "b", "c"]

example.includes("b", 3); // false
example.includes("b", 100); // false
example.includes("b", 1); // true

indexOf

indexOf 返回数组中给定元素的下标,若不存在返回 -1 。ES6 之前用来检测数组中是否存在某个值,没有特殊需求现在一般使用 includes 方法,除非你想知道某个元素的下标。

var array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

findIndex

到这里,你已经学到了 indexOf 和 includes 来寻找一个元素或下标,findIndex 方法类似。它返回第一个满足回调函数或检测函数的元素下标。

我建议 indexOf 用在原始数据类型上:strings、numbers 或者 booleans,而 findIndex 则用在非原始类型上:objects。

const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
const index = fruits.findIndex(fruit => fruit === "blueberries");

console.log(index); // 3
console.log(fruits[index]); // blueberries

find

find 方法返回数组中第一个满足条件的值, find 返回的是值而 findIndex 返回的是下标。

const array = [7, 33, 47, 99, 2, 103, 79];
const found = array.find(element => element > 10);
console.log(found); // 33

join

join 方法是一个使用频率很高的方法,它返回一个数组中所有的元素连接成的字符串。你可以使用一个特定的分隔符来连接,默认情况下分隔符是 ,

const fruits = ["Apple", "Banana", "Raspberry"];

console.log(fruits.join()); // Apple,Banana,Raspberry
console.log(fruits.join("")); // AppleBananaRaspberry
console.log(fruits.join("|")); // Apple|Banana|Raspberry