ES6를 사용하고 빨리 사용할 수 있다고 하셨습니다!

이 기사에서는 ES6에 대한 리더의 10가지 의견을 공유하고 이에 따라 관련 지식을 추가하여 모든 사람에게 도움이 되기를 바랍니다.

"ES6 사용할 줄 알면 써라!": 코드 리뷰 회의 중 리더가 팀원들에게 "포효"하는 소리입니다. 여전히 ES5를 사용하는 곳이 많습니다. 그렇다고 해서 ES5를 사용한 작성 방법이 불가능하거나 버그가 발생하는 것은 아니며, 코드의 양이 늘어나고 가독성이 나빠질 뿐입니다.

공교롭게도 이 리더는 코드 페티쉬를 갖고 있습니다. 그는 이 수준에서 코드 작성 경험이 3~5년인 멤버들에게 극도로 불만을 품고 계속 코드에 대해 불평합니다. 하지만 그래도 그 분의 불평을 통해 얻은 게 많다고 생각해서 리더의 불평을 녹음해서 동료 디버들과 공유했습니다. 유용하다고 생각하시면, 틀린 부분이나 더 좋은 글이 있으면 손가락으로 눌러주세요. 메시지를 남겨주세요. [관련 추천 : javascript 학습 튜토리얼]

ps: ES5 이후의 JS 구문을 통칭하여 ES6이라고 합니다! ! !

1. 가치 획득에 대한 불만

가치 획득은 obj 개체에서 값을 얻는 것과 같이 프로그램에서 매우 일반적입니다. obj中取值。

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

吐槽：

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

或者

const f = obj.a + obj.d;
const g = obj.c + obj.e;

吐槽：“不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名。”

改进：

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

反驳

不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。

吐槽

看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：

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

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

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

二、关于合并数据的吐槽

比如合并两个数组，合并两个对象。

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

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

吐槽

ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？

改进

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}

三、关于拼接字符串的吐槽

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

吐槽

像你们这样用ES6字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

改进

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

四、关于if中判断条件的吐槽

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

吐槽

ES6中数组实例方法includes会不会使用呢？

改进

const condition = [1,2,3,4];

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

五、关于列表搜索的吐槽

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

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

吐槽

如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。

改进

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

六、关于扁平化数组的吐槽

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

吐槽

获取对象的全部属性值还要遍历吗？Object.values忘记了吗？还有涉及到数组的扁平化处理，为啥不用ES6提供的flat方法呢，还好这次的数组的深度最多只到2维，还要是遇到4维、5维深度的数组，是不是得循环嵌套循环来扁平化？

改进

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

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

补充

flat

const name = obj && obj.name;

Complaint:

const name = obj?.name;

또는

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

Complaint: "값을 얻기 위해 ES6의 구조 분해 할당을 사용하지 않나요? 한 줄의 코드에 5줄의 코드를 사용하는 것이 좋지 않나요? 그냥 객체 이름에 속성 이름을 더해 가져오는 값, 객체 이름이 짧으면 괜찮지만 너무 길면 어떡하지? 반환된 데이터 개체의 속성 이름이 내가 원하는 것이 아닙니다. 이와 같은 값을 얻으려면 새 순회 할당을 만들어야 합니다.

불만

ES6 구조 분해 할당에 대한 이해가 충분하지 않은 것 같습니다. 생성하려는 변수의 이름이 객체의 속성 이름과 일치하지 않는 경우 다음과 같이 작성할 수 있습니다.

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

보충

ES6의 구조 분해 할당은 사용하기 쉽습니다. 그러나 구조해제된 객체는 undefine 또는 null일 수 없다는 점에 유의해야 합니다. 그렇지 않으면 오류가 보고되므로 구조 해제된 개체에 기본값을 제공해야 합니다.

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

2. 데이터 병합에 대한 설명🎜🎜🎜🎜예를 들어 두 개의 배열을 병합하고 두 개의 객체를 병합합니다. 🎜

if((value??'') !== ''){
  //...
}

🎜🎜Comment🎜🎜🎜ES6의 스프레드 연산자를 잊어버리셨나요? 배열 병합 시 중복 제거를 고려하지 않으셨나요? 🎜🎜🎜Improvements🎜🎜

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

🎜🎜🎜3. 문자열 접합에 대한 불만🎜🎜🎜

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

🎜🎜Complaints🎜🎜🎜$에 무엇이 있는지 모르는 것이 좋습니다. {}에서 수행할 수 있는 작업은 무엇입니까? 모든 JavaScript 표현식은 작업을 수행하고 객체 속성을 참조할 수 있는 ${}에 배치할 수 있습니다. 🎜🎜🎜Improvements🎜🎜

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

🎜🎜🎜4. if🎜🎜🎜rrreee🎜🎜Comments🎜🎜🎜의 판단 조건에 대한 의견입니다. 배열 인스턴스 메소드 includes가 ES6에서 사용됩니까? 🎜🎜🎜개선 사항🎜🎜rrreee🎜🎜🎜5. 목록 검색에 대한 의견🎜🎜🎜🎜프로젝트에서는 페이지가 매겨지지 않은 일부 목록의 검색 기능이 일반적으로 프런트 엔드에 의해 구현됩니다. . 검색은 필터링이라고도 하며 일반적으로 filter를 사용하여 구현됩니다. 🎜rrreee🎜🎜Comment🎜🎜🎜정확한 검색이라면 ES6에서는 find를 사용하지 않겠습니까? 성능 최적화를 이해하시나요? find 메소드에서 조건에 맞는 항목이 발견되면 더 이상 배열을 순회하지 않습니다. 🎜🎜🎜Improvements🎜🎜rrreee🎜🎜🎜 6. 평면화된 배열에 대한 불만🎜🎜🎜🎜 부서 JSON 데이터에서 속성 이름은 부서 ID이고 속성 값은 부서 구성원 ID 배열의 모음입니다. 부서 구성원을 포함하려면 ID가 배열 컬렉션으로 추출됩니다. 🎜rrreee🎜🎜Comment🎜🎜🎜객체의 모든 속성 값을 얻으려면 여전히 순회해야 하나요? Object.values 잊으셨나요? 배열을 포함하는 평면화 프로세스도 있습니다. ES6에서 제공하는 플랫 메서드를 사용하는 것은 어떨까요? 다행히 이번에는 배열의 깊이가 최대 2차원이고 4차원과 5차원도 있습니다. . 깊은 배열을 평면화하려면 중첩 루프를 반복해야 합니까? 🎜🎜🎜Improvements🎜🎜rrreee🎜 여기서 플랫의 매개변수로 무한대를 사용하면 평면화된 배열의 크기를 알 필요가 없습니다. 🎜🎜🎜Supplement🎜🎜🎜플랫 방식은 IE 브라우저를 지원하지 않습니다. 🎜🎜🎜🎜7. 객체 속성 값 가져오기에 대한 Tucao🎜🎜🎜rrreee🎜🎜Tucao🎜🎜🎜ES6의 선택적 연결 연산자가 사용됩니까? 🎜🎜🎜Improvements🎜🎜rrreee🎜🎜🎜8. 개체 속성 추가에 대한 의견🎜🎜🎜

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

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

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

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

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

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

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

if((value??'') !== ''){
  //...
}

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

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()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

本文转载自：https://juejin.cn/post/7016520448204603423

作者：红尘炼心

【相关视频教程推荐：web前端】

위 내용은 ES6를 사용하고 빨리 사용할 수 있다고 하셨습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!