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

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

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

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

先看一個函數(shù)的聲明。

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

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

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

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

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將一個包含鍵值對(也叫元組)的數(shù)組轉(zhuǎn)換成了一個對象。因為我們不知道鍵的名稱，所以我們需要通過計算屬性名來在對象中設(shè)置鍵值對。
這里需要知道js中訪問對象屬性的兩者方式j(luò)s對象屬性中.號和中括號的區(qū)別。我們可以通過[]中括號去動態(tài)的設(shè)置對象屬性屬性名。

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

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

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

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

2、for in 循環(huán)判斷

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

3、Object.getOwnPropertyNames()方法
此方法是使用Object對象的getOwnPropertyNames方法，獲取到對象中的屬性名，存到一個數(shù)組中，通過判斷數(shù)組的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() 函數(shù)用來確定一個值是否為NaN。

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

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

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

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

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true
// 下面這幾個如果使用全局的 isNaN() 時，會返回 true。
Number.isNaN("NaN");      // false，字符串 "NaN" 不會被隱式轉(zhuǎn)換成數(shù)字 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()方法返回一個數(shù)字來指示一個參考字符串是否在排序順序前面或之后或與給定字符串相同。
返回一個數(shù)字表示是否 引用字符串 在排序中位于 比較字符串 的前面，后面，或者二者相同。

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

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

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

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

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

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

參數(shù)：
callback:執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù):
1、accumulator

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

2、currentValue

數(shù)組中正則處理的元素

3、currentIndex(可選)

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

4、array(可選)

調(diào)用reduce的數(shù)組

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

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

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

with (expression) {
    statement
}

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

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

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

// examples
Function.prototype.construct = function (aArgs) {
  var oNew = Object.create(this.prototype);// 定義一個對象，該對象的原型指向函數(shù)的原型屬性(prototype)
  this.apply(oNew,aArgs); //使用該對象繼承函數(shù)的對象屬性，這樣就可以實現(xiàn)constructor指向函數(shù)本身 
  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);

參數(shù)：

type：表示監(jiān)聽事件類型的字符串.

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

options:一個指定有關(guān)listener屬性的可選參數(shù)對象?？捎玫倪x項如下:

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

useCapture

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

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

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

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

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

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

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

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

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

  



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

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

  

    

  

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);

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

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