六つの小さくて美しいes 6特性(転載)

3742 ワード

JavaScriptコミュニティの中のすべての人は新しいAPI、新しい文法と新しい特性が好きです.より優雅に、よりインテリジェントに、より効果的に重要な任務を完成します.ES 6はいいものをたくさん持ってきました.そして、ここ一年の間に、ブラウザメーカーが全力でアップグレードしてブラウザを使っています.ES 6の中には大きな更新がありますが、ちょっとしたアップグレードも大きなサプライズをくれました.これらは私が一番好きな六つのJavaScriptの新しい特性です.
1.オブジェクト変数のキー値を設定する文法
JavaScript開発者の悩みの一つは、オブジェクトの字面量に変数キーを設定できないことです.初期化後のオブジェクトに変数キー/値を追加する必要があります.

// *Very* reduced example
let myKey = 'key3';
let obj = {
    key1: 'One',
    key2: 'Two'
};
obj[myKey] = 'Three';

この悩みをうまく言うのは不便です.もう一つは読みにくいということと醜さです.ES 6は開発者たちに解決方法を提供します.

let myKey = 'variableKey';
let obj = {
    key1: 'One',
    key2: 'Two',
    [myKey]: 'Three' /* yay! */
};

1階の[]を加えると、プログラマーたちはオブジェクトの字面量の定義文ですべてのことを完了することができます.
2.矢印関数
ES 6の変化を知る必要はありません.矢印関数はとっくに知っています.多くの話題の中心になっています.JavaScriptプログラマーに迷惑をかけました.いくつかのブログを書いて矢印関数の側面を説明できますが、一番教えたいのは矢印関数が簡単な関数のコード量をどのように圧縮しますか?

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11

// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

functionとreturnという二つのキーワードは書かなくてもいいです.時には()と書く必要がない場合もあります.矢印関数は簡単な関数であり、とても良い書き方です.
3.find/findIndex
JavaScriptは、配列内の1つの要素のインデックスを取得するためのArray.prototype.indexOf方法を提供しているが、indexOf方法は、ターゲット要素の検索条件を計算することができない.時々、検索条件を満たす要素そのものを取得したいです.findとfindIndexを入力してください.この2つの方法は、1つの配列で最初の条件を満たす値を検索することができます.

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

findおよびfindIndexは、計算された値を検索することができ、また、不必要な副作用および循環による不確定値のいくつかを防止する.
4.拡張演算子:...拡張演算子は、1つの配列または反復可能なオブジェクトを表し、それらのコンテンツを1回の呼び出しで独立したパラメータに分割することができます.たとえば:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];

// Convert Arguments to Array
let argsArray = [...arguments];

この不思議な演算子による付加的な利点は、反復可能なオブジェクトを可能にすることである(NodeList).argumentsなど)が本物の行列に変換されます.これまで私たちはArray.fromを使っていました.
または他のhack方法です.
5.テンプレート文字列
JavaScriptでは、コネクタまたは一行の文字の末尾に\を追加して、複数行の文字列を作成します.
この二つの方法は維持しにくいです.多くの開発者やフレームが、ラベルを悪用して複数行の文字列テンプレートをカプセル化し始めています.他のものは、DOMおよびouterHTMLを介して要素のHTMLを文字列として取得します.
ES 6はテンプレート文字列を提供してくれます.音符と一緒に気軽に複数行の文字列を書くことができます.

// Multiline String
let myString = `Hello

I'm a new line`; // No error!

// Basic interpolation
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

もちろん、複数行の文字列以外にも、テンプレート文字列には、簡単または高度な補間などの他の能力があります.ただ、優雅に複数行の文字列を書いているだけのことで、とても嬉しいです.
6.標準パラメータ値
多くのサービス端末言語は、関数宣言において、pythonやPHPなどのデフォルトのパラメータ値を定義できます.今はJavaScriptでも大丈夫です.

// Basic usage
function greet(name = 'Anon') {
  console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!

// You can have a function too!
function greet(name = 'Anon', callback = function(){}) {
  console.log(`Hello ${name}!`);

  // No more "callback && callback()" (no conditional)
  callback();
}

// Only set a default for one parameter
function greet(name, callback = function(){}) {}

デフォルト値なしのパラメータが渡されていない場合、他の言語はエラーを報告することがありますが、JavaScriptはundefinedに設定します.

Linuxの雑記(二)