15+ Javascript 中的数组方法

什么是 JS 中的数组?

Array 对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员。

声明数组

我们可以用两种不同的方式声明数组。

使用新数组

使用 new Array,我们可以指定我们希望存在于数组中的元素,如下所示:

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fruits</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-text-color)">Array</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Apple</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Banana</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">fruits</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>

数组字面量表示法

使用数组文字声明,我们指定数组将具有的值。如果我们不声明任何值,则数组将为空。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// 'fruits' array created using array literal notation.</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fruits</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Apple</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Banana</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">fruits</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>

Javascript 数组方法

以下是 Array 对象的方法列表及其描述。

1.forEach

forEach() 方法为每个数组元素执行一次提供的函数。

forEach() 为数组中的每个元素按索引升序调用一次提供的 callbackFn 函数。它不会为已删除或未初始化的索引属性调用。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">forEach</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">callback</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">thisObject</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">a</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">b</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">c</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">forEach</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">element</span><span style="color:var(--syntax-text-color)">));</span>

<span style="color:var(--syntax-comment-color)">// expected output: "a"</span>
<span style="color:var(--syntax-comment-color)">// expected output: "b"</span>
<span style="color:var(--syntax-comment-color)">// expected output: "c"</span>
</code></span></span></span>

2.地图

Array.map() 方法允许您遍历数组并使用回调函数修改其元素。然后将在数组的每个元素上执行回调函数。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">callback</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">thisObject</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">arr</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">6</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">modifiedArr</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">arr</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">function</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">element</span><span style="color:var(--syntax-text-color)">){</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-error-color)">*</span><span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">modifiedArr</span><span style="color:var(--syntax-text-color)">);</span> <span style="color:var(--syntax-comment-color)">// [9, 12, 15, 18]</span>
</code></span></span></span>

Array.map() 方法通常用于对元素应用一些更改,无论是乘以上面代码中的特定数字,还是执行您的应用程序可能需要的任何其他操作。

3.concat

在 JavaScript 中,concat() 是一个字符串方法,用于将字符串连接在一起。concat() 方法将一个或多个字符串值附加到调用字符串,然后将连接的结果作为新字符串返回。因为 concat() 方法是 String 对象的方法,所以必须通过 String 类的特定实例来调用它。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">concat</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">value1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">value2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">...,</span> <span style="color:var(--syntax-name-color)">valueN</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">a</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">b</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">c</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array2</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">d</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">e</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">f</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array3</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">concat</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array2</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array3</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array ["a", "b", "c", "d", "e", "f"]</span>
</code></span></span></span>

4.推

Javascript 数组 push() 方法将给定元素附加到数组的最后一个并返回新数组的长度。
当您想在数组末尾添加一个元素时,请使用 push()。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">push</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">element1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">...,</span> <span style="color:var(--syntax-name-color)">elementN</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">countries</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Nigeria</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Ghana</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Rwanda</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">countries</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">push</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Kenya</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">countries</span><span style="color:var(--syntax-text-color)">);</span> <span style="color:var(--syntax-comment-color)">// ["Nigeria","Ghana","Rwanda","Kenya"]</span>
</code></span></span></span>

5.流行音乐

pop() 方法从数组中删除最后一个元素并将该值返回给调用者。如果你在一个空数组上调用 pop(),它会返回 undefined。

Array.prototype.shift() 与 pop() 具有相似的行为,但应用于数组中的第一个元素。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pop</span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">plants</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">broccoli</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">cauliflower</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">cabbage</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">kale</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">tomato</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">plants</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pop</span><span style="color:var(--syntax-text-color)">());</span>
<span style="color:var(--syntax-comment-color)">// expected output: "tomato"</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">plants</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]</span>
</code></span></span></span>

6.拼接

splice() 方法是一种通用方法,用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">splice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">howMany</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">element1</span><span style="color:var(--syntax-text-color)">][,</span> <span style="color:var(--syntax-text-color)">...,</span> <span style="color:var(--syntax-name-color)">elementN</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fruits</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Banana</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Orange</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Apple</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Mango</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">fruits</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">splice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Lemon</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Kiwi</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span> <span style="color:var(--syntax-comment-color)">//Banana,Orange,Lemon,Kiwi,Apple,Mango</span>
</code></span></span></span>

7.切片

slice() 方法将数组的一部分的浅表副本返回到从开始到结束(不包括结束)选择的新数组对象中,其中开始和结束表示该数组中项目的索引。原始数组不会被修改。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">slice</span><span style="color:var(--syntax-text-color)">(</span> <span style="color:var(--syntax-name-color)">begin</span> <span style="color:var(--syntax-text-color)">[,</span><span style="color:var(--syntax-name-color)">end</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">animals</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">ant</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">bison</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">camel</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">duck</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">elephant</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">animals</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">slice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array ["camel", "duck", "elephant"]</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">animals</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">slice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array ["camel", "duck"]</span>
</code></span></span></span>

8.班次

shift() 是一个内置的 JavaScript 函数,用于从数组中删除第一个元素。shift() 函数直接修改您正在使用的 JavaScript 数组。shift() 返回您从数组中删除的项目。

shift() 函数删除索引位置 0 处的项目,并将未来索引号处的值向下移动 1。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">shift</span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">firstElement</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">shift</span><span style="color:var(--syntax-text-color)">();</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array [2, 3]</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">firstElement</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: 1</span>
</code></span></span></span>

9.unshift

unshift() 方法将给定值插入到类数组对象的开头。

Array.prototype.push() 与 unshift() 具有相似的行为,但应用于数组的末尾。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">unshift</span><span style="color:var(--syntax-text-color)">(</span> <span style="color:var(--syntax-name-color)">element1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">...,</span> <span style="color:var(--syntax-name-color)">elementN</span> <span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">unshift</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: 5</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array [4, 5, 1, 2, 3]</span>
</code></span></span></span>

10.加入

JavaScript 数组 join() 是一种内置方法,它通过连接数组的所有元素来创建并返回新字符串。join() 方法将数组的项连接到字符串中并返回该字符串。指定的分隔符将分隔元素数组。默认分隔符是逗号 (,)。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">join</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">separator</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">elements</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Fire</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Air</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Water</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">elements</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">join</span><span style="color:var(--syntax-text-color)">());</span>
<span style="color:var(--syntax-comment-color)">// expected output: "Fire,Air,Water"</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">elements</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">join</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: "FireAirWater"</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">elements</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">join</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">-</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: "Fire-Air-Water"</span>
</code></span></span></span>

11.每个

every() 方法测试数组中的所有元素是否通过提供的函数实现的测试。它返回一个布尔值。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">every</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">callback</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">thisObject</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">isBelowThreshold</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">currentValue</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">currentValue</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-literal-color)">40</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">30</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">39</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">29</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">10</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">13</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">every</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">isBelowThreshold</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: true</span>
</code></span></span></span>

12.过滤器

filter() 方法创建给定数组的一部分的浅表副本,过滤到给定数组中通过所提供函数实现的测试的元素。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">filter</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">callback</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">thisObject</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">words</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">spray</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">limit</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">elite</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">exuberant</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">destruction</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">present</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">result</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">words</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">filter</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">word</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">word</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">6</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">result</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array ["exuberant", "destruction", "present"]</span>
</code></span></span></span>

13.indexOf

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

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">indexOf</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">searchElement</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">fromIndex</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">beasts</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">ant</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">bison</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">camel</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">duck</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">bison</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">beasts</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">indexOf</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">bison</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: 1</span>

<span style="color:var(--syntax-comment-color)">// start from index 2</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">beasts</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">indexOf</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">bison</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: 4</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">beasts</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">indexOf</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">giraffe</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: -1</span>
</code></span></span></span>

14.减少

reduce() 方法按顺序对数组的每个元素执行用户提供的“reducer”回调函数,传入前一个元素的计算返回值。在数组的所有元素上运行 reducer 的最终结果是单个值。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">reduce</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">callback</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">initialValue</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-comment-color)">// 0 + 1 + 2 + 3 + 4</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">initialValue</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">sumWithInitial</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">reduce</span><span style="color:var(--syntax-text-color)">(</span>
  <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">previousValue</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">currentValue</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">previousValue</span> <span style="color:var(--syntax-error-color)">+</span> <span style="color:var(--syntax-name-color)">currentValue</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">initialValue</span>
<span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sumWithInitial</span><span style="color:var(--syntax-text-color)">)</span>
</code></span></span></span>

15.反向

reverse() 方法将数组反转并返回对同一数组的引用,第一个数组元素现在成为最后一个,最后一个数组元素成为第一个。换句话说,数组中的元素顺序将转向与前面所述相反的方向。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">reverse</span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">one</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">two</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">three</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">array1:</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: "array1:" Array ["one", "two", "three"]</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">reversed</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">reverse</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">reversed:</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">reversed</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: "reversed:" Array ["three", "two", "one"]</span>

<span style="color:var(--syntax-comment-color)">// Careful: reverse is destructive -- it changes the original array.</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">array1:</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: "array1:" Array ["three", "two", "one"]</span>
</code></span></span></span>

16.排序

sort() 方法对数组的元素进行就地排序,并返回对同一个数组的引用,该数组现在已排序。默认排序顺序是升序,将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">(</span> <span style="color:var(--syntax-name-color)">compareFunction</span> <span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">months</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">March</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Jan</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Feb</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Dec</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">months</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">months</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array ["Dec", "Feb", "Jan", "March"]</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">30</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">21</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">100000</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: Array [1, 100000, 21, 30, 4]</span>
</code></span></span></span>

17.toString

toString() 方法返回一个表示对象的字符串。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toString</span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">Dog</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">dog1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Dog</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Gabby</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">Dog</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">prototype</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toString</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">dogToString</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">dog1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toString</span><span style="color:var(--syntax-text-color)">());</span>
<span style="color:var(--syntax-comment-color)">// expected output: "Gabby"</span>
</code></span></span></span>

18.at

at() 方法接受一个整数值并返回该索引处的项目,允许正整数和负整数。负整数从数组中的最后一项开始倒数。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">at</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">)</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">12</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">8</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">130</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">44</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">index</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Using an index of </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)"> the item returned is </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">at</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">)}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: "Using an index of 2 the item returned is 8"</span>

<span style="color:var(--syntax-name-color)">index</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Using an index of </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)"> item returned is </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">at</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">)}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: "Using an index of -2 item returned is 130"</span>
</code></span></span></span>

19.查找

find() 方法返回提供的数组中满足提供的测试功能的第一个元素。如果没有值满足测试函数,则返回 undefined。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">find</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-text-color)">function</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-text-color)">currentValue</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">index</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">arr</span><span style="color:var(--syntax-text-color)">),</span><span style="color:var(--syntax-text-color)">thisValue</span><span style="color:var(--syntax-text-color)">)</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array1</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">12</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">8</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">130</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">44</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">found</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">array1</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">find</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">10</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">found</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// expected output: 12</span>
</code></span></span></span>

20.一些

some() 方法测试数组中的至少一个元素是否通过了提供的函数实现的测试。如果在数组中找到所提供函数为其返回 true 的元素,则返回 true;否则返回false。它不会修改数组。

<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">some</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">callback</span><span style="color:var(--syntax-text-color)">[,</span> <span style="color:var(--syntax-name-color)">thisObject</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span></span>
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">array</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-comment-color)">// checks whether an element is even</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">even</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">element</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-error-color)">%</span> <span style="color:var(--syntax-literal-color)">2</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">array</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">some</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">even</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// expected output: true</span></code></span></span></span>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值