Разговор об общих новых функциях ES6 и понимание их решений совместимости

JavaScript ECMAScript 6

Как использовать совместимость babel es6 для компиляции нашего кода js (es6)

совместимость
стрелочная функция служба поддержки
Объявление класса и наследование Частично поддерживается, IE8 не поддерживается
Усовершенствованные литералы объектов служба поддержки
шаблон строки служба поддержки
разрушать Да, но обратите внимание на то, как вы его используете
значение параметра по умолчанию, неопределенный параметр, расширенный параметр служба поддержки
пусть и const служба поддержки
for of ИЕ не поддерживает
iterator, generator не поддерживается
Модуль модуля, Прокси, Символ не поддерживается
Карта, набор и WeakMap, WeakSet не поддерживается
Новые API для Promises, Math, Number, String, Object не поддерживается
export & import служба поддержки
генераторная функция не поддерживается
Массивная копия служба поддержки

Итак, давайте поговорим о том, как использовать этот babel для совместимости с нашим кодом es6 (конечно, предпосылка в том, что файл babeljs уже существует в проекте, вот как позволить babel скомпилировать наш файл js или jsx в webpack)

Предыдущий небольшой код:

module: {
        loaders: [
            //
            {
                test: /\.(jsx|js)$/,
                loader: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    }

1.var let const

На самом деле хорошо известно, что let на самом деле определяет переменную с собственным блоком кода.Так называемый блок кода на самом деле используется, когда вы используете let в {} для определения переменной, пусть существует только в {}, но это работает с функциями js Разница между доменами заключается в том, что переменные, определенные с помощью let, не поднимаются.

var a = 1;
function fn1(){
    console.log(a);
    a = 2;
}
console.log(a);//1
fn1();  // 2

var b = 2;
function fn2(){
    console.log(b);
    let b = 1;
}
console.log（b）//2
fn2();  //

Из этого примера мы видим, что значения переменных a и b печатаются отдельно.Значение, измененное с помощью let, теряет свое действие после функции {}, а не присваивание с помощью let, которое по-прежнему действует после {}.

Чтобы дать еще один полезный сценарий приложения, мы неизбежно будем использовать замыкания, когда у нас есть какие-то особые потребности. Если вы не понимаете замыкания, перейдите к междоменным замыканиям. Например, общая проблема плохой улицы, li печать в ul его указатель или содержание. В es5 делаем так:

var arr = [];

for(var i=0; i<5; i++){
    arr.push((function (a){
        return function (){
            console.log(a);
        }
    })(i))
}
arr[1]()  // 1
arr[2]()  // 2
arr[3]()  // 3

Недостаток замыкания в том, что оно будет занимать память, а не отпускать ее, поэтому напишем по-другому:

var arr = [];  // let arr = [] 都可以
for(let i=0; i<5; i++){
    arr.push(function (){
        console.log(i)
    })
}
arr[0]()  // 0
arr[1]()  // 1
arr[2]()  // 2

Использование позволит идеальному решению этой проблемы.
Кроме того, const легко понять. Это способ объявления константы. Нетрудно понять концепцию наличия основы других языков. Опять же, я не буду повторяться.

2. Разрушающее назначение

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;

var {
  StyleSheet,
  Text,
  View
} = React;
等同于
var StyleSheet = React.StyleSheet；

var Text = React.Text；
var View = React.View；

3. Стрелочные функции

Новый оператор стрелки в ES6 используется для упрощения написания функций.Левая часть оператора — это параметр, а правая — конкретная операция и возвращаемое значение.

var sum = (num1, num2) => { return num1 + num2; }
//等同于
var sum = function(num1, num2) {
    return num1 + num2;
 };

В то же время стрелочная функция также фиксирует указание this, чтобы оно всегда указывало на лексическую область видимости:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

4. Класс класс

ES6 предоставляет метод написания, который ближе к традиционным языкам, и вводит концепцию класса (класс) в качестве шаблона для объектов. С ключевым словом класса классы могут быть определены, похоже на большинство традиционных языков.
// определяем класс

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

В том же наследовании используется ключевое слово extends

5. Струны

Добавлены функции обработки строк:

startsWith() //检查是否以指定字符串开头，返回布尔值
let str = 'javascript';
str.startsWith('java'); 
endsWith() //检查是否以指定字符串结尾,返回布尔值
let str = 'javascript'
str.endsWith('pt');
includes() //检查字符串是否包含指定字符串 ，返回布尔值
let str = 'javascript';
str.includes('j');
repeat() //指定字符串重复次数
let str = 'javascript';
str.repeat('3');

Литералы шаблона Строковый шаблон
Используя строковые литералы шаблонов, я могу использовать специальные символы непосредственно в строке без экранирования.

var text = "This string contains \"double quotes\" which are escaped.";
let text = `This string contains "double quotes" which don't need to be escaped anymore.`;

Строковые литералы шаблонов также поддерживают прямую вставку переменных, что может реализовать прямое соединение со строками и переменными.

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');
更简单的版本：
const name = 'Tiger';
const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);

В ES5 мы хотим генерировать многострочный текст следующим образом:

var text = (
    'cat\n' +
    'dog\n' +
    'nickelodeon'
);
或者：
var text = [
    'cat',
    'dog',
    'nickelodeon'
].join('\n');

Строковые литералы шаблонов Не будем обращать особого внимания на символы новой строки в многострочных строках, мы можем просто обернуть:

let text = ( `cat
dog
nickelodeon`
);

Строковые литералы шаблонов могут использовать внутри себя выражения, например:

let today = new Date();
let text = `The time and date is ${today.toLocaleString()};

6. Символ седьмого базового типа

Символы сильно отличаются от других основных типов.
Неизменный с момента создания. Вы не можете установить для него свойства (если вы попробуете в строгом режиме, вы получите ошибку типа). Его можно использовать как имя свойства. Это его струнная природа.
С другой стороны, каждый символ уникален. В отличие от других (даже если их описание такое же), вы можете легко создать новый. В этом его предметная природа.
Символы ES6 похожи на более традиционные символы в Lisp и Ruby, но не так тесно интегрированы в язык. В Лиспе все идентификаторы являются символами. В JS идентификаторы и большинство ключей свойств по-прежнему в первую очередь являются строками, а символы — просто дополнительным вариантом для разработчиков.
Предупреждение о символах: в отличие от других типов в JS, он не может быть автоматически преобразован в строку. Попытка объединить символы и строки приведет к ошибке типа.

(Указывает на то, что после прочтения документа вы все еще находитесь в круге и сначала решили отказаться от этой точки)

7.Promise

Объект обещания можно понимать как операцию, которую нужно выполнить (часто используемую для асинхронной операции), и можно организовать с помощью цепного вызова после использования объекта обещания, чтобы код был более интуитивным. А поскольку promise.all существует, он может упростить одновременную реализацию нескольких операций. Давайте кратко представим объект обещания.

Более интуитивно понятен непосредственно в коде:

function helloWorld (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello World!");
        } else {
            reject("Good bye!");
        }
    });
}

helloWorld(true).then(function (message) {
    alert(message);
}, function (error) {
    alert(error);
});




Метод reject изменяет состояние объекта Promise на сбой и передает сообщение об ошибке последующим операциям обработки ошибок.

Три состояния обещаний
Как упоминалось выше, разрешение и отклонение могут изменить состояние объекта обещания, так что у него есть государство?
Объекты промисов имеют три состояния:

  • Выполнено можно понимать как успешное состояние
  • Отклонено может быть понято как неудачное состояние
  • Ожидание не является ни выполненным, ни отклоненным, его можно понимать как начальное состояние экземпляра объекта Promise при его создании.
    Метод then в примере helloWorld определяет операцию, которую нужно выполнить, в соответствии с состоянием объекта Promise: первая функция (onFulfilled) выполняется при его разрешении, а вторая функция (onRejected) — при его отклонении.
    тогда и лови
    then
    В примере helloWorld используется метод then(onFulfilld, onRejected) для выполнения задачи по печати «Hello World!», в случае нескольких задач метод then также можно выполнить чистым способом.
    function printHello (ready) {
return new Promise(function (resolve, reject) {
    if (ready) {
        resolve("Hello");
    } else {
        reject("Good bye!");
   }
});
}

В приведенном выше примере соответствующий контент выводится последовательно с помощью связанных вызовов. Причина, по которой затем может быть цепочка, заключается в том, что каждое выполнение метода всегда возвращает объект Promise. Кроме того, возвращаемое значение в функции then onFulfilled можно использовать в качестве параметра для последующих операций, поэтому приведенный выше пример также можно записать так:

printHello(true).then(function (message) {
    return message;
}).then(function (message) {
    return message  + ' World';
}).then(function (message) {
    return message + '!';
}).then(function (message) {
    alert(message);
});
function printWorld () {
    alert("World");
}

function printExclamation () {
    alert("!");
}

printHello(true)
    .then(function(message){
    alert(message);
    })
    .then(printWorld)
    .then(printExclamation);

Также печатает правильный контент.
catch
Метод catch — это простой способ записи функции onRejected в методе then(onFulfilled, onRejected), то есть его можно записать как then(fn).catch(fn), что эквивалентно then(fn) .тог(нуль, fn). Метод записи с использованием catch более понятен и ясен, чем обычный метод записи.
Promise.all и Promise.race
Promise.all может получать массив объектов Promise в качестве параметра, и метод будет возвращаться только тогда, когда все объекты Promise в массиве будут разрешены.

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

В приведенном выше примере имитируется, что для передачи двух частей данных требуется разное время.Хотя p2 быстрее, чем p1, метод Promise.all вернет результаты в том порядке, в котором они находятся в массиве.


совместимость

Что касается браузера, некоторые основные браузеры уже могут использовать объекты Promise для разработки, и его также можно легко использовать в Node.js с babel.
Если вы хотите быть совместимым со старыми браузерами, рекомендуется искать некоторые сторонние решения, такие как $.Deferred от jQuery.

Категории