前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >8 - Array 的实例方法一

8 - Array 的实例方法一

作者头像
前端黑板报
发布2022-06-13 14:09:58
2850
发布2022-06-13 14:09:58
举报
文章被收录于专栏:前端黑板报

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

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

concat

返回数组和另一数组或值连接返回的新数组。

代码语言:javascript
复制
const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = array1.concat(array2);

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

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

代码语言:javascript
复制
const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric); // ["a", "b", "c", 1, 2, 3]

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

代码语言:javascript
复制
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

代码语言:javascript
复制
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 的 键。

代码语言:javascript
复制
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 的值。

代码语言:javascript
复制
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。

代码语言:javascript
复制
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 方法检测给定值的下标是否大于或等于给定的下标。

代码语言:javascript
复制
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 方法,除非你想知道某个元素的下标。

代码语言:javascript
复制
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。

代码语言:javascript
复制
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 返回的是下标。

代码语言:javascript
复制
const array = [7, 33, 47, 99, 2, 103, 79];
const found = array.find(element => element > 10);
console.log(found); // 33

join

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

代码语言:javascript
复制
const fruits = ["Apple", "Banana", "Raspberry"];

console.log(fruits.join()); // Apple,Banana,Raspberry
console.log(fruits.join("")); // AppleBananaRaspberry
console.log(fruits.join("|")); // Apple|Banana|Raspberry
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-05-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端黑板报 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • concat
  • entries
  • keys
  • values
  • includes
  • indexOf
  • findIndex
  • find
  • join
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档