>  기사  >  웹 프론트엔드  >  JavaScript에 관한 10가지 실용적인 팁(공유)

JavaScript에 관한 10가지 실용적인 팁(공유)

青灯夜游
青灯夜游앞으로
2021-01-04 17:55:262423검색

JavaScript에 관한 10가지 실용적인 팁(공유)

관련 추천: "javascript 비디오 튜토리얼"

저는 항상 효율성을 향상시킬 수 있는 새로운 방법을 찾고 있습니다.

그리고 JavaScript는 항상 예상치 못한 놀라움으로 가득 차 있습니다.

1. 인수 개체를 배열로 변환

arguments 개체는 함수에 전달된 매개 변수의 값을 포함하는 함수 내에서 액세스할 수 있는 배열과 유사한 개체입니다.

하지만 이것은 다른 배열과 다릅니다. 값에 액세스하고 길이를 얻을 수 있지만 다른 배열 방법을 사용할 수는 없습니다.

다행히도 이것을 일반 배열로 변환할 수 있습니다.

var argArray = Array.prototype.slice.call(arguments);

2. 배열의 모든 값을 합산합니다.

처음에는 루프를 사용하려고 했는데 그렇게 하면 작업이 너무 많이 걸립니다.

var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // returns 17

3. 조건부 단락

다음과 같은 코드가 있습니다.

if (hungry) {
    goToFridge();
}

변수와 함수를 사용하면 코드를 더 짧게 만들 수 있습니다.

hungry && goToFridge()

4. 조건에 논리 또는 사용 | |||

我过去常常在函数的开头声明自己的变量,以避免在出现任何意外错误时出现 undefined 的情况。

function doSomething(arg1){ 
    arg1 = arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}

5、逗号运算符

逗号运算符( ,

예기치 않은 오류가 발생할 경우 정의되지 않은 상황을 방지하기 위해 함수 시작 부분에 변수를 선언하곤 했습니다.
let x = 1;

x = (x++, x);

console.log(x);
// expected output: 2

x = (2, 3);

console.log(x);
// expected output: 3
5. 쉼표 연산자

쉼표 연산자(,)는 각 피연산자(왼쪽에서 오른쪽으로)를 평가하고 마지막 피연산자의 값을 반환할 수 있습니다.
var array = [11, 12, 13, 14, 15];  
console.log(array.length); // 5  

array.length = 3;  
console.log(array.length); // 3  
console.log(array); // [11,12,13]

array.length = 0;  
console.log(array.length); // 0  
console.log(array); // []
6. 길이를 사용하여 배열 크기를 조정합니다

길이 속성을 사용하여 배열 크기를 조정하거나 배열을 지울 수 있습니다.
let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // -> 2
console.log(b) // -> 1
7. 배열 분해를 사용하여 값을 교환합니다. 구조 분해 할당 구문은 배열의 값이나 개체의 속성을 다른 변수로 풀 수 있는 JavaScript 표현식입니다.

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

8. 배열의 요소를 무작위로 배열합니다

매일 무작위로 배열합니다randomly 배열, 무작위로 배열합니다

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

9. 속성 이름은 동적일 수 있습니다 객체를 선언하기 전에 할당됩니다.

const my_array = [1, 2, 2, 3, 3, 4, 5, 5]
const unique_array = [...new Set(my_array)];
console.log(unique_array); // [1, 2, 3, 4, 5]

10. 고유 값 필터링 ​모든 ES6 애호가를 위해 스프레드 연산자(확산)와 함께 Set 개체를 사용하여 고유 값만 포함하는 새 배열을 만들 수 있습니다.

rrreee


생각 끝

책임은 효율성보다 훨씬 더 중요합니다.

귀하의 웹사이트는 모든 브라우저에서 작동해야 합니다.

Endtest

또는 기타 유사한 도구를 사용하여 확인할 수 있습니다.

당신은요? 공유할 JavaScript 팁이나 요령이 있습니까?

영어 원본 주소: https://dev.to/zandershirley/10-practical-javascript-tricks-2b7h

저자: Zander Shirley🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 🎜프로그래밍 소개🎜 ! ! 🎜

위 내용은 JavaScript에 관한 10가지 실용적인 팁(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제