ES6 のスプレッド演算子について話しましょう

この記事では、javascript に関する関連知識を提供します。主に展開演算子に関する関連問題を紹介します。S6 の展開演算子は非常に単純な構文です。3 つの要素を使用します。ドット記号は「...」を意味します。 」。配列をカンマ区切りのパラメータ列に変換することができますので、見ていきましょう。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

ES6 の拡張オペレーター、その構文は非常に単純で、3 つのピリオドを使用して「...」を表します。配列をカンマ区切りのパラメーターのシーケンスに変換できます。

反復可能オブジェクトを個々の要素に展開します。いわゆる反復可能オブジェクトとは、for の ループを使用して走査できるオブジェクト (配列、文字列、# # など) です。 #Map、Set、DOM ノードなど。

基本構文

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

この演算子は主に関数呼び出しに使用されます

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

上記のコードでは、

array.push(...items)および add(...numbers)これら 2 行は両方とも関数呼び出しであり、両方ともスプレッド演算子を使用します。この演算子は、配列をパラメータのシーケンスに変換します。

式は展開演算子の後に置くこともできます

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

展開演算子の後に空の配列が続いた場合、効果はありません。

[...[], 1]
// [1]

スプレッド演算子には他にも多くの用途があります...

1. 配列を置換する適用メソッド

Math.max() 関数を使用して最大値を取得する方法は次のとおりです。

const m = Math.max(1, 2, 3); //结果为3

Apply メソッドを Math と組み合わせて使用​​します。 max():

ただし、配列内の最大値を計算したい場合は、明らかに配列を Math.max() のパラメータとして直接使用することはできません。展開する必要があります。それ。 ES6 より前は、適用とプロセスを組み合わせる必要もありました:

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}

console.log(max(arr));

ES6 はスプレッド演算子 (...) を使用して簡単に拡張できます。上記の例は次のようになります:

var arr = [2, 4, 8, 6, 0];
console.log(Math.max(...arr));  // 3

II , Application of展開演算子

1. 配列の結合

展開演算子は、配列を結合する新しい方法を提供します

// ES5 apply 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1   [0, 1, 2, 3, 4, 5]

スプレッド演算子を使用すると、配列をパラメータ リストに簡単に展開できます

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true

上記のコードでは、

a3 と a4 は 2 つの異なるメソッドを使用します。新しい配列はマージされますが、 members は元の配列メンバーへの参照であり、これは浅いコピーです。参照が指す値が変更されると、新しい配列に同期的に反映されます。

注: これら 2 つのメソッドは浅いコピーであるため、使用する場合は注意する必要があります。

2. 配列のコピー

配列は複合データ型です。直接コピーすると、基になるデータへのポインタのみがコピーされます。完全に新しいアレイを複製するわけではありません。

ES5 では、配列をコピーするための回避策のみを使用できます。

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

上記のコードでは、

a1 は元の配列のクローンを返し、a2 を変更しても a1 には影響しません。

スプレッド演算子を使用すると、配列をコピーする簡単な方法が提供されます。

//拷贝数组
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷贝数组
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

覚えておいてください: 配列は依然としてポインターを介して取得されるため、配列自体をコピーするのではなく、新しいポインターのみをコピーします。

3. 擬似配列を配列に変換する

NodeList オブジェクトは通常、ノードのコレクションです。 Node.childNodes などのプロパティおよび document.querySelectorAll などのメソッドによって返されます。

        像 NodeList 和 arguments 这种伪数组，类似于数组，但不是数组，没有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach() 来迭代

        可以通过扩展运算符将其转为数组，如下：

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

        注意：使用扩展运算符将伪数组转换为数组有局限性，这个类数组必须得有默认的迭代器且伪可遍历的

4.与解构赋值结合

        扩展运算符可以与解构赋值结合起来，用于生成数组

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

下面是另外一些例子：

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   // []

        注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  报错

5. 字符串

        ES6的扩展语法可以很简单的把一个字符串分割为单独字符的数组：

[...'hello']
// [ "h", "e", "l", "l", "o" ]

6.Map 和 Set 结构，Generator 函数

        扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

        Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

        上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。

        如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错。

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

【相关推荐：javascript视频教程、web前端】

以上がES6 のスプレッド演算子について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。