JavaScript 코드 작성 시 몇 가지 팁 공유

머리말

일과 생활의 변화로 인해 최근 기사 작성 빈도가 조금 줄어들었습니다. 하지만 곧 회복되리라 믿습니다. 지속적인 관심과 지원 부탁드립니다.

이 기사에서는 JavaScript 코드를 작성할 때 주로 몇 가지 방법과 기법을 공유합니다. 때로는 모든 길이 로마로 통하지만 항상 최단 경로가 있을 수 있습니다. 다음 JavaScript 기술을 통해 모든 사람의 코드가 "복잡하고 단순화되고 단순화되고 세련"될 수 있기를 바랍니다.

능숙하게 배우고 사용하세요

1. new Set()

ES6가 새로운 데이터 구조 Set을 제공한다는 것을 아는 사람도 있지만 이를 유연하게 사용할 수 있는 사람은 많지 않습니다. Set 데이터 구조를 사용하면 다음과 같이 배열의 중복을 쉽게 제거할 수 있습니다:

let arr = [1, 2, 2, 3];let set = new Set(arr);let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。console.log(newArr); // [1, 2, 3]

2. Object.sign()

Object.ass()도 ES6에서 제공되는 객체의 확장 메서드로, 병합에 사용할 수 있습니다. 예:

let obj1 = {a: 1};let obj2 = {b: 2};let obj3 = Object.assign({}, obj1, obj2);console.log(obj3); // {a: 1, b: 2}

3. map()

map 메서드는 배열을 탐색하는 데 사용되며 반환 값이 있으며 배열의 각 항목에 대해 작동하고 새 배열을 생성할 수 있습니다. 때로는 for 및 forEach 루프를 대체하여 다음과 같이 코드를 단순화할 수 있습니다.

let arr3 = [1, 2, 3, 4, 5];let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10console.log(newArr3); // [10, 20, 30, 40, 50]

4. filter()

filter 메서드는 이름에서 알 수 있듯이 배열을 필터링하고 트리거하는 데에도 사용됩니다. 각 요소 뒤에 콜백 함수를 사용하여 현재 항목을 유지하거나 제거하고 마지막으로 다음과 같은 새 배열을 반환합니다. some()

some 메소드를 사용하여 배열을 탐색합니다. 각 요소 뒤에 콜백 함수를 추가하고 조건을 충족하는 한 true를 반환하고, 그렇지 않으면 || 비교와 유사하게 false를 반환합니다. 예:

let arr4 = [1, 2, 3, 4, 5];let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模，过滤余数不为0的数console.log(newArr4); // [2，4]

6.every()

모든 메서드는 배열을 탐색하는 데 사용됩니다. , 각 요소 다음에 콜백 함수를 트리거하고 조건을 충족하지 않는 한 false를 반환합니다. 그렇지 않으면 && 비교와 유사하게 true를 반환합니다. 예:

let arr5 = [{result: true}, {result: false}];let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true，即为trueconsole.log(newArr5); // true

7 ~~ 연산자

~ 기호가 사용됩니다. JavaScript에서 비트 반전을 수행하려면 ~~ 두 번 반전을 의미하며

의 연산 값은 요구 사항이 정수이고 결과도 정수이므로 비트 연산은 자동으로 정수가 되고 소수 부분은

let arr6 = [{result: true}, {result: false}];let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为falseconsole.log(newArr6); // false

영리하게 || 연산을 사용합니다.

let a = 1.23;let b = -1.23;console.log(~~a); // 1console.log(~~b); // -1

9와 같이 변수에 대한 기본값을 설정할 수 있습니다. .Operator

...연산자는 ES6에서 배열을 분해하는 데 사용되는 방법이며 다음과 같이 배열의 매개변수를 빠르게 얻는 데 사용할 수 있습니다.

let c = 1;let d = c || 2; // 如果c的值为true则取存在的值，否则为2console.log(d); // 1

10

연산자모두가 이 연산자에 익숙하면 다음과 같이 조용히 작성하면 if else 작성을 단순화할 수 있습니다.

let [num1, ...nums] = [1, 2, 3];console.log(num1); // 1console.log(nums); // [2, 3]

결론

이 기사에는

만 나열되어 있습니다. 코딩 효율성을 향상시키는 보다 일반적인 10포인트 방법이 간략하게 설명됩니다. 물론 각 지식 포인트는 그에 따라 확장되고 탐색될 수 있습니다. 모두가 능숙하게 학습하면서 능숙한 사용의 효과를 얻을 수 있기를 바랍니다.

위 내용은 JavaScript 코드 작성 시 몇 가지 팁 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!