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