摘要：根據(jù)調(diào)查，自年一來，是最流行的編程語言。在一個(gè)函數(shù)體中聲明的變量和函數(shù)，周圍的作用域內(nèi)無法訪問。也就是說被大括號(hào)包圍起來的區(qū)域聲明的變量外部將不可訪問。一個(gè)常見的誤解是使用聲明的變量，其值不可更改。

譯者按： 總結(jié)了大量JavaScript基本知識(shí)點(diǎn)，很有用！

原文: The Definitive JavaScript Handbook for your next developer interview

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

根據(jù)StackOverflow調(diào)查， 自2014年一來，JavaScript是最流行的編程語言。當(dāng)然，這也在情理之中，畢竟1/3的開發(fā)工作都需要一些JavaScript知識(shí)。因此，如果你希望在成為一個(gè)開發(fā)者，你應(yīng)該學(xué)會(huì)這門語言。

這篇博客的主要目的是將所有面試中常見的概念總結(jié)，方便你快速去了解。
(譯者按：鑒于本文內(nèi)容過長，方便閱讀，將分為三篇博客來翻譯。)

在JavaScript中有7個(gè)內(nèi)置類型：null，undefined，boolean，number，string，object，和symbol(ES6)。

除了object以外，其它都叫做基本類型。

typeof 0              // number
typeof true           // boolean
typeof "Hello"        // string
typeof Math           // object
typeof null           // object  !!
typeof Symbol("Hi")   // symbol (New ES6)

Null vs. Undefined

Undefined表示未定義。對(duì)于沒有初始化的變量、函數(shù)調(diào)用時(shí)候未提供的函數(shù)參數(shù)、缺失的對(duì)象屬性，它們的默認(rèn)值就是undefined。如果一個(gè)函數(shù)沒有返回語句，那么默認(rèn)的返回值也是undefined。

NUll表示值為空。一個(gè)變量我們可以將其賦值為null，表示當(dāng)前的沒有值。

隱式轉(zhuǎn)換

請看下面的例子：

var name = "Joey";
if (name) {
  console.log(name + " doesn"t share food!")  // Joey doesn’t share food!
}

在if語句的條件判斷中，name從字符串轉(zhuǎn)換為布爾型。在if的代碼塊中，在控制臺(tái)將name原原本本打印出來。你知道在什么情況下字符串會(huì)轉(zhuǎn)換為真，什么時(shí)候?yàn)榧倜矗?/p>

""，0， null，undefined, NaN, false 會(huì)自動(dòng)轉(zhuǎn)換為false。其它的都會(huì)轉(zhuǎn)換為真：

Boolean(null)         // false
Boolean("hello")      // true 
Boolean("0")          // true 
Boolean(" ")          // true 
Boolean([])           // true 
Boolean(function(){}) // true

空數(shù)組、對(duì)象、函數(shù)定義都會(huì)自動(dòng)轉(zhuǎn)換為真。

String & Number之間的轉(zhuǎn)換

第一個(gè)你要非常小心的是+操作符。因?yàn)樗瑫r(shí)用于數(shù)字相加和字符串拼接。

*,/,-只用于數(shù)字運(yùn)算，當(dāng)這些操作符和字符串一起使用，那么字符串會(huì)被強(qiáng)制轉(zhuǎn)換為數(shù)字。

1 + "2" = "12"
"" + 1 + 0 = "10"
"" - 1 + 0 = -1
"-9
" + 5 = "-9
5"
"-9
" - 5 = -14
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
null + 1 = 1

== vs. ===

一個(gè)廣泛被接受的認(rèn)知就是：==判斷值是否相等，===同時(shí)判斷值是否相等和類型是否相同。但是，這里有些誤解。

實(shí)際上，==在驗(yàn)證相等性的時(shí)候，會(huì)對(duì)類型不同的值做一個(gè)類型轉(zhuǎn)換。===對(duì)要判斷的值不做類型轉(zhuǎn)換。

2 == "2"            // True
2 === "2"           // False
undefined == null   // True
undefined === null  // False

類型轉(zhuǎn)換有很多取巧的地方，要注意：

let a = "0";
console.log(Boolean(a)); // True
let b = false;
console.log(Boolean(b)); // False

你認(rèn)為下面的相等判斷會(huì)輸出什么值呢?

console.log(a == b);

實(shí)際上會(huì)返回true。知道為什么嗎？
如果你將一個(gè)布爾類型的和非布爾類型的判斷，JavaScript會(huì)將布爾類型的轉(zhuǎn)換為數(shù)字然后再比對(duì)。
執(zhí)行過程如下：

"0" == false   (1)
"0" == 0       (2)
 0  == 0       (3)

所以，最終變成了0==0，當(dāng)然返回true啦。

如果你想看完整的資料，請查看ES5的官方文檔。

如果想看cheat sheet, 點(diǎn)擊這里。

一些比較容易掉坑的比較，我在這里列出來：

false == ""  // true
false == []  // true
false == {}  // false
"" == 0      // true
"" == []     // true
"" == {}     // false
0 == []      // true
0 == {}      // false
0 == null    // false

對(duì)于基本類型的值，賦值是通過值拷貝的形式；比如：null，undefined，boolean，number，string和ES6的symbol。對(duì)于復(fù)雜類型的值，通過引用拷貝的形式賦值。比如：對(duì)象、對(duì)象包括數(shù)組和函數(shù)。

var a = 2;        // "a" hold a copy of the value 2.
var b = a;        // "b" is always a copy of the value in "a"
b++;
console.log(a);   // 2
console.log(b);   // 3
var c = [1,2,3];
var d = c;        // "d" is a reference to the shared value
d.push( 4 );      // Mutates the referenced value (object)
console.log(c);   // [1,2,3,4]
console.log(d);   // [1,2,3,4]
/* Compound values are equal by reference */
var e = [1,2,3,4];
console.log(c === d);  // true
console.log(c === e);  // false

如果想對(duì)復(fù)雜類型的值進(jìn)行值拷貝，你需要自己去對(duì)所有子元素進(jìn)行拷貝。

const copy = c.slice()    // "copy" 即使copy和c相同，但是copy指向新的值
console.log(c);           // [1,2,3,4]
console.log(copy);        // [1,2,3,4]
console.log(c === copy);  // false

Fundebug提供實(shí)時(shí)、專業(yè)的錯(cuò)誤監(jiān)控服務(wù)，為您的線上代碼保駕護(hù)航，歡迎大家免費(fèi)使用！

作用域值程序的執(zhí)行環(huán)境，它包含了在當(dāng)前位置可訪問的變量和函數(shù)。

全局作用域是最外層的作用域，在函數(shù)外面定義的變量屬于全局作用域，可以被任何其他子作用域訪問。在瀏覽器中，window對(duì)象就是全局作用域。

局部作用域是在函數(shù)內(nèi)部的作用域。在局部作用域定義的變量只能在該作用域以及其子作用域被訪問。

function outer() {
  let a = 1;
  function inner() {
    let b = 2;
    function innermost() {
      let c = 3;
      console.log(a, b, c);   // 1 2 3
    }
    innermost();
    console.log(a, b);        // 1 2 — "c" is not defined
  }
  inner();
  console.log(a);             // 1 — "b" and "c" are not defined
}
outer();

你可以將作用域想象成一系列不斷變小的門。如果一個(gè)個(gè)子不高的人可以穿過最小的門(局部最小作用域)，那么必然可以穿過任何比它大的門(外部作用域)。

在編譯過程中，將var和function的定義移動(dòng)到他們作用域最前面的行為叫做提升。

整個(gè)函數(shù)定義會(huì)被提升。所以，你可以在函數(shù)還未定義之前調(diào)用它，而不用擔(dān)心找不到該函數(shù)。

console.log(toSquare(3));  // 9

function toSquare(n){
  return n*n;
}

變量只會(huì)被部分提升。而且只有變量的聲明會(huì)被提升，賦值不會(huì)動(dòng)。

let和const不會(huì)被提升。

{  /* Original code */
  console.log(i);  // undefined
  var i = 10
  console.log(i);  // 10
}

{  /* Compilation phase */
  var i;
  console.log(i);  // undefined
  i = 10
  console.log(i);  // 10
}
// ES6 let & const
{
  console.log(i);  // ReferenceError: i is not defined
  const i = 10
  console.log(i);  // 10
}
{
  console.log(i);  // ReferenceError: i is not defined
  let i = 10
  console.log(i);  // 10
}

函數(shù)表達(dá)式

一個(gè)函數(shù)表達(dá)式是在函數(shù)執(zhí)行到函數(shù)表達(dá)式定義的位置才開始創(chuàng)建，并被使用。它不會(huì)被提升。

var sum = function(a, b) {
  return a + b;
}

函數(shù)聲明

函數(shù)聲明的函數(shù)可以在文件中任意位置調(diào)用，因?yàn)樗鼤?huì)被提升。

function sum(a, b) {
  return a + b;
}

在ES6之前，只能使用var來聲明變量。在一個(gè)函數(shù)體中聲明的變量和函數(shù)，周圍的作用域內(nèi)無法訪問。在塊作用域if和for中聲明的變量，可以在if和for的外部被訪問。

注意：如果沒有使用var,let或則const關(guān)鍵字聲明的變量將會(huì)綁定到全局作用域上。

function greeting() {
  console.log(s) // undefined
  if(true) {
    var s = "Hi";
    undeclaredVar = "I am automatically created in global scope";
  }
  console.log(s) // "Hi"
}
console.log(s);  // Error — ReferenceError: s is not defined
greeting();
console.log(undeclaredVar) // "I am automatically created in global scope"

ES6的let和const都是新引入的關(guān)鍵字。它們不會(huì)被提升，而且是塊作用域。也就是說被大括號(hào)包圍起來的區(qū)域聲明的變量外部將不可訪問。

let g1 = "global 1"
let g2 = "global 2"
{   /* Creating a new block scope */
  g1 = "new global 1"
  let g2 = "local global 2"
  console.log(g1)   // "new global 1"
  console.log(g2)   // "local global 2"
  console.log(g3)   // ReferenceError: g3 is not defined
  let g3 = "I am not hoisted";
}
console.log(g1)    // "new global 1"
console.log(g2)    // "global 2"

一個(gè)常見的誤解是：使用const聲明的變量，其值不可更改。準(zhǔn)確地說它不可以被重新賦值，但是可以更改。

const tryMe = "initial assignment";
tryMe = "this has been reassigned";  // TypeError: Assignment to constant variable.
// You cannot reassign but you can change it…
const array = ["Ted", "is", "awesome!"];
array[0] = "Barney";
array[3] = "Suit up!";
console.log(array);     // [“Barney”, “is”, “awesome!”, “Suit up!”]
const airplane = {};
airplane.wings = 2;
airplane.passengers = 200;
console.log(airplane);   // {passengers: 200, wings: 2}

快速掌握J(rèn)avaScript面試基礎(chǔ)知識(shí)(二)

版權(quán)聲明:
轉(zhuǎn)載時(shí)請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/01/15/the-definitive-javascript-handbook-for-a-developer-interview/