摘要：常見基礎對象屬性方法二關于的箭頭函數的返回對象的問題箭頭函數具有隱式返回的特性。返回值函數累計處理的結果。語句將某個對象添加的作用域鏈的頂部，如果在中又某個未使用命名空間的變量，跟作用域鏈中的某個屬性同名，則這個變量將指向這個屬性值。

箭頭函數(=>)具有隱式返回的特性。如果某個函數體只有單個表達式，你就可以忽略return關鍵字:()=>foo是一個不需要參數，而且最后會返回字符串foo的函數。
而且需要注意的是，當你想要返回一個對象字面量的時候，如果你使用了大括號，javascript會默認你想要創建一個函數體。像是{ broken:true}。如果你想要通過隱式返回來返回一個字面量對象，那你就需要在你的字面量對象外面包裹一層小括號來消除這種歧義。

const noop = () => { foo: "bar"}l
console.log(noop());// undefined
const createFoo = () => ({foo: "bar"});
console.log(createFoo());// { foo: "bar"}

在第一個例子中，foo會被理解成一個標簽，而bar會被理解成一個沒有被賦值的表達式，這個函數會返回undefined.
而在createFoo()的例子中，圓括號強制讓大括號里的內容被解釋成為一個需要被計算的表達式，而不是一個函數體。

先看一個函數的聲明。

const createUser = ({ userName, avatar}) => {}

在這一行中，大括號({})代表了對象的解構。這個函數接受一個參數(一個對象)。但是從這個單一對象中又解構出了兩個形參，userName和avatar。這些參數都可以被當作函數體作用域內的變量使用。你同樣也可以解構一些數組：

const swap = ([first, second]) => [second, first];
console.log( swap([1,2]) ); // [2,1]

你也可以使用拓展運算符(...varName)來獲取數組(或者參數列表)中的其他值，然后將這些數組元素回傳成單個元素：

const rotate = ([first, ...rest]) => [...rest, first];
console.log( rotate([1,2,3]));  // [2,3,1]

先看一個示例

const arrToObj = ([key, value]) => ({ [key]: value });
console.log( arrToObj([ "foo", "bar" ]) ); // { "foo": "bar" }

在這個例子里，arrToObj將一個包含鍵值對(也叫元組)的數組轉換成了一個對象。因為我們不知道鍵的名稱，所以我們需要通過計算屬性名來在對象中設置鍵值對。
這里需要知道js中訪問對象屬性的兩者方式js對象屬性中.號和中括號的區別。我們可以通過[]中括號去動態的設置對象屬性屬性名。

js中訪問對象屬性有兩者方式，一個是通過點號,一個是中括號。
1、中括號的運算符可以用字符串變量的內容作為屬性名。點運算符不能。比如obj["string"+variable];即前者屬性名可以是動態的。而后者需要是靜態的
2、中括號運算符可以用純數字作為屬性名。點運算符不能。
3、中括號運算符可以用js的關鍵字和保留字作為屬性名。點運算符不能。

//example
function aa(key,value){
  console.log({[key]:value})
}
console.log(aa("asd","123"));// {"asd","123"}

1、將json對象轉化為json字符串，再判斷該字符串是否為"{}"

var data = {};
var b = (JSON.stringify(data) === "{}")
console.log(b) //true

2、for in 循環判斷

var obj = {};
var b = function(){
    for( var key in obj) {
        return false;
    }
    return true;
}
console.log(b);// true

3、Object.getOwnPropertyNames()方法
此方法是使用Object對象的getOwnPropertyNames方法，獲取到對象中的屬性名，存到一個數組中，通過判斷數組的length來判斷對象是否為空。

var data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0);//true

4、使用ES6的Object.keys()方法

var data = {};
var arr = Object.keys(data);
console.log(arr.length === 0);//true

isNaN() 函數用來確定一個值是否為NaN。

當算術運算返回一個未定義的或無法表示的值時，NaN就產生了。但是，NaN并不一定用于表示某些值超出表示范圍的情況。將某些不能強制轉換為數值的非數值轉換為數值的時候，也會得到NaN。
可以通過isNaN去判斷一個值是否為數字

if(isNaN(str)){
    console.log("不是數字")
}else{
    console.log("是數字")
}
// isNaN的polyfill
var isNaN = function(value){
    var n = parseInt(value)
    return n !== n
}

擴展：es6擴展了一個Number.isNaN的方法,傳遞的值是否為 NaN和其類型是 Number。它是原始的全局isNaN()的更強大的版本。

isNaN的擴展。和全局函數 isNaN()相比，該方法不會強制將參數轉換成數字，只有在參數是真正的數字類型，且值為 NaN 的時候才會返回 true。

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true
// 下面這幾個如果使用全局的 isNaN() 時，會返回 true。
Number.isNaN("NaN");      // false，字符串 "NaN" 不會被隱式轉換成數字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

// 下面的都返回 false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");
// polyfill
Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && isNaN(value);
}

當 引用字符串 在 比較字符串 前面時返回 -1

當 引用字符串 在 比較字符串 后面時返回 1

相同位置時返回 0

localeCompare()方法返回一個數字來指示一個參考字符串是否在排序順序前面或之后或與給定字符串相同。
返回一個數字表示是否 引用字符串 在排序中位于 比較字符串 的前面，后面，或者二者相同。

//可以用該方法結合sort方法對字符串數組進行排序：
var str="abbbbAAbcBCCccdaACBDDabcccffffddaab";
str.join().sort(function(a,b){return a.localeCompare(b)})

Object.freeze()方法可以凍結一個對象，凍結指的是不能向這個對象添加新的屬性，不能修改已有的屬性的值，不能刪除已有屬性，以及不能修改對象已有的可枚舉性、可配置性、可寫性。也就是說，這個對象永遠是不可變的。該方法返回被凍結的對象。

//examples
const object1 = {
  property1:42
};
const object2 = Object.freeze(object1);
object2.property1 = 33;
// Throws an error in strict mode

console.log(object2.property1);
// expected output:42

注意：
1、被凍結的對象自身的所有屬性都不可能以任何方式被修改(淺凍結情況下，如果被凍結的對象含有對象屬性，則該對象屬性不會被凍結)。任何修改嘗試都會失敗，一般會靜默或者拋出TypeError異常
2、數據屬性的值不可更改，訪問器屬性(有getter和setter)也同樣。如果一個屬性的值是個對象，在這個對象中的屬性是可以修改的，除非它也是個凍結對象。
3、這個方法返回傳遞的對象，而不是創建一個被凍結的副本。所以不需要將返回的結果重新賦給一個新的對象，因為指向的都是同一個對象。

defineProperty方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有的屬性，并返回這個對象。
Object.defineProperty(obj, prop, descriptor)
obj 要在其上定義屬性的對象。
prop 要定義或修改的屬性的名稱。
descriptor 將被定義或修改的屬性描述符。
返回：被傳遞給函數的對象。

reduce(callback[, initialValue])方法對累加器和數組中的每個元素(從左到右)應用一個函數，將其減少為單個值。

const array1 = [1,2,3,4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output:10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output:15

參數：
callback:執行數組中每個值的函數，包含四個參數:
1、accumulator

累加器累加回調的返回值；它是上一次調用回調時返回的累積值，或initialValue

2、currentValue

數組中正則處理的元素

3、currentIndex(可選)

數組中正在處理的當前元素的索引。如果提供了initialValue,則索引號為0，否則索引為1。

4、array(可選)

調用reduce的數組

initialValue(可選)
用作第一個調用callback的第一個參數的值。如果沒有提供初始值，則將使用數組中的第一個元素。在沒有初始值的空數組上調用reduce將報錯。
返回值：
函數累計處理的結果。

concat()方法用于合并兩個或多個數組，此方法不會更改現有數組，而是返回一個新數組。

with語句 擴展一個語句的作用域鏈。

with (expression) {
    statement
}

expression 將給定的表達式添加到在評估語句時作用的作用域鏈上。表達式周圍的括號是必需的。
statement
任何語句。要執行多個語句，請使用一個塊語句對這些語句進行分組
描述：javascript 查找某個未使用變量時，會通過作用域鏈來查找，作用域鏈是跟執行代碼的context或者包含這個變量的函數有關。"with"語句將某個對象添加的作用域鏈的頂部，如果在statement中又某個未使用命名空間的變量，跟作用域鏈中的某個屬性同名，則這個變量將指向這個屬性值。如果沒有同名的屬性，則將拋出RefrenceError異常
另外：with 在嚴格模式下被禁用，替代方式是聲明一個臨時變量來承載你所需要的屬性。
簡單來說，with 可以減少變量的長度。比如this。使用with不需要在一個函數塊中大量的使用this+"."的方式去訪問對象屬性，可以直接使用屬性名就可以訪問到屬性的值。

Object.assign()方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。
描述：如果目標對象中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。后來的源的屬性將類似地覆蓋早先的屬性。

apply(thisArg, [argsArray]) 方法調用一個函數，其具有一個指定的this值，以及作為一個數組提供的參數。
注意：call()方法的作用和apply()方法類似，只有一個區別，就是call()方法接受的是若干個參數的列表，而apply()方法接受的是一個包含多個參數的數組。
參數：
thisArg。可選參數
在func函數運行時使用的this值。需要注意的是，使用的this值不一定是該函數執行時真正的this值，如果這個函數處于非嚴格模式下，則制定為null或undefined時會自動替換為指向全局對象(瀏覽器中就是window對象)，同時值為原始值(數字、字符串、布爾值)的this會指向該原始值的包裝對象。
argsArray 可選參數
一個數組或者類數組對象，其中的數組元素作為多帶帶的參數傳給func函數。如果該參數的值為null或undefined。
返回值：
調用有指定this值和參數的函數的結果。
示例：使用apply來鏈接構造器(函數的constructor屬性指向函數本身)

// examples
Function.prototype.construct = function (aArgs) {
  var oNew = Object.create(this.prototype);// 定義一個對象，該對象的原型指向函數的原型屬性(prototype)
  this.apply(oNew,aArgs); //使用該對象繼承函數的對象屬性，這樣就可以實現constructor指向函數本身 
  return oNew;
}

function MyConstructor () {
    for (var nProp = 0; nProp < arguments.length; nProp++) {
        this["property" + nProp] = arguments[nProp];
    }
}

var myArray = [4, "Hello world!", false];
var myInstance = MyConstructor.construct(myArray);

console.log(myInstance.property1);                // logs "Hello world!"
console.log(myInstance instanceof MyConstructor); // logs "true"
console.log(myInstance.constructor);              // logs "MyConstructor"

語法：

target.addEventListener(type, listener, options);

參數：

type：表示監聽事件類型的字符串.

listener:當所監聽的事件類型觸發時，會接收到一個事件通知(實現了Event接口的對象)對象。listener必須是一個實現了EventListener接口的對象，或者是一個函數。

options:一個指定有關listener屬性的可選參數對象。可用的選項如下:

capture:Boolean,表示listener會在該類型的事件捕獲階段傳播到該EventTarget時觸發
once:Boolean,表示listener在添加之后最多只調用一次。如果是true,listenter會在其被調用之后自動移除。
passive:Boolean。表示listener永遠不會調用preventDefault().如果 listener 仍然調用了這個函數，客戶端將會忽略它并拋出一個控制臺警告。關于該屬性具體介紹，可移步下個關于passive屬性的介紹。
mozSystemGroup: 只能在 XBL 或者是 Firefox" chrome 使用，這是個 Boolean，表示 listener 被添加到 system group。

useCapture

Boolean，是指在DOM樹中，注冊了該listener的元素，是否會先于它下方的任何事件目標，接收到該事件。沿著DOM樹向上冒泡的事件不會觸發被指定為usecapture的listener。當一個元素嵌套了另一個元素，兩個元素都對同一個事件注冊一個處理函數是，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以那個順序接收事件。

注意：那些不支持參數options的瀏覽器，會把第三個參數默認為useCapture，即設置useCapture為true

document.addEventListener("touchstart", function(e){
    ... // 瀏覽器不知道這里會不會有 e.preventDefault()
},passive:true)

由于瀏覽器不知道當我們在移動端監聽touch事件，如touchstart時。是否有做 e.preventDefault，即阻止默認行為。所以瀏覽器必須要執行完整個監聽函數才知道是否有阻止默認行為的代碼(比如頁面滾動)，從而讓頁面進行滾動。這無疑會對瀏覽器的滾動性能造成卡頓。
而passive屬性，就是為了告訴瀏覽器，我的監聽事件里面沒有調用e.preventDefault，這樣瀏覽器就可以不用管監聽事件里面的內容，而直接滾動。當然如果監聽器里面依然調用了e.preventDefault,那么客戶端也會忽略他，并且拋出一個警告。
對于瀏覽器是否支持passive屬性檢測實例。

var passiveSupported = false;
try {
  var options = Object.defineProperty({},"passive",{
    get: function() {
      passiveSubpported = true;
    }
  })

  window.addEventLisener("test",null,options);
} catch(err){}

這段代碼為passive屬性創建一個帶有getter函數的options對象;getter設定了一個標識，passiveSupported，被調用后就會把其設為true。那意味著如果瀏覽器檢查options對象上的passive指時，passiveSupported就會被設置為true;否則它將保持false.然后我們調用addEventListener()去設置一個指定這些選項的空事件處理器，這樣如果瀏覽器將第三個參數認定為對象的話，這些選項指就會被檢查。
然后，當你想實際創建一個是否支持options的事件偵聽器時，你可以這樣做:

someElement.addEventListener("mouseup",handleMouseUp,passiveSupported ? {passive:true} : false)

1、target:觸發事件的某個對象，一般出現的事件流的目標階段。
2、currentTarget:綁定事件的對象，可能會出現在事件流的任意一個階段中。
3、通常情況下target和currentTarget是一致的。我們只要使用target即可，但有一種情況下，必須要區分這二者之間的關系，那就是在父子嵌套的關系中，父元素綁定了事件，點擊子元素(根據事件流，在不阻止事件流的前提下他會傳遞至父元素，導致父元素的事件處理函數執行)。這種情況下，currentTarget指向的是父元素，因為他是綁定事件的對象，而target指向了子元素，因為他是觸發事件的那個具體對象。
示例：

  



one.addEventlistener("click",function(e){
  console.log(e.target);  //three
  console.log(e.currentTarget)
})

1、事件捕獲:事件從window頂層向事件觸發的元素傳播的過程。
2、事件冒泡:事件從觸發事件的元素向window頂層傳播的過程。
3、ie最開始提出的事件冒泡，而w3c提出的是事件捕獲，所以現在才會有這兩種事件的傳播方式。
4、現代瀏覽器的一般解析這兩種事件流的順序：事件捕獲--》目標階段-》事件冒泡。
通過一個示例看下兩個不同的事件流的順序關系。

  

    

  

one.addEventLister("click",function(e){
  console.log("one");
},false)
two.addEventLister("click",function(e) { 
  console.log("two");
},false)
three.addEventListener("click",function(e){
    console.log("three");
},true);

//three
//two
//one

one.addEventLister("click",function(e){
  console.log("one");
},true)
two.addEventLister("click",function(e) { 
  console.log("two");
},true)
three.addEventListener("click",function(e){
    console.log("three");
},true);

//當三個均為捕獲時。結果正好相反
//one
//two
//three
//一個是自上而下觸發事件，一個是自下而上觸發事件。所以導致了兩種綁定方式結果的不同

addEventListener方法可以允許傳第二個位置一個參數，告訴瀏覽器這里你添加的事件是在事件捕獲階段執行，還是在事件冒泡階段執行。默認參數為false，為冒泡。為true,為捕獲