몇 가지 js 팁 공유

이 기사는 주로 몇 가지 js 팁을 공유합니다. 기사가 조금 길지만 도움이 되기를 바랍니다.

1. JavaScript 내결함성 처리 코드(JS 오류 보호)

<span style="font-size: 14px;"><script language="javascript"><br/>    <!--    /*屏蔽所有的js错误*/<br/>    function killerrors() {<br/>        return true;<br/>    }<br/>    window.onerror = killerrors;    //--></script><br/></span>

여러분의 프로그래밍 기술을 향상시킬 수 있는 짧고 실용적인 JavaScript 기술을 제공할 수 있게 되어 매우 기쁩니다. 하루 2분 안에 성능(성능), 규칙(프로토콜), 해킹(코드 해킹), 인터뷰 질문(인터뷰 질문) 질문 등 이 끔찍한 JavaScript 언어가 우리에게 제공하는 기능을 읽을 수 있습니다. ) 및 기타 모든 항목.

2. ==

==(또는 !=) 대신 ===를 사용하면 비교되는 두 개체가 동일한 유형으로 변환된 후 비교됩니다. === (또는 !==)는 비교되는 두 가지의 유형과 값을 비교하지 않습니다. ==와 비교하면 ===의 비교가 더 엄격해집니다.
[10] == 10 // 참
[10] === 10 // 거짓
“10” == 10 // 참
“10” === 10 // 거짓
[] == 0 // true
[] === 0 // false
"" == false // true이지만 true == "a"는 false입니다
"" === false // false

3. 더 편리한 방법

문자열을 숫자로 변환하는 방법은 매우 일반적입니다. 이를 수행하는 가장 간단하고 빠른(jspref) 방법은 +(더하기) 알고리즘을 사용하는 것입니다.

var one = '1';
var numberOne = +one; // 숫자 1

알고리즘의 -(빼기 기호) 변환 유형을 사용하여 음수로 변환할 수도 있습니다.

var one = '1';
var negativeNumberOne = -one; // Number -1

4 - 배열 지우기

배열을 정의하고 그 내용을 지우고 싶습니다. 일반적으로 다음을 수행합니다.

var list = [1, 2, 3, 4]; 
function empty() { 
//清空数组 
list = []; 
} 
empty();
但是还有一种更高性能的方法。
你可以使用这些代码： 
var list = [1, 2, 3, 4]; 
function empty() { 
//清空数组 
list.length = 0; 
} 
empty();
· list =[] 将一个变量指定个引用到那个数组，而其他引用都不受影响。这意味着，对于先前数组的内容的引用仍然保留在内存中，从而导致内存泄漏。 
· list.length = 0 删除数组内的所有东西，这不需要引用任何其他的东西 
然而，如果你有一个copy的数组（A和copy-A），如果你使用list.length = 0 删除其内容，副本也会失去它的内容。 
var foo = [1,2,3]; 
var bar = [1,2,3]; 
var foo2 = foo; 
var bar2 = bar; 
foo = []; 
bar.length = 0; 
console.log(foo, bar, foo2, bar2); 
//[] [] [1, 2, 3] []

StackOverflow에 대한 자세한 내용: Difference-between-array-length-0-and-array

5 - "셔플"(무작위 정렬) 배열 정렬

여기의 코드는 Fisher Yates 셔플링 알고리즘을 사용하여 지정된 배열을 셔플(무작위 정렬)합니다.

function shuffle(arr) { 
var i, 
j, 
temp; 
for (i = arr.length - 1; i > 0; i–) { 
j = Math.floor(Math.random() * (i + 1)); 
temp = arr[i]; 
arr[i] = arr[j]; 
arr[j] = temp; 
} 
return arr;  
};

케이스:
1
2
3
4

var a = [1, 2, 3, 4, 5, 6, 7, 8]; var b = shuffle(a);
console.log(b);
// [2, 7, 8, 6, 5, 3, 1, 4]

6 - 객체를 연결하는 함수

객체 지향 JavaScript 객체에 대한 함수를 생성할 때 함수에서 객체를 반환하면 함수를 서로 연결하여 실행할 수 있습니다.

function Person(name) { 
this.name = name; 
this.sayName = function() { 
console.log(“Hello my name is: “, this.name); 
return this; 
}; 
this.changeName = function(name) { 
this.name = name; 
return this; 
}; 
} 
var person = new Person(“John”); 
person.sayName().changeName(“Timmy”).sayName(); 
//Hello my name is: John 
//Hello my name is: Timmy

7 - 문자열 안전 연결

알 수 없는 유형의 변수가 있고 이를 연결하려고 한다고 가정합니다. 확실히, 연결 시에는 알고리즘 연산이 적용되지 않습니다:

var one = 1; var two = 2;
var three = '3'
var result = ”.concat(one, two, three); //"123"

이런 연결은 예상한 것과 다릅니다. 대신 일부 연결 및 추가로 인해 예상치 못한 결과가 발생할 수 있습니다.

var one = 1; var two =. '3';
var result = one + two + three; //"123" 대신 "33"

성능에 관해 말하자면, Join과 Concat의 실행 속도는 거의 동일합니다. concat at MDN

8 - 더 빠른 반올림

이중 물결표 "~~" 연산자를 본 적이 있나요? 이 연산자를 때로는 수학의 더 빠른 대체 연산자로 사용할 수도 있습니다. 왜?

입력은 32비트 - (입력 + 1)로 이동합니다. Shift는 입력을 0에 접근하는 데 유용한 도구인 -(-(입력+1))로 변환합니다. 음수 값에 대해서는 Math.ceil()을, 양수 값에 대해서는 Math.floor()를 모방합니다. .실행이 실패하면 0을 반환합니다. 이는 실패 시 NaN을 반환하는 Math.floor() 대신 사용할 때 유용할 수 있습니다.

// 单位移 
console.log(~1337) // -1338 
// 双位移 
console.log(
47.11) // -> 47 
console.log(
-12.88) // -> -12 
console.log(
1.9999) // -> 1 
console.log(~~3) // -> 3 
//失败的情况 
console.log(
[]) // -> 0  
console.log(
NaN) // -> 0 
console.log(~~null) // -> 0 
//大于32位整数则失败 
console.log(
(2147483647 + 1) === (2147483647 + 1)) // -> 0

~~의 성능이 더 좋을 수도 있지만 가독성을 위해서는 Math.floor()

를 사용하세요.

9 - Node.js:让module在没被require的时候运行

在node里，你可以根据代是运行了require(‘./something.js’)还是node something.js，来告诉你的程序去做两件不同的事情。如果你想与你的一个独立的模块进行交互，这是很有用的。

if (!module.parent) { 
// 运行 
node something.js
 
app.listen(8088, function() { 
console.log(‘app listening on port 8088’); 
}) 
} else { 
// 使用 
require('/.something.js')
 
module.exports = app; 
}

更多信息，请看the documentation for modules

10 - 给回调函数传递参数

在默认情况下，你无法将参数传给回调函数，如下：

function callback() { 
console.log(‘Hi human’); 
} 
document.getElementById(‘someelem’).addEventListener(‘click’, callback);
你可以采取JavaScript闭包的优点来给回调函数传参，案例如下：
function callback(a, b) { 
return function() { 
console.log(‘sum = ‘, (a+b)); 
} 
} 
var x = 1, y = 2; 
document.getElementById(‘someelem’).addEventListener(‘click’, callback(x, y));

什么是闭包呢？闭包是指一个针对独立的(自由)变量的函数。换句话说，闭包中定义的函数会记住它被创建的环境。了解更多请参阅MDN所以这种方式当被调用的时候，参数X/Y存在于回调函数的作用域内。

另一种方法是使用绑定方法。例如：

var alertText = function(text) { 
alert(text); 
}; 
document.getElementById(‘someelem’).addEventListener(‘click’, alertText.bind(this, ‘hello’));

两种方法在性能上有一些略微区别，详情参阅jsperf

11 - 使用更简单的类似indexOf的包含判断方式

原生的JavaScript没有contains方法。对检查字符串或字符串数组项中是否存在某值，你可以这样做：

var someText = ‘JavaScript rules’; 
if (someText.indexOf(‘JavaScript’) !== -1) { 
} 
// 或者 
if (someText.indexOf(‘JavaScript’) >= 0) { 
}

但是我们再看看这些ExpressJs代码片段。

// examples/mvc/lib/boot.js 
for (var key in obj) { 
// “reserved” exports 
if (~[‘name’, ‘prefix’, ‘engine’, ‘before’].indexOf(key)) continue;
// examples/lib/utils.js
exports.normalizeType = function(type){
return ~type.indexOf(‘/’)
? acceptParams(type)
{ value: mime.lookup(type), params: {} }; 
};
// examples/web-service/index.js 
// key is invalid 
if (!~apiKeys.indexOf(key)) return next(error(401, ‘invalid api key’));

问题是~位运算符。”运算符执行操作这样的二进制表达式，但他们返回标准的JavaScript的数值.”
他们将-1转换为0，而0在JavaScript中又是false。

var someText = ‘text’; 
!!~someText.indexOf(‘tex’); // someText 包含 “tex” - true 
!~someText.indexOf(‘tex’); // someText 不包含 “tex” - false 
~someText.indexOf(‘asd’); // someText 不包含 “asd” - false 
~someText.indexOf(‘ext’); // someText 包含 “ext” - true 
String.prototype.includes()

在ES6(ES 2015)中介绍了includes()方法可以用来确定是否一个字符串包含另一个字符串：

‘something’.includes(‘thing’); // true

在ECMAScript 2016 (ES7)中，甚至数组都可以这样操作，如indexOf：

!!~[1, 2, 3].indexOf(1); // true
[1, 2, 3].includes(1); // true

不幸的是，这只是在Chrome，Firefox，Safari 9或以上的浏览器中被支持。

12 - arrow 函数(ES6)

介绍下ES6里的新功能，arrow函数可能会是个很方便的工具，用更少行数写更多代码。他的名字来源于他的语法，=>和小箭头->比就像一个“胖胖的箭头”。可能有些人知道，这种函数类型和其他静态语言如lambda表达式的匿名函数。它被称为匿名，因为这些箭头函数没有一个描述性的函数名。
那么这样有什么好处呢？

语法：更少的LOC，不用一次次的键入函数关键字。

语义：从上下文中捕捉关键字this。

简单语法案例：

看看下面的两段代码片段，他们做的是一样的工作。你能很快的理解arrow函数的功能。

// arrow函数的日常语法 param => expression // 可能也会写在括号中 // 括号是多参数要求 (param1 [, param2]) => expression
// 使用日常函数 var arr = [5,3,2,9,1]; var arrFunc = arr.map(function(x) { return x * x; }); console.log(arr)
// 使用arrow函数 var arr = [5,3,2,9,1]; var arrFunc = arr.map((x) => x*x); console.log(arr)

正如你所看到的，这个例子中的arrow函数可以节省你输入括号内参数和返回关键字的时间。建议把圆括号内的参数输入，如 (x,y) => x+y 。在不同的使用情况下，它只是

用来应对遗忘的一种方式。但是上面的代码也会这样执行：x => x*x.目前看来，这些仅仅是导致更少的LOC和更好的可读性的句法改进。

this 绑定

还有一个更好的理由使用arrow函数。那就是在会出现this问题的背景下。使用arrow函数，你就不用担心.bind(this)和 that=this 了。因为arrow函数会从上下文中找到this。

看下面的例子：

// 全局定义this.i 
this.i = 100; 
var counterA = new CounterA(); 
var counterB = new CounterB(); 
var counterC = new CounterC(); 
var counterD = new CounterD();
// 不好的示例 
function CounterA() { 
// CounterA’s this 实例 (!! 忽略这里) 
this.i = 0; 
setInterval(function () { 
// this 指全局对象，而不是 CounterA’s this 
// 因此，开始计数与100，而不是0 (本地的 this.i) 
this.i++; 
document.getElementById(“counterA”).innerHTML = this.i; 
}, 500); 
} 
// 手动绑定 that = this 
function CounterB() { 
this.i = 0; 
var that = this; 
setInterval(function() { 
that.i++; 
document.getElementById(“counterB”).innerHTML = that.i; 
}, 500); 
} 
// 使用 .bind(this) 
function CounterC() { 
this.i = 0; 
setInterval(function() { 
this.i++; 
document.getElementById(“counterC”).innerHTML = this.i; 
}.bind(this), 500); 
} 
// 使用 arrow函数 
function CounterD() { 
this.i = 0; 
setInterval(() => { 
this.i++; 
document.getElementById(“counterD”).innerHTML = this.i; 
}, 500); 
}

关于arrow函数的进一步信息可以看这里 。查看不同的语法选请访问该站点。

13 - 测量一个JavaScript代码块性能的技巧

快速测量一个JavaScript块的性能，我们可以使用控制台的功能像console.time(label)和console.timeEnd(label)

console.time(“Array initialize”); 
var arr = new Array(100), 
len = arr.length, 
i; 
for (i = 0; i < len; i++) { 
arr[i] = new Object(); 
}; 
console.timeEnd(“Array initialize”); // 输出: Array initialize: 0.711ms

更多信息Console object, JavaScript benchmarking

demo：jsfiddle-codepen (在浏览器控制台输出)

14 - ES6中参数处理

在许多编程语言中，函数的参数是默认的，而开发人员必须显式定义一个参数是可选的。在JavaScript中的每个参数是可选的，但我们可以这一行为而不让一个函数利用ES6的默认值作为参数。

const _err = function( message ){
throw new Error( message );
}
const getSum = (a = _err(‘a is not defined’), b = _err(‘b is not defined’)) => a + b
getSum( 10 ) // throws Error, b is not defined
getSum( undefined, 10 ) // throws Error, a is not defined

_err是立即抛出一个错误的函数。如果没有一个参数作为值，默认值是会被使用，_err将被调用，将抛出错误。你可以在Mozilla开发者网络看到的更多默认参数的例子。

15 - 提升

理解提升将帮助你组织你的function。只需要记住，变量声明和定义函数会被提升到顶部。变量的定义是不会的，即使你在同一行中声明和定义一个变量。此外，变量声明让系统知道变量存在，而定义是将其赋值给它。

function doTheThing() { 
// 错误: notDeclared is not defined 
console.log(notDeclared); 
// 输出: undefined 
console.log(definedLater); 
var definedLater; 
definedLater = ‘I am defined!’ 
// 输出: ‘I am defined!’ 
console.log(definedLater) 
// Outputs: undefined 
console.log(definedSimulateneously); 
var definedSimulateneously = ‘I am defined!’ 
// 输出: ‘I am defined!’ 
console.log(definedSimulateneously) 
// 输出: ‘I did it!’ 
doSomethingElse(); 
function doSomethingElse(){ 
console.log(‘I did it!’); 
} 
// 错误: undefined is not a function 
functionVar(); 
var functionVar = function(){ 
console.log(‘I did it!’); 
} 
}

为了使事情更容易阅读，在函数作用域内提升变量的声明将会让你明确该变量的声明是来自哪个作用域。在你需要使用变量之前定义它们。在作用域底部定义函数，确保代码清晰规范。

16 - 检查一个对象是否有属性

当你要检查一个对象是否存在某个属性时，你可能会这样做 ：

var myObject = {
name: ‘@tips_js’
};
if (myObject.name) { … }

这是可以的，但你必须知道这个还有两原生的方式，in operator 和 object.hasownproperty，每个对象是对象，既可用方法。每个object都继承自Object，这两个方法都可用。

两个方法的一些不同点：

var myObject = {
name: ‘@tips_js’
};
myObject.hasOwnProperty(‘name’); // true
‘name’ in myObject; // true
myObject.hasOwnProperty(‘valueOf’); // false, valueOf 是从原型链继承的
‘valueOf’ in myObject; // true

他们之间的不同在于检查的性质，换句话说，当该对象本身有查找的属性时hasOwnProperty返回yrue，然而，in operator不区分属性创建的对象和属性继承的原型链。
这里有另外一个例子：

var myFunc = function() {
this.name = ‘@tips_js’;
};
myFunc.prototype.age = ‘10 days’;
var user = new myFunc();
user.hasOwnProperty(‘name’); // true
user.hasOwnProperty(‘age’); // false, 因为age是原型链上的

点击看例子。同时，建议在检查对象的属性存在时，阅读这些有关的常见错误。

17 - 模板字符串

截至ES6，JS已经有模板字符串作为替代经典的结束引用的字符串。
案例：普通字符串

var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(‘My name is ’ + firstName + ’ ’ + lastName);
// My name is Jake Rawr  
模板字符串：
var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(<span style="font-size: 14px;">My name is ${firstName} ${lastName}</span>);
// My name is Jake Rawr

在模板字符串中${}中，你可以写不用写/n或者简单逻辑来实现多行字符串。
您还可以使用函数来修改模板字符串的输出，它们被称为模板字符串的标记。你可能还想读到更多的理解模板字符串相关信息。

18- 노드 목록을 배열로 변환

querySelectorAll 메소드는 배열과 유사한 노드 목록 개체를 반환합니다. 이러한 자료 구조는 배열의 형태로 나타나는 경우가 많다는 점에서 배열과 유사하지만, map, foreach 등의 배열 메소드를 사용할 수 없습니다. 다음은 nodelist를 DOM 요소 배열로 변환하는 빠르고 안전하며 재사용 가능한 방법입니다.

const nodelist = document.querySelectorAll('p');
const nodelistToArray = Array.apply(null, nodelist); /later on ..
nodelistToArray.forEach(…);
nodelistToArray.slice(…);
//etc…

apply 메소드는 일련의 매개변수를 배열 형식으로 변환하는 것입니다. 주어진 함수에 전달됩니다. MDN은 Apply가 querySelectorAll이 반환하는 배열과 유사한 개체를 호출한다고 지적합니다. 함수 컨텍스트에서 이를 지정할 필요가 없으므로 null 또는 0을 전달합니다. 반환된 결과는 배열 메서드를 사용하여 사용할 수 있는 DOM 요소의 배열입니다.

es2015를 사용하는 경우...(확산 연산자)

const nodelist = […document.querySelectorAll('p')]; // 반환되는 것은 실제 배열입니다

/ /나중에 . nodelist.map(…);
nodelist.slice(…);



19 - "엄격한 사용" 및 게으름 엄격 모드 JavaScript 개발자가 JavaScript를 더욱 안전하게 작성할 수 있습니다. 기본적으로 JavaScript를 사용하면 개발자가 게으르게 됩니다. 예를 들어 처음으로 변수를 선언할 때 var를 사용할 수 없습니다. 이는 경험이 부족한 개발자처럼 보일 수도 있지만 변수 이름 철자 오류의 원인이기도 합니다. 실수로 또는 우발적으로 외부 범위에 언급되었습니다.

프로그래머는 컴퓨터가 우리 대신 지루한 일을 하게 하고 작업의 일부 오류를 확인하는 것을 좋아합니다. "use strict"는 이를 수행하고 오류를 JavaScript 오류로 변환하도록 지시합니다.

js 파일 상단에 다음 지시문을 추가할 수 있습니다.

// 전체 스크립트 파일은 strict 모드 구문입니다."use strict"

var v = "안녕하세요! 저는 strict입니다. mode script!";

또는 함수 내에서: function f() {

// 함수 범위 내에서 엄격한 모드 구문

'use strict'; functionnested() { return "And so am I!"; }
return "안녕하세요! 저는 엄격 모드 함수입니다!" +nested();
}
function f2() { return "나는 엄격하지 않습니다." }



이 지시어가 포함된 JavaScript 파일에서 또는 함수 내에서는 JavaScript 엔진 실행에서 직접적으로 대규모 JavaScript 프로젝트의 일부 잘못된 동작을 금지했습니다. 무엇보다도 엄격 모드는 다음 동작을 변경합니다.



· 변수는 var 앞에 선언된 경우에만 사용할 수 있습니다. · 읽기 전용 속성을 쓰려고 하면 오류가 발생합니다.

· 생성자는 새 키워드로 호출해야 합니다.

· 이것은 기본적으로 전역 개체를 가리키지 않습니다. · eval()의 사용이 매우 제한됨 · 예약된 문자 또는 향후 예약된 문자가 변수 이름으로 사용되지 않도록 보호

엄격한 모드는 새 프로젝트에 유용하지만 대부분의 경우 사용되지 않는 오래된 프로젝트에서 사용하는 것은 매우 어렵습니다. 여러 파일을 하나로 병합할 때도 문제가 됩니다. 전체 파일이 엄격 모드에서 실행될 수 있기 때문입니다.
선언이 아니라 리터럴이므로 이전 버전의 브라우저에서는 이를 무시합니다. 엄격 모드 지원:


· IE 10+

· FF 4+

· Chrome 13+ · Safari 5.1+
· Opera 12+

MDN의 엄격 모드 설명을 참조하세요.



20 - 배열이나 단일 요소를 매개변수로 처리하는 메소드

단일 요소를 매개변수로 하여 배열과 함수를 연산하는 별도의 메소드를 작성하는 것보다 일반 메소드를 작성하는 것이 좋습니다. function 으로 모든 것을 조작할 수 있습니다. 이는 일부 jQuery 메서드와 유사합니다(CSS 일치는 모든 선택기를 수정함). 먼저 모든 것을 배열에 넣으면 Array.concat은 배열이나 단일 개체를 허용합니다.

function printUpperCase(words) {

var elements = [].concat(words)

for (var i = 0; i b28316f1680f27563095ac6ceb1be67f CACTUS
printUpperCase(["cactus", "bear", "potato"]);
// => CACTUS
// BEAR
// POTATO

21 - undefine과 null

· undef의 차이점은 변수가 선언되지 않았거나 변수가 선언되었지만 할당되지 않았음을 의미합니다. value
· Null은 특정 값, 즉 "값 없음"을 나타냅니다. JavaScript는 기본적으로 할당되지 않은 변수를 정의되지 않은 것으로 정의합니다.
· JavaScript는 할당되지 않은 변수에 대해 null 값을 설정하지 않습니다. 이를 나타 내기 위해 프로그래머가 사용합니다. 값이 없는 변수입니다.
· undefine은 json 형식 데이터에서 유효하지 않지만 null은 유효합니다.
· undefine 유형은 undefine입니다.
· null은 객체와 유사합니다.
· 둘 다 원시값입니다 ​​
· 둘 다 false(Boolean(undefine) // false, Boolean(null) // false)로 간주됩니다.
· 변수가 정의되지 않았는지 확인

변수 유형 === “undefine” · 변수가 null인지 확인

variable === “null” 값으로 보면 동일하지만, 함께 고려되는 유형과 값은 동일하지 않습니다.

null == 정의되지 않음 // true null === 정의되지 않음 // false

22 - ASCII가 아닌 문자로 문자열 정렬

JavaScript에는 기본 방법은 문자열 형식으로 배열을 정렬하는 것입니다. 간단한 array.sort()를 수행하면 문자열이 알파벳 순서로 정렬됩니다. 물론 사용자 정의 정렬 기능도 사용할 수 있습니다.

['상하이', '뉴욕', '뭄바이', '부에노스아이레스'].sort() // ["부에노스아이레스", "뭄바이", "뉴욕", "상하이"]

['é', 'a', 'ú', 'c']와 같은 비ASCII 문자로 정렬하려고 하면 이상한 결과가 나옵니다. ['c', 'e' , ' á', 'ú'], 이는 영어로 된 언어만 정렬이 가능하기 때문에 발생합니다.

간단한 예를 보세요:

// 스페인어 ['único','árbol', 'cosas', 'fútbol'].sort()
// ["cosas", "fútbol " ", "árbol", "único"] // 잘못된 정렬
// 독일어
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort()
// ["Wann", "Woche", "wäre", "wöchentlich"] // 잘못된 정렬

다행히도 이 동작을 방지하는 두 가지 방법이 있습니다. ECMAScript 국제화 API는 localecompare 및 Intl.Collator를 제공합니다. 두 가지 방법 모두 고유한 맞춤 매개변수가 있으므로 완벽하게 작동하도록 구성할 수 있습니다.

localeCompare() 사용

['único','árbol', 'cosas', 'fútbol'].sort(function (a, b) { return a.localeCompare(b);
} );
// ["árbol", "cosas", "fútbol", "único"]
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
return a.localeCompare(b)
})
// ["Wann", "wäre", "Woche", "wöchentlich"]

intl.collator()

['único 사용 ','árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare) // ["árbol", "cosas", "fútbol", "único"]
['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare)
// ["Wann", "wäre", "Woche", "wöchentlich"]

· 각 메소드는 위치를 사용자 정의할 수 있습니다

· FF 브라우저에서는 더 큰 값이나 문자열을 비교할 때 intl.collator()가 더 빠릅니다 따라서 영어 이외의 언어를 사용하는 경우 문자열 배열에 할당하는 경우 , 예상치 못한 정렬을 방지하려면 이 방법을 사용하는 것을 잊지 마세요.

23 - 중첩 조건 개선

JavaScript에서 if 문의 중첩을 더 효율적으로 개선하고 만들 수 있는 방법은 무엇입니까?

if (색상) { if (색상 === '검은색') {
printBlackBackground();
} else if (color === '빨간색') {
printRedBackground()
} else if ( color === 'blue') {
printBlueBackground();
} else if (color === 'green') {
printGreenBackground()
} else {
printYellowBackground()
}

내포된 if 문 대신 스위치 문을 사용하는 것이 개선되었습니다. 더 깨끗하고 체계적이지만 디버깅이 어렵기 때문에 권장되지 않습니다. 이유는 다음과 같습니다.

switch(color) {
case 'black':
printBlackBackground();
break;
printRedBackground()
case 'blue':
printBlueBackground(); ;
case 'green':
printGreenBackground();
default:
printYellowBackground()
}



그러나 판단 조건이 여러 개인 경우는 어떻습니까? 이 경우 좀 더 간결하고 질서정연하게 만들고 싶다면 스위치를 사용하면 됩니다. true를 switch 문에 매개변수로 전달하면 각 경우에 조건을 지정할 수 있습니다.

switch(true) { case (typeof color === 'string' && color === 'black'):

printBlackBackground()

break; color === 'red'): printRedBackground();
break;
case (typeof color === 'string' && color === 'blue'):
printBlueBackground()
case(typeof) color === 'string' && color === 'green'):
printGreenBackground();
break
case (typeof color === 'string' && color === 'yellow'):
printYellowBackground() ;
break;
}



그러나 각 조건에서 여러 번 확인하는 것을 피하고 스위치를 사용하지 않도록 노력해야 합니다. 또한 가장 효율적인 방법은 객체를 이용하는 것임을 고려해야 합니다.
var colorObj = {
'black': printBlackBackground, 'red': printRedBackground,

'blue': printBlueBackground,

'green': printGreenBackground, 'yellow': printYellowBackground
};



if(색상 입력 colorObj) {
colorObjcolor
}

여기에 더 많은 관련 정보가 있습니다.

24 - ReactJs 하위 구성의 키는 매우 중요합니다

keys는 동적 배열에 전달해야 하는 모든 구성 요소를 나타내는 속성입니다. 이는 React가 각 DOM 구성 요소를 식별하여 다른 구성 요소인지 동일한 구성 요소인지 확인하는 데 사용하는 고유하고 구체적인 ID입니다. 하위 구성 요소가 저장되고 다시 생성되지 않도록 하고 이상한 일이 발생하지 않도록 하려면 키를 사용하십시오.

· 기존 독립 개체 값 사용

· 하위 구성 요소가 아닌 상위 구성 요소에 키 정의

//Bad…
render() {

{{item .name}}

}

… //OK

· 배열을 사용하는 것은 좋은 습관이 아닙니다.

· random()은 절대 실행되지 않습니다. //Bad




· 고유 ID를 만들 수 있습니다. 메서드를 확인하세요.
· 자식 수가 많거나 복잡한 구성 요소가 포함된 경우 키를 사용하여 성능을 향상하세요.
· 모든 자식 ReactCSSTransitionGroup 키 속성을 제공해야 합니다.

25 - AngularJs:

applyAngularJ의 가장 훌륭한 기능은 양방향 데이터 바인딩입니다. 작동하려면 AngularJ가 모델 변경 사항과 뷰 루프를 평가합니다(

digest 루프). 때로는 새 루프를 수동으로 실행해야 하며 이 단계가 성능이기 때문에 올바른 옵션이 있어야 합니다.

$apply

이 핵심 방법을 사용하면 선택적 함수 인수를 실행한 후

digest 루프를 시작할 수 있습니다. ( );

$digest

在这种情况下，$digest方法在当前作用域和它的子作用域执行，你应该注意到，父级的作用域将不被检查，并没有受到影响。
建议：

· 只在浏览器DOM事件在Angular之外被触发的时候使用

digest
· 给$apply传递函数表达式，这有一个错误处理机制，允许在消化周期中整合变化。

apply(() => {
$scope.tip = ‘Javascript Tip’;
});

· 如果你仅仅想更新当前作用域或者他的子作用域，用

digest。性能不言而喻咯。
· 当

evalAsync。这是一个在当前循环或下一次循环的期间或对表达式做出评估的核心方法，这可以提高你的应用程序的性能。

25 - 在数组插入一个项

将一个项插入到现有数组中，是一个日常常见的任务，你可以使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。

这些都是已知的方法，但这并不意味着没有一个更高性能的途径。我们来看一看。
在数组的末尾添加一个元素很容易与push()，但还有一个更高性能的途径。
var arr = [1,2,3,4,5];
arr.push(6);
arr[arr.length] = 6; //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度

这两种方法都修改了数组，不相信我？看这个jsperf
现在，如果我们正在尝试将一个项目添加到数组的开头：

var arr = [1,2,3,4,5];
arr.unshift(0);
[0].concat(arr); //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度

这里更详细一点：unshift编辑原有的数组，concat返回一个新数组。jsperf
添加在阵列中的物品很容易使用splice，它是做它的最高效的方式。
?
1
2

var items = [‘one’, ‘two’, ‘three’, ‘four’];
items.splice(items.length / 2, 0, ‘hello’);

我试着在不同的浏览器和操作系统中运行这些测试，结果是相似的。我希望这些建议对你有用，鼓励你自己做测试！

1、javascript 容错处理代码(屏蔽js错误)

<span style="font-size: 14px;"><script language="javascript"><br/>    <!--    /*屏蔽所有的js错误*/<br/>    function killerrors() {<br/>        return true;<br/>    }<br/>    window.onerror = killerrors;    //--></script><br/></span>

能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力，这对于我来说是件很开心的事。每天仅花上不到2分钟的时间中，你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性：performance(性能), conventions(协议), hacks(代码hack), interview questions(面试问题)及所有其他的项。

2、 使用 === 代替 ==

==（或者!=）做对比的时候会将进行对比的两者转换到同一类型再比较。===（或者!==）则不会，他会将进行对比的两者做类型对比和值对比，相对于 == ，=== 的对比会更加严谨。
[10] == 10 // true
[10] === 10 // false
“10” == 10 // true
“10” === 10 // false
[] == 0 // true
[] === 0 // false
“” == false // true 但是 true == “a” 是false
“” === false // false

3、转换数值的更加的方法

将字符串转换为数字是非常常见的。最简单和最快的（jspref）的方式来实现，将使用+（加）算法。

var one = ‘1’;
var numberOne = +one; // Number 1

알고리즘의 -(빼기 기호) 변환 유형을 사용하여 음수 값으로 바꿀 수도 있습니다.

var one = '1';
var negativeNumberOne = -one; // Number -1

4 - 배열 지우기

배열을 정의하고 그 내용을 지우고 싶습니다. 일반적으로 다음과 같이 합니다.

var list = [1, 2, 3, 4];
functionempt() {
//배열 비우기
list = []
}
empty();

하지만 더 성능이 좋은 방법이 있습니다.

다음 코드를 사용할 수 있습니다:
var list = [1, 2, 3, 4];
functionempty() {
//배열 비우기
list.length = 0
empty();

· list =[]는 변수에 대한 참조를 해당 배열에 할당하지만 다른 참조는 영향을 받지 않습니다. 이는 이전 배열의 내용에 대한 참조가 여전히 메모리에 남아 있어 메모리 누수가 발생한다는 것을 의미합니다. · list.length = 0은 배열 내부의 모든 것을 삭제하므로 다른 항목에 대한 참조가 필요하지 않습니다.
그러나 복사된 배열(A 및 copy-A)이 있는 경우 list.length = 0을 사용하면 해당 내용이 삭제됩니다. , 사본의 내용도 손실됩니다.
var foo = [1,2,3];
var foo2 = foo;
foo = []
console.log(foo, bar, foo2, bar2);
//[] [] [1, 2, 3] []



StackOverflow에 대한 자세한 내용: 배열 길이-0-과- 사이의 차이 array

5 - 배열을 "무작위로 정렬"(무작위로 정렬) sort

이 코드는 Fisher Yates 셔플링 알고리즘을 사용하여 지정된 배열을 셔플(무작위로 정렬)합니다. function shuffle(arr) {

var i,

j, temp; for (i = arr.length - 1; i > 0; i–) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i] = arr[j];
arr[j] =
return arr; ?
1
2
3
4



var a = [1, 2, 3, 4, 5, 6, 7, 8] var b =

console.log(b)

// [2, 7, 8, 6, 5, 3, 1, 4]


6 - 객체 지향 JavaScript 객체 함수를 생성할 때 객체를 연결하는 작업에 사용할 수 있습니다

함수는 객체를 반환하며, 실행을 위해 함수를 서로 연결할 수 있습니다.

function Person(name) {
this.name = name; this.sayName = function() {

console.log(“안녕하세요 내 이름은 “, this.name)

return this; ; this.changeName = function(name) { this.name = name;

return this;

} person = new Person(“John”) person.sayName().changeName(“티미” ”).sayName();

//안녕하세요 내 이름은: John

//안녕하세요 내 이름은: Timmy


7 - 문자열 안전 연결



알 수 없는 유형의 변수가 있다고 가정해 보세요. 연결하세요. 확실히, 연결 시에는 알고리즘 연산이 적용되지 않습니다:



var one = 1;
var two = 2;
var three = '3'
var result = ”.concat(one, two, three); //"123"

이런 연결은 예상한 것과 다릅니다. 대신 일부 연결 및 추가로 인해 예상치 못한 결과가 발생할 수 있습니다.

var one = 1; var two =. '3';

var result = one + two + three; //"123" 대신 "33"

성능에 관해 말하자면, Join과 Concat의 실행 속도는 거의 동일합니다. concat at MDN

8 - 더 빠른 반올림

이중 물결표 "~~" 연산자를 본 적이 있나요? 이 연산자를 때로는 수학의 더 빠른 대체 연산자로 사용할 수도 있습니다. 왜? 입력은 32비트 - (입력 + 1)로 이동합니다. Shift는 입력을 0에 접근하는 데 유용한 도구인 -(-(입력+1))로 변환합니다. 음수 값에 대해 Math.ceil()을 모방하고 양수 값에 대해 Math.floor()를 모방합니다. .returns 0 실행이 실패하면 Math.floor()가 실패할 때 NaN을 반환하는 대신 유용할 수 있습니다

// 단위 이동
console.log(~1337) // -1338
// 이중 이동
console.log(47.11) // -> 47
console.log(-12.88) // -> ; -12
console.log(1.9999) // -> 1
console.log(~~3) // -> 3
//실패 상황
console.log([]) // - > ; 0
console.log(NaN) // -> 0
console.log(~~null) // -> 0
//32비트 정수보다 크면 실패
console.log( (2147483647 + 1) === (2147483647 + 1)) // -> 0

~~ 성능이 더 좋을 수 있지만 가독성을 위해 Math.floor()를 사용하세요.

9 - Node.js: 필요하지 않은 경우 모듈을 실행시키세요

node에서는 코드에 따라 require('./something.js') 또는 node Something.js를 실행할 수 있습니다. 프로그램에 두 가지 다른 작업을 수행하도록 지시합니다. 이는 독립형 모듈 중 하나와 상호 작용하려는 경우 유용합니다.

if (!module.parent) {
// 실행 <code><span style="font-size: 14px;">node something.js</span>
app.listen(8088, function() {
console.log(‘app listening on port 8088’);
})
} else {
// 使用 <span style="font-size: 14px;">require('/.something.js')</span>node Something.js

app.listen(8088, function() { console.log('앱 청취 포트 8088');

} else {

// require('/.something.js')

module.exports = app }

자세한 내용은 모듈 설명서를 참조하세요.

10 - 콜백 함수에 매개변수 전달

기본적으로 다음과 같이 콜백 함수에 매개변수를 전달할 수 없습니다.

function callback() {

console.log('Hi human'); }
document.getElementById('someelem').addEventListener('click', callback);



JavaScript 클로저를 활용하여 콜백 함수 매개변수를 전달할 수 있습니다. , 경우는 다음과 같습니다:

function callback(a, b) { return function() { console.log('sum = ', (a+b))

}

} var x = 1, y = 2; document.getElementById('someelem').addEventListener('click', callback(x, y));

클로저란 무엇인가요? 클로저는 독립(자유) 변수에 대한 함수입니다. 즉, 클로저에 정의된 함수는 자신이 생성된 환경을 기억합니다. 자세한 내용은 MDN을 참조하세요. 따라서 호출 시 매개변수 X/Y가 콜백 함수 범위 내에 존재합니다.

또 다른 방법은 바인딩 방법을 사용하는 것입니다. 예:

var AlertText = function(text) {

alert(text); }; document.getElementById('someelem').addEventListener('click', AlertText.bind(this, 'hello') ) ;

두 방법 사이에는 약간의 성능 차이가 있습니다. 자세한 내용은 jsperf

11을 참조하세요. - indexOf



Native JavaScript에는 방법이 포함되어 있습니다. 문자열 또는 문자열 배열 항목에 값이 있는지 확인하려면 다음을 수행하세요.

var someText = 'JavaScript Rules' if (someText.indexOf('JavaScript') !== -1) {

}

// 또는 if (someText.indexOf('JavaScript') >= 0) {
}

하지만 ExpressJs 코드 조각을 다시 살펴보겠습니다.

• //examples/mvc/lib/boot.js for(obj의 var 키) {

  // “reserved” 내보내기
if (~['name', 'prefix', 'engine', 'before '].indexOf(key)) continue;
//examples/lib/utils.js
exports.normalizeType = function(type){
return ~type. indexOf('/')

• 
  ? acceptParams(type)

{ value: mime.lookup(type), params: {} };

// 예제/web-service/index.js // 키가 유효하지 않습니다

if (!~apiKeys.indexOf(key)) return next(error(401, 'invalid api key'));🎜🎜🎜🎜문제는~ 비트 연산자. "연산자는 이와 같은 이진 표현식에 대해 연산을 수행하지만 표준 JavaScript 숫자 값을 반환합니다. 🎜그들은 -1을 0으로 변환하는데, 이는 JavaScript에서 false입니다." 🎜🎜

var someText = 'text';
!!~someText.indexOf('tex'); // someText에 "tex"가 포함되어 있음 - true
!~someText.indexOf('tex') // someText에 "tex"가 포함되어 있지 않음 tex" ” - false
~someText.indexOf('asd'); // someText에 "asd"가 포함되어 있지 않음 - false
~someText.indexOf('ext'); // someText에 "ext"가 포함되어 있음 - true
String. 프로토타입.includes ()

ES6(ES 2015)에 도입된 include() 메서드는 문자열에 다른 문자열이 포함되어 있는지 확인하는 데 사용할 수 있습니다.

'something'.includes('thing') / / true

ECMAScript 2016(ES7)에서는 배열도 다음과 같이 작동할 수 있습니다. indexOf:

!!~[1, 2, 3].indexOf(1) // true
[ 1, 2, 3].includes(1); // true

안타깝게도 Chrome, Firefox, Safari 9 이상에서만 지원됩니다.

12 - 화살표 함수(ES6)

ES6의 새로운 기능을 소개하는 화살표 함수는 더 적은 줄로 더 많은 코드를 작성할 수 있는 매우 편리한 도구일 수 있습니다. 그의 이름은 =>가 작은 화살표 ->에 비해 "두꺼운 화살표"처럼 보이는 그의 구문에서 유래되었습니다. 여러분 중 일부는 이 함수 유형이 람다 표현식과 같은 다른 정적 언어의 익명 함수와 유사하다는 것을 알고 있을 것입니다. 이러한 화살표 함수에는 설명적인 함수 이름이 없기 때문에 익명이라고 합니다.
그렇다면 이것의 이점은 무엇입니까?

구문: ​​LOC가 적고 함수 키워드를 반복해서 입력할 필요가 없습니다.

의미: 문맥에서 키워드 this를 포착하세요.

간단한 구문 예:

아래 두 코드 조각을 보면 동일한 작업을 수행합니다. 화살표 기능의 기능을 빠르게 이해할 수 있습니다.

// 화살표 함수의 일일 구문
param => 표현식
// 괄호 안에 작성할 수도 있습니다.
// 괄호는 다중 매개변수 요구사항입니다.
(param1 [, param2]) => // 일일 함수 사용

var arr = [5,3,2,9,1];

var arrFunc = arr.map(function(x) { return x * x;
}); arr)



// 화살표 기능 사용 var arr = [5,3,2,9,1]

var arrFunc = arr.map((x) => x*x); (arr)

보시다시피 이 예의 화살표 기능을 사용하면 괄호 안의 매개변수와 return 키워드를 입력하는 시간을 절약할 수 있습니다. (x,y) => x+y와 같이 괄호 안에 매개변수를 입력하는 것이 좋습니다. 사용 사례에 따라 단지

망각에 대처하는 방법일 뿐입니다. 그러나 위의 코드는 다음과 같이 실행됩니다: x => x*x 현재로서는 이는 LOC를 줄이고 가독성을 높이는 구문 개선일 뿐입니다.

이 바인딩

화살표 기능을 사용하는 더 좋은 이유가 있습니다. 이것이 바로 이 문제가 발생하는 맥락입니다. 화살표 기능을 사용하면 .bind(this) 및 that=this에 대해 걱정할 필요가 없습니다. 화살표 함수는 컨텍스트에서 이를 찾을 수 있기 때문입니다.

아래 예를 보세요:

// 전역 정의 this.i this.i = 100; var counterA = new CounterA()

var counterB(); new CounterC();

var counterD = new CounterD();


// 나쁜 예
function CounterA() {
// CounterA의

this

인스턴스(!! 여기서는 무시하세요. )
this.i = 0;
setInterval(function () { // <span style="font-size: 14px;">this</span> 实例 (!! 忽略这里)
this.i = 0;
setInterval(function () {
// <span style="font-size: 14px;">this</span> 指全局对象，而不是 CounterA’s <span style="font-size: 14px;">this</span><br>this<span style="font-size: 14px;"></span>
은 CounterA의
<br>this<br>가 아닌 전역 개체를 참조합니다.
// 따라서 0 대신 100으로 계산을 시작합니다(local this.i)
document.getElementById(“counterA”).innerHTML = this.i
}
// 수동으로 바인딩 that = this
function CounterB() {
this.i = 0;
var that = this;
setInterval(function() {
that.i++;
document.getElementById(“counterB”).innerHTML = that. i;
}, 500);
}
// .bind(this) 사용
function CounterC() {
this.i = 0;
setInterval(function() {
this.i++;
document.getElementById(“ counterC”).innerHTML = this.i;
}.bind(this), 500);
}
// 화살표 기능 사용
function CounterD() {
setInterval(() => {
this.i++;
document.getElementById(“counterD”).innerHTML = this.i

}, 500);

화살표 기능에 대한 자세한 내용은 여기에서 확인할 수 있습니다. 다양한 구문 옵션을 보려면 이 사이트를 방문하세요.

13 - JavaScript 블록의 성능 측정 팁

JavaScript 블록의 성능을 빠르게 측정하려면 console.time(label) 및 console.timeEnd(label)과 같은 콘솔 함수를 사용할 수 있습니다

console.time(“배열 초기화”);
var arr = new Array(100),
len = arr.length,
i
for (i = 0; i 19654bc4530d789f7c12667f811028a0 a + b
getSum( 10 ) // 오류 발생, b는 정의되지 않음
getSum( undefine, 10 ) // 오류 발생, a는 정의되지 않음

_err은 즉시 오류를 발생시키는 함수입니다. . 값으로 인수가 없으면 기본값이 사용되고 _err이 호출되며 오류가 발생합니다. Mozilla 개발자 네트워크에서 기본 매개변수의 더 많은 예를 볼 수 있습니다.

15 ​​​​- 부스트

부스트를 이해하면 기능을 구성하는 데 도움이 됩니다. 변수 선언과 정의 함수가 맨 위로 끌어올려진다는 점만 기억하세요. 같은 줄에서 변수를 선언하고 정의하더라도 변수 정의는 작동하지 않습니다. 또한 변수 선언을 통해 시스템은 변수가 존재함을 알 수 있는 반면, 정의는 변수에 값을 할당합니다.

function doTheThing() {
// 오류: notDeclared가 정의되지 않았습니다.
console.log(notDeclared);
// 출력: 정의되지 않음
console.log(definatedLater)
var DefineLater; 정의됨!'
// 출력: '나는 정의되었습니다!'
console.log(definedLater)
// 출력: 정의되지 않음
console.log( DefineSimulateneously) = '나는 정의되었습니다!' '내가 정의했습니다!'
console.log( DefinedSimulateneously)
// 출력: '내가 해냈습니다!'
doSomethingElse();
function doSomethingElse(){
console.log('내가 해냈습니다!');
// 오류: 정의되지 않은 것은 함수가 아닙니다
functionVar();
var functionVar = function(){
console.log('내가 해냈습니다!')
}
}



, 함수 범위 내에서 변수 선언을 끌어올리면 변수가 어느 범위에서 선언되었는지 알 수 있습니다. 변수를 사용하기 전에 변수를 정의하세요. 명확하고 표준화된 코드를 보장하려면 범위 하단에 함수를 정의하세요.

16 - 개체에 속성이 있는지 확인

개체에 특정 속성이 있는지 확인하려면 다음을 수행할 수 있습니다.

var myObject = { name: '@tips_js'

};

if (myObject.name) { ... }


이 작업을 수행하는 두 가지 기본 방법, 즉 연산자와 object.hasown 속성이 있다는 것을 알아야 합니다. 방법. 모든 객체는 Object에서 상속되며 두 메서드를 모두 사용할 수 있습니다.

두 메서드의 몇 가지 차이점:

var myObject = { name: '@tips_js'

}; //myObject.hasOwnProperty('name'); // true

'name' in myObject; / true myObject.hasOwnProperty('valueOf'); // false, valueOf는 myObject의 프로토타입 체인
'valueOf'에서 상속됩니다. // true



둘 사이의 차이점은 검사의 성격에 있습니다. 즉, hasOwnProperty는 객체 자체에 조회할 속성이 있는 경우 yrue를 반환합니다. 그러나 in 연산자는 속성에 의해 생성된 객체와 속성 상속의 프로토타입 체인을 구분하지 않습니다.
또 다른 예는 다음과 같습니다.

var myFunc = function() {
this.name = '@tips_js' };

myFunc.prototype.age = '10 days'

var user = new myFunc( ) ; user.hasOwnProperty('name'); // true
user.hasOwnProperty('age') // false, 프로토타입 체인에 있기 때문입니다

点击看例子。同时，建议在检查对象的属性存在时，阅读这些有关的常见错误。

17 - 模板字符串

截至ES6，JS已经有模板字符串作为替代经典的结束引用的字符串。
案例：普通字符串

var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(‘My name is ’ + firstName + ’ ’ + lastName);
// My name is Jake Rawr  
模板字符串：
var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(<span style="font-size: 14px;">My name is ${firstName} ${lastName}</span>);
// My name is Jake Rawr

在模板字符串中${}中，你可以写不用写/n或者简单逻辑来实现多行字符串。
您还可以使用函数来修改模板字符串的输出，它们被称为模板字符串的标记。你可能还想读到更多的理解模板字符串相关信息。

18- 노드 목록을 배열로 변환

querySelectorAll 메소드는 배열과 유사한 노드 목록 개체를 반환합니다. 이러한 자료 구조는 배열의 형태로 나타나는 경우가 많다는 점에서 배열과 유사하지만, map, foreach 등의 배열 메소드를 사용할 수 없습니다. 다음은 nodelist를 DOM 요소 배열로 변환하는 빠르고 안전하며 재사용 가능한 방법입니다.

const nodelist = document.querySelectorAll('p');
const nodelistToArray = Array.apply(null, nodelist); /later on ..
nodelistToArray.forEach(…);
nodelistToArray.slice(…);
//etc…

apply 메소드는 일련의 매개변수를 배열 형식으로 변환하는 것입니다. 주어진 함수에 전달됩니다. MDN은 Apply가 querySelectorAll이 반환하는 배열과 유사한 개체를 호출한다고 지적합니다. 함수 컨텍스트에서 이를 지정할 필요가 없으므로 null 또는 0을 전달합니다. 반환된 결과는 배열 메서드를 사용하여 사용할 수 있는 DOM 요소의 배열입니다.

es2015를 사용하는 경우...(확산 연산자)

const nodelist = […document.querySelectorAll('p')]; // 반환되는 것은 실제 배열입니다

/ /나중에 . nodelist.map(…);
nodelist.slice(…);



19 - "엄격한 사용" 및 게으름 엄격 모드 JavaScript 개발자가 JavaScript를 더욱 안전하게 작성할 수 있습니다. 기본적으로 JavaScript를 사용하면 개발자가 게으르게 됩니다. 예를 들어 처음으로 변수를 선언할 때 var를 사용할 수 없습니다. 이는 경험이 부족한 개발자처럼 보일 수도 있지만 변수 이름 철자 오류의 원인이기도 합니다. 실수로 또는 우발적으로 외부 범위에 언급되었습니다.

프로그래머는 컴퓨터가 우리 대신 지루한 일을 하게 하고 작업의 일부 오류를 확인하는 것을 좋아합니다. "use strict"는 이를 수행하고 오류를 JavaScript 오류로 변환하도록 지시합니다.

js 파일 상단에 다음 지시문을 추가할 수 있습니다.

// 전체 스크립트 파일은 strict 모드 구문입니다."use strict"

var v = "안녕하세요! 저는 strict입니다. mode script!";

또는 함수 내에서: function f() {

// 함수 범위 내에서 엄격한 모드 구문

'use strict'; functionnested() { return "And so am I!"; }
return "안녕하세요! 저는 엄격 모드 함수입니다!" +nested();
}
function f2() { return "나는 엄격하지 않습니다." }



이 지시어가 포함된 JavaScript 파일에서 또는 함수 내에서는 JavaScript 엔진 실행에서 직접적으로 대규모 JavaScript 프로젝트의 일부 잘못된 동작을 금지했습니다. 무엇보다도 엄격 모드는 다음 동작을 변경합니다.



· 변수는 var 앞에 선언된 경우에만 사용할 수 있습니다. · 읽기 전용 속성을 쓰려고 하면 오류가 발생합니다.

· 생성자는 새 키워드로 호출해야 합니다.

· 이것은 기본적으로 전역 개체를 가리키지 않습니다. · eval()의 사용이 매우 제한됨 · 예약된 문자 또는 향후 예약된 문자가 변수 이름으로 사용되지 않도록 보호

엄격한 모드는 새 프로젝트에 유용하지만 대부분의 경우 사용되지 않는 오래된 프로젝트에서 사용하는 것은 매우 어렵습니다. 여러 파일을 하나로 병합할 때도 문제가 됩니다. 전체 파일이 엄격 모드에서 실행될 수 있기 때문입니다.
선언이 아니라 리터럴이므로 이전 버전의 브라우저에서는 이를 무시합니다. 엄격 모드 지원:


· IE 10+

· FF 4+

· Chrome 13+ · Safari 5.1+
· Opera 12+

MDN의 엄격 모드 설명을 참조하세요.



20 - 배열이나 단일 요소를 매개변수로 처리하는 메소드

단일 요소를 매개변수로 하여 배열과 함수를 연산하는 별도의 메소드를 작성하는 것보다 일반 메소드를 작성하는 것이 좋습니다. function 으로 모든 것을 조작할 수 있습니다. 이는 일부 jQuery 메서드와 유사합니다(CSS 일치는 모든 선택기를 수정함). 먼저 모든 것을 배열에 넣으면 Array.concat은 배열이나 단일 개체를 허용합니다.

function printUpperCase(words) {

var elements = [].concat(words)

for (var i = 0; i b28316f1680f27563095ac6ceb1be67f CACTUS
printUpperCase(["cactus", "bear", "potato"]);
// => CACTUS
// BEAR
// POTATO

21 - undefine과 null

· undef의 차이점은 변수가 선언되지 않았거나 변수가 선언되었지만 할당되지 않았음을 의미합니다. value
· Null은 특정 값, 즉 "값 없음"을 나타냅니다. JavaScript는 기본적으로 할당되지 않은 변수를 정의되지 않은 것으로 정의합니다.
· JavaScript는 할당되지 않은 변수에 대해 null 값을 설정하지 않습니다. 이를 나타 내기 위해 프로그래머가 사용합니다. 값이 없는 변수입니다.
· undefine은 json 형식 데이터에서 유효하지 않지만 null은 유효합니다.
· undefine 유형은 undefine입니다.
· null은 객체와 유사합니다.
· 둘 다 원시값입니다 ​​
· 둘 다 false(Boolean(undefine) // false, Boolean(null) // false)로 간주됩니다.
· 변수가 정의되지 않았는지 확인

변수 유형 === “undefine” · 변수가 null인지 확인

variable === “null” 값으로 보면 동일하지만, 함께 고려되는 유형과 값은 동일하지 않습니다.

null == 정의되지 않음 // true null === 정의되지 않음 // false

22 - ASCII가 아닌 문자로 문자열 정렬

JavaScript에는 기본 방법은 문자열 형식으로 배열을 정렬하는 것입니다. 간단한 array.sort()를 수행하면 문자열이 알파벳 순서로 정렬됩니다. 물론 사용자 정의 정렬 기능도 사용할 수 있습니다.

['상하이', '뉴욕', '뭄바이', '부에노스아이레스'].sort() // ["부에노스아이레스", "뭄바이", "뉴욕", "상하이"]

['é', 'a', 'ú', 'c']와 같은 비ASCII 문자로 정렬하려고 하면 이상한 결과가 나옵니다. ['c', 'e' , ' á', 'ú'], 이는 영어로 된 언어만 정렬이 가능하기 때문에 발생합니다.

간단한 예를 보세요:

// 스페인어 ['único','árbol', 'cosas', 'fútbol'].sort()
// ["cosas", "fútbol " ", "árbol", "único"] // 잘못된 정렬
// 독일어
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort()
// ["Wann", "Woche", "wäre", "wöchentlich"] // 잘못된 정렬

다행히도 이 동작을 방지하는 두 가지 방법이 있습니다. ECMAScript 국제화 API는 localecompare 및 Intl.Collator를 제공합니다. 두 가지 방법 모두 고유한 맞춤 매개변수가 있으므로 완벽하게 작동하도록 구성할 수 있습니다.

localeCompare() 사용

['único','árbol', 'cosas', 'fútbol'].sort(function (a, b) { return a.localeCompare(b);
} );
// ["árbol", "cosas", "fútbol", "único"]
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
return a.localeCompare(b)
})
// ["Wann", "wäre", "Woche", "wöchentlich"]

intl.collator()

['único 사용 ','árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare) // ["árbol", "cosas", "fútbol", "único"]
['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare)
// ["Wann", "wäre", "Woche", "wöchentlich"]

· 각 메소드는 위치를 사용자 정의할 수 있습니다

· FF 브라우저에서는 더 큰 값이나 문자열을 비교할 때 intl.collator()가 더 빠릅니다 따라서 영어 이외의 언어를 사용하는 경우 문자열 배열에 할당하는 경우 , 예상치 못한 정렬을 방지하려면 이 방법을 사용하는 것을 잊지 마세요.

23 - 중첩 조건 개선

JavaScript에서 if 문의 중첩을 더 효율적으로 개선하고 만들 수 있는 방법은 무엇입니까?

if (색상) { if (색상 === '검은색') {
printBlackBackground();
} else if (color === '빨간색') {
printRedBackground()
} else if ( color === 'blue') {
printBlueBackground();
} else if (color === 'green') {
printGreenBackground()
} else {
printYellowBackground()
}

내포된 if 문 대신 스위치 문을 사용하는 것이 개선되었습니다. 더 깨끗하고 체계적이지만 디버깅이 어렵기 때문에 권장되지 않습니다. 이유는 다음과 같습니다.

switch(color) {
case 'black':
printBlackBackground();
break;
printRedBackground()
case 'blue':
printBlueBackground(); ;
case 'green':
printGreenBackground();
default:
printYellowBackground()
}



그러나 판단 조건이 여러 개인 경우는 어떻습니까? 이 경우 좀 더 간결하고 질서정연하게 만들고 싶다면 스위치를 사용하면 됩니다. true를 switch 문에 매개변수로 전달하면 각 경우에 조건을 지정할 수 있습니다.

switch(true) { case (typeof color === 'string' && color === 'black'):

printBlackBackground()

break; color === 'red'): printRedBackground();
break;
case (typeof color === 'string' && color === 'blue'):
printBlueBackground()
case(typeof) color === 'string' && color === 'green'):
printGreenBackground();
break
case (typeof color === 'string' && color === 'yellow'):
printYellowBackground() ;
break;
}



그러나 각 조건에서 여러 번 확인하는 것을 피하고 스위치를 사용하지 않도록 노력해야 합니다. 또한 가장 효율적인 방법은 객체를 이용하는 것임을 고려해야 합니다.
var colorObj = {
'black': printBlackBackground, 'red': printRedBackground,

'blue': printBlueBackground,

'green': printGreenBackground, 'yellow': printYellowBackground
};



if(색상 입력 colorObj) {
colorObjcolor
}

여기에 더 많은 관련 정보가 있습니다.

24 - ReactJs 하위 구성의 키는 매우 중요합니다

keys는 동적 배열에 전달해야 하는 모든 구성 요소를 나타내는 속성입니다. 이는 React가 각 DOM 구성 요소를 식별하여 다른 구성 요소인지 동일한 구성 요소인지 확인하는 데 사용하는 고유하고 구체적인 ID입니다. 하위 구성 요소가 저장되고 다시 생성되지 않도록 하고 이상한 일이 발생하지 않도록 하려면 키를 사용하십시오.

· 기존 독립 개체 값 사용

· 하위 구성 요소가 아닌 상위 구성 요소에 키 정의

//Bad…
render() {

{{item .name}}

}

… //OK

· 배열을 사용하는 것은 좋은 습관이 아닙니다.

· random()은 절대 실행되지 않습니다. //Bad




· 고유 ID를 만들 수 있습니다. 메서드를 확인하세요.
· 자식 수가 많거나 복잡한 구성 요소가 포함된 경우 키를 사용하여 성능을 향상하세요.
· 모든 자식 ReactCSSTransitionGroup 키 속성을 제공해야 합니다.

25 - AngularJs:

applyAngularJ의 가장 훌륭한 기능은 양방향 데이터 바인딩입니다. 작동하려면 AngularJ가 모델 변경 사항과 뷰 루프를 평가합니다(

digest 루프). 때로는 새 루프를 수동으로 실행해야 하며 이 단계가 성능이기 때문에 올바른 옵션이 있어야 합니다.

$apply

이 핵심 방법을 사용하면 선택적 함수 인수를 실행한 후

digest 루프를 시작할 수 있습니다. ( );

$digest

在这种情况下，$digest方法在当前作用域和它的子作用域执行，你应该注意到，父级的作用域将不被检查，并没有受到影响。
建议：

· 只在浏览器DOM事件在Angular之外被触发的时候使用

digest
· 给$apply传递函数表达式，这有一个错误处理机制，允许在消化周期中整合变化。

apply(() => {
$scope.tip = ‘Javascript Tip’;
});

· 如果你仅仅想更新当前作用域或者他的子作用域，用

digest。性能不言而喻咯。
· 当

evalAsync。这是一个在当前循环或下一次循环的期间或对表达式做出评估的核心方法，这可以提高你的应用程序的性能。

25 - 在数组插入一个项

将一个项插入到现有数组中，是一个日常常见的任务，你可以使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。

这些都是已知的方法，但这并不意味着没有一个更高性能的途径。我们来看一看。
在数组的末尾添加一个元素很容易与push()，但还有一个更高性能的途径。
var arr = [1,2,3,4,5];
arr.push(6);
arr[arr.length] = 6; //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度

这两种方法都修改了数组，不相信我？看这个jsperf
现在，如果我们正在尝试将一个项目添加到数组的开头：

var arr = [1,2,3,4,5];
arr.unshift(0);
[0].concat(arr); //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度

这里更详细一点：unshift编辑原有的数组，concat返回一个新数组。jsperf
添加在阵列中的物品很容易使用splice，它是做它的最高效的方式。
?
1
2

var items = [‘one’, ‘two’, ‘three’, ‘four’];
items.splice(items.length / 2, 0, ‘hello’);

我试着在不同的浏览器和操作系统中运行这些测试，结果是相似的。我希望这些建议对你有用，鼓励你自己做测试！

위 내용은 몇 가지 js 팁 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!