es6 の新機能-フロントエンドQ&A-php.cn

ES6 の新機能: 1. const と let を使用して変数を宣言し、両方の変数はブロックレベルのスコープです; 2. テンプレート文字列、構文 "`string`" により文字列の連結が可能になりますより簡潔になりました; 3. アロー関数、このポインティングの問題を解決できます; 4. 拡張演算子、反復可能なオブジェクトを個別の要素に拡張します; 5. モジュール化など。

es6 の新機能

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

ECMAScript 6 (ES6) は基本的に業界標準になりました。その人気は ES5 よりもはるかに速いです。主な理由は、最新のブラウザ、特に Chrome ブラウザと Firefox ブラウザがすでに ES6 をサポートしているためです。 ES6の機能。

以下は、一般的に使用される新しい ES6 機能の詳細な説明です:

1. さまざまな変数宣言: const と let

以前は、JS にはブロックレベルのスコープがありませんでしたが、const と let がこの便利なギャップを埋め、const と let は両方ともブロックレベルのスコープでした。

ES6 では、以前の var と比較して、ローカル変数の宣言に let を使用することをお勧めします (どこで宣言されても、関数の先頭で宣言されたものとみなされます)。 let と var 宣言の違い:

var x = &#39;全局变量&#39;;
{
  let x = &#39;局部变量&#39;;
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

ログイン後にコピー

let は変数の宣言を意味し、const は定数の宣言を意味します。どちらもブロックレベルのスコープです。const で宣言された変数は定数とみなされます。つまり、その値は設定完了後は変更できません。

const a = 1
a = 0 //报错

ログイン後にコピー

const がオブジェクトの場合、オブジェクトに含まれる値を変更できます。より抽象的に言うと、オブジェクトが指すアドレスが変わっていないことを意味します:

const student = { name: &#39;cc&#39; }

student.name = &#39;yy&#39;;// 不报错
student  = { name: &#39;yy&#39; };// 报错

ログイン後にコピー

注意すべき点がいくつかあります:

変数let キーワードで宣言された変数にはホイスト機能がありません
let および const 宣言は最も近いブロック (中括弧内) でのみ有効です
定数 const 宣言を使用する場合は、大文字の変数を使用してください例: CAPITAL_CASING
const は、

2 を宣言するときに割り当てる必要があります。テンプレート文字列

# # ES6 では以前は、テンプレート文字列を次のように処理することがよくありました。 "\" および " "

$("body").html("This demonstrates the output of HTML \
content to the page, including student&#39;s\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

ログイン後にコピー

ES6 の場合は、

基本的な文字列形式を使用してテンプレートを構築します。連結する文字列に式を埋め込みます。 ${} を使用して定義します。
#ES6 のバッククォート (``) は直接実行できます。

#ES6 はテンプレート文字列をサポートしており、 string スプライシングがより簡潔かつ直感的になりました。

$("body").html(`This demonstrates the output of HTML content to the page, 
including student&#39;s ${name}, ${seatNumber}, ${sex} and so on.`);

ログイン後にコピー

3. アロー関数

これは ES6 の最もエキサイティングな機能の 1 つです。 => はキーワード関数の略語であるだけでなく、他の利点ももたらします。アロー関数は、これを囲むコードと同じものを共有するため、このポインティングの問題を解決するのに役立ちます。経験豊富な JavaScript 開発者は、var self = this; や var that = this

などのパターンに精通しています。しかし、=> を使用すると、このパターンは不要になります。

アロー関数の最も直感的な 3 つの特徴。

#関数の作成に function キーワードは必要ありません
return キーワードを省略します
現在のコンテキストの this キーワードを継承します

// ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;

// ES5
[1,2,3].map((function(x){
    return x + 1;
}).bind(this));
    
// 使用箭头函数
[1,2,3].map(x => x + 1);

ログイン後にコピー

詳細: 関数にパラメータが 1 つだけある場合は、括弧を省略できます。関数が 1 つだけの式を返す場合は、{} を省略して;

#4. 関数パラメータのデフォルト値## を返すことができます。 #ES6 より前は、パラメータのデフォルト値を次のように定義することがよくありました:

// ES6之前，当未传入参数时，text = &#39;default&#39;；
function printText(text) {
    text = text || &#39;default&#39;;
    console.log(text);
}

// ES6；
function printText(text = &#39;default&#39;) {
    console.log(text);
}

printText(&#39;hello&#39;); // hello
printText();// default

ログイン後にコピー

5. スプレッド演算子

スプレッド演算子 …
は ES6 で導入され、反復可能オブジェクトを個別の要素に展開します。いわゆる反復可能オブジェクトとは、for of ループを使用して走査できるオブジェクトです (配列、文字列、配列など)。マップ、セット、DOM ノードなど
拡張演算子...
関数呼び出し/配列構築中に構文レベルで配列式または文字列を展開できます。また、キーと値の形式で展開することでオブジェクト式を展開することもできます。。
イテレータで使用される場合、これは Spread 演算子です:

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

ログイン後にコピー

関数パラメータで使用される場合、それは Rest 演算子です: 使用される場合、パラメータを関数に渡すとき、それはは REST 演算子です:

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

ログイン後にコピー

6. バイナリおよび 8 進リテラル

ES6 はバイナリおよび 8 進リテラルを 8 進数に変換できます数値の前に 0o または 0O を追加して値を指定します:

let oValue = 0o10;
console.log(oValue); // 8
 
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

ログイン後にコピー

7. オブジェクトと配列の構造化

// 对象
const student = {
    name: &#39;Sam&#39;,
    age: 22,
    sex: &#39;男&#39;
}
// 数组
// const student = [&#39;Sam&#39;, 22, &#39;男&#39;];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + &#39; --- &#39; + age + &#39; --- &#39; + sex);

// ES6
const { name, age, sex } = student;
console.log(name + &#39; --- &#39; + age + &#39; --- &#39; + sex);

ログイン後にコピー

8. オブジェクトスーパークラスES6 では、オブジェクト内でスーパーメソッド

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
 
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

ログイン後にコピー

9.for を使用できます。 ..of および for...infor...of は、配列 (

など) の反復子を走査するために使用されます。

let letter = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c

ログイン後にコピー

for...in 用来遍历对象中的属性：

let stu = [&#39;Sam&#39;, &#39;22&#39;, &#39;男&#39;];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// 结果: Sam, 22, 男

ログイン後にコピー

10.ES6中的类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性：

class Student {
  constructor() {
    console.log("I&#39;m a student.");
  }
 
  study() {
    console.log(&#39;study!&#39;);
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I&#39;m a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

ログイン後にコピー

类中的继承和超集：

class Phone {
  constructor() {
    console.log("I&#39;m a phone.");
  }
}
 
class MI extends Phone {
  constructor() {
    super();
    console.log("I&#39;m a phone designed by xiaomi");
  }
}
 
let mi8 = new MI();

ログイン後にコピー

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。在这里阅读更多关于类的介绍。

有几点值得注意的是：
类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
在类中定义函数不需要使用 function 关键词

11、模块化(Module)

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量

//test.js
export var name = &#39;Rainbow&#39;

ログイン後にコピー

心得：ES6不仅支持变量的导出，也支持常量的导出。 export const sqrt = Math.sqrt;//导出常量

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

 //test.js
 var name = &#39;Rainbow&#39;;
 var age = &#39;24&#39;;
 export {name, age};

ログイン後にコピー

导出函数

// myModule.js
export function myModule(someArg) {
  return someArg;
}

ログイン後にコピー

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from &#39;myModule&#39;;// main.js
import {name,age} from &#39;test&#39;;// test.js

ログイン後にコピー

心得:一条import 语句可以同时导入默认函数和其它变量。import defaultMethod, { otherMethod } from 'xxx.js';

【相关推荐：javascript视频教程、web前端】

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