Возможности ES6+ — Учебные заметки (1)

ECMAScript 6

ES6

ECMAScript 6.0, или сокращенно ES6, — это стандарт следующего поколения для языка JavaScript, выпущенный в июне 2015 года. Цель состоит в том, чтобы язык JavaScript можно было использовать для написания сложных крупномасштабных приложений и чтобы он стал языком разработки корпоративного уровня.

Вавилонский транскодер

Babel — это широко используемый транскодер ES6, который может преобразовывать код ES6 в код ES5 для выполнения в существующих средах.

Конфигурационный файл Babel.babelrc, хранящийся в корневом каталоге проекта. Первым шагом в использовании Babel является настройка этого файла.

Предоставлено Бабелемbabel-cliИнструмент для транскодирования командной строки.

Инструмент babel-cli поставляется с однимbabel-nodeКоманда, которая предоставляет среду REPL, поддерживающую ES6. Он поддерживает все функции среды Node REPL и может напрямую запускать код ES6. Вместо того, чтобы устанавливать его отдельно, он устанавливается с помощью babel-cli.

$ npm install --save-dev babel-cli

babel-registerМодуль переписывает команду require, добавляя к ней хук. После этого всякий раз, когда файлы с суффиксами .js, .jsx, .es и .es6 загружаются с использованием require, они будут сначала перекодированы с помощью Babel.

$ npm install --save-dev babel-register

Если какой-то код должен вызывать API Babel для транскодирования, необходимо использоватьbabel-coreмодуль.

$ npm install babel-core --save

Babel по умолчанию преобразует только новый синтаксис (синтаксис) JavaScript, а не новые API, такие как глобальные объекты, такие как Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, и некоторые методы, определенные для глобальных объектов (например, Object. assign) не будут перекодированы.

ES6 добавляет метод Array.from к объектам Array. Babel не будет перекодировать этот метод. Если вы хотите, чтобы этот метод работал, вы должны использоватьbabel-polyfill, который обеспечивает прокладку для текущей среды.

$ npm install --save babel-polyfill

команды let и const

let и const действительны только при объявлении в текущей области блока

{
    let a = 10;
    var b = 1;
}
a // ReferenceError: a is not define.
b // 1

for (let i = 0; i < 10; i++) {}
console.log(i); // ReferenceError: i is not defined

для счетчика циклов, подходит для объявления командой let

// var 声明
var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    }
}
a[0]();  // 10

// let 声明
var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    }
}
a[0](); // 0
console.log(i);
// ReferenceError: i is not defined

Поднятия переменных нет — переменные, объявленные командой let, должны быть объявлены, а затем назначены, и переменная недоступна, пока переменная не будет объявлена ​​командой let.

// var情况
console.log(foo); // undefined
var foo = 2;
// let情况
console.log(bar); // ReferenceError
let bar = 2;

// y没有声明之前，不能赋值给x
function bar(x = y, y = 2) {
    return [x, y];
}
bar(); // error

function bar(x = 2, y = x) {
    return [x, y];
}
bar(); // [2, 2]

Временная мертвая зона - в области блока есть команда let, эта зона ограничена объявленным let

var temp = 1;
if (true) {
    // TDZ开始
    temp = 2; // ReferenceError
    let temp; 
    // TDZ结束
}

let не позволяет повторно объявлять одну и ту же переменную в одной и той же области видимости.

let a; 
let a; 
console.log(a); // 报错

const объявляет константу только для чтения. После объявления значение константы не может быть изменено. Const может только гарантировать, что адрес объявленной текущей переменной остается неизменным, и не может гарантировать, что указанная структура данных является изменяемой.

// const声明的基本数据类型不能改变
const a = 1;
a = 2; // error

// const声明的引用数据类型中的属性值可被重新赋值
const obj = {};
obj.attr = value;
obj.attr; // value;

Шесть способов объявить переменные в ES6:

var, функция, let, const, импорт, класс

Разрушение присвоения переменных

  • Назначение деструктурирования массива
let [a, b, c] = [1, 2, 3]; // a = 1; b = 2; c = 3;
let [a, b, c = 3] = [1,2]; // a = 1; b = 2; c = 3;
let [a, [b, c], d] = [1, [2, 3], 4]; // a = 1; b = 2; c = 3; d = 4;

// 解构不成功为undefined
let [x, y, ...z] = ['a']; // x = 'a'; y = undefined; z = [];

// 可以设置默认值
let [x, y = 'b'] = ['a', undefined]; // x = 'a'; y = 'b';

// ES6通过严格运算符(===),判断一个位置是否有值,只有一个数组成员严格等于undefined,默认值才会生效
let [x = 1] = [undefined];  x // 1
let [x = 1] = [null]; x // null
  • Назначение деструктуризации объекта
// 变量名和属性名一致
let { foo, bar } = { foo: "aaa", bar: "bbb" }; 
<===> 
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
foo // aaa
var // bbb

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

// 如果变量名与属性名不一致
let { foo: a } = { foo: "aaa", bar: "bbb" };
a // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

// 解构可以用于嵌套结构的对象
let obj = {
    p: [
        'Hello',
        { y: 'World' }
    ]
};
let { p: [ x, { y }] } = obj;
x // 'Hello'
y // 'World'

const node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // { start: Object }
start // { line: 1, column: 5 }
  • Назначение деструктурирования строки
const [a,b,c,d,e] = 'hello';
a // 'h'
b // 'e'
c // 'l'
d // 'l'
o // 'o'

let { length: len } = 'hello';
len // 5
  • Разрушение присвоения чисел и логических значений
// 解构赋值时，如果等号右边是数值和布尔值，则先转化为对象
let { toString: s } = 123;
s === Number.prototype.toString // true

let { toString: s } = true;
s === Boolean.prototype.toString // true
  • Деструктивное присвоение функциональных параметров
// 函数的参数可以使用解构赋值
funtion add([x, y]) {
    return x + y;
}
add([1,2]);  // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b); // [3, 7]

// 函数move的参数是一个对象，通过对这个对象解构，得到x和y；解构失败，x和y为默认值
function move({x = 0, y = 0} = {}) {
    return [x, y];
}
<===>
function move({x = 0, y = 0}) {
    return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({});  // [0, 0]
move();  // [0, 0]

// 为函数参数指定默认值，而不是为变量x和y指定默认值
function move({x, y} = {x: 0, y: 0}) {
    return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({});  // [undefined, undefined]
move();  // [0, 0]

использовать

  • Поменять местами значение переменной
let x = 1; 
let y = 2;
[x, y] = [y, x];
  • Возврат нескольких значений из функции
// 返回一个数组
function example() {
    return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
    return {
        foo: 1,
        bar: 2
    };
}
let { foo, bar } = example();
  • Определение параметров функции
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
  • Извлечь данные JSON
let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
  • Значения по умолчанию для параметров функции
JQuery.ajax = function (url, {
   async = true,
   beforeSend = function () {},
   cache = true,
   complete = function () {},
   crossDomain = false,
   global = true
} = {}) {
    // do stuff 
};
  • Пройдите структуру карты
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

Большая часть этой статьи взята из следующих руководств по ES6:

Руан Ифэн: Начало работы с ECMAScript 6

Введение в ECMAScript 6

Категории