이 글에서는 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)!