ES6学习笔记（一）

ES6学习笔记 面向新手的ES6入门指南

变量

JavaScript的类型分为两种：原始数据类型和对象类型。
在ES6以前，声明一个变量只有两种方式——var 和 function
ES6新增四种声明变量指令let, const, import 和 class
let, const命令的用法类似于var,但是所声明的变量，只在声明所在的块级作用域内有效。

在ES6以前，由于存在变量提升，var定义的变量可以在声明之前就调用而不报错，而let，const必须先声明后使用并且let不允许重复声明，const一旦声明，值就不能改变。

字符串

在ES6以前，字符串用单引号或者双引号包裹，不能换行，书写时换行会报错。
ES6中新增了一种字符串表示方式，用反引号`包裹，允许插入变量或简单的JavaScript表达式，也允许换行书写。

let x = 1;
let y = 2;
// $后面的花括号里的字符串会被js解析器认为是JavaScript语句
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

模板字符串使用${}插值，${}内部只允许表达式，而逻辑语名不是表达式，所以要在模板字符串中执行判断语句可将其封装成方法，在${}内调用。模板字符串-MDN
ES6为字符串添加了遍历器接口，使字符串可以被for…of循环遍历

for(let x of 'foo') {
    console.log(x);
    }
    // "f"
    // "o"
    // "o"

数值

number是JavaScript基本类型之一。
ES6对Math对象做了一些扩展，新增了一些和数学关系密切的API
在ES6 以前，使用isNaN这个全局方法判断一个值或者变量是否是NaN。在ES6中，Number对象上添加了isNaN方法，并且与以前的isNaN有重要的区别。

isNaN(NaN);     // true
isNaN("NaN");   //true
Number.isNaN(NaN); // true
Number.isNaN("NaN"); // false
Number.isNaN(15);   // false
Number.isNaN('15'); // false
Number.isNaN(true); // false
Number.isNaN(9/NaN);// true
Number.isNaN('true'/0);// true
Number.isNaN('true'/'true');// true

传统的isNaN函数会先调用Number()将非数值的参数转化成数值再进行判断，而Number.isNaN只对数值类型有效，非数值类型的参数一律返回false。当返回false的时候，不一定就是一个数值，有可能是一个非数值类型的参数。即如果参数类型不是NaN，Number.isNaN一律返回false。
ES6中把一些全局方法加到Number对象上，即使他们没有任何变化，这样做的目的是慢慢减少全局性的函数，把全局函数合理地规划到其他对象下，渐渐实现语言的模块化。
小数计算的问题

有限小数转化成二进制是无限循环的，js解析器只能取一个近似值来做计算，所以得到的结果也有偏差。
其实对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题，只不过在C++/C#/Java这些语言中已经封装好了方法来避免精度的问题，而JavaScript是一门弱类型的语言，从设计思想上就没有对浮点数有严格的数据类型，所以精度误差的问题就显得格外突出。
解决方法：
方法一：指定要保留的小数位数（0.1+0.2).toFixed(1)=0.3;这个方法toFixed是进行四舍五入的也不是很精准，对于计算金额这种严谨的问题，不推荐使用，而且不同浏览器对toFixed的计算结果也存在差异。
方法二：先将数字乘以10，计算完毕后再除以10

关于js浮点数计算精度不准确问题的解决方法
另外，ES7中新增了一个指数运算符（**）

2 ** 2 // 4
2 ** 3 // 8

在V8引擎中，指数运算符与Math.pow的实现不相同，对于特别大的运算结果，两者会有细微的差异。

在上面代码中，两个运算结果的最后一位有效数字是有差异的。

数组

ES6中新增了扩展运算符(…)，它将一个数组转为用逗号分隔的参数序列。主要用于函数调用。
由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 的写法
Math.max.apply(null, [14, 3, 77]);

// ES6 的写法
Math.max(...[14, 3, 77]);

// 等同于
Math.max(14, 3, 77);

扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符。如果对没有Iterator接口的对象使用扩展运算符，将会报错。
ES6中新增了很多数组相关的API，这些API中大多数与遍历相关。
Array.from方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括ES6新增的数据结构Set和Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
//ES5 的写法
var arr1 = [].slice.call(arrayLike);// ['a', 'b', 'c']
// ES6 的写法
let arr2 = Arrya.from(arrayLike); //['a', 'b', 'c']

实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
    return p.textContent.length > 100;
});

// arguements对象
function foo() {
    var args = Array.from(arguments);
    // ...
}

只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。

Array.prototype.find方法用于查找数组中第一个符合要求的值。

[1, 4, -5, 10].find((n) => n > 3)  // 4

[1, 4, -5, 10].find(function(value, index, arr) {
    return value < 0;
}); // -5

Array.prototype.find方法只能查找到第一个符合要求的值，如何查找第二个符合要求的值？试写一个function实现它。
Array.prototype.includes方法用来判断数组中是否含有某个值，含有就返回true,否则返回false

[1, 2, 3].includes(2);  // true
[1, 2, 3].includes(4);  // false