ES6

Posted 2020-10-31 悔创阿里-杰克马

ES6将全局方法parseInt()和parseFloat(),移植到了Number对象上面，行为完全保持不变。
Number.isInteger()用来判断一个值是否为整数，需要注意的是，在javascript内部，整数和浮点数是同样的存储的方法。所以3和3.0被视为同一个值。
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false
Math.trunc 方法用于去除一个数的小数部分，返回整数部分。
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
Math.sign方法用来判断一个数到底是整数还是负数还是零。
它会返回五种值。
参数为正数，返回+1；
参数为负数，返回-1；
参数为0，返回0；
参数为-0，返回-0;
其他值，返回NaN。
Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
Math.sign(‘foo‘); // NaN
Math.sign(); // NaN
Array.from方法用于将类似数组的对象或可遍历的对象转为真正的数组（用ff可看到数据类型）。
//----------------------------------------
NodeList对象
let ps = document.querySelectorAll(‘p‘);
Array.from(ps).forEach(function (p) {
console.log(p);
});

arguments对象
function foo() {
var args = Array.from(arguments);
}
//---------------------------------------
数组方法find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
[1,5,10,15].find(function(value,index,arr){
return value>9;
})//10
数组实例的findindex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，那么返回一个-1.
[1,5,10,15].findindex(function(value,index,arr){
return value>9;
})//2
函数扩展

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = ‘World‘) {
console.log(x, y);
}

log(‘Hello‘) // Hello World
log(‘Hello‘, ‘China‘) // Hello China
log(‘Hello‘, ‘‘) // Hello
log(‘Hello‘, undefined) // Hello World
//========================================
ES6 引入 rest 参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

rest 参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用 rest 参数改写数组push方法的例子。

function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}

var a = [];
push(a, 1, 2, 3)

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
//==============================================
箭头函数

ES6允许使用“箭头”（=>）定义函数。

var f = v => v;

上面的箭头函数等同于：

var f = function(v) {
return v;
};
//===============================================
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
等同于
var f = function () { return 5 };

加法运算

var sum = (num1, num2) => num1 + num2;
等同于
var sum = function(num1, num2) {
return num1 + num2;
};
//===============================
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数使得表达更加简洁。

const isEven = n => n % 2 == 0;

const square = n => n * n;
//==============================================
如果箭头函数的内部存在this，那么它指向的是它所在的函数关键字function中的 this。

btn.onclick=()=>{
console.log(this); // window
}


btn.onclick = function(){
setTimeout(()=>{
console.log(this); // btn
}, 1);
}
//==============================================
Symbol类型，表示独一无二的值。它是 JS 的第七种数据类型，前六种是：undefined、null、Boolean、String、Number、Object。

var s = Symbol();
typeof(s);

产生的原因：为了防止重名造成的冲突，所以引入了Symbol。
//==============================================
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

const s = new Set();
// 将数组中的每个元素，通过add方法，添加到set结构中
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

console.log(Array.from(s));
console.log(s.size); // 获取长度
console.log(s.has(3)); // 是否存在元素3
console.log(s.delete(2)); // 删除元素2，如果删除成功，则返回真
console.log(Array.from(s));
s.clear(); // 清除所有元素，无返回值
console.log(Array.from(s));
//============================================
遍历：
let set = new Set(["ab", "xx", "123"]);
set.forEach((value, key, arr) => {
console.log(value, key, arr); // 注意：value和key相同
})
//============================================
Generator 函数，它最大的特点，就是可以交出函数的执行权，即暂停执行。

function * fn(){
yield 1;
yield 2;
return 3
}

var f = fn();
console.log( f.next() ); // {value:1, done:false}
console.log( f.next() ); // {value:2, done:false}
console.log( f.next() ); // {value:3, done:true}
注意：

1. 与普通函数相比，生成器函数需要在 关键字function 和 函数名之间，加一个星号，星号前后是否写空格无所谓，带有星号的函数，就是生成器函数，即 Generator函数。

2. yield类似return，中文为产出的意思，表示程序执行到 yield时，程序暂停，产出一个结果，这个结果为对象 {value: 值， done：[false| true]}，value指的就是yield后面跟的值，done指程序是否已经完成。

3. 生成器函数本身只返回一个对象，这个对象具有next方法，执行next方法时，函数体内容碰到yield才会暂停。