매우 실용적인 12가지 JavaScript 팁의 자세한 코드 예제

이 글에서는 JavaScript에 관한 12가지 팁을 알려드리겠습니다. 이러한 팁은 실제 작업에서 발생하는 몇 가지 문제를 해결하는 데 도움이 될 수 있습니다.

!! 연산자를 사용하여 부울 값을 변환합니다.

때때로 변수가 존재하는지 확인하거나 값에 유효한 값이 있는지 확인하고, 다음과 같은 경우에는 true 값을 반환해야 합니다. 존재합니다. 이러한 검증을 위해 !! 연산자를 사용할 수 있는데 이는 매우 편리하고 간단합니다. !!variable을 사용하여 변수를 감지할 수 있습니다. 변수의 값이 0, null, " ", undefined 또는 NaN이면 false을 반환하고, 그렇지 않으면 true를 반환합니다.

를 반환합니다. 예를 들어 다음 예는 다음과 같습니다.

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

account.cash 이 예에서 0 값이 account.hasMoney보다 크면 true에서 반환되는 값은

입니다.

+문자열을 숫자로 변환하려면

을 사용하세요.

NaN 이 기술은 매우 유용하고 간단합니다. 문자열 데이터를 숫자로 변환할 수 있지만 그렇지 않은 경우에는

가 반환됩니다(예:

function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

Date 이는

에도 적용됩니다. 이 경우 타임스탬프 번호:

console.log(+new Date()) // 1461288164385

및 조건 기호 <🎜)가 반환됩니다. >

다음과 같은 코드가 있는 경우:

if (conected) {
    login();
}

변수를 축약하고 &&를 사용하여 함수와 연결할 수도 있습니다. 예를 들어 위의 예에서는 다음과 같이 축약할 수 있습니다. this:

conected && login();

다음 코드에 표시된 것처럼 일부 속성이나 함수가 객체에 존재하는지 감지할 수도 있습니다.

user && user.login();

||연산자

사용 ES6의 기본 매개변수 기능입니다. 이전 브라우저에서 이 기능을 에뮬레이트하려면 || 연산자를 사용하고 기본값을 두 번째 인수로 전달하세요. 첫 번째 매개변수에서 반환된 값이 false인 경우 두 번째 값이 기본값으로 간주됩니다. 다음 예를 들어보세요.

function User(name, age) {
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

루프의 캐시 array.length

이 기술은 매우 간단하지만 대규모 배열 루프를 처리할 때 성능에 미치는 영향은 매우 큽니다. 기본적으로 모든 사람은 다음과 같이 동기적으로 반복되는 배열을 작성합니다.

for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

작은 배열이라면 괜찮습니다. 큰 배열을 다루는 경우 이 코드는 각 반복마다 반복됩니다. 크기가 모두 다시 계산되므로 약간의 지연이 발생할 수 있습니다. 이 현상을 피하기 위해 array.length 캐시를 만들 수 있습니다:

var length = array.length;
for(var i = 0; i < length; i++) {
    console.log(array[i]);
}

다음과 같이 작성할 수도 있습니다:

for(var i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}

객체의 속성 감지

필요할 때 이 작은 트릭은 정의되지 않은 함수나 속성의 실행을 피하기 위해 일부 속성의 존재를 확인할 때 유용합니다. 일부 크로스 브라우저 코드를 사용자 정의하려는 경우에도 이 트릭을 사용할 수 있습니다. 예를 들어 document.querySelector()을 사용하여 id을 선택하고 IE6 브라우저와 호환되게 만들고 싶지만 IE6 브라우저에 이 기능이 없으면 이 연산자를 사용하여 이 기능이 있는지 감지하는 것이 어색할 것입니다. . 다음 예와 같이 매우 유용합니다.

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

이 예에서는 document 함수가 없으면 querySelector가 호출됩니다. docuemnt.getElementById("id")

배열의 마지막 요소를 가져옵니다.

은 Array.prototype.slice(begin,end)과 begin 사이의 배열 요소를 가져오는 데 사용됩니다. end 매개변수를 설정하지 않으면 배열의 기본 길이 값이 end 값으로 사용됩니다. 하지만 일부 학생들은 이 함수가 음수 값도 매개변수로 받아들일 수 있다는 사실을 모르는 경우가 있습니다. end의 값을 음수로 설정하면 배열의 마지막 요소를 얻을 수 있습니다. 예: begin

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

배열 잘림

이 작은 트릭은 주로 배열의 크기를 잠그는 데 사용됩니다. 배열의 일부 요소를 삭제하는 데 사용되는 경우 매우 유용합니다. 예를 들어 배열에

요소가 있지만 처음 5개 요소만 원하는 경우 10을 통해 배열을 잘라낼 수 있습니다. 다음 예는 다음과 같습니다. array.length=5

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

모두 바꾸기

함수를 사용하면 문자열이나 정규 표현식을 사용하여 문자열을 바꿀 수 있습니다. 하지만 정규식에서 String.replace()을 사용하여 /g 함수를 시뮬레이션할 수 있습니다. replaceAll()

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

배열 병합

두 배열을 병합하려면 일반적인 상황에서

함수: Array.concat()

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

그렇다면 이 함수는 새로 생성된 배열을 저장하는 데 많은 메모리를 소비하기 때문에 두 개의 큰 배열을 병합하는 데 적합하지 않습니다. 이 경우 대신

을 사용하여 새 배열을 만들 수 있습니다. 이 방법은 새 배열을 생성하는 데 사용되지 않으며 메모리 사용량을 줄이면서 첫 번째 배열과 두 번째 배열을 병합할 뿐입니다. Array.pus().apply(arr1,arr2)

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

将NodeList转换成数组

如果你运行document.querySelectorAll(“p”)函数时，它可能返回DOM元素的数组，也就是NodeList对象。但这个对象不具有数组的函数功能，比如sort()、reduce()、map()、filter()等。为了让这些原生的数组函数功能也能用于其上面，需要将节点列表转换成数组。可以使用[].slice.call(elements)来实现：

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

数组元素的洗牌

对于数组元素的洗牌，不需要使用任何外部的库，比如Lodash，只要这样做：

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

总结

现在你学会了些有用的JavaScript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦，或者说这篇文章对你有所帮助。如果你有一些优秀的JavaScript小技巧，欢迎在评论中与我们一起分享。

 以上就是关于12个非常实用的JavaScript小技巧的代码实例详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！