Функции ES6, ES7, ES8 в одном пакете (Руководство по изучению ES6, ES7, ES8)

внешний интерфейс JavaScript Microsoft React.js

Обзор

ES означает ECMAScript, ECMAScript — это стандартизированный язык сценариев, разработанный ECMA. Версия ECMAScript, используемая в настоящее время JavaScript,ECMAScript-262.

Стандарт ECMAScript основан на ряде устаревших технологий, прежде всего на JavaScript (Netscape) и JScript (Microsoft). Первоначально он был изобретен Бренданом Эйхом из Netscape и впервые появился в браузере Netscape Navigator 2.0. Он присутствует во всех браузерах, начиная с Netscape 2.0 и Microsoft Internet Explorer 3.0.

Версия ECMAScript время выпуска новые особенности
ECMAScript 2009(ES5) ноябрь 2009 г. Расширяет функции объекта, массива, функции и т. д.
ECMAScript 2015(ES6) июнь 2015 г. Классы, модульность, стрелочные функции, значения параметров функций по умолчанию и т. д.
ECMAScript 2016(ES7) март 2016 г. включает, экспоненциальный оператор
ECMAScript 2017(ES8) июнь 2017 г. синхронизация/ожидание, Object.values(), Object.entries(), заполнение строк и т. д.

Понимание этих характеристик может не только сделать наше кодирование более соответствующим спецификации, но и повысить эффективность нашего кодирования.

Особенности ES6

ES6 имеет больше функций и был стандартизирован почти через 6 лет после выпуска ES5 (с 2009-11 по 2015-6). Между двумя выпусками проходит большой промежуток времени, поэтому в ES6 больше возможностей.

Вот несколько часто используемых:

  • Добрый
  • модульный
  • стрелочная функция
  • Значение параметра функции по умолчанию
  • строка шаблона
  • присваивание деструктуризации
  • спред оператор
  • Сокращение свойства объекта
  • Promise
  • Пусть и const.

1. класс (класс)

Разработчики, знакомые с чистыми объектно-ориентированными языками, такими как Java, object-c, c# и т. д., будут иметь особое чувство класса. В ES6 появились классы, чтобы сделать объектно-ориентированное программирование на JavaScript проще и понятнее.

  class Animal {
    // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型对象上的属性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);

    }
  }

 var animal = new Animal('dog','white');//实例化Animal
 animal.toString();

 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true

 class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
    // 如果没有置顶consructor,默认带super函数的constructor将会被添加、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new Cat('catch')
 cat.toString();

 // 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

2. Модульный (Module)

ES5 не поддерживает нативную модульность, в ES6 модули были добавлены как важная часть. Функция модуля в основном состоит из экспорта и импорта. Каждый модуль имеет свою собственную область видимости.Отношения взаимного вызова между модулями заключаются в указании интерфейса, предоставляемого модулем посредством экспорта, и в обращении к интерфейсу, предоставляемому другими модулями, посредством импорта. Он также создает пространства имен для модулей, чтобы предотвратить конфликты имен для функций.

экспорт (экспорт)

ES6 позволяет использовать экспорт для экспорта нескольких переменных или функций в модуль.

переменная экспорта

//test.js
export var name = 'Rainbow'

Опыт: ES6 поддерживает не только экспорт переменных, но и экспорт констант.export const sqrt = Math.sqrt;//导出常量

ES6 рассматривает файл как модуль, а указанный выше модуль экспортирует переменную через экспорт. Модуль также может одновременно выводить наружу несколько переменных.

 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

функция экспорта

// myModule.js
export function myModule(someArg) {
  return someArg;
}

импорт (импорт)

После того, как выходные данные модуля определены, на них можно ссылаться посредством импорта в другом модуле.

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

Вывод: оператор импорта может одновременно импортировать функции по умолчанию и другие переменные.import defaultMethod, { otherMethod } from 'xxx.js';

3. Функция стрелки

Это одна из самых захватывающих функций в ES6.=>Это не просто сокращение для функции ключевого слова, но и другие преимущества. Функция стрелки использует тот же код, что и окружающий код.this, может помочь вам решить проблему, на которую указывает это очень хорошо. Опытные разработчики JavaScript знакомы с такими вещами, какvar self = this;илиvar that = thisЭто шаблон обращения к окружающему this. но с помощью=>, этот режим не нужен.

Структура стрелочных функций

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

// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

Опыт: будь то стрелочная функция или привязка, она возвращает новую ссылку на функцию каждый раз, когда она выполняется, поэтому, если вам все еще нужна ссылка на функцию для чего-то еще (например, для удаления слушателя), вы должны сохранить ее самостоятельно. .

Подводные камни при удалении слушателей

неправильный подход

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}

правильный путь

class PauseMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

В дополнение к вышеперечисленным практикам мы также можем сделать это:

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //把函数直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
    }
}

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

4.Значение параметра функции по умолчанию

ES6 поддерживает установку значений по умолчанию для функций при их определении:

function foo(height = 50, color = 'red')
{
    // ...
}

Не используйте значение по умолчанию:

function foo(height, color)
{
    var height = height || 50;
    var color = color || 'red';
    //...
}

Обычно это нормально писать, но когда参数的布尔值为false, будут проблемы. Например, мы вызываем функцию foo следующим образом:

foo(0, "")

потому что0的布尔值为false, поэтому значение высоты будет равно 50. Точно так же значение цвета — «красный».

так,函数参数默认值Код может не только стать более лаконичным, но и избежать некоторых проблем.

5. Строки шаблона

Поддержка ES6模板字符串, что делает объединение строк более лаконичным и интуитивно понятным.

Без использования строк шаблона:

var name = 'Your name is ' + first + ' ' + last + '.'

Используйте строки шаблона:

var name = `Your name is ${first} ${last}.`

Пройдено в ES6${}Вы можете выполнить конкатенацию строк, просто заключив переменные в фигурные скобки.

6.присваивание деструктуризации

Синтаксис присваивания деструктурирования — это выражение в JavaScript, которое может легко извлекать значения из массивов или объектов и присваивать их определенным переменным.

получить значение в массиве

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

var foo = ["one", "two", "three", "four"];

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"

//你也可以这样写
var a, b; //先声明变量

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Если из массива не получено никакого значения, вы можете установить значение по умолчанию для переменной.

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

Деструктурирующее присваивание может легко поменять местами значения двух переменных.

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

получить значение в объекте

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};

const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"

7. расширенный оператор (оператор спреда)

延展操作符...Выражения массива или строки могут быть расширены синтаксически во время вызова функции/построения массива; выражения объекта также могут быть расширены по ключу-значению при создании объектов.

грамматика

вызов функции:

myFunction(...iterableObj);

Конструкция массива или строка:

[...iterableObj, '4', ...'hello', 6];

При создании объекта клонируйте или копируйте свойства (новые функции в спецификации ECMAScript 2018):

let objClone = { ...obj };

Сценарии применения

Использовать оператор распространения в вызове функции

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];

//不使用延展操作符
console.log(sum.apply(null, numbers));

//使用延展操作符
console.log(sum(...numbers));// 6

построить массив

При отсутствии синтаксиса расширения такие методы, как push, splice и concat, можно комбинировать только для превращения существующих элементов массива в часть нового массива. Синтаксис unwind позволяет создавать новые массивы проще и элегантнее:

const stuendts = ['Jine','Tom']; 
const persons = ['Tony',... stuendts,'Aaron','Anna'];
conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]

Подобно расширению списка параметров,...При построении массива слов его можно использовать несколько раз в любой позиции.

копия массива

var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4); 
console.log(arr2)//[1, 2, 3, 4]

Синтаксис расширения согласуется с поведением Object.assign(), который выполняет поверхностное копирование (проходит только один уровень).

объединить несколько массивов

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回
//等同于
var arr4 = arr1.concat(arr2);

Оператор Spread добавляет поддержку объектов в ECMAScript 2018

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

Приложение в Реакции

Обычно, когда мы инкапсулируем компонент, мы предоставляем некоторые свойства для реализации функций. Передайте реквизиты, которые в большинстве случаев должны быть явными для внешнего использования. Но при передаче большого количества реквизита это будет очень громоздко, тогда можно использовать...(延展操作符,用于取出参数对象的所有可遍历属性)передавать.

Обычно мы должны писать

<CustomComponent name ='Jine' age ={21} />

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

const params = {
		name: 'Jine',
		age: 21
	}

<CustomComponent {...params} />

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

var params = {
	name: '123',
	title: '456',
	type: 'aaa'
}

var { type, ...other } = params;

<CustomComponent type='normal' number={2} {...other} />
//等同于
<CustomComponent type='normal' number={2} name='123' title='456' />

8. Сокращение свойства объекта

ES6 позволяет нам устанавливать свойства объекта без указания имени свойства.

Не использую ES6

const name='Ming',age='18',city='Shanghai';
        
const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}

Объекты должны содержать свойства и значения, что очень избыточно.

Используйте ES6

const name='Ming',age='18',city='Shanghai';
        
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}

Записывайте переменные прямо в объект, что очень лаконично.

9.Promise

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

Не использую ES6

Вложите две функции обратного вызова setTimeout:

setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒后输出"Hi"
    }, 1000);
}, 1000);

Используйте ES6

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
        console.log("Hello"); // 1秒后输出"Hello"
        return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });

Приведенный выше код использует два then для сериализации асинхронного программирования, избегая ада обратных вызовов:

10. Поддержка let и const

В прошлом в JS не было области видимости на уровне блоков. Const и let заполнили этот удобный пробел. И const, и let являются областью действия на уровне блоков.

Переменные, определенные с помощью var, относятся к области действия функции:

{
  var a = 10;
}

console.log(a); // 输出10

Переменные, определенные с помощью let и const, имеют блочную область видимости:

{
  let a = 10;
}

console.log(a); //-1 or Error“ReferenceError: a is not defined”

Особенности ES7

После ES6 ES выпускается чаще, в основном раз в год, поэтому начиная с ES6 количество фич в каждой новой версии относительно невелико.

  • includes()
  • Экспоненциальный оператор

1. Array.prototype.includes()

includes()Функция используется для определения того, содержит ли массив указанное значение, и возвращает значение, если содержитtrue, иначе возвратfalse.

includesфункция сindexOfФункции очень похожи, следующие два выражения эквивалентны:

arr.includes(x)
arr.indexOf(x) >= 0

Далее определим, содержит ли число элемент:

Потренируйтесь перед ES7

использоватьindexOf()Чтобы проверить, существует ли элемент в массиве, вам нужно определить, равно ли возвращаемое значение -1:

let arr = ['react', 'angular', 'vue'];

if (arr.indexOf('react') !== -1)
{
    console.log('react存在');
}

Используйте ES7 include()

Используйте include(), чтобы проверить, существует ли элемент в массиве, что более интуитивно понятно и просто:

let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('react存在');
}

2. Экспоненциальный оператор

Оператор экспоненты был введен в ES7.**,**с участиемMath.pow(..)Эквивалентный результат расчета.

Не используйте оператор экспоненты

Используйте пользовательскую рекурсивную функцию calculateExponent или Math.pow() для выполнения экспоненциальных операций:

function calculateExponent(base, exponent)
{
    if (exponent === 1)
    {
        return base;
    }
    else
    {
        return base * calculateExponent(base, exponent - 1);
    }
}

console.log(calculateExponent(2, 10)); // 输出1024
console.log(Math.pow(2, 10)); // 输出1024

Используйте экспоненциальный оператор

Используйте оператор экспоненты **, точно так же, как операторы +, - и т. д.:

console.log(2**10);// 输出1024

Особенности ES8

  • async/await
  • Object.values()
  • Object.entries()
  • String padding
  • Разрешить запятые в конце списков параметров функций
  • Object.getOwnPropertyDescriptors()

Совместимость с браузером

1.async/await

Добавлена ​​поддержка ES8.async/awaitподдержку, что мы называем异步函数, очень полезная функция.async/awaitИзбавил нас от головной боли ада обратных вызовов и сделал весь код аккуратным.

использоватьasync/awaitбез использованияasync/awaitРазница:

login(userName) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('1001');
        }, 600);
    });
}

getData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === '1001') {
                resolve('Success');
            } else {
                reject('Fail');
            }
        }, 600);
    });
}

// 不使用async/await ES7
doLogin(userName) {
    this.login(userName)
        .then(this.getData)
        .then(result => {
            console.log(result)
        })
}

// 使用async/await ES8
async doLogin2(userName) {
    const userId=await this.login(userName);
    const result=await this.getData(userId);
}

this.doLogin()// Success
this.doLogin2()// Success

Несколько сценариев применения async/await

Далее давайте посмотримasync/awaitнесколько сценариев применения.

Получить возвращаемое значение асинхронной функции

Сама асинхронная функция возвращаетPromise, так что мы можем пройтиthenчтобы получить возвращаемое значение асинхронной функции.

async function charCountAdd(data1, data2) {
    const d1=await charCount(data1);
    const d2=await charCount(data2);
    return d1+d2;
}
charCountAdd('Hello','Hi').then(console.log);//通过then获取异步函数的返回值。
function charCount(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data.length);
        }, 1000);
    });
}

Применение async/await в параллельных сценариях

Для приведенного выше примера мы вызываемawaitДважды, каждый раз ожидая 1 секунду, всего 2 секунды, эффективность относительно низкая, и дваждыawaitВызов не имеет зависимостей.Может ли он выполняться одновременно?Ответ да.Далее переходимPromise.allреализоватьawaitодновременные вызовы.

async function charCountAdd(data1, data2) {
    const [d1,d2]=await Promise.all([charCount(data1),charCount(data2)]);
    return d1+d2;
}
charCountAdd('Hello','Hi').then(console.log);
function charCount(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data.length);
        }, 1000);
    });
}

С приведенным выше кодом мы достигли дваждыcharCountодновременных вызовов,Promise.allПринят массив, который позволяет выполнять оба объекта обещания в массиве;

Несколько методов обработки ошибок async/await

Первый: поймать ошибку всей функции async/await

async function charCountAdd(data1, data2) {
    const d1=await charCount(data1);
    const d2=await charCount(data2);
    return d1+d2;
}
charCountAdd('Hello','Hi')
    .then(console.log)
    .catch(console.log);//捕捉整个async/await函数的错误
...

Таким образом, вы можете захватить весьcharCountAddПроизошла ошибка во время работы, ошибка может быть вызванаcharCountAddпроизводится самостоятельно илиdata1в расчете илиdata2формируется при расчете.

Второй: поймать ошибку одного выражения ожидания

async function charCountAdd(data1, data2) {
    const d1=await charCount(data1)
        .catch(e=>console.log('d1 is null'));
    const d2=await charCount(data2)
        .catch(e=>console.log('d2 is null'));
    return d1+d2;
}
charCountAdd('Hello','Hi').then(console.log);

Таким образом, вы можете захватить каждыйawaitОшибки выражений, если вы хотите поймать всеawaitОшибки выражения, но и поймать весьcharCountAddфункциональные ошибки, которые можно назватьcharCountAddпри добавленииcatch.

...
charCountAdd('Hello','Hi')
    .then(console.log)
    .catch(console.log);//捕捉整个async/await函数的错误
...

Третий тип: одновременно отлавливать несколько ошибок выражения ожидания.

async function charCountAdd(data1, data2) {
    let d1,d2;
    try {
        d1=await charCount(data1);
        d2=await charCount(data2);
    }catch (e){
        console.log('d1 is null');
    }
    return d1+d2;
}
charCountAdd('Hello','Hi')
    .then(console.log);

function charCount(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data.length);
        }, 1000);
    });
}

2.Object.values()

Object.values()этоObject.keys()Аналогичная новая функция, но возвращает все значения собственных свойств Объекта, исключая унаследованные значения.

Предположим, мы хотим перебрать следующие объектыobjВсе значения:

const obj = {a: 1, b: 2, c: 3};

Не использовать Object.values(): ES7

const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]

Использование Object.values(): ES8

const values=Object.values(obj1);
console.log(values);//[1, 2, 3]

Как видно из кода вышеObject.values()Это избавляет нас от необходимости обхода ключей и получения значений в соответствии с этими ключами.

3.Object.entries

Object.entries()Функция возвращает массив пар ключ-значение для собственных перечисляемых свойств данного объекта.

Далее, давайте пройдемся по вышеизложенномуobjКлюч и значение всех свойств объекта:

Не используйте Object.entries (): ES7

Object.keys(obj).forEach(key=>{
	console.log('key:'+key+' value:'+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3

Используйте Object.entries(): ES8

for(let [key,value] of Object.entries(obj1)){
	console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

4.String padding

В String в ES8 добавлены две новые функции экземпляра.String.prototype.padStartа такжеString.prototype.padEnd, позволяя добавлять пустые строки или другие строки в начало или конец исходной строки.

String.padStart(targetLength,[padString])

  • targetLength: целевая длина, до которой необходимо дополнить текущую строку. Если это значение меньше длины текущей строки, возвращается сама текущая строка.
  • padString: (необязательно) строка заполнения. Если строка слишком длинная и длина дополненной строки превышает целевую длину, будет сохранена только самая левая часть, а остальные части будут усечены.Значение этого параметра по умолчанию — " ".
console.log('0.0'.padStart(4,'10')) //10.0
console.log('0.0'.padStart(20))//                0.00

String.padEnd(targetLength,padString])

  • targetLength: целевая длина, до которой необходимо дополнить текущую строку. Если это значение меньше длины текущей строки, возвращается сама текущая строка.
  • padString: (необязательно) строка заполнения. Если строка слишком длинная и длина дополненной строки превышает целевую длину, будет сохранена только самая левая часть, а остальные части будут усечены.Значение этого параметра по умолчанию — " ";
console.log('0.0'.padEnd(4,'0')) //0.00    
console.log('0.0'.padEnd(10,'0'))//0.00000000

4. Разрешить запятые в конце списков параметров функций

Это безболезненное обновление. Основная функция состоит в том, чтобы облегчить использование git для совместной разработки несколькими людьми, чтобы изменить одну и ту же функцию и уменьшить ненужные изменения строк.

Не использую ES8

//程序员A
var f = function(a,
  b
   ) { 
  ...
  }

//程序员B
var f = function(a,
  b,   //变更行
  c   //变更行
   ) { 
  ...
  }

//程序员C
var f = function(a,
  b,
  c,   //变更行
  d   //变更行
   ) { 
  ...
  }

Используйте ES8

//程序员A
var f = function(a,
  b,
   ) { 
  ...
  }

//程序员B
var f = function(a,
  b,
  c,   //变更行
   ) { 
  ...
  }

//程序员C
var f = function(a,
  b,
  c,
  d,   //变更行
   ) { 
  ...
  }

5.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()Функция используется для получения дескрипторов всех собственных свойств объекта, если собственных свойств нет, возвращает пустой объект.

Прототип функции:

Object.getOwnPropertyDescriptors(obj)

вернутьobjДескрипторы всех собственных свойств объекта или пустой объект, если собственных свойств нет.

const obj2 = {
	name: 'Jine',
	get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
// {
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//		value:"Jine",
//		writable:true
//   }
// }

Суммировать

Колесо замены технологий всегда движется вперед, а спецификации и стандарты JavaScript постоянно формулируются и совершенствуются. Вы обнаружите, что многие функции в новых версиях ECMAScript уже являются частью Typescript, браузеров или других полифилов, возьмите ES8.async/awaitНапример, он был включен в ECMAScript в июне 2017 года, но я использую эту функцию с 2016 года, которые обычно отправляются депутатами ECMAScript, а затем появляются в какой-то будущей версии ECMAScript.

Ссылаться на

Категории