Вы когда-нибудь использовали это с ES6?

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

1. О стоимости

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}
const {a,b,c,d,e} = obj;

Если имя переменной, которую вы хотите создать, не соответствует имени свойства объекта, вы можете написать так:

const {a:a1} = obj;
console.log(a1);// 1

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

const {a,b,c,d,e} = obj || {};

2. Об объединении данных

Например, объедините два массива и два объекта.

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. О сращивании струн

В ${} вы можете поместить любое выражение JavaScript, выполнять операции и ссылаться на свойства объекта.

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

4. Что касается условий решения в случае, если

// 老代码
if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

// 新代码
const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

5. О поиске по списку

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

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

Но лучший метод find позволяет найти элементы, соответствующие условиям, не продолжая обход массива.

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

6. О уменьшении размерности массива (сглаживании)

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

В качестве параметра плоского массива используется бесконечность, поэтому нет необходимости знать размеры сглаженного массива. Но плоский метод не поддерживает браузер IE.

7. О получении свойств объекта

Необязательный оператор цепочки в ES6

const name = obj?.name;

8. О добавлении свойств объекта

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

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

9. Относительно того, не пусто ли поле ввода

Слышали ли вы о новом операторе слияния нулевых значений в ES6?Вам нужно писать так много условий?

// 老代码
if(value !== null && value !== undefined && value !== ''){
    //...
}

//重构代码
if((value??'') !== ''){
  //...
}

10. Об асинхронных функциях

асинхронное ожидание

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

Но при выполнении одновременных запросов вам все равно придется использовать Promise.all().

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

Если есть одновременные запросы, пока обрабатывается одна из асинхронных функций, результат будет возвращен, и необходимо использовать Promise.race().

Кроме того, если в приведенном выше организованном содержании есть какие-либо ошибки, пожалуйста, поделитесь ими в области комментариев.

Если статья оказалась для вас полезной, ❤️Подпишитесь + поставьте лайк❤️поддержите ее ! Блогер будет продолжать обновлять информацию. . . .

Исходный текст моего блога: Вы когда-нибудь использовали ES6 таким образом?

Вы когда-нибудь использовали это с ES6?

рекомендация