数组的解构
<h3>数组</h3>
<h4>一：检测数组的两种方式：</h4>
<h5>第一种instanceof Array 来检测数组</h5>
<pre><code>if(value instanceof Array){
//数组操作
}</code></pre>
<h5>第二种:使用Array.isArray()来检测数组</h5>
<pre><code>if(Array.isArray(value)){
//数组
}</code></pre>
<h2>1. 扩展运算符</h2>
<blockquote>
<p>扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。</p>
<pre><code class="language-javascript"></code></pre>
</blockquote>
<pre><code class="language-javascript">console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]</code></pre>
<p>该运算符主要用于函数调用。</p>
<pre><code class="language-javascript">function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
</code></pre>
<p>上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。</p>
<p>扩展运算符与正常的函数参数可以结合使用，非常灵活。</p>
<pre><code class="language-javascript">function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);</code></pre>
<p>扩展运算符后面还可以放置表达式。</p>
<pre><code class="language-javascript">const arr = [
...(x > 0 ? ['a'] : []),
'b',
];</code></pre>
<p>如果扩展运算符后面是一个空数组，则不产生任何效果。</p>
<pre><code class="language-javascrpt">[...[], 1]
// [1]</code></pre>
<p>注意，扩展运算符如果放在括号中，JavaScript 引擎就会认为这是函数调用，否则就会报错。</p>
<pre><code class="language-javascript">(...[1,2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1,2]))
// Uncaught SyntaxError: Unexpected number
//上面两种情况都会报错，因为扩展运算符所在的括号不是函数调用，而console.log(...[1, 2])就不会报错，因为这时是函数调用。</code></pre>
<h4>替代函数的 apply 方法</h4>
<blockquote>
<p>由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了</p>
</blockquote>
<pre><code class="language-javascript">// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
</code></pre>
<p>下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。</p>
<pre><code class="language-javascript">// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);</code></pre>
<p>上面代码中，由于 JavaScript 不提供求数组最大元素的函数，所以只能套用Math.max函数，将数组转为一个参数序列，然后求最大值。有了扩展运算符以后，就可以直接用Math.max了。</p>
<p>另一个例子是通过push函数，将一个数组添加到另一个数组的尾部。</p>
<pre><code class="language-javascript">// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);</code></pre>
<h4>扩展运算符的应用</h4>
<p><strong>（1） 复制数组</strong>
数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。</p>
<pre><code class="language-javascript">//复制数组
const a1 = [1,2];
const a2 = a1.concat();
a2[0] = 2;
a1 //->[2,2]
//上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。
ES5只能变通方法来复制数组---克隆。
const a1 = [1,2];
const a2 = a1.concat();
a2[0] = 2;
a1 //->[1,2]
Es6克隆
const a1 = [1,2];
//写法一
const a2 = [...a1];
//写法二
const [...a2] = a1;
//上面两种方法，a2都是a1的克隆</code></pre>
<p><strong>（2） 合并数组</strong></p>
<pre><code class="language-javascript">const arr1 = ['a','b'];
const arr2 = ['c'];
const arr3 = ['d','e'];
//ES5的合并数组
arr1.concat(arr2,arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
//ES6的合并数组
[...arr1,...arr2,...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
//不过这两种方法都是浅拷贝
const a1 = [{foo:1}];
conat a2 = [{bar:2}];
const a3 = a1.concat(a2);
const a4 = [...a1,...a2];
a3[0] === a1[0];//true
a4[0] === a1[0];//true
//a3和a4使用两种不同的方法合并而成的新数组，但是他们的成员都是对原数组成员的引用，这就是浅拷贝。
//注意：如果修改了原数组的成员，会同步反映到新数组。
</code></pre>
<p><strong>（3）与解构赋值的结合</strong>
扩展运算符可以与解构赋值结合起来，用于生成新数组。</p>
<pre><code class="language-javascript">// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list;</code></pre>
<p>下面是另一些例子</p>
<pre><code class="language-javascript">const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []</code></pre>
<p><strong>!!!如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
</strong></p>
<pre><code class="language-javascript">const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错</code></pre>
<h2>2. Array from()</h2>
<h2>3. Array.of()</h2>
<h2>4. 数组的实例 copyWithin()</h2>
<h2>5. 数组实例的 find()和findIndex()</h2>
<h2>6. 数组实例的fill()</h2>