Хотите писать элегантный код? Попробуйте эти советы по ES6

внешний интерфейс Babel

Недавно я просматривал документацию по ES6 и обнаружил, что в дополнение к часто используемым синтаксисам, таким как стрелочные функции, деструктурирующие присваивания и операторы расширения, существует множество мощных методов, которые не только делают код более кратким, но и повышают его надежность. К моему удивлению, большинство методов совместимы с браузером и отлично работают без Babel. Так что думаю надо разобраться.В проекте отказаться от старого и античного метода написания и апгрейдить до стандартного кода ES6.

1. Обновление массива

1. Копировать массив оператора спреда

//es5做法
const a1 = [1, 2]
const a2 = a1.concat()

a2[0] = 2
a1 //[1,2] 修改a2不会对a1有影响

Оператор распространения обеспечивает сокращение для копирования массива:

//es6做法
const a1 = [1, 2]
const a2 = [...a1]
//or
const [...a2] = a1

a2[0] = 2
a1 //[1,2] 修改a2不会对a1有影响

Примечание. Описанный выше процесс копирования представляет собой глубокое копирование, но следует отметить, что операторы concat и spread используются в качествеОбъединить массивыявляются мелкими копиями.

2. find() и findIndex() для экземпляров массива

Метод find используется для поиска первого квалифицированного члена массива. Его параметром является функция обратного вызова. Все члены массива последовательно выполняют функцию обратного вызова, пока не будет найден первый элемент, возвращаемое значение которого равно true, а затемвернуть этого члена. Возвращает неопределенное значение, если нет подходящих членов.

//es5做法
const arr = [1,5,10,15]
for(var i=0;i<arr.length;i++) {
    if(arr[i]>5) {
        return arr[i]
    }
} //10
//es6做法
[1,5,10,15].find(function(value,index,arr) {
    return value > 5
}) //10

Кроме того, оба метода могут находить NaN, компенсируя отсутствие метода indexOf.

[NaN].indexOf[NaN] //-1

[NaN].findIndex(y => Object.is(NaN,y)) //0

3. Экземпляр массива включает()

Этот метод возвращает логическое значение, указывающее, содержит ли массив заданное значение. До этого метода мы обычно использовали метод indexOf массива, чтобы проверить, содержит ли он определенное значение.

У метода indexOf есть два недостатка: во-первых, он недостаточно семантичен, его смысл в том, чтобы найти первое вхождение значения параметра, поэтому он недостаточно интуитивен, чтобы сравнивать, не равно ли оно -1. Во-вторых, он использует оператор строгого равенства (===) внутри для оценки, что приведет к неправильной оценке NaN.

[NaN].indexOf[NaN] //-1

[NaN].includes(NaN) //0

Примечание. Структуры данных Map и Set имеют метод has, который следует отличать от include. Метод has структуры Map заключается в том, чтобы найти имя ключа Метод has структуры Set используется для поиска значения ключа.

2. Обновление объекта

1.Object.assign()

Для слияния объектов все исходные объектыперечислимое свойствоскопирован на целевой объект.

Свойства, копируемые object.assign, ограничены,Скопируйте только свойства самого исходного объекта(Не копирует ни унаследованные свойства, ни неперечислимые свойства)

//为对象添加属性和方法
//es6
class Point {
 constructor(x, y) {
   Object.assign(this, {x, y});
 }
}
Object.assign(Point.prototype, {
 addPoint(arg1, arg2) {
   ···
 }
});

Этот метод очень распространен, но все же необходимо выделить некоторые детали, чтобы напомнить себе, что нужно быть внимательным.

(1) Поверхностная копия

Метод Object.assign выполняет поверхностную, а не глубокую копию. То есть, если значением свойства исходного объекта является объект, то копия целевого объекта является ссылкой на этот объект.

(2) Замена атрибутов с тем же именем

Для таких вложенных объектов, когда встречается свойство с таким же именем, метод обработки Object.assign заключается в замене, а не добавлении. Обратите особое внимание! !

(3) Обработка массивов

Object.assign может использоваться для обработки массивов, но рассматривает массивы как объекты.

2. Обход свойств

ES6 имеет в общей сложности 5 способов перебора свойств объекта.

(1) для... в

for...in перебирает собственные и унаследованные перечисляемые свойства объекта (без свойств Symbol).

(2) Object.keys(obj)

Object.keys возвращает массив, содержащий имена ключей всех перечислимых свойств (за исключением свойств Symbol) самого объекта (за исключением унаследованных).

(3) Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames возвращает массив, содержащий ключевые имена всех свойств самого объекта (исключая свойства Symbol, но включая неперечислимые свойства).

(4) Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols возвращает массив, содержащий ключи всех свойств Symbol самого объекта.

(5) Reflect.ownKeys(obj)

Reflect.ownKeys возвращает массив, содержащий все имена ключей самого объекта, независимо от того, является ли имя ключа символом или строкой, является ли оно перечислимым или нет.

3. Обновление функций

1.остальные параметры

Используется для получения избыточных аргументов функции, так что объект arguments не нужен.

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

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

ES6 позволяет определять функции с помощью «стрелок» (=>).

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

будь осторожен:

(1) Объект this в теле функции — это объект, в котором он определен, а не объект, в котором он используется.

(2) Его нельзя использовать как конструктор, то есть нельзя использовать новую команду, иначе будет выброшена ошибка.

(3) Вы не можете использовать объект arguments, которого нет в теле функции. Если вы хотите использовать его, вы можете вместо этого использовать остальные параметры.

Четыре.для...петли

Диапазон циклов for...of, которые можно использовать, включает массивы, структуры Set и Map, некоторые объекты, подобные массивам (такие как объекты arguments, объекты DOM NodeList), более поздние объекты Generator и строки.

1. Использование

множество:

//为对象添加属性和方法
//es6
const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

Установить и сопоставить структуры

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
 console.log(e);
}
// Gecko
// Trident
// Webkit

var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
 console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

массивоподобный объект

// 字符串
let str = "hello";

for (let s of str) {
 console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
 p.classList.add("test");
}

// arguments对象
function printArgs() {
 for (let x of arguments) {
   console.log(x);
 }
}
printArgs('a', 'b');
// 'a'
// 'b'

2. Сравнение с другими синтаксисами обхода

Цикл for...in имеет несколько недостатков.

  • Ключи массива — это числа, но цикл for...in использует строки в качестве ключей «0», «1», «2» и т. д.
  • Цикл for...in перебирает не только имена цифровых клавиш, но и другие клавиши, добавленные вручную.даже ключи в цепочке прототипов.
  • В некоторых случаях цикл for...in перебирает ключи в произвольном порядке. В заключение, циклы for...in в основном предназначены для обхода объектов, а не для обхода массивов.

Недостаток цикла forEach в том, что он не может выпрыгнуть из цикла forEach в середине, и не сработает ни команда break, ни команда return.

Напротив, for...of имеет следующие преимущества:

  • Имеет тот же краткий синтаксис, что и for...in, но без недостатков for...in.
  • В отличие от метода forEach, его можно использовать с break, continue и return.
  • Предоставляет унифицированный рабочий интерфейс для обхода всех структур данных.

5. Ссылочный URL-адрес

http://es6.ruanyifeng.com/#docs/iterator#for---of-%E5%BE%AA%E7%8E%AF

Категории