検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 の 3 つのポイントの機能は何ですか?

es6 の 3 つのポイントの機能は何ですか?

青灯夜游
青灯夜游オリジナル
2022-10-14 17:56:251913ブラウズ

es6 の 3 つの点は関数ではなく演算子です。 3 つのドット「...」は、反復可能オブジェクトを個別の要素に拡張できる「展開演算子」を指します。いわゆる反復可能オブジェクトとは、for of ループを使用して走査できるオブジェクト (配列など) を指します。 、文字列、マップ、セット、DOM ノードなど。

es6 の 3 つのポイントの機能は何ですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

スプレッド演算子... は ES6 で導入され、反復可能オブジェクトを個々の要素に展開します。いわゆる反復可能オブジェクトとは、次のような for of ループを使用して走査できるオブジェクトです。配列 一般的なメソッド)、文字列、Map (Map の理解)、Set (Set の使い方)、DOM ノードなど。

配列スプレッド演算子

スプレッド演算子 (spread) は 3 つのドット (...) です。これは、配列をカンマ区切りのパラメーター シーケンスに変換する、残りのパラメーターの逆演算に似ています。スプレッド演算子は通常の関数パラメータと組み合わせて使用​​でき、その後ろに式を置くこともできますが、その後に空の配列が続く場合は効果がありません。 

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

意味

代替関数の apply メソッド

スプレッド演算子は配列を拡張できるため、不要になりました apply メソッドで、配列を関数パラメータに変換します。 

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])

適用

  • 配列をコピー

    // ES5 的写法
const a1 = [1, 2];
const a2 = a1.concat();
// ES6 的写法
const a1 = [1, 2];
const a2 = [...a1];
//或
const [...a2] = a1;

  • 配列を結合

    // ES5 的写法
[1, 2].concat(more);
arr1.concat(arr2, arr3);
// ES6 的写法
[1, 2, ...more];
[...arr1, ...arr2, ...arr3]

  • 分割割り当てとの組み合わせ

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

    注: 配列の割り当てにスプレッド演算子を使用する場合、パラメータの最後のビットにのみ配置できます。そうでない場合は、エラーが報告されます。

  • 文字列の変換

    展開演算子は、文字列を実際の配列に変換することもでき、4 バイトの Unicode 文字を正しく識別できます。 

    'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('') // 'y\uDE80\uD83Dx'
[...str].reverse().join('')      // 'y\uD83D\uDE80x'

  • Iterator インターフェイスを実装するオブジェクト

    Iterator インターフェイスのオブジェクト (「Iterator」の章を参照) は、スプレッド演算子を使用して実数の配列に変換できます。

  • マップおよびセット構造、ジェネレーター関数

    • 展開演算子は、オブジェクトに Iterator がある限り、データ構造の Iterator インターフェイスを内部で呼び出します。インターフェイスでは、Map 構造などのスプレッド演算子を使用できます。
    うわー
    • ジェネレーター関数は実行後、トラバーサー オブジェクトを返すため、スプレッド演算子も使用できます。
    うわー
    • Iterator インターフェイスのないオブジェクトでスプレッド演算子を使用すると、エラーが報告されます。

#オブジェクトの拡張演算子

概念

分割のオブジェクトassign は、オブジェクトから値を取得するために使用されます。これは、ターゲット オブジェクト自体のすべての走査可能 (列挙可能) ですがまだ読み取られていないプロパティを、指定されたオブジェクトに割り当てることと同じです。すべてのキーとその値が新しいオブジェクトにコピーされます。 

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

let arr = [...map.keys()]; // [1, 2, 3]

注:

  • 代入を分割するには等号の右側がオブジェクトである必要があるため、等号の右側がオブジェクトである場合、等号が

    unknown または null の場合、オブジェクトに変換できないためエラーが報告されます。

  • 構造化代入は最後のパラメータである必要があります。それ以外の場合は、エラーが報告されます。

  • 分割代入のコピーは浅いコピーです。つまり、キーの値が複合型の値 (配列、オブジェクト、関数) の場合、分割代入はこの値のコピーではなく、この値への参照。 

    const go = function*(){
 yield 1;
 yield 2;
 yield 3;
};

[...go()] // [1, 2, 3]

  • スプレッド演算子の分割代入では、プロトタイプ オブジェクトから継承されたプロパティをコピーできません。 

    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

アプリケーション

    ##関数のパラメータを拡張し、他の操作を導入します。 

  • let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2
    パラメータ オブジェクトのすべての走査可能なプロパティを取得し、現在のオブジェクトにコピーします。 

  • let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined


const o = Object.create({ x: 1, y: 2 });
o.z = 3;

let { x, ...newObj } = o;
let { y, z } = newObj;
x // 1
y // undefined
z // 3

let { x, ...{ y, z } } = o;
// SyntaxError: ... must be followed by an identifier in declaration contexts
    2 つのオブジェクトをマージします。 
  • function baseFunction({ a, b }) {
// ...
}
function wrapperFunction({ x, y, ...restConfig }) {
// 使用 x 和 y 参数进行操作
// 其余参数传给原始函数
return baseFunction(restConfig);
}

    • 既存のオブジェクト パーツのプロパティを変更します。 
  • let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

//上面的例子只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。
// 写法一
const clone1 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
obj
);
// 写法二
const clone2 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)

    • Others

カスタム属性をスプレッド演算子の前に置くと、それが新しいオブジェクトのデフォルトの属性値になります。
  • 配列のスプレッド演算子と同様に、オブジェクトのスプレッド演算子の後に式を続けることができます。
  • スプレッド演算子の後に空のオブジェクトが続いた場合、効果はありません。
  • 展開演算子のパラメータが
    • null
  • または unknown の場合、これら 2 つの値は無視され、エラーは報告されません。
    • 展開演算子のパラメータオブジェクトに値関数
  • get

    がある場合、この関数が実行されます。

    • [関連する推奨事項:
JavaScript ビデオ チュートリアル

、プログラミング ビデオ ]

以上がes6 の 3 つのポイントの機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptのCOMオブジェクトとは何ですか次の記事：JavaScriptのCOMオブジェクトとは何ですか

関連記事

続きを見る