week 10 blog

1、Iterations ：

1.do...while : 建立執行指定語句的循環，直到測試條件評估爲false。在執行語句後評估條件，致使指定語句至少執行一次。

例子：在如下示例中，do...而循環迭代至少一次並重復，直到我再也不小於5。

var result = '';

var i = 0;

do {

   i += 1;

   result += i + ' ';

} while (i < 5);

document.getElementById('example').innerHTML = result;

2.for : for語句建立了一個循環，該循環由三個可選表達式組成，括在括號中，用分號分隔，而後是一個要在循環中執行的語句(一般是block語句)。

例子：下面的for語句首先聲明變量I並將它初始化爲0。它檢查I是否小於9，執行兩個後續語句，並在每次經過循環後將I遞增1。

for (var i = 0; i < 9; i++) {

   console.log(i);

   // more statements

}

3.for each...in : 在對象屬性的全部值上迭代指定的變量。對於每一個不一樣的屬性，都會執行指定的語句。

例子：

var sum = 0;

var obj = {prop1: 5, prop2: 13, prop3: 8};

for each (var item in obj) {

  sum += item;

}

console.log(sum); // logs "26", which is 5+13+8

4.for...in : 在迭代對象的全部非符號、可枚舉屬性時。

例子：如下函數將對象做爲其參數。而後，它迭代全部對象的可枚舉、非符號屬性，並返回一串屬性名稱及其值。

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {

  console.log(`obj.${prop} = ${obj[prop]}`);

}

// Output:

// "obj.a = 1"

// "obj.b = 2"

// "obj.c = 3"

5.for...of : 建立一個循環迭代可迭代對象(包括內置字符串、數組，例如相似數組的參數或節點列表對象、typedaray、Map and Set和用戶定義的iterables )，調用一個自定義迭代掛鉤，其中包含要爲對象的每一個不一樣屬性的值執行的語句。

若是不在塊內從新分配變量，也能夠使用const而不是let。

let iterable = [10, 20, 30];

for (let value of iterable) {

  value += 1;

  console.log(value);

}

// 11

// 21

// 31

6.while : 建立一個循環，只要測試條件評估爲true，該循環就會執行指定的語句。在執行語句以前評估條件。

例子：只要n小於3，下面的while循環就會迭代。

var n = 0;

var x = 0;

while (n < 3) {

  n++;

  x += n;

}

2、Constructor 與  object 區別和聯繫 （最好了解一下起源）：

1. Constructor：是用於建立和初始化類中建立的一個對象的一種特殊方法。

constructor([arguments])

 { ... }

在一個類中只能有一個名爲 「constructor」 的特殊方法。 一個類中出現屢次構造函數 (constructor)方法將會拋出一個 SyntaxError 錯誤。

在一個構造方法中能夠使用super關鍵字來調用一個父類的構造方法。

若是沒有顯式指定構造方法，則會添加默認的 constructor 方法。

若是不指定一個構造函數(constructor)方法, 則使用一個默認的構造函數(constructor)。

若是不指定構造方法，則使用默認構造函數。對於基類，默認構造函數是：

constructor() {}

對於派生類，默認構造函數是：

constructor(...args) {

  super(...args);

}

2.Object：

起源：對象(Object)是某一個類(Class)的實例(Instance) ，所以說有對象以前必須先有類型，而後再將類型實例化就獲得了對象。

（1）Object.assign()

能夠用做對象的複製

var obj = { a: 1 };

var copy = Object.assign({}, obj);

console.log(copy); // { a: 1 }

能夠用做對象的合併

var o1 = { a: 1 };

var o2 = { b: 2 };

var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);

console.log(obj); // { a: 1, b: 2, c: 3 }

console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目標對象自身也會改變。

（2）Object.is()

Object.is(‘haorooms‘, ‘haorooms‘);     // true

Object.is(window, window);   // true

Object.is(‘foo‘, ‘bar‘);     // false

Object.is([], []);           // false

var test = { a: 1 };

Object.is(test, test);       // true

Object.is(null, null);       // true

// 特例

Object.is(0, -0);            // false

Object.is(-0, -0);           // true

Object.is(NaN, 0/0);         // true

（3）Object.keys()

這個方法會返回一個由給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致 （二者的主要區別是 一個 for-in 循環還會枚舉其原型鏈上的屬性）。

/* 類數組對象 */

var obj = { 0 : "a", 1 : "b", 2 : "c"};

alert(Object.keys(obj));

// 彈出"0,1,2"

/* 具備隨機鍵排序的數組類對象 */

var an_obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };

console.log(Object.keys(an_obj));

// console: [‘2‘, ‘7‘, ‘100‘]

（4）Object.create()

Object.create(proto, [ propertiesObject ])

第二個參數是可選的，主要用於指定咱們建立的對象的一些屬性，（例如：是否可讀、是否可寫，是否能夠枚舉等等）能夠經過下面案例來了解第二個參數！

ar o;

o = Object.create(Object.prototype, {

  // foo會成爲所建立對象的數據屬性

  foo: { writable:true, configurable:true, value: "hello" },

  // bar會成爲所建立對象的訪問器屬性

  bar: {

    configurable: false,

    get: function() { return 10 },

    set: function(value) { console.log("Setting `o.bar` to", value) }

}})

// 建立一個以另外一個空對象爲原型,且擁有一個屬性p的對象

o = Object.create({}, { p: { value: 42 } })

// 省略了的屬性特性默認爲false,因此屬性p是不可寫,不可枚舉,不可配置的:

o.p = 24

o.p

//42

o.q = 12

for (var prop in o) {

   console.log(prop)

}

//"q"

delete o.p

//false

//建立一個可寫的,可枚舉的,可配置的屬性p

o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });

3、Arrow functions restore

在js中，函數能夠用 "arrow" => 定義。

1.箭頭函數的語法：

const show=(a,b) => a+b;

show(1,5); // 結果返回6

以前，傳統的函數定義:

function show(a,b){

return a+b;

}

show(1,5) //結果返回6

 

2.箭頭函數傳遞一個參數:

const show=a => a+1; // 這樣能夠，參數不加括號

const show=(a) => a+1; //加上括號也能夠，建議加上√

箭頭函數不傳遞參數：

const show=() => 'welcome strive'; //此時圓括號必須加上

 

3.完整的箭頭函數形式:

const show=a =>{

const b=12;

return a+b;

}

show(5); //返回結果 17

const show=(a,b)=>{

return a+b;

}

show(12,5); //返回結果 17

* 箭頭函數須要注意的地方:

箭頭函數裏面不在提供一個arguments對象了

const show= x => console.log(arguments);

show(12.5) // arguments is not defined

固然還有，caller/callee都不在支持了

關於arguments那個問題，能夠解決：

const show=(...arr) => console.log(arr);

show(12,5);

 

4.箭頭函數裏面this

var name='window-strive';

var obj={

name:'strive',

showName:()=>{

alert(this.name); //結果是 window-strive

}

}

obj.showName();

 

5.隱式return

const show= x=> x+1; //相似這種語句沒有寫return，叫作隱式return

show(1); // 返回結果2

隱式return須要有個注意的地方:

const show=()=>{a:1}; //想返回json，可是這個答案爲 undefined

const show=()=>({a:1}); //加上括號了，結果就是 {a:1}

 

6.顯式return(本身動手寫return了)

const show=x=>{

return x+1;

}

show(1); //結果爲2

總結一下:

箭頭函數的語法:

x=>y; // 隱式的return

x=>{return y}; //顯式的return

(x,y,z) => {....} //多個參數

(()=>{ // 自執行匿名函數 IIFE

//....code

})();