Повторное изучение сводки новых функций внешнего интерфейса ES6+

JavaScript

предисловие

Недавно начал переучиваться фронтенду.В процессе обучения буду делиться с вами своими заметками.Надеюсь всем будет полезно и расти вместе.Пожалуйста,поправьте меня,если в статье что-то не так.

В этой статье кратко перечислены некоторые новые функции в ES6+, а некоторые точки знаний слишком обширны.Эта статья будет освещена в одном отрывке, а позже будет подробно представлена ​​​​другая статья, например: Promise, Generator и т. д.

текст

1. let, const блочная область видимости и разница с var

  • Переменные, объявленные с помощью let и const, будут формировать область действия на уровне блока в операторах for и if.Переменные в области действия на уровне блока не могут использоваться вне области действия.
  • Объявленные переменные let и const больше не будут продвигаться по объявлению, а среда выполнения сообщит об ошибке при использовании перед объявлением переменной.
//块级作用域一级块级作用域的使用
if(true) {
    const param = 'param in if block';
    console.log(param);//param in if block
}
console.log(param);//块级作用域外访问内部定义的变量，ReferenceError: param is not defined
  • Когда переменная объявляется на уровне блока, появляется "временная мертвая зона". Если переменная используется до того, как переменная объявлена ​​на уровне блока, будет сообщено об ошибке.
// 暂时性死区
const i = 100;
if(i) {
    console.log(i); //ReferenceError: Cannot access 'i' before initialization
    const i = 1000;
}
  • const объявляет константу, объявление должно быть инициализировано
// const常量声明必须初始化
const i;
i = 10;
console.log(i) //SyntaxError: Missing initializer in const declaration
  • Если const объявляет константу базового типа, ее нельзя изменить после инициализации, для константы ссылочного типа можно изменить ее переменные-члены;
// 基本类型常量不能修改，引用类型常量能修改属性
const str = 'str';
str = 'str1';//TypeError: Assignment to constant variable.

const arr = [1, 2, 3];
arr[0] = 100;
console.log(arr[0]) //100
  • Разница между var и var
Метод объявления переменное продвижение объем Первоначальный значение повторяющееся определение
var да функциональный уровень ненужный разрешать
let нет блочный уровень ненужный не положено
const нет блочный уровень требуется не положено

2. Деструктуризация — быстрое извлечение элементов из массива/объекта.

  • деструктуризация массива

  • Раздельная деструктуризация — разрушает массив на отдельные элементы на основе индекса массива.

const arr = [1, 2, 3];

const [a, b, c] = arr;
console.log(a, b, c);//1,2,3
const [, , d] = arr;
console.log(d)//3
  • Значение по умолчанию, вы можете установить значение по умолчанию для переменной при деструктуризации, если в массиве нет этого элемента
const arr = [1, 2, 3];

const [, , , defaultVal = '4'] = arr;
console.log('设置默认值',defaultVal);
  • остальная деструктуризация - используйте "...+имя переменной" для деструктуризации оставшихся параметров в новый массив, может использоваться только один раз
const arr = [1, 2, 3];

const [e, ...rest] = arr;
console.log(rest)//[2, 3]
  • Пример приложения
// 拆分字符串
const str = 'xiaobai/18/200';
const strArr = str.split('/');
const [, age, ] = strArr;
console.log(age)//18

  • деструктуризация объекта

  • Одиночная/множественная деструктуризация - аналогична деструктуризации массива

 const obj = {name: 'xiaohui', age: 18, height: undefined};
 const {name, age} = obj;
 console.log(name, age) // 'xiaohui', 18
  • Деструктурирование + Переименование - Переименовать разрушенную переменную
const obj = {name: 'xiaohui', age: 18, height: undefined};
const {mame: objMame} = obj;
console.log(objMame)
  • По умолчанию - установить значение по умолчанию для переменных деструктурирования
const obj = {name: 'xiaohui', age: 18, height: undefined};
const {mame: objMame} = obj;
console.log(objMame)

3. Строка шаблона

  • Применение:

  • Используйте `` для переноса строки

  • Функция:

  • Может оборачивать, интерполировать, использовать функции меток для манипуляций со строками

  • Пример:

  • новая строка/интерполяция

//换行
const str = `fdsjak
fdsa`
console.log(str)

// 插值
const strs = `random: ${Math.random()}`;
console.log(strs)
  • Функции меток — могут выполнять такие операции, как обработка и фильтрация строк и интерполяция строк шаблона.
/**
 * 字符串模板函数
 * @param {array} strs 以插值为分隔符组成的字符串数组
 * @param {string} name 插值的value，有多少个就会传入多少个
 */
const tagFunc = (strs, name, gender) => {
  const [str1, str2, str3] = strs;
  const genderParsed = gender == "1" ? "男" : "女";
  // 可以在此做过滤，字符串处理，多语言等操作
  return str1 + name + str2 + str3 + genderParsed;
};

// 带标签的模板字符串,
const person = {
  name: "xiaohui",
  gender: 1,
};
// 返回值为标签函数的返回值
const result = tagFunc`my name is ${person.name}.gender is ${person.gender}`;
console.log(result);//my name is xiaohui.gender is 男

4. Методы расширения строки

  • включает - включать ли
  • startsWith - начинать ли с чего-то
  • endWith - чем-то заканчивается
 const str = 'abcd';

 console.log(str.includes('e'));//false
 console.log(str.startsWith('a'));//true
 console.log(str.endsWith('a'))//false

5. Значение параметра по умолчанию и остальные параметры

  • Установить значения по умолчанию для параметров функции
// 带默认参数的形参一般放在后面，减少传参导致的错误几率
const defaultParams = function (name,age = 0) {
  return [age, name]
};
console.log(defaultParams(1))
  • Используйте форму ...rest для установки остальных параметров, поддержка неограниченного количества параметров
// 剩余参数，转化成数组
const restParams = function(...args) {
    console.log(args.toString());//1, 2, 3, 4, 5
}

restParams(1, 2, 3, 4, 5)

6. Развернуть массив

Расширьте массив, используя...

const arr = [1, 2, 3];

console.log(...arr);
// 等价于es5中以下写法
console.log.apply(console, arr)

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

Особенности и преимущества:

  • 1. Упростили написание функции
  • 2. Нет этого механизма, это наследуется от контекста предыдущей функции, если в предыдущем слое нет функции, она указывает на окно
  • 3. При использовании в качестве асинхронной функции обратного вызова может решить проблему этого указания
const inc = n => n + 1;
console.log(inc(100))

const obj = {
    name: 'aa',
    func() {
        setTimeout(() => {
            console.log(this.name);//aa
        }, 0);
        setTimeout(function() {
            console.log(this.name);//undefined
        }, 0);
    }
}
obj.func();

8. Усовершенствования литерала объекта

  • Атрибуты с одинаковыми именами могут опускать форму ключ:значение и использовать ключ напрямую.
  • Функция может опускать форму ключ:значение
  • Вы можете напрямую func(),
  • Можно использовать вычисляемые свойства, например: {[Math.random()]: значение}
/**
 * 1、增强了对象字面量：
 * 1，同名属性可以省略key:value形式，直接key，
 * 2，函数可以省略key：value形式
 * 3，可以直接func(),
 * 4，可以使用计算属性，比如：{[Math.random()]: value}
 */
const arr = [1, 2, 3];
 const obj = {
     arr,
     func(){console.log(this.arr)},
     [Math.random()]: arr
 }

 console.log(obj)

9.Object.assign(target1, target2, targetN) - копирование/объединение объектов

/**
 * Object.assign(target1, target2, ...targetn)
 * 后面的属性向前面的属性合并
 * 如果target1是空对象，可以创建一个全新对象，而不是对象引用
 */
const obj1 = {
  a: 1,
  b: 2
};
const obj2 = {
  a: 1,
  b: 2,
};

const obj3 = Object.assign({}, obj1);
obj3.a  = 5;
console.log(obj3, obj2, obj1);

10.Object.is(value1, value2)

эффект:

сравнивает два значения на равенство

характеристика:

  • Нет неявного преобразования
  • Можно сравнивать +0, -0, NaN
console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true
console.log(0 === -0) // true
console.log(Object.is(0, -0))//false
console.log(Object.is(1, 1))//true

11.Proxy(object, handler)

эффект:

  • Прокси всего объекта, включая операции чтения и записи и мониторинг различных операций

Применение:

const P = {
  n: "p",
  a: 19,
};

const proxy = new Proxy(P, {
  get(target, property) {
    console.log(target, property);
    return property in target ? target[property] : null;
  },
  defineProperty(target, property, attrs) {
    console.log(target, property, attrs);
    //   throw new Error('不允许修改')
  },
  deleteProperty(target, property) {
    console.log(target, property);
    delete target[property];
  },
  set(target, property, value) {
    target[property] = value;
  },
});

proxy.c = 100;
console.log('pp',P);

Контраст с Object.definePropert

Преимущество:

  • Существует много методов свойств, которых нет у defineProperty, например:

  • handler.getPrototypeOf() --- Слушатель для метода Object.getPrototypeOf
  • handler.setPrototypeOf() --- Слушатель для метода Object.setPrototypeOf.
  • handler.isExtensible() --- Слушатель для метода Object.isExtensible.
  • handler.preventExtensions() --- Слушатель для метода Object.preventExtensions.
  • handler.getOwnPropertyDescriptor() --- Слушатель для метода Object.getOwnPropertyDescriptor.
  • handler.defineProperty() --- Слушатель для метода Object.defineProperty.
  • handler.has() --- Слушатель оператора in.
  • handler.get() --- Прослушиватель операций чтения свойств.
  • handler.set() --- Прослушиватель операций с наборами свойств.
  • handler.deleteProperty() --- слушатель для оператора удаления
  • handler.ownKeys() --- Прослушиватель для методов Object.getOwnPropertyNames и Object.getOwnPropertySymbols.
  • handler.apply() --- Прослушиватель операций вызова функции.
  • handler.construct() --- Прослушиватель нового оператора.

  • Мониторинг массивов удобнее

  • Контролируйте чтение и письмо субъекта с помощью ненавязчивых посещений

12.Reflect

эффект:

Интегрировать все методы работы с Объектом, унифицированные и удобные, конкретные методы заключаются в следующем:

Он используется для унифицированных операций над объектами и объединяет все методы, связанные с Object.

1. применить: аналогично Function.prototype.apply

2. Reflect.construct()

Новая операция в конструкторе эквивалентна выполнению new target(...args).

3. Refrect.DefineProperty ()

Аналогично Object.defineProperty().

4. Reflect.deleteProperty()

Как оператор удаления функции, он эквивалентен выполнению удаления цели [имя].

5. Отразить.получить()

Получите значение свойства объекта, аналогичное target[name].

6. Reflect.getOwnPropertyDescriptor()

Аналогично Object.getOwnPropertyDescriptor().

7. Reflect.getPrototypeOf()

Подобно Object.getPrototypeOf(), получите прототип целевого объекта.

8. Reflect.has()

Определение того, имеет ли объект атрибут, имеет ту же функцию, что и оператор in.

9. Reflect.isExtensible()

Аналогично Object.isExtensible().Чтобы определить, является ли объект расширяемым, можно добавить дополнительные свойства.

Object.seal (закрытый объект), Object.freeze (заморозить объект) не является расширяемым

10. Reflect.ownKeys()

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

11. Reflect.preventExtensions()

Аналогично Object.preventExtensions(). Возвращает логическое значение.

12. Reflect.set()

Функция для присвоения значения свойству. Возвращает логическое значение, true если обновление прошло успешно, иначе false.

13. Reflect.setPrototypeOf()

Аналогично Object.setPrototypeOf().

Пример:

const obj = {
    name: 'reflect'
}
Reflect.preventExtensions(obj);//禁止扩展
console.log(Reflect.set(obj, 'age', 'xiaobai'))//false
console.log(obj)//{ name: 'reflect' }
console.log(Reflect.isExtensible(obj, 'name'))//false
console.log(Reflect.ownKeys(obj))//[ 'name' ]

13.Promise

Функция: решить проблему глубокой вложенности обратных вызовов в асинхронном программировании.

14.класс, статический метод и наследование

  • определение

  • Классы определяются с помощью ключевого слова class

class Person{
  constructor(props) {
    this.props = props;
  }
}

  • метод

  • Методы экземпляра, которые должны быть созданы, прежде чем их можно будет вызвать, это указывает на экземпляр

  • Статические методы, украшенные модификатором static, могут вызываться напрямую через имя класса без создания экземпляра, это указывает не на экземпляр, а на текущий класс.

class Person{
  constructor(props) {
    this.props = props;
  }
  // 实例方法
  eat() {

  }
  // 静态方法
  static run() {

  }
}
// 调用静态方法
Person.run();
const person = new Person('props');
// 调用实例方法
person.eat();
  • Наследование: подкласс использует ключевое слово extends для достижения наследования и может наследовать все свойства родительского класса.
class Student extends Person {
  constructor(props) {
    super(props);
  }
  printProps() {
    console.log(this.props);
  }
}

const student  = new Student('student');
student.printProps();

15.Set

проиллюстрировать:

Set представляет собой структуру данных, подобную массиву.

характеристика:

  • Уникальность элемента, не допускаются повторяющиеся элементы
  • Используйте add, чтобы добавить повторяющиеся элементы, которые будут проигнорированы.

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

  • Дедупликация массива
  • хранилище данных
 const arr = [1,3,1,1,1]
 const set = new Set(arr);
 set.add(1).add(1);
 console.log(set.size)//2
 const newArr = Array.from(set);
 console.log(newArr)//[ 1, 3 ]

16.Map

проиллюстрировать:

Подобно объекту, хранит данные в виде ключа и значения.

разница:

Ключи карты не преобразуются неявно в строки, но сохраняют свой первоначальный тип.

Пример:

const map = new Map();
map.set(1, 1);
map.set('name', 'map')
map.set(obj, obj)
console.log(map.get(1)) //1
/**
    1 1
    name map
    { '1': 1, true: true, a: 'a' } { '1': 1, true: true, a: 'a' }
 */
map.forEach((val, key) => {console.log(key, val)})

17.Symbol

проиллюстрировать:

Шестой примитивный тип данных в JavaScript, используемый для определения уникальной переменной.

  • эффект:

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

  • Создавайте частные свойства для объектов, классов, функций и т. д.

  • Изменить вкладку ToString объекта

  • Добавить свойство итератора к объекту

  • Как получить свойство символа объекта?

  • Object.getOwnPropertySymbols(object)

  • пример
// 对象属性重名问题；
const objSymbol = {
    [Symbol()]: 1,
    [Symbol()]: 2
}
console.log(objSymbol)

// 2、为对象、类、函数等创建私有属性
const name = Symbol();
const obj2 = {
    [name]: 'symbol',
    testPrivate() {
        console.log(this[name]);
    }
}

obj2.testPrivate();
// 定义toString标签；
console.log(obj2.toString());
obj2[Symbol.toStringTag] = 'xx';
console.log(obj2.toString());//[object xx]

18.for...of...

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

Унифицированный способ обхода всех типов справочных данных

характеристика:

Вы можете использовать break для прекращения обхода в любое время, в то время как forEach этого не делает.

Пример:

// 基本用法
// 遍历数组
const arr = [1, 2, 3, 4];
for(const item of arr) {
    if(item > 3) {
        break;
    }
    if(item > 2) {
        console.log(item)
    }
}

// 遍历set
const set = new Set();
set.add('foo').add('bar');
for(const item of set) {
    console.log('set for of',item)
}
// 遍历map
const map = new Map();
map.set('foo', 'one').set('bar', 'two');
for(const [key, val] of map) {
    console.log('for of map',key, val)
}
//迭代对象
const obj = {
  name: "xiaohui",
  age: "10",
  store: [1, 2, 3],
  // 实现可迭代的接口
  [Symbol.iterator]: function () {
    const params = [this.name, this.age, this.store]
    let index = 0;
    return {
      next() {
        const ret = {
          value: params[index],
          done: index >= params.length,
        };
        index++;
        return ret;
      },
    };
  },
};

for (const item of obj) {
  console.log("obj for of", item);
}

19. Шаблон итератора

/**
* Режим итератора* Функция: предоставление унифицированного внешнего интерфейса через Symbol.interator для получения внутренних данных
* Внешний может перебирать внутренние данные через for...of... */
const tods = {
  life: ["eat", "sleep"],
  learn: ["js", "dart"],
  // 增加的任务
  work: ["sale", "customer"],
  [Symbol.iterator]: function () {
    const all = [];
    Object.keys(this).forEach(key => {
        all.push(...this[key])
    })
    let index = 0;
    return {
      next() {
        const ret = {
          value: all[index],
          done: index >= all.length,
        };
        index++;
        return ret;
      },
    };
  },
};

for (const item of tods) {
  console.log(item);
}

20.Генератор-генератор

  • Generator
  • Добавьте * перед функцией для генерации генератора
  • Обычно используется с ключевым словом yield
  • Самая большая особенность - ленивое выполнение, и оно будет выполнено, когда будет вызван следующий
  • В основном используется для решения проблемы слишком глубокого асинхронного обратного вызова.
// 生成迭代器方法
//  生成器Generator的应用

function* createIdGenerator() {
  let id = 1;
  while (id<3) yield id++;
}
const createId = createIdGenerator();
console.log(createId.next());//{ value: 1, done: false }
console.log(createId.next());//{ value: 2, done: false }
console.log(createId.next());//{ value: undefined, done: true }

const todos = {
  life: ["eat", "sleep", "baba"],
  learn: ["es5", "es6", "design pattern"],
  work: ["b", "c", "framework"],
  [Symbol.iterator]: function* () {
    const all = [...this.life, ...this.learn, ...this.work];
    for(const i of all) {
        yield i;
    }
  },
};
for(const item of todos) {
    console.log(item)
}

21.включает функцию-es2016

Определите, содержит ли массив элемент, включая NaN, чтобы решить проблему, из-за которой indexOf не может найти NaN.

//  includes函数
const arr = ["foo", "bar", "baz", NaN];
console.log(arr.includes(NaN));//true
console.log(arr.indexOf(NaN));//-1

22. ** Операторы - es2016

Возведение в степень

// 指数运算符 **
// es5中2十次方
console.log(Math.pow(2, 10));
// es6中2十次方
console.log(2 ** 10);

23.функция значений-es2017

Возвращает значение объекта в виде массива

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};

console.log(Object.values(obj));//[ 1, 2, 3 ]

24.функция записей-es2017

Возвращает объект в виде двумерного массива пар ключ-значение, чтобы его можно было пройти, используя for...of...

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};
console.log(Object.entries(obj));
const entry = Object.entries(obj);
for (const [key, value] of entry) {
  console.log(key, value);
}

25.Object.getOwnPropertyDescriptors(obj)-es2017

Получить описание объекта

Полученную информацию описания можно использовать с Object.defineProperties для полного копирования объекта, включая методы get и set.

// getOwnPropertyDescriptors

// 普通get方法
const objGet = {
  foo: 1,
  bar: 2,
  get getCount() {
    return this.foo + this.bar;
  },
};
// assign方法会把getCount当做普通属性复制，从而getCount为3，修改bar不管用
const objGet1 = Object.assign({}, objGet);
objGet1.bar = 3;
console.log(objGet1.getCount);//3
// descriptors
const descriptors = Object.getOwnPropertyDescriptors(objGet);
console.log("des", descriptors);
// 通过descriptors来复制对象，可以完整复制对象，包含get，set
const objGet2 = Object.defineProperties({}, descriptors);
objGet2.bar = 3;
console.log(objGet2.getCount);//4

26. padStart, padEnd function-es2017

Добавить указанную строку до или после строки

параметр:

targetLenght: дополненная длина цели

padString: строка заполнения

правило:

1. Если дополненная строка превышает целевую длину, она будет усечена до указанной длины.

2. Если строка заполнения слишком короткая, она будет заполнена пробелами.

3, Padstring не передается, заполнить пространство

эффект:

Обычно используется для выравнивания строкового вывода

/**
 *  foo.................|1
    barbar..............|2
    bazbazbaz...........|3
 */
console.log(`${key.padEnd(20, '.')}${value.toString().padStart(2, '|')}`)
Категории