es6 の新機能

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

このチュートリアルの動作環境: 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 = '全局变量';
{
  let x = '局部变量';
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

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

const a = 1
a = 0 //报错

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

const student = { name: 'cc' }

student.name = 'yy';// 不报错
student  = { name: 'yy' };// 报错

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

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

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

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

$("body").html("This demonstrates the output of HTML \
content to the page, including student'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'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 = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

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

printText('hello'); // 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: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

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

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + 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 = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c

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

let stu = ['Sam', '22', '男'];
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'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

类中的继承和超集：

class Phone {
  constructor() {
    console.log("I'm a phone.");
  }
}
 
class MI extends Phone {
  constructor() {
    super();
    console.log("I'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 = 'Rainbow'

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

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

 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

导出函数

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

导入(import)

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

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

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

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

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