摘要：中雙感嘆號(hào)的作用一般用于將后面的表達(dá)式強(qiáng)制轉(zhuǎn)化為布爾類(lèi)型。通過(guò)實(shí)現(xiàn)類(lèi)式繼承繼承對(duì)象已經(jīng)原型對(duì)象屬性父類(lèi)父類(lèi)的方法子類(lèi)調(diào)用父類(lèi)的構(gòu)造函數(shù)。

Object.keys()方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷改對(duì)象時(shí)返回的順序一致(兩者的主要區(qū)別是一個(gè)for-in 循環(huán)還會(huì)枚舉器原型鏈上的屬性)

//examples
// simple array
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]
// array like object
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // console: ["0", "1", "2"]

你可以用require.context()來(lái)創(chuàng)建自己的上下文。這個(gè)函數(shù)接受三個(gè)參數(shù)：

directory：說(shuō)明需要檢索的目錄

useSubdirectories：是否檢索子目錄

regExp: 匹配文件的正則表達(dá)式
該函數(shù)返回一個(gè)require函數(shù)，包含了3個(gè)參數(shù)： resolve, keys, id.

resolve 一個(gè)返回模塊請(qǐng)求的id的函數(shù)

keys 一個(gè)以數(shù)組的形式返回所有模塊請(qǐng)求的函數(shù)，可以結(jié)合 map, foreach, 函數(shù)進(jìn)行批量require();

如果你想引入文件目錄下所有符合匹配模式的文件，那么這個(gè)方法是很有用的.

// examples: 
function importAll (r) {
  r.keys().forEach(r);
}

importAll(require.context("../components/", true, /.js$/));

es6新加的特效，可以循環(huán)遍歷數(shù)組元素;
與 for...in 和Array.forEach()的區(qū)別：
1、for...in 是對(duì)普通對(duì)象的遍歷，不僅會(huì)遍歷數(shù)組元素，甚至還會(huì)遍歷其自定義屬性或者原型鏈上面的屬性。
2、forEach() 方法，不能使用 break, 中斷循環(huán)，也不能用return 語(yǔ)句返回到外層函數(shù)。
for...in 可以完美解決上面兩個(gè)方法的問(wèn)題。

該方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組，其排列與使用for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致(區(qū)別在于for-in 循環(huán)也枚舉原型鏈中的屬性)

//examples:  
const obj = { foo: "bar", baz: 42 };
console.log(Object.entries(obj)); // [ ["foo", "bar"], ["baz", 42] ]

// array like object
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.entries(obj)); // [ ["0", "a"], ["1", "b"], ["2", "c"] ]

// array like object with random key ordering
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.entries(anObj)); // [ ["2", "b"], ["7", "c"], ["100", "a"] ]

// getFoo is property which isn"t enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = "bar";
console.log(Object.entries(myObj)); // [ ["foo", "bar"] ]

// non-object argument will be coerced to an object
console.log(Object.entries("foo")); // [ ["0", "f"], ["1", "o"], ["2", "o"] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

將Object轉(zhuǎn)換為Map
new Map() 構(gòu)造函數(shù)接受一個(gè)可迭代的entries。借助Object.entries方法你可以很容易的將Object轉(zhuǎn)換為Map:

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

Polyfill

你可以使用下面列出的簡(jiǎn)易 polyfill。

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };

轉(zhuǎn)載：https://segmentfault.com/a/11...

unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

replace() 方法可用一個(gè)新文檔取代當(dāng)前文檔。可用于頁(yè)面跳轉(zhuǎn)。和location.href的區(qū)別在于，replace() 方法不會(huì)在 History 對(duì)象中生成一個(gè)新的記錄。當(dāng)使用該方法時(shí)，新的 URL 將覆蓋 History 對(duì)象中的當(dāng)前記錄。 而后者會(huì)在瀏覽器的歷史瀏覽記錄添加一條記錄。

pathname 屬性是一個(gè)可讀可寫(xiě)的字符串，可設(shè)置或返回當(dāng)前 URL 的路徑部分

//examples
//假設(shè)當(dāng)前的 URL 是: http://example.com:1234/test/test.htm#part2：
document.write(location.pathname);  ///test/test.htm

hash 屬性是一個(gè)可讀可寫(xiě)的字符串，該字符串是 URL 的錨部分（從 # 號(hào)開(kāi)始的部分）。

//examples
//假設(shè)當(dāng)前的 URL 是: http://example.com:1234/test.htm#part2：
document.write(location.hash);//#part2

該屬性返回對(duì)一個(gè)頂級(jí)窗口的只讀引用。如果窗口本身就是一個(gè)頂級(jí)窗口，top 屬性存放對(duì)窗口自身的引用。如果窗口是一個(gè)框架，那么 top 屬性引用包含框架的頂層窗口。跳出當(dāng)前框架

如果指定的屬性在指定的對(duì)象或其原型鏈中，則in 運(yùn)算符返回true。

//examples
// 數(shù)組
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // 返回true
3 in trees        // 返回true
6 in trees        // 返回false
"bay" in trees    // 返回false (必須使用索引號(hào),而不是數(shù)組元素的值)

charAt() 方法可返回指定位置的字符。字符串中第一個(gè)字符的下標(biāo)是 0。如果參數(shù) index 不在 0 與 string.length 之間，該方法將返回一個(gè)空字符串。

slice()方法可從已有的數(shù)組中返回選定的元素
參數(shù)：start 規(guī)定從何處開(kāi)始選，如果是負(fù)數(shù)，則從數(shù)組尾部開(kāi)始算位置
end 規(guī)定從何處結(jié)束所取。該參數(shù)是數(shù)組片段結(jié)束處的數(shù)組下標(biāo)。如果沒(méi)有指定該參數(shù)，則包含從start開(kāi)始到數(shù)組結(jié)束的所有元素。
返回值:返回一個(gè)新的數(shù)組，包含從 start 到 end (部包括該元素)的原數(shù)組中的元素。
注意：該方法不會(huì)修改數(shù)組，而是返回一個(gè)子數(shù)組。如果想刪除數(shù)組中的一段元素，應(yīng)該使用Array.splice()

splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。
語(yǔ)法：

arrayObject.splice(index,howmany,item1,.....,itemX)

參數(shù)：
index 必需。整數(shù)，規(guī)定添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
howmany 必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目。
item1, ..., itemX 可選。向數(shù)組添加的新項(xiàng)目。

會(huì)返回文檔對(duì)象（document）的根元素的只讀屬性(如Html文檔的元素)
與document.body的區(qū)別
document.body 會(huì)返回 Html 文檔中的body節(jié)點(diǎn)。即body
注意：在獲取瀏覽器滾動(dòng)器距離時(shí)、窗口大小時(shí)，兩者在不同瀏覽器下會(huì)有區(qū)別。
兼容解決方案。

!!一般用于將后面的表達(dá)式強(qiáng)制轉(zhuǎn)化為布爾類(lèi)型。js是弱類(lèi)型語(yǔ)言，所以可以通過(guò)雙感嘆號(hào)，將其轉(zhuǎn)化為boolean類(lèi)型。
布爾類(lèi)型的轉(zhuǎn)化，js約定的規(guī)則為：
1、false、undefined、null、0、""均為false
2、true、1、"string"、[Object] 為true

substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。substring() 方法返回的子串包括 start 處的字符，但不包括 stop 處的字符。
重要事項(xiàng)：與 slice() 和 substr() 方法不同的是，substring() 不接受負(fù)的參數(shù)。

substr(start, length)方法可在字符串中抽取從start下標(biāo)開(kāi)始的指定數(shù)目的字符。
其中l(wèi)ength必須是數(shù)值，如果省略該參數(shù)，那么返回從字符串的開(kāi)始位置到結(jié)尾的字串。

Math.random() 方法可返回介于 0 ~ 1 之間的一個(gè)隨機(jī)數(shù)。

Math.round() 方法可把一個(gè)數(shù)字舍入為最接近的整數(shù)
對(duì)于 0.5，該方法將進(jìn)行上舍入。
例如，3.5 將舍入為 4，而 -3.5 將舍入為 -3。

Math.floor()返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)
Math.floor() === 向下取整

Math.floor( 45.95); 
// 45 
Math.floor( 45.05); 
// 45 
Math.floor( 4 ); 
// 4 
Math.floor(-45.05); 
// -46 
Math.floor(-45.95); 
// -46

Math.ceil() 函數(shù)返回大于或等于一個(gè)給定數(shù)字的最小整數(shù)。
Math.ceil() === 向上取整

Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4
Math.ceil(-7.004); // -7

參數(shù)：元素節(jié)點(diǎn)的名稱(chēng)
返回：新建的元素節(jié)點(diǎn)

向元素節(jié)點(diǎn)中插入節(jié)點(diǎn)。注意HTML要大寫(xiě)。
與document.innerText的區(qū)別：
1、innerHTML指的是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容，包括Html標(biāo)簽
2、innerText 指的是從起始位置到終止位置的內(nèi)容，但它去除html標(biāo)簽。
同時(shí)，innerHTML 是所有瀏覽器都支持的，innerText 是IE瀏覽器和chrome瀏覽器支持的，F(xiàn)irefox瀏覽器不支持。所以盡量多用innerHTML。少用innerText

chrome:webkitTransform => css: -webkit-transform
o:OTransform => css:-o-transform
ms:msTransform => css:-ms-transform
Moz:MozTransform => css:-Moz-transform

document.getElementById、document.getElementsByTagName、document.getElementsByClassName、querySelector()、querySelectorAll()等選擇器的使用和區(qū)別

https://blog.csdn.net/ww43043...

stringObject.indexOf(searchvalue,fromindex)方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
searchvalue:檢索的字符串;必需
fromindex：可選的整數(shù)參數(shù)。規(guī)定在字符串中開(kāi)始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。
注意：如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1。

Object.create()創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建對(duì)象的__proto__.

const person = {
    ishuman:false,
    printIntroduction:function(){
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};
const me = Object.create(person);
me.name = "Mattew"; // "name" 是一個(gè)建立在me上的屬性，而不是在person上，說(shuō)明通過(guò)Object.create創(chuàng)建的對(duì)象是一個(gè)新的對(duì)象。
me.isHuman = true; // 繼承來(lái)的屬性可以被重寫(xiě)
me.printIntroduction(); // 繼承的函數(shù)也可以調(diào)用
// expected output: "My name is Matthew. Am I human? true"

在這里，我們可以通過(guò)在瀏覽器控制臺(tái)打印出me對(duì)象?？梢缘玫饺缦陆Y(jié)果
.
由此可以理解描述中寫(xiě)的使用現(xiàn)對(duì)象來(lái)提供新創(chuàng)建對(duì)象的__proto__這一句話(huà)的意思。
1、通過(guò)Object.create()實(shí)現(xiàn)類(lèi)式繼承(繼承對(duì)象已經(jīng)原型對(duì)象屬性)

// Shape - 父類(lèi)(superclass)
function Shape() {
  console.log(this.x, this.y)
}

// 父類(lèi)的方法
Shape.prototype.move = function(x, y) {
  console.log(this)
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};
// Rectangle - 子類(lèi)(subclass)
function Rectangle() {
  Shape.call(this); // 調(diào)用父類(lèi)的構(gòu)造函數(shù)。繼承分類(lèi)的對(duì)象屬性
}
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log(rect)

2、使用 Object.create 的 propertyObject參數(shù)

var o;

//創(chuàng)建 一個(gè)原型為null的空對(duì)象
o = Object.create(null);

o = {};

//以字面量方式的創(chuàng)建的空對(duì)象就相當(dāng)于:
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
  // foo會(huì)成為所創(chuàng)建對(duì)象的數(shù)據(jù)屬性
  foo: {
    writable:true,  // 當(dāng)且僅當(dāng)該屬性的 writable 為 true 時(shí)，該屬性才能被賦值運(yùn)算符改變。默認(rèn)為 false。
    configure:true, // 當(dāng)且僅當(dāng)該屬性的 configurable 為 true 時(shí)，該屬性描述符才能夠被改變，也能夠被刪除。默認(rèn)為 false。
    value:"hello"   // 該屬性對(duì)應(yīng)的值?？梢允侨魏斡行У?JavaScript 值（數(shù)值，對(duì)象，函數(shù)等）。默認(rèn)為 undefined。
  },
  // bar會(huì)成為所創(chuàng)建對(duì)象的訪問(wèn)器屬性
  bar: {
    configurable:false,
    get:function() { return 10 },
    set:function(value) {
      console.log("Setting `o.bar` to", value)
    }
  }
})
function Constructor(){}
o = new Constructor();
//上面一句話(huà)就相當(dāng)于
o = Object.create(Constructor.prototype);
// 當(dāng)然，如果在Contructor函數(shù)中有一些初始化代碼，Object.create 不能執(zhí)行那些代碼

// 創(chuàng)建一個(gè)以另一個(gè)空對(duì)象為原型，且擁有一個(gè)屬性p的對(duì)象
o = Object.create({}, { p:{ value: 42 }})

// 省略了的屬性特性默認(rèn)為false, 所以屬性p是不可寫(xiě)，不可枚舉，不可配置的
o.p = 24
o.p //42

o.q = 12

for(var prop in o){
  console.log(prop)
}
// "q"，只有q 可以枚舉
delete o.p
// false

//創(chuàng)建一個(gè)可寫(xiě)的，可枚舉的，可配置的屬性p
o2 = Object.create({}, {
  p:{
    value:42,
    writable:true,
    enumerable:true,      //可枚舉屬性
    configurable:true
  }
})

看一個(gè)實(shí)例

//example
function Animal(name) {
    console.log(this)
    this.name = name;
    this.showName = function() {
    }
}

function Cat(name) {
    Animal.call(this, name);
}
var cat = new Cat("Black Cat");
var amal = new Animal();

控制臺(tái)結(jié)果：

由控制臺(tái)結(jié)果可以看到，通過(guò)call。Animal 方法中的 this(未new 之前，就是 window) 被轉(zhuǎn)換成Cat了。同時(shí)Cat還能繼承 Animal的方法和屬性

1.每個(gè)函數(shù)都有一個(gè)prototype屬性,其所指向的對(duì)象帶有constructor屬性，這一屬性指向函數(shù)自身。注意，prototype是函數(shù)本身就帶有的屬性，跟是不是構(gòu)造函數(shù)，有沒(méi)有實(shí)例化沒(méi)有任何關(guān)系。那么在構(gòu)造函數(shù)實(shí)例化(new)之后到底發(fā)生了什么？

function Test(){}     //定義一個(gè)構(gòu)造函數(shù)
var obj = {};
obj.__proto__ = Test.prototype;     //obj的原型指向構(gòu)造函數(shù)的原型
Test.call(obj);                     // 通過(guò)call，讓obj繼承構(gòu)造函數(shù)的屬性

這樣就實(shí)現(xiàn)了一個(gè)實(shí)例化的過(guò)程。可以在控制臺(tái)打印出obj。上述代碼等價(jià)于var obj = new Test()
2.[[prototype]]是隱藏屬性 一般來(lái)說(shuō)就是 __proto__，但由于是隱藏的原型對(duì)象，一般瀏覽器會(huì)給每一個(gè)對(duì)象提供.__proto__這一屬性，實(shí)際上就是[[prototype]]屬性。
3.__proto__ 指向?qū)ο蟮脑蛯?duì)象。
4.構(gòu)造函數(shù)的_proto_指向構(gòu)造函數(shù)的prototype屬性。
5.一般來(lái)說(shuō)，object.__proto__ == constructor.prototype;但是對(duì)于Object.create()構(gòu)造的對(duì)象來(lái)說(shuō)這個(gè)不適用，因?yàn)閛bject.create()構(gòu)造出來(lái)的對(duì)象是作為新對(duì)象的__proto__。

var person1 = {
    name: "cyl",
    sex: "male"
};
var person2 = Object.create(person1);
console.log(person2)
console.log(person1)

由控制臺(tái)結(jié)果可以看出通過(guò)字面量構(gòu)建對(duì)象和通過(guò)Object.create()構(gòu)建的對(duì)象的區(qū)別。