JS インタビューの質問 16-Es6 のイベント拡張機能はどのようなシナリオで使用されますか?

ES6 では、イベント拡張演算子を配列とオブジェクトの展開操作に使用できます。これは、配列をカンマ区切りのパラメーターシーケンスに変換したり、オブジェクトを複数のパラメーターの形式で関数に渡すために使用されます。以下はイベントスプレッドオペレーターの使用法と例です。

配列

配列の構築: スプレッド演算子を使用すると、push、などのメソッドを使用して既存の配列要素を新しい配列の一部にする必要がなく、より簡単かつエレガントに新しい配列を構築できます。例えばspliceconcat

スプレッド演算子は反復可能オブジェクトの各項目を出力します。

console.log(...[1,2,3]); // 1 2 3
console.log(1,...[2,3,4],5); // 1 2 3 4 5
console.log([1,...[2,3,4],5]); // [1, 2, 3, 4, 5]

使用法 1 - 配列のコピー

sliceスプレッド演算子を使用すると、メソッドを使用せずに配列を簡単にコピーできます。例えば

let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]
arr2.push(4); 
console.log(arr2); // [1, 2, 3, 4]

使用法 2 - 配列のマージ

スプレッド演算子を使用すると、2 つの配列の結合がより簡単かつ洗練されます。例えば

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5]
// 等同于
var arr4 = arr1.concat(arr2);
console.log(arr3, arr4); // [0, 1, 2, 3, 4, 5] [0, 1, 2, 3, 4, 5]

物体

オブジェクトの複製: スプレッド演算子を使用すると、オブジェクトの複製をより簡単に行うことができます。例えば

let obj = {a: 1, b: 2, c: 3};
let obj2 = {...obj}; // {a: 1, b: 2, c: 3}
obj2.d = 4; 
console.log(obj2); // {a: 1, b: 2, c: 3, d: 4}

使用法 3 - オブジェクトの結合

スプレッド演算子を使用すると、2 つのオブジェクトを結合することがより簡単かつ洗練されます。例えば

let obj1 = {a: 1, b: 2};
let obj2 = {c: 3, d: 4};
let obj3 = {...obj1, ...obj2}; // {a: 1, b: 2, c: 3, d: 4}
// 等价于
let obj1 = {a:1,b:2};
let obj3 = Object.assign(obj1,obj2);// {a: 1, b: 2, c: 3, d: 4}

オブジェクトの拡張演算子は、{...}パラメータオブジェクト内のすべてのトラバース可能なプロパティを取り出し、現在のオブジェクトにコピーするために使用されます。このメソッドは、オブジェクトをマージし、Object.assignソースオブジェクト (ソース) のすべての列挙可能なプロパティをターゲットオブジェクトにコピーするために使用されます (目標）

Object.assignメソッドの最初のパラメータはターゲットオブジェクトで、次のパラメータはすべてソースオブジェクトです。ターゲットオブジェクトと元のオブジェクトに同じ名前のプロパティがある場合、または複数のソースオブジェクトに同じ名前のプロパティがある場合、後者のプロパティは以前のプロパティをオーバーライドする

ユーザー定義の属性が拡張演算子の後に配置されると、拡張演算子内の同じ名前の属性は上書きされます。

let bar = {a: 1, b: 2};
 let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

スプレッド演算子によるオブジェクトインスタンスのコピーは、一種の浅いコピーです。

参照データ型たとえばArray、コピーする場合、コピーされるのはオブジェクトの参照であり、元のオブジェクトが変更されると、コピーされたオブジェクトも変更されます。

let obj1 = { a: 1, b: 2};
 let obj2 = { ...obj1, b: 'itclancoder'};
 console.log(obj1); // {a: 1, b: 2}
 console.log(obj2); //  {a: 1, b: "itclancoder"}

上記の例では、スプレッド演算子によってコピーされたオブジェクトは基本データ型であるため、obj2オブジェクトの変更は影響しません。obj1

let obj1 = { a: 1, b: 2, c: {name: 'a'}};
let obj2 = { ...obj1};
obj2.c.name = 'itclancoder';
console.log(obj1); // {a: 1, b: 2, c: {name: 'itclancoder'}}
console.log(obj2); // {a: 1, b: 2, c: {name: 'itclancoder'}}

ここで、 obj2 の変更がコピーされたオブジェクトに影響を与えることがわかりますobj1。理由は前述したように、obj1in のオブジェクトはc参照データ型であり、コピーはコピー時のオブジェクトの参照であるためです。

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

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

注: 分割代入では等号の右側がオブジェクトである必要があるため、等号の右側がundefinedまたはの場合null、オブジェクトに変換できないためエラーが報告されます。また、分割代入は最後のパラメータである必要があります。そうでない場合は、エラーが報告されます。

let { ...z } = null; // 运行时错误
 let { ...z } = undefined; // 运行时错误
 let { ...x, y, z } = someObject; // 句法错误
 let { x, ...y, ...z } = someObject; // 句法错误

スプレッド演算子の後に文字列が続く場合、文字列は自動的に配列のようなオブジェクトに変換されるため、戻り値は空のオブジェクトではありません。

{...'hello'}
 // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

使用法 4 - React または Vue でのアプリケーション

React または Vue コンポーネントでは、スプレッド演算子を使用して props を渡すことができます。

const params = {name: 'Jine', age: 21}
<CustomComponent {...params} />

パラメータの受け渡しを構造化する

例: 配列の最大値と最小値を見つける

const arr = [2024,2,50,100];
const min = Math.min(...arr);
const max = Math.max(...arr);
console.log(min,max); // 2,2024

使用法 5 アレイ重複排除

拡張オペレータが連携してsetアレイの重複排除を実現

var arr = [2023,'itclancoder',2023, 1024, -9, -9, 2023, 1024, 2, 3, 2, 3, 6, 8,8,8,-8,'itclancoder','itclancoder']
var  set1= [...new  Set(arr)]
//可以直接写出var  set1= new  Set(arr)
//console.log(set1)
//方法1
var newArr=Array.from(set1)
console.log(newArr)
var arr = [2023,'itclancoder',2023, 1024, -9, -9, 2023, 1024, 2, 3, 2, 3, 6, 8,8,8,-8,'itclancoder','itclancoder']
var  set1= [...new  Set(arr)]
//可以直接写成var  set1= new  Set(arr)
//console.log(set1)
//方法2
var newArr= [...set1]
console.log(newArr)

使用法 6 - 文字列から文字配列へ

const name='itclancoder'
const strarr=[...name]
console.log(strarr)
//['i','t','c','l','a','n','c','o','d','e','r']
//进行简单的字符串截取
strarr.lenght=2
console.log(strarr.join(""));//‘it’

上記は展開演算子のいくつかの使用法です。

フレームワーク - インタビューの質問 6 - Vue2 と Vue3 のフック機能についての話

2023-03-09