> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 사용 팁

자바스크립트 사용 팁

巴扎黑
풀어 주다: 2017-04-29 14:38:45
원래의
1275명이 탐색했습니다.

머리말

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

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

1. 새로운 세트()

어떤 사람들은 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() 역시 ES6에서 제공하는 객체의 확장 메소드이지만

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

console.log(obj3); // {a: 1, b: 2}
로그인 후 복사

와 같이 하나의 레이어만 복사할 수 있습니다. 3. 지도()

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

4. 필터()

필터 메소드는 이름에서 알 수 있듯이 배열을 필터링하고, 각 요소 다음에 콜백 함수를 트리거하고, 판단을 통해 현재 항목을 유지하거나 제거하고, 마지막으로 다음과 같은 새 배열을 반환합니다. >아아아아

5. 일부()

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

let arr3 = [1, 2, 3, 4, 5];

let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10

console.log(newArr3); // [10, 20, 30, 40, 50]
로그인 후 복사

6.모든()

Every 메소드는 배열을 순회하고 각 요소 다음에 콜백 함수를 트리거하는 데 사용됩니다. 한 요소가 조건을 충족하지 않는 한 false를 반환하고, 그렇지 않으면 다음과 같이 && 비교와 유사하게 true를 반환합니다.

let arr4 = [1, 2, 3, 4, 5];

let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数

console.log(newArr4); // [2,4]
로그인 후 복사

7. ~~운영자

~ 기호는 JavaScript에서 비트 반전을 수행하는 데 사용됩니다. ~~는 두 번 반전한다는 의미입니다. 비트 연산의 연산 값은 정수여야 하며 결과도 정수이므로 비트 연산을 수행하는 모든 항목은 자동으로 정수가 됩니다. . 다음과 같이 parsInt와 유사하게 소수 부분을 제거할 수 있습니다.

let arr5 = [{result: true}, {result: false}];

let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为true

console.log(newArr5); // true
로그인 후 복사

8. ||연산자

|| 연산자를 사용하면 다음과 같은 변수의 기본값을 설정할 수 있습니다.

let arr6 = [{result: true}, {result: false}];

let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为false

console.log(newArr6); // false
로그인 후 복사

9. …운영자

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

let a = 1.23;
let b = -1.23;

console.log(~~a); // 1
console.log(~~b); // -1
로그인 후 복사

10. 삼항 연산자

이 연산자는 모든 사람에게 친숙해야 합니다.

let c = 1;
let d = c || 2; // 如果c的值为true则取存在的值,否则为2

console.log(d); // 1
로그인 후 복사

와 같이 조용히 작성하면 if else 작성을 단순화할 수 있습니다. 결론

이 기사에서는 코딩 효율성을 높이기 위해 JavaScript 구문의 10가지 일반적인 방법만 나열하고 이에 대해 간략하게 설명합니다. 물론 각 지식 포인트를 그에 따라 확장하고 탐색할 수 있기를 바랍니다.

위 내용은 자바스크립트 사용 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿