1. 程式人生 > 實用技巧 >ES6新特性: 不定引數與預設值引數,解構賦值,箭頭函式

ES6新特性: 不定引數與預設值引數,解構賦值,箭頭函式

4.不定引數與預設值引數:

4.1不定引數:
舊寫法:

function testAll(a){
for (var i = 1; i < arguments.length; i++) {
var b = arguments[i];
if (a.indexOf(b) === -1) {
return false;
}
}

}


arguments物件,它是一個類陣列物件,其中包含了傳遞給函式的所有引數。
假如 testAll("a", "b", "c") 可以通過arguments物件 "b", "c";


不定引數寫法(...needles):

function containsAll(haystack, ...needles) {
for (var needle of needles) { if (haystack.indexOf(needle) === -1) { return false; } } return true; }

在所有函式引數中,只有最後一個才可以被標記為不定引數。函式被呼叫時,不定引數前的所有引數都正常填充,任何“額外的
”引數都被放進一個數組中並賦值給不定引數。如果沒有額外的引數,不定引數就是一個空陣列,它永遠不會是undefined。

4.2預設值引數:

function animalSentenceFancy(animals2="tigers",
animals3
=(animals2 == "bears") ? "sealions" : "bears") { return `Lions and ${animals2} and ${animals3}! Oh my!`; }

預設表示式可以使用該引數之前已經填充好的其它引數值

5.解構賦值

解構賦值允許你使用類似陣列或物件字面量的語法將陣列和物件的屬性賦給各種變數。這種賦值語法極度簡潔,同時還比傳統的
屬性訪問方法更為清晰。

傳統寫法:

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

解構賦值:

var [first, second, third] = someArray;


5.1物件解析:


當屬性名與變數名一致時,可以通過一種實用的句法簡寫:

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"

常用:

var robotA = [{ name: "Bender1", age: 1, isstudent: true, cardno: ["a1", "a2"] }, { name: "Bender2", age: 2, 
isstudent: false, cardno: ["B1", "B2"] }];
var [{ name, age, isstudent, cardno }, { name: name2, age: age2 }] = robotA;
console.log(name);
console.log(age);
console.log(isstudent);
console.log(cardno);
console.log(name2);
console.log(age2);



5.2預設值

var [missing = true] = [];
console.log(missing);
// true


5.3 Map

var map = new Map();
map.set(window, "the global");
map.set(document, "the document");
for (var [key, value] of map) {
console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"

只遍歷鍵:

for (var [key] of map) {
// ...
}

或只遍歷值:

for (var [,value] of map) {
// ...
}


5.4 返回值

function returnMultipleValues() {
return {
foo: 1,
bar: 2
};
}
var { foo, bar } = returnMultipleValues();

 

6.箭頭函式

箭頭函式表示式的語法比函式表示式更簡潔,並且沒有自己的this,arguments,super或new.target。
箭頭函式表示式更適用於那些本來需要匿名函式的地方,並且它不能用作建構函式。

6.1 簡潔的匿名方法

<input type="button" value="箭頭函式" id="buttonTest"/>

$("#buttonTest").bind("click", e => {
console.log(e);
console.log(this);
console.log($(this));
console.log("click" + e.toElement.getAttribute("value"));
$(e).before("<p>hahahaah</p>")
});


6.2條件表示式

const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];


console.log(materials.map(material => material.toString()));

console.log(materials.map(material => material.length));