JavaScript에서 가장 실용적인 12가지 기술 공유

이 글에서는 매우 유용한 12가지 JavaScript 팁을 공유하겠습니다. 이러한 팁은 코드를 줄이고 최적화하는 데 도움이 될 수 있습니다. 도움이 필요한 친구는 이 기사를 참조할 수 있습니다

이 기사에서는 12가지 매우 유용한 JavaScript 팁을 공유하겠습니다. 이러한 팁은 코드를 줄이고 최적화하는 데 도움이 될 수 있습니다.

1) 변수를 부울 유형

으로 변환하려면 !!를 사용하세요. 존재하거나 유효한 값이 있는 경우 해당 값을 true로 처리합니다. 이러한 검사를 수행하려면 모든 유형의 데이터를 부울로 자동 변환하는 ||(이중 부정 연산자 )를 사용할 수 있습니다. 다음 변수만 false를 반환합니다: 0, null, "" , 정의되지 않음 또는 NaN, 다른 것들은 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입니다.

2) +를 사용하여 변수를 숫자로 변환

이 변환은 매우 간단하지만 숫자 문자열 에서만 작동합니다. 그렇지 않으면 NaN(숫자 아님)을 반환합니다. 다음 예를 살펴보십시오.

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

이 변환 작업은 Date에도 적용할 수 있으며, 이 경우 Timestamp를 반환합니다.

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

3) 단락 조건

이 유사한 코드를 본 경우:

if (conected) { 
 login(); 
}

그런 다음 &&(이 두 변수 연산자 사이의 AND)를 사용하여 단축할 수 있습니다. 코드. 예를 들어 이전 코드를 한 줄로 줄일 수 있습니다:

conected && login();

또한 이 방법을 사용하여 특정 속성 또는 함수가 객체 . 다음 코드와 유사합니다:

user && user.login();

4) ||를 사용하여 기본값 설정 ​​

에는 ES6의 기본 매개변수 기능이 있습니다. 이전 브라우저에서 이 기능을 에뮬레이트하려면 ||(OR 연산자)를 사용하고 기본값을 두 번째 인수로 전달할 수 있습니다. 첫 번째 매개변수가 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

5) loop cachearray.length

이 트릭은 매우 간단하며 대규모

배열을 반복할 때 큰 성능 저하를 방지합니다. 기본적으로 이것은 거의 모든 사람들이 for를 사용하여 배열을 반복하는 방법입니다.

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

작은 배열로 작업하는 경우에는 괜찮지만 큰 배열을 다루는 경우에는 다음과 같습니다. 코드는 각 루프에서 배열의 크기를 반복적으로 계산하므로 특정 지연이 발생합니다. 이를 방지하려면 루프에서 매번 array.length 대신 캐시가 사용되도록 변수에 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]); 
}

6) 객체의 속성 감지

이 기술은 특정 속성이 존재하는지 확인하고 정의되지 않은 함수나 속성의 실행을 방지해야 할 때 매우 유용합니다. 크로스 브라우저 코드를 작성하려는 경우에도 이 기술을 사용할 수 있습니다. 예를 들어, 이전 버전의 Internet Explorer 6과 호환되는 코드를 작성해야 하고

document.querySelector()를 사용하여 ID로 특정 요소를 가져오려고 한다고 가정해 보겠습니다. 하지만 최신 브라우저에는 이 기능이 존재하지 않습니다. 따라서 이 함수가 존재하는지 확인하려면 in 연산자를 사용할 수 있습니다. 다음 예를 살펴보세요.

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

이 경우 문서에 querySelector 함수가 없으면 대신 document.getElementById()를 사용합니다.

7) 배열의 마지막 요소 가져오기

Array.prototype.slice(begin,

end)를 사용하여 배열을 클립할 수 있습니다. . 그러나 end 매개변수 end의 값이 설정되지 않은 경우 함수는 자동으로 end를 배열 길이 값으로 설정합니다. 이 함수가 음수 값을 허용한다는 사실을 아는 사람은 거의 없을 것 같습니다. 시작을 음수로 설정하면 배열에서 역수 요소를 얻을 수 있습니다.

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]

8) 배열 잘림

这个技术可以锁定数组的大小，这对于要删除数组中固定数量的元素是非常有用的。例如，如果你有一个包含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]

9) 全部替换

String.replace()函数允许使用String和Regex来替换字符串，这个函数本身只能替换第一个匹配的串。但是你可以在正则表达式末尾添加/g来模拟replaceAll()函数：

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

10) 合并数组

如果你需要合并两个数组，你可以使用Array.concat()函数：

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

但是，这个函数对于大数组来说不并合适，因为它将会创建一个新的数组并消耗大量的内存。在这种情况下，你可以使用Array.push.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];

11) 把NodeList转换成数组

如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：

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

结论

现在，你已经学到了一些有用的JS技巧，它们主要用于缩减JavaScript代码量，其中一些技巧在许多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，欢迎分享！

【相关推荐】

1. Javascript免费视频教程

2. JavaScript运动框架之多值运动的具体介绍（四）

3. JavaScript运动框架之多物体任意值运动的示例代码分享（三）

4. JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）

5. JavaScript运动框架之如何解决速度正负取整问题（一）

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