JavaScript中的操作符詳解

好久沒有寫點什麼了，根據博主的技術，仍然寫一點javascript新手入門文章，接下來我們一起來探討javascript的操作符。

一、前言

javascript中有許多操作符，但是許多初學者並不理解或曲解他們的用途，本章將會帶領初學者們一起來學習一下javascript的幾個常用操作符：typeof、in、delete、new。

二、學習目標

1. 深入了解javascript操作符：typeof、in、delete、new的功能及用法。

2. 剖析根本，掌握這些常用的操作符的運用場景，活學活用。

三、課程講解

1. typeof

 　　typeof操作符輸出的值有以下幾種：number、string、boolean、undefined、object、function，但是如何判斷typeof輸出的是什麼值並不容易，其中結合著許多js的其他基礎知識，下面我們來看這些代碼：

var a=NaN
var b=null
var c=new String('123')
var d= []
var e;
typeof a  // number
typeof b  // object
typeof c  // object
typeof d  // object
typeof e // undefined
typeof f  // undefined

結論：

    NaN是非數值，雖然他的意思是非數值，但是他的類型仍然是數字類型，其只是代表著非數值這個數字。

    null由於歷史原因，其typeof仍然是object，null表示一個空指針對象，原型鏈的頂層Object.prototype.__proto__就指向null

    new String/Number/Boolean 這三個都是創建一個對象，與直接賦值字面量是不一樣的。

    typeof操作未定義變量不會報錯，而是返回undefined，因此在代碼中，我們常用typeof判斷一個變量是否存在，這樣避免了變量不存在引起報錯。

2. in

　　遍歷對象鍵值，最常用的方法是for...in，但是你真正了解in麼？如果不了解，那就進入這一節的學習吧。

　　對於in的執行，是與原型鏈有關系的， in 操作符會查找對象的整個原型鏈，他會找到並且輸出原型鏈中可枚舉的屬性和方法（關於原型鏈和描述符不在此文范圍內）。為了避免for...in遍歷出原型鏈上的屬性或方法，我們常常看到會有一個判斷: o.hasOwnProperty(property)，此方法可以判斷屬性是否是對象本身擁有的屬性，而非繼承獲得。

var Foo = function (name) {
  this.name = name  
}
Foo.prototype.hello = function () {
  console.log(this.name + '問好'
}
var f = new Foo('xu')
for (var key in f) {
  console.log(key) // 輸出 name、 hello  
}
for (key in f) {
  if (f.hasOwnProperty(key)) {
    console.log(key)   // 輸出 name
  }
}

in還可以用於判斷中，判斷對象是否存在某屬性可以用in 來判斷，表達式： property in object （如： 'name' in f）

3. delete

    故名思議，用來刪除數據，他只能刪除對象的屬性內容或者數組的某個下標元素，他不能刪除定義的變量包括對象和數組，刪除成功返回true，否則返回false。如下所示：

var a = 1
var b = [1,5]
var c = {
  name: 'xu', 
  hello: function () {
    console.log('hello')
  }
}

delete a   // false
delete arr[1]   //true
delete c.name  // true
console.log(a)  // 1
console.log(b)  // [1,undefined]
console.log(c) // {hello: function () {...}}

javascript中，凡是var定義的變量都不能用delete操作符刪除（es6中let/const定義的變量對delete不可見），javascript解析器將var定義的變量的configurable描述符初始化為false，因此不能刪除成功。而刪除的數組元素會用undefined來填充。對象的屬性被刪除後沒有遺留痕跡，但前提是可配置的屬性。

4. new

　　我們經常用到的new新建一個對象，其工作原理其實很簡單，但是也有一些潛在的隱患，如下所示：

var Foo = function (name) {
  this.name = name;
  return {
    user: 'xu' 
  }  
}

var f = new Foo('xu')

console.log(f.name)  // undefined
console.log(name in f) // false
console.log(f.user)  // 'xu'

上面的例子我們定義了一個構造函數Foo，傳入一個參數姓名，在構造函數內部將傳入的name寫入實例中，最後返回了一個對象{user: 'xu'}。那麼問題來了，new Foo 按理說應該返回的是一個Foo實例，也就是說f.name是有的並且在案例中的值為'xu'， 但是我們卻得到了undefined，並且name in f 返回 false，表示f這個對象並沒有name屬性。而f.user卻得到了'xu'。

大家可能猜到了，如果構造函數中返回了一個對象，那麼這個構造函數在new的過程中會返回這個定義的對象，而並非返回這個構造函數的實例。那麼，如果return的是一個數字或者string呢？

var Foo = function (name) {
  this.name = name;
  return 1;
}

var f = new Foo('xu')

console.log(f) // {name: 'xu'}

以上案例我們可以看出，如果構造函數中return的是一個數字，那麼new的這個構造函數會忽略，仍然返回正確的構造函數實例對象。不信你可以用instanceof來驗證。

結尾

    以上就是此文章的內容，希望對讀者有所幫助，如有錯誤請指正~~~