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

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

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

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

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

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

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

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

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

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

先看一個(gè)示例

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

在這個(gè)例子里，arrToObj將一個(gè)包含鍵值對(duì)(也叫元組)的數(shù)組轉(zhuǎn)換成了一個(gè)對(duì)象。因?yàn)槲覀儾恢梨I的名稱，所以我們需要通過(guò)計(jì)算屬性名來(lái)在對(duì)象中設(shè)置鍵值對(duì)。
這里需要知道js中訪問(wèn)對(duì)象屬性的兩者方式j(luò)s對(duì)象屬性中.號(hào)和中括號(hào)的區(qū)別。我們可以通過(guò)[]中括號(hào)去動(dòng)態(tài)的設(shè)置對(duì)象屬性屬性名。

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

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

1、將json對(duì)象轉(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對(duì)象的getOwnPropertyNames方法，獲取到對(duì)象中的屬性名，存到一個(gè)數(shù)組中，通過(guò)判斷數(shù)組的length來(lái)判斷對(duì)象是否為空。

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ù)用來(lái)確定一個(gè)值是否為NaN。

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

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

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

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

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true
// 下面這幾個(gè)如果使用全局的 isNaN() 時(shí)，會(huì)返回 true。
Number.isNaN("NaN");      // false，字符串 "NaN" 不會(huì)被隱式轉(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);
}

當(dāng) 引用字符串 在 比較字符串 前面時(shí)返回 -1

當(dāng) 引用字符串 在 比較字符串 后面時(shí)返回 1

相同位置時(shí)返回 0

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

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

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

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

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

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

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ù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù):
1、accumulator

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

2、currentValue

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

3、currentIndex(可選)

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

4、array(可選)

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

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

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

with語(yǔ)句 擴(kuò)展一個(gè)語(yǔ)句的作用域鏈。

with (expression) {
    statement
}

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

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

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

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

語(yǔ)法：

target.addEventListener(type, listener, options);

參數(shù)：

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

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

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

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

useCapture

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

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

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

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

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

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

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

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

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

  



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

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

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

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