この記事では、ES6 について簡単かつ詳細に説明し、新機能を紹介します。

この記事では、ES6 について深く理解し、ES6 の新機能について学びます。お役に立てば幸いです。

ES6 について理解する

ECMAScript は、Netscape によって開発された## スクリプトの標準化された仕様です言語; 最初は Mocha という名前でしたが、後に LiveScript に名前変更され、最終的に JavaScript に名前変更されました ECMAScript 2015 (ES2015)、第 6 版、当初は知られていましたECMAScript 6 (
ES6) として、新機能が追加されました。

ES6 ブロックレベルのスコープ let

まず、スコープとは何でしょうか。スコープとは単に変数を宣言することを意味し、この変数の有効なスコープは

let が来る前です。 js には var の グローバル スコープ と 関数スコープ しかありませんが、ES6 は ブロックレベルのスコープ# を js ## にもたらします。 [関連する推奨事項: JavaScript 学習チュートリアル]

{
    var a = "?";
    let b = "⛳";
}
console.log(a);
console.log(b);

?
Uncaught ReferenceError: b is not defined

ご覧のとおり、var キーワードを使用して定義しています。ブロック変数 a は実際にはグローバルにアクセスできるため、var で宣言された変数はグローバル

ですが、変数はブロック内で有効になり、ブロックの外からはアクセスできないようにする必要があります。 ES6 を使用します 新しいブロック レベルのスコープ キーワード let は、この変数 a を宣言するために使用されます。再度アクセスすると、a が定義されていないというエラーが報告されます、定義なし

ES6 配列の構造化

以下に示すように、最初に関数が定義され、配列が返されます。分割を使用しない場合 配列の前に配列を呼び出して戻り値をtempに代入し、temp配列を出力します

配列の分割を使用した後、配列変数を直接定義して関数を指します変数に値を返すと、自動的に 1 つの項目の値が最初の配列変数に代入され、2 番目の項目の値が 2 番目の配列変数に代入され、以下同様に最終的に 3 つの変数が出力され、問題はありません.

function breakfast() {
    return ['?', '?', '?'];
}
var temp = breakfast();
console.log(temp[0], temp[1], temp[2]);

let [a, b, c] = breakfast();
console.log(a, b, c);

? ? ?
? ? ?

ES6 オブジェクトの分解

まず、breakfast

関数は

object# を返します。 ##、オブジェクトの構造化を使用してオブジェクトを定義します。キーと値のペアのキーはマップされた実際のオブジェクトのキー名を表し、値はカスタム変数です。構造化が完了すると、割り当ては自動的に完了し、朝食関数が呼び出されてオブジェクトが返され、変数 a、b、c が出力されます。問題がないことがわかります。 #ES6 テンプレート文字列

テンプレート文字列を使用する前に、## を使用して文字列変数を結合します。ES6 によって提供されるテンプレート文字列を使用します。最初に使用します。 `` で文字列をラップします。変数を使用したい場合は、

${variable}

function breakfast() {
    return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);

? ? ?

ES6 文字列かどうかを判断します。他の文字列が含まれています

これらの関数を使用すると、文字列が何かで始まり何かで終わるかどうかを簡単に判断できます。文字列操作は含まれていますか? 関数を呼び出すときに、値が割り当てられていない場合は、パラメータを指定すると、設定されたデフォルト パラメータを使用して実行されます。パラメータに値が割り当てられると、デフォルト値を上書きして、新しく割り当てられた値を使用して実行されます。次を使用します:

let a = '?',
    b = '?️';

let c = '今天吃' + a + '吃完看' + b;
console.log(c);

let d = `今天吃 ${a} 吃完看 ${b}`;
console.log(d);

今天吃?吃完看?️
今天吃 ? 吃完看 ?️

ES6 展開演算子

操作を容易にするために要素を展開するには、

... を使用します。次のように使用します:

let str = '你好，我是小周 ❤️';
console.log(str.startsWith('你好'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
console.log(str.includes(" "));

true
true
false
true

ES6 剰余演算子

....

演算子は関数パラメータで使用され、パラメータ配列を受け取ります。次のように使用されます。 : rreeerrree

ES6 函数名字

使用 .name 可以获取函数的名字，具体使用如下：

function f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);

f1
f2
f4

ES6 箭头函数

使用箭头函数可以让代码更简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this指向父级

let f1 = a => a;

let f2 = (a, b) => {
    return a + b;
}

console.log(f1(10));
console.log(f2(10, 10));

10
20

ES6 对象表达式

使用es6的对象表达式，如果对象属性和值一样，可以省略值，函数写法可以省去function，用法如下：

let a = '㊙️';
let b = '☃️';

const obj = {
    a: a,
    b: b,
    say: function () {

    }
}

const es6obj = {
    a,
    b,
    say() {

    }
}

console.log(obj);
console.log(es6obj);

{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }

ES6 恒量

使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值，使用如下：

const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
app = 10;

可以看到当再次给衡量分配值就报错了

☃️ ?
☃️ ? ?
app = 10;
    ^
TypeError: Assignment to constant variable.

ES6 对象属性名

使用点定义对象属性时，如果属性名中含有空格字符，是不合法的，语法通不过的，使用 [属性名] 可以完美解决，并且不仅可以直接写明属性名，还可以使用变量来指定，具体使用如下：

let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用点定义属性中间有空格是不合法的
// obj.little name = '小王子';
obj[a] = '小王子';
console.log(obj);

{ name: '王子', 'little name': '小王子' }

ES6 判断两个值是否相等

一些特殊值使用 === 或 == 进行比较的结果，可能不满足你的需求，这是你可以使用Object.is(第一个值，第二个值) 来进行判断，可能你就开心的笑了

console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));

false
true
true
false

ES6 复制对象

使用 Object.assign() 可以把一个对象复制到另一个对象，使用如下：

let obj = {};
Object.assign(
    // 源
    obj,
    // 复制目标对象
    { a: '☃️' }
);
console.log(obj);

{ a: '☃️' }

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype，使用如下：

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

1
true
2
true

ES6 proto

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = {
    __proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

1
true
2
true

ES6 super

let obj1 = {
    get() {
        return 1;
    }
}
let test = {
    __proto__: obj1,
    get() {
        return super.get() + ' ☃️';
    }
}
console.log(test.get());

1 ☃️

ES6 生成迭代器

在学习前，先首写一个迭代器

function die(arr) {
    let i = 0;

    return {
        next() {
            let done = (i >= arr.length);
            let value = !done ? arr[i++] : undefined;

            return {
                value: value,
                done: done
            }
        }
    }
}
let arr = ['☃️', '?', '?'];

let dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());

{ value: '☃️', done: false }
{ value: '?', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }

OK，看看简化的生成器

function* die(arr) {
    for (let i = 0; i <pre class="brush:php;toolbar:false">{ value: '?', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }

ES6 类

使用es6可以快速方便的构建类，好耶

class stu {
    constructor(name) {
        this.name = name;
    }
    say() {
        return this.name + '说奥里给';
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());

小明说奥里给

ES6 get set

定义get/set方法，用于获取或者修改类的属性

class stu {
    constructor(name) {
        this.name = name;
    }
    get() {
        return this.name;
    }
    set(newStr) {
        this.name = newStr;
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());

小明
大明

ES6 static

使用static关键字修饰的方法，不用实例化对象也可以直接使用

class stu {
    static say(str) {
        console.log(str);
    }
}
stu.say("奥里给 静态方法");

奥里给 静态方法

ES6 extends

使用继承，可以减少代码冗余，比如：

class Person {
    constructor(name, bir) {
        this.name = name;
        this.bir = bir;
    }
    showInfo() {
        return '姓名：' + this.name + '生日：' + this.bir;
    }
}
class A extends Person {
    constructor(name, bir) {
        super(name, bir);
    }
}
let zhouql = new A("周棋洛", "2002-06-01");
// 周棋洛本身是没有showInfo方法的，是继承自Person的
console.log(zhouql.showInfo());

姓名：周棋洛生日：2002-06-01

ES6 Set

Set 集合，与数组不同，Set 集合中不允许有重复元素

// 创建Set集合
let food = new Set('??');
// 重复添加，只有一个能进去
food.add('?');
food.add('?');

console.log(food);
// 当前集合大小
console.log(food.size);
// 判断集合中是否存在某一元素
console.log(food.has('?'));
// 删除集合中某一元素
food.delete('?');
console.log(food);
// 循环遍历集合
food.forEach(f => {
    console.log(f);
});
// 清空集合
food.clear();
console.log(food);

Set(3) { '?', '?', '?' }
3
true
Set(2) { '?', '?' }
?
?
Set(0) {}

ES6 Map

Map结合存储键值对

let food = new Map();
let a = {}, b = function () { }, c = "name";

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, '米饭');

console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));

food.forEach((v, k) => {
    console.log(`${k} + ${v}`);
});
food.clear();
console.log(food);

Map(3) { {} => '?', [Function: b] => '?', 'name' => '米饭' }
3
?
Map(2) { {} => '?', [Function: b] => '?' }
true
[object Object] + ?
function () { } + ?
Map(0) {}

ES6 模块化

使用模块化开发，es6可以方便的导入和导出一些内容，还有默认导出等等细节

let a = '?';
let f1 = function (str = '你丫的写参数') {
    console.log(str);
}
export { a, f1 };

import {a, f1} from './27模块测试.js';
console.log(a);
f1();
f1('知道了');

恭喜你，读完了本篇文章，能力 + 100 ，颜值 + 10，欢迎下次再来。先别走，如果觉得文章写的不错，还请点赞，收藏，关注帅气的博主啊，手动狗头，我会继续努力，原创不易，你的支持就是小周的动力

（学习视频分享：web前端开发、编程基础视频）

以上がこの記事では、ES6 について簡単かつ詳細に説明し、新機能を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。