コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > es6 の新しい演算子は何ですか?

es6 の新しい演算子は何ですか?

青灯夜游
リリース： 2023-01-18 18:36:26
オリジナル
1278 人が閲覧しました

es6 の新しい演算子には次のものが含まれます: 1. オプションのチェーン演算子「?.」。演算子の前のプロパティが有効かどうかを判断し、それによってチェーン内のオブジェクトのプロパティを読み取るか、未定義を返します。2. 指数関数演算子「**」、指数演算に使用される中置演算子、構文「x ** y」; 3. Null 値結合演算子「??」; 4. 論理代入演算子「&&=、「|| ="、"」 ??=、主にそれ自体に対して論理演算を実行し、その後の値をそれに代入します; 5. 拡張演算子「...」。

es6 の新しい演算子は何ですか?

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

質問

インタビュアー: es6 の新しいオペレーターについて教えていただけますか?

インタビュアー: うーん。 。 。

インタビュアー: たとえば、オプションの連鎖演算子ですか?

インタビュアー: うーん。 。 。

インタビュアー: はい、今日のインタビューはここまでです。

インタビュアー: うーん。 。 。

上記のシーンはまったくの架空のもので、似ているかもしれません、ははは。

今日は、es6 のいくつかの新しい演算子を学び、統合しましょう。

演算子

オプションのチェーン演算子

オブジェクトのプロパティ。このプロパティがオブジェクトの場合、それも存在します。 

var obj = {a: {key: 'val'}}
console.log(obj.a.key) // val
ログイン後にコピー

などのこのサブプロパティにアクセスするときに、プロパティが存在しない場合、エラーが報告されることがあります。 

var obj = {key: 'val'}
console.log(obj.a.key) // error: Cannot read properties of undefined (reading 'key')
ログイン後にコピー

この状況に対応したい場合は、互換性を持たせるためのデフォルト値を追加する必要があります。 

var obj = {key: 'val'}
console.log((obj.a || {}).key) // undefined
ログイン後にコピー

レベルが深すぎると、読みにくくなります。 

(((obj.a || {}).b || {}).c || {}).d

// 或者
obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d
ログイン後にコピー

オプションのチェーン演算子は、この記述方法を改善するために使用されます。 ?.で表されます。

上記の例は、オプションのチェーン演算子を使用して書き直すことができます

obj.a?.key
obj.a?.b?.c?.d
ログイン後にコピー

効果は同じですが、可読性が向上し、コードが節約されますか?

そのような属性が存在しないことが判明した場合、以降のポイント操作は実行されません。

関数実行時に書き込むこともできます。関数が関数ではない可能性がある場合にも対応します。 この場合、関数名を最初に定義するか、値を指定する必要があります。そうでない場合でも、エラーが報告されます。 

var fn
fn?.() // 不会报错

fn1?.() // 报错
ログイン後にコピー

オプションの連鎖は、スーパー キーワード、テンプレート文字列、インスタンス化コンストラクター、代入演算子の左側などでは使用できません。 

super?.fn() // error

new Fn?.a() // error

obj.a?.`${b}` // error

obj?.a = obj
ログイン後にコピー

指数演算子

以前は次のように累乗を計算していました

Math.pow(2,3) // 8
ログイン後にコピー

今では指数演算子を使用して計算できるようになりました。* * は 

2 ** 3 // 8
ログイン後にコピー

を連続して書くこともできることを意味します 

2** 3 ** 3 // 134217728
ログイン後にコピー

右から計算しているのに、なぜこんなに大きくなるのか疑問に思われるかもしれません。 2**(3 ** 3) と同等。

Null 値結合演算子 (Null 判定演算子とも呼ばれます)

この演算子は、?? で表されます。デフォルト値は、左側の値が unknown または null の場合にのみ実行されます。

例を見てみましょう: 

var a = '' ?? 'default'
console.log(a) // ''

var a = 0 ?? 'default'
console.log(a) // 0

var a = 123 ?? 'default'
console.log(a) // 123

var a = undefined ?? 'default'
console.log(a) // default

var a = undefined ?? 'default'
console.log(a) // default
ログイン後にコピー

&& または || と混合する場合は、() を追加する必要があります。 優先度を表示します。そうでない場合はエラーが報告されます。 

var a = undefined ?? 'default' && 'a' // error
ログイン後にコピー

論理代入演算子

論理代入演算子は 3 つあります:

  • 論理和集合代入演算子 (&&=)
  • 論理演算子または代入演算子 (||=)
  • Null 値マージ代入演算子 (??=)

主に自身に対して論理演算を実行し、次の値を代入します。それ。

例を通して見てみましょう: 

var a,b,c

a &&= 1 // undefined
//等同于
a && (a = 1)

b ||= 1 // 1
//等同于
b || (b = 1)

c ??= 1 // 1
//等同于
c ?? (c = 1)
ログイン後にコピー

Expand 演算子 …

Expand 演算子 … は、反復可能なオブジェクトを個別の要素に展開するために ES6 で導入されました。いわゆる反復可能オブジェクトとは、for of ループを使用して走査できるオブジェクト (配列、文字列、Map、Set、DOM ノードなど) です。

1. 配列オブジェクトのコピー

展開演算子を使用して配列をコピーすることは、ES6 では一般的な操作です: 

const years = [2018, 2019, 2020, 2021];
const copyYears = [...years];

console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]
ログイン後にコピー

展開演算子は、配列のみ最初の層はディープ コピーです、つまり、スプレッド演算子を使用して 1 次元配列をコピーすることはディープ コピーです。次のコードを参照してください: 

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1];

const copyArray = [...miniCalendar];
console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]

copyArray[1][0] = 0;
copyArray[1].push(8);
copyArray[2] = 2;
console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]
ログイン後にコピー

出力されたものを配置します比較は次のとおりです:

1. 配列の 2 番目の要素の最初の要素を 0 に再割り当てします。2. 要素 8 を配列に追加します。配列の 2 番目の要素; 3. 配列の 3 番目の要素を 2結果から、配列の 2 番目の要素は 1 次元より大きい配列です。内部の要素により、元の変数が変化します。値はそれに応じて変化します。

拷贝对象，代码如下：

const time = {
    year: 2021,
    month: 7,
    day: {
        value: 1,
    },
};
const copyTime = { ...time };
console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }
ログイン後にコピー

扩展运算符拷贝对象只会在一层进行深拷贝，从下面代码是基于上面代码：

copyTime.day.value = 2;
copyTime.month = 6;
console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } }
console.log(time); // { year: 2021, month: 7, day: { value: 2 } }
ログイン後にコピー

从打印的结果看，扩展运算符只对对象第一层进行了深拷贝。

严格来讲，扩展运算符不执行深拷贝

2. 合并操作

先来看数组的合并，如下：

const halfMonths1 = [1, 2, 3, 4, 5, 6];
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
ログイン後にコピー

合并对象，在合并对象时，如果一个键已经存在，它会被具有相同键的最后一个对象给替换。

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }
ログイン後にコピー

3. 参数传递

const sum = (num1, num2) => num1 + num2;

console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13
ログイン後にコピー

从上面的代码看，函数定义了多少个参数，扩展运算符传入的值就是多少个。

和 math 函数一起使用，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10
ログイン後にコピー

4. 数组去重

与 Set 一起使用消除数组的重复项，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]
ログイン後にコピー

5. 字符串转字符数组

String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下：

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]
ログイン後にコピー

进而可以简单进行字符串截取，如下：

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch
ログイン後にコピー

6. NodeList 转数组

NodeList 对象是节点的集合，通常是由属性，如 Node.childNodes 和方法，如 document.querySelectorAll 返回的。

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

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

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);
ログイン後にコピー

es6 の新しい演算子は何ですか?

7. 解构变量

解构数组，如下：

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]
ログイン後にコピー

解构对象，如下：

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" };
const { name, ...location } = userInfo;
console.log(name); // Crayon
console.log(location); // { province: 'Guangdong', city: 'Shenzhen' }
ログイン後にコピー

8. 打印日志

在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021
ログイン後にコピー

【相关推荐：javascript学习教程】

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

関連ラベル：
javascript es6
ソース：php.cn
前の記事：es6 で変数が配列であるかどうかを判断する方法 次の記事：webpackはes6をサポートしていますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
変数の説明結果操作
copyArray[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ] Copy ArrayminiCalendar
##copyArray[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
miniCalendar[ 2021, [ 0] に再割り当てします。 , 2, 3, 4, 5, 6, 7, 8 ], 1 ]