홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

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

저자：Eve Cole 업데이트 시간：2022-08-26 13:21:21
이 기사에서는 ES6에 대한 리더의 10가지 의견을 공유하고 그에 따른 관련 지식을 추가하여 모든 사람에게 도움이 되기를 바랍니다.

VUE3.0을 빠르게 시작하는 방법:

"ES6 사용법을 알고 있다면 사용해 보세요!" 학습 시작하기: 리더가 코드 검토 중에 많은 것을 발견했기 때문에 팀원들에게 한 "포효"입니다. ES5 작성 방법을 사용하는 것이 더 좋습니다. ES5에서 작성한다고 해서 코드 양이 늘어나고 가독성이 떨어지는 것은 아닙니다.

마침 이 리더는 코드 페티쉬를 갖고 있었는데, 이 레벨에서 3~5년 정도 코드를 작성해본 경험이 있는 멤버들에게 계속해서 코드에 대한 불만을 토로하는 것에 대해 극도로 불만을 품고 있었습니다. 하지만 그래도 그 분의 불평을 통해 얻은 게 많다고 생각해서 리더의 불평을 녹음해서 동료 디버들과 공유했습니다. 유용하다고 생각하시면, 틀린 부분이나 더 좋은 글이 있으면 손가락으로 눌러주세요. 메시지를 남겨주세요.

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

1. 값 수집에 대한 Tucao

값은 객체 obj 에서 값을 얻는 것과 같이 프로그램에서 매우 일반적입니다.

const 객체 = {
    a:1,
    b:2,
    c:3,
    d:4,
    전자: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줄의 코드를 사용하는 것이 좋지 않나요? 그냥 객체 이름에 플러스를 사용하세요. 속성 이름을 사용하여 값을 가져옵니다. 개체 이름이 짧아도 괜찮지만 너무 길면 개체 이름이 코드 전체에 표시됩니다. "

개선 사항 :

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 || {}
2.

두 배열 병합 및 두 개체 병합과 같은

데이터 병합에 대한 불만입니다

. 
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.sign({}, 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}

3. 문자열 연결에 대한 Tucao

const name = 'Xiao Ming';
const 점수 = 59;
결과 = '';
if(점수 > 60){
  결과 = `${name}의 시험 점수는 합격입니다`; 
}또 다른{
  결과 = `${name}이(가) 시험에 실패했습니다`; 
}
당신처럼 ES6 문자열 템플릿을 사용하는 것에

대해 불평한다면

, ${} 에서 어떤 작업을 수행할 수 있는지 전혀 모르는 것이 좋습니다. ${} 에서는 JavaScript 표현식을 입력하고, 작업을 수행하고, 객체 속성을 참조할 수 있습니다.

향상된

const 이름 = 'Xiao Ming';
const 점수 = 59;
const result = `${name}${score > 60?'의 시험 점수 합격':'의 시험 점수 실패'}`

4. if

(
    유형 == 1 ||
    유형 == 2 ||
    유형 == 3 ||
    유형 == 4 ||
){
   //...
}

배열 인스턴스 메소드 includes 이 ES6에서 사용될 것인지에

대해 불평하십니까

?

개선된

const 조건 = [1,2,3,4];

if( 조건.포함(유형) ){
   //...
}

5. 목록 검색에 대한 불만

프로젝트에서는 페이지가 매겨지지 않은 일부 목록의 검색 기능이 프런트 엔드에 의해 구현됩니다. 검색은 일반적으로 정밀 검색과 퍼지 검색으로 구분됩니다. 검색은 필터링이라고도 하며 일반적으로 filter 사용하여 구현됩니다.

const a = [1,2,3,4,5];
const 결과 = a.filter( 
  항목 =>{
    반품 항목 === 3
  }
)
정확한 검색에 대해

불평하고

싶다면

ES6에서는 find 사용하지 않겠습니까? 성능 최적화를 이해하셨나요? 조건에 맞는 항목이 find 메소드에서 발견되면 더 이상 배열을 순회하지 않습니다.

개선된

const a = [1,2,3,4,5];
const 결과 = a.find( 
  항목 =>{
    반품 항목 === 3
  }
)

6. 평면화된 배열에 대한 불만

부서의 JSON 데이터에서 속성 이름은 부서 ID이고 속성 값은 부서 구성원 ID의 배열 모음입니다. 이제 모든 부서 구성원 ID를 배열 모음으로 추출해야 합니다.

const deps = {
'구매 부서':[1,2,3],
'인사부':[5,8,12],
'행정 부서':[5,14,79],
'교통부':[3,64,105],
}
멤버 = []로 설정;
for (항목을 deps로 설정){
    const 값 = deps[item];
    if(Array.isArray(값)){
        멤버 = [...멤버,...값]
    }
}
member = [...new Set(member)]

객체의 모든 속성 값을 얻으려면 순회해야 합니까

?

Object.values 잊으셨나요? 배열을 포함하는 flat 프로세스도 있습니다. 다행히도 이번에는 배열의 깊이가 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 방식은 IE 브라우저를 지원하지 않는다는

점을 보완했습니다

.

7. 객체 속성 값 가져오기에 대한 Tucao

const

name = obj && obj.name;

ES6의 선택적 체인 연산자가 사용됩니까?

개선된

const name = obj?.name;

8. 객체 속성 추가에 대한 설명

객체에 속성을 추가할 때 속성 이름이 동적으로 변경되는 경우 어떻게 해야 합니까?

obj = {}로 놔두세요;
인덱스 = 1로 둡니다.
키 = `topic${index}`;
obj[key] = 'topic content';

Tucao에서

추가 변수를 생성해야 하는 이유. ES6에서 객체 속성 이름에 표현식을 사용할 수 있는지 궁금합니다.

let obj = {};

개선

인덱스 = 1로 둡니다.
obj[`topic${index}`] = 'topic content';

9. 입력 상자가 비어 있지 않은지 판단

입력 상자 관련 업무를 처리하다 보면 입력 상자에 입력 값이 없다고 판단되는 경우가 많습니다.

if(값 !== null && 값 !== 정의되지 않음 && 값 !== ''){
    //...
}

ES6의 새로운 null 값 병합 연산자에 대해 들어보셨나요? 그렇게 많은 조건을 작성해야 합니까

?

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

10. 비동기 함수에 대한 불만

비동기 함수는 매우 일반적이며 Promise를 사용하여 구현되는 경우가 많습니다.

const fn1 = () =>{
  return new Promise((해결, 거부) => {
    setTimeout(() => {
      해결(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((해결, 거부) => {
    setTimeout(() => {
      해결(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1); // 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}
이와 같은 비동기 함수를

호출

하면

지옥 같은 콜백을 두려워하지 않을 것입니다!

const fn = async ()

개선

=>{
  const res1 = fn1()을 기다립니다;
  const res2 = 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() 사용해야 합니다.

11.

위의 리더의 불만 사항 10가지에 대해 반박하실 수 있습니다. 귀하의 반박이 타당하다면 다음 코드 검토 회의에서 반박해 드리겠습니다.

또한, 위 정리된 내용에 오류가 있는 경우 댓글로 자유롭게 수정해 주시면 감사하겠습니다.

이 글은 다음에서 복사했습니다: https://juejin.cn/post/7016520448204603423

작성자: Hongchen Lianxin

[관련 영상 튜토리얼 추천: 웹 프론트엔드]

위에서 ES6를 사용할 수 있다고 하신 다음, 빨리 사용해보세요! 더 자세한 사항은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!

관련 기사