자바스크립트 함수 학습 및 관련 프로그래밍 습관 요약 가이드_기본지식

null 및 정의되지 않음
Undefine은 명시적으로 값이 할당되지 않은 변수와 동일합니다(값 할당 여부는 의도치 않게 무시될 수 있으며 이는 논리적인 문제입니다).

> var foo;
> foo
undefined

마찬가지로 매개변수가 누락되면 JavaScript는 정의되지 않은 항목을 할당합니다.

> function id(x) { return x }
> id()
undefined

a = 1;
a !== undefined // true

a = undefined
var b
a === b //true

Null은 예상치 못한 이유(Null 할당, 적법한 논리)로 인해 무시되는 것이 아니라 값이 없는 것으로 변수를 명시적으로 지정하는 것과 같습니다.

계산 참여
JS에서 null이 작업에 들어가면 실제로는 0 또는 false로 구문 분석됩니다.

(1 + null) # 1 (1 * null) # 0 (1 * null) # Infinity

정의되지 않은 작업을 시작하고 항상 NaN을 얻습니다.

(1 + undefined) # NaN (1 * undefined) # NaN (1 / undefined) # NaN

논리적 판단
논리적 판단에서는 null과 undefine 모두 false로 간주됩니다.

한번의 판단으로 이 두 항목이 사실인지 동시에 확인할 수 있습니다.

//也会把 false, -0, +0, NaN 与 '' 当成“空值”
if (v) {
  // v 有值
} else {
  // v 没有值
}

하지만 큰 구덩이를 만나면==

var foo;
console.log(foo == null); // true
console.log(foo == undefined); // true
console.log(foo === null); // false
console.log(foo === undefined); // true
console.log(null == undefined); // true

좋은 습관, 항상 ===

를 사용하세요.

수량이 정의되어 있고 비어 있지 않은지 확인하려면 if (a !== null && a !== undefine)를 사용하면 됩니다.
=== 및 ==
1.== ​​​​두 값이 같은지 여부를 확인하는 데 사용됩니다

두 가지 값 유형이 다를 경우 자동 변환이 발생하며, 얻은 결과가 매우 직관적이지 않아 원하는 결과가 아닐 수 있습니다.

"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" \t\r\n" == 0 // true

2.===

유형 값 비교

"양측 피연산자의 유형과 값이 동일한 경우 ===는 true를 반환하고, !==는 false를 반환합니다." - "JavaScript: The Essence of Language"

모범 사례:

비교 작업에 === 및 !==
을 사용할 때마다 json 작업

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };

var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"  */

var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
to string

var obj = {
  name: 'myObj'
};

JSON.stringify(obj);

함수 객체와 익명 함수
함수 객체 할당

var slice_func = [].slice
//slice_func()

var a = function() {
};
// a()

var a = {
  fun : function() {
  };
}
// a.fun()

someElement.addEventListener("click", function(e) {
  // I'm anonymous!
});

및

var f = function foo(){
  return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"

익명기능

from

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
to

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

모범 사례
1. 여러 변수를 정의할 경우 var 키워드를 생략하고 쉼표로 대체하세요

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

더 나은 접근 방식

var someItem = 'some string',
  anotherItem = 'another string',
  oneMoreItem = 'one more string';

2. 세미콜론이나 중괄호를 생략하지 마세요.

세미콜론을 생략하면 더 크고 알 수 없으며 찾기 어려운 문제가 발생할 수 있습니다

var someItem = 'some string'
function doSomething() {
return 'something'
}

더 나은 접근 방식

var someItem = 'some string';
function doSomething() {
return 'something';
}

3. new Object() 대신 {}를 사용하세요

JavaScript에서 객체를 생성하는 방법에는 여러 가지가 있습니다. 아마도 전통적인 방법은 다음과 같이 "new"와 생성자를 사용하는 것입니다.

var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
console.log(this.name);
}

더 나은 접근 방식

var o = {}; //空对象

var o = {
name: 'Jeffrey',
lastName = 'Way',
someFunction : function() {
  console.log(this.name);
}
};

여러 전역 변수가 하나의 네임스페이스 아래에 구성되어 있으면 다른 애플리케이션, 구성 요소 또는 클래스 라이브러리와의 잘못된 상호 작용 가능성이 크게 줄어듭니다. ——더글러스 크록포드

4. new Array() 대신 []를 사용하세요

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

더 나은 접근 방식:

var a = ['Joe','Plumber'];

5.판단의 종류

Typeof는 일반적으로 숫자, 부울, 문자열, 함수, 객체, 정의되지 않은 결과만 반환할 수 있습니다

특급:

typeof xx === ''
typeof xx !== ''

예:

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';

// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量

// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法可以分辨出一个数组和真实的对象
typeof new Date() === 'object';

// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

typeof null === 'object'; // 从JavaScript诞生以来,一直是这样的.

6. 삼항 연산자: 강력하고 요염함

문법

expression ? xxx : yyy
bad

var direction;
if(x < 200){
 direction = 1;
} else {
 direction = -1;
}
good

var direction = x < 200 &#63; 1 : -1;

7. 논리적 AND/OR를 사용하여 조건부 판단

var foo = 10;
foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();
foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();

//默认值
a = b || 'default'
return b || c || d > 1 ? 0 : 2

8. 변수에 값을 할당할 때 var 키워드를 사용하는 것을 잊지 마세요

정의되지 않은 변수에 값을 할당하면 전역 변수가 생성됩니다. 전역 변수를 피하세요

9. 자기 호출 기능

자체 호출 익명 함수 또는 IIFE 즉시 호출 함수 표현. 생성 직후 자동으로 실행되는 기능입니다

(function(){
  // some private code that will be executed automatically
})();

(function(a,b){
  var result = a+b;
  return result;
})(10,20)

10. eval() 및 함수 생성자를 사용하지 마세요

Eval=evil은 스크립트 성능을 크게 저하시킬 뿐만 아니라(주석: JIT 컴파일러는 문자열의 내용을 예측할 수 없으며 사전 컴파일 및 최적화할 수 없음) 엄청난 보안 위험을 초래합니다. 실행하려면 권한이 너무 높은 문자를 사용하세요.

eval 및 함수 생성자를 사용하는 것은 소스 코드를 실행 가능한 코드로 변환하기 위해 스크립트 엔진을 호출할 때마다 비용이 많이 드는 작업입니다.

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

11. with() 사용을 피하세요

with()를 사용하면 전역 변수가 삽입됩니다. 따라서 같은 이름의 변수를 덮어쓰게 되어 불필요한 문제를 일으키게 됩니다

12. 스크립트를 페이지 하단에 배치하세요

기억하세요. 기본 목표는 페이지를 최대한 빨리 사용자에게 표시하는 것입니다. 스크립트가 차단되고 스크립트가 로드되어 실행될 때까지 브라우저는 다음 콘텐츠를 계속 렌더링할 수 없습니다. 따라서 사용자는 더 오래 기다려야 할 것입니다

13. For 문 내에서 변수를 선언하지 마세요

나쁜

for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}

좋아요

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}

14. 코드에 주석 추가

// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）.
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}

15.instanceof

instanceof 方法要求开发者明确地确认对象为某特定类型

var oStringObject = new String("hello world");
console.log(oStringObject instanceof String);  // 输出 "true"

// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承

var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

16.apply/call

someFn.call(this, arg1, arg2, arg3);
someFn.apply(this, [arg1, arg2, arg3]);

apply

Function.apply(obj,args)方法能接收两个参数

obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）
call

Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj：这个对象将代替Function类里this对象
params：这个是一个参数列表
使用哪个取决于参数的类型