一般的な ES6 コード簡素化手法

解体する

分解: データ構造をより小さな部分に分解するプロセスです。ES6では、配列やオブジェクトから値を抽出し、変数に値を代入します。

では、脱構築は何の役に立つのでしょうか？

1. 可以大大的简化变量声明操作。
   

// ES5
var foo = 1
var bar = 2
var baz = 3

// ES6
let [foo, bar, baz] = [1, 2, 3]

1. 变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的 x。
   

let x = 1
let y = 2
;[x, y] = [y, x]
// x = 2, y = 1

1. 对象解构
   

var obj = { x: 1, y: 2, c: 1 }
let { x, y } = obj
// x = 1
// y = 2

1. 字符串解构
   

const [a, b, c, d, e] =  hello 
// a => h
// b => e
// c => l
// d => l
// e => o

1. 函数参数解构
   

const xueyue = {
  name:  雪月 ,
  age: 18,
}

function getAge({ name, age }) {
  return `${name}今年${age}岁`
}

getAge(xueyue) // 雪月今年18岁

アロー関数

ES6 矢印を使用して => 関数を定義できます

var f = v => v

// 等同于 ES5 的
var f = function (v) {
  return v
}

アロー関数がパラメータを受け取らない場合、または複数のパラメータが必要な場合は、括弧を使用してパラメータ部分を示します。

var f = () => 5
// 等同于 ES5 的
var f = function () {
  return 5
}

var sum = (numl, num2) => numl + num2
// 等同于 ES5 的
var sum = function (numl, num2) {
  return numl + num2
}

アロー関数は、構造化と組み合わせて使用​​できます。

const full = ({ first , last }) => first +     + last;
// 等同于 ES5 的
function full(person) {
  return person.first +     + person.last;
}

アロー関数で表現をより簡潔に

const isEven = n => n % 2 === 0
const square = n => n * n

var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) {
  return a - b
})

上記のコードは 2 行のみを使用して 2 つの単純なユーティリティ関数を定義しています。アロー関数を使用しない場合、複数行を占める可能性があり、今ほど目を引くものではありません。

アロー関数使用時の注意点

1. 関数本体内の オブジェクトthis は、関数が使用されるオブジェクトではなく、関数が定義されているオブジェクトです。

2. コンストラクターとして使用することはできません。つまり、 new コマンドは使用できません。それ以外の場合は、エラーがスローされます。

3. オブジェクトは使用できません arguments 。オブジェクトは関数本体内に存在しません。これを使用したい場合は、 rest 代わりにパラメーターを使用できます。

4. コマンドは使用できない ため、 関数としてyield アロー関数を使用することはできません 。Generator

上記4点のうち、特に注目すべきは1点目です。this オブジェクトのポインティングは変更可能ですが、アロー関数では固定されています。

// ES6
function foo() {
  setTimeout(() => {
    console.log( id: , this.id)
  }, 100)
}

// 转换成ES5
function foo() {
  var _this = this

  setTimeout(function () {
    console.log( id: , _this.id)
  }, 100)
}

上記のコードでは、変換された ES5 バージョンは、アロー関数が独自の関数をまったく持たず this、外側の層を参照していること を明確に示していますthis。

テンプレート文字列

テンプレート文字列 ( template string ) は、 (``) バッククォートでマークされた文字列の拡張バージョンです。通常の文字列として使用することも、複数行の文字列を定義したり、文字列に変数を埋め込んだりするために使用することもできます。

const { log } = console
const name =  雪月 
const age = 18

// 普通字符串拼接
const result = name +  今年  + age +  岁 
// 使用模板字符串
const result2 = `${name}今年${age}岁`
log(result) // 雪月今年18岁
log(result2) // 雪月今年18岁

// ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
const result3 = `${name}今年${age * 2}岁`
log(result3) // 雪月今年36岁

残りの引数/展開構文

...变量名ES6では、オブジェクトを使用する必要がないように、関数の冗長パラメーターを取得するために使用される 残りのパラメーター ( の形式) が導入されていますarguments 。rest 引数コロケーション変数は、追加の引数が配置される配列です。

function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort()
}
// 使用 rest
const sortNumbers = (...numbers) => numbers.sort()

rest 上記 2 つの書き方を比較すると、パラメータの書き方の方が自然で簡潔であることがわかります 。

 パラメータの逆演算により配列がカンマで区切られた一連のパラメータに変換されるため、スプレッド演算子 (  spread ) は 3 つのドット (...) です。 rest

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

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

ここでは、スプレッド演算子置換 メソッドapply の実際の例を 示します。このMath.max メソッドを適用すると、配列内の最大の要素を簡単に見つけることができます。

// ESS 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77)

スプレッド演算子は、配列を結合する新しい方法を提供します。

//  ESS
;[1, 2].concat(more)
// ES6
;[1, 2, ...more]

オブジェクトのスプレッド演算子 (...) は、パラメータ オブジェクトのすべての通過可能なプロパティを取り出し、それらを現在のオブジェクトにコピーするために使用されます。

let z = { a: 3, b:  bb  }
let n = { ...z }
n // { a: 3, b:  bb  }
n === z // false

特別な注意: オブジェクトの拡張は、オブジェクト属性が yes の...場合にのみ実行でき 、それが の 場合は です。基本数据类型深拷贝引用数据类型浅拷贝

let z = { a: 3, b:  bb , c: { name:  ccc  } }
let n = { ...z }

n // { a: 3, b:  bb , c: { name:  ccc  } }
n === z // false
n.c === z.c // true
// n.c 跟 z.c 是同一个引用地址

オブジェクトリテラルの短縮構文

const name =  雪月 

// ES5写法
const obj = {
  name: name,
  f: function () {
    console.log(this.name)
  },
}

// ES6简写
const obj2 = {
  name,
  f() {
    console.log(this.name)
  },
}

obj.f() // 雪月
obj2.f() // 雪月

学生はそれを使い慣れている vue と感じますか

new Vue({
  el:  #app ,
  data() {
    return {
      list: [],
    }
  },
})

配列インスタンスの include()

Array.prototype.includes メソッドは、文字列の include メソッドと同様に、配列に指定された値が含まれているかどうかを示すブール値を返します。ES2016ではこの方法が導入されました。

;[1, 2, 3].includes(2) // true
;[1, 2, 3].includes(4) // false
;[1, 2, NaN].includes(NaN) // true

このメソッドの前に、通常、配列のindexOfメソッドを使用して、配列に特定の値が含まれているかどうかを確認します。

// ES5
if (arr.indexOf(el) !== -1) {
  // ...
}

// ES6
if (arr.includes(el)) {
  // ...
}

// 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符
if (~arr.indexOf(el)) {
  // ...
}

indexOf このメソッドには 2 つの欠点があります。1 つは、セマンティックが十分ではないことです。その意味はパラメーター値の最初の出現位置を見つけることであるため、-1 に等しくないかどうかを比較するのに十分直感的ではありません。2つ目は、内部判定に厳密等価演算子(===)を使用しているため、誤判定が発生することです NaN 。

;[NaN].indexOf(NaN)
// -1

includes 別の判定アルゴリズムを使用すればそのような問題は発生しません

;[NaN].includes(NaN)
// true