1、 ECMASript 相关介绍

1.什么是 ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制
造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该
组织改名为 Ecma 国际

2.什么是 ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

3.什么是 ECMA-262

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看
http://www.ecma-international.org/publications/standards/Standard.htm

4.为什么要学习 ES6

ES6 的版本变动内容最多，具有里程碑意义
ES6 加入许多新的语法特性，编程实现更简单、高效
ES6是前端发展趋势，就业必备技能

2、 ECMASript 6 新特性

1.let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

块儿级作用域

       {
    
    
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

不存在变量提升

console.log(song);// ReferenceError: Cannot access 'song' before initialization
let song = '恋爱达人';

不影响作用域链

 {
    
    
            let school = 'baicaotang';
            function fn(){
    
    
                console.log(school);
            }
            fn();//baicaotang
        }

应用场景：以后声明变量使用 let 就对了

2. const 关键字

const 关键字用来声明常量，const 声明有以下特点

声明必须赋初始值

const a;// SyntaxError: Missing initializer in const declaration

标识符一般为大写

const PI = "3.1415926";

不允许重复声明

const a=1;
const a=2;
//SyntaxError: Identifier 'a' has already been declared

值不允许修改

const SCHOOL = 'baicaotang';
SCHOOL = 'ATGUIGU';
//TypeError: Assignment to constant variable.

块儿级作用域

{
    
    
            const PLAYER = 'UZI';
        }
        console.log(PLAYER);
        //ReferenceError: PLAYER is not defined

注意: 对象属性修改和数组元素变化不会出发 const 错误应用场景：声明对象类型使用 const，非对象类型声明选择 let

3.变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称
为解构赋值。

1.数组的解构赋值

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

2.对象的结构赋值

let {
    
    a = 10, b = 5} = {
    
    a: 3};
// a = 3; b = 5;
let {
    
    a: aa = 10, b: bb = 5} = {
    
    a: 3};
// aa = 3; bb = 5;

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

4.字符串

1.拓展的方法字符串的识别

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

2.字符串重复

repeat()：返回新的字符串，表示将字符串重复指定次数返回。

console.log("Hello,".repeat(2));  // "Hello,Hello,"

3.字符串补全

padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"

4.模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符

let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;

可以使用 ${xxx} 形式输出变量

 let lovest = '魏翔';
        let out = `${
      
      lovest}是我心目中最搞笑的演员!!`;
        console.log(out);

注意：当遇到字符串与变量拼接的情况使用模板字符串

5.标签模板

标签模板，是一个函数的调用，其中调用的参数是模板字符串。

alert`Hello world!`;
// 等价于
alert('Hello world!');

5.Symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。
Symbol 特点

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用
Reflect.ownKeys 来获取对象的所有键名

//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);
//添加标识的 Symbol
let s2 = Symbol('baicaotang');
let s2_2 = Symbol('baicaotang');
console.log(s2 === s2_2);
//使用 Symbol for 定义
let s3 = Symbol.for('baicaotang');
let s3_2 = Symbol.for('baicaotang');
console.log(s3 === s3_2);
let sy = Symbol("key1");
//作为属性名 
// 写法1
let syObject = {
    
    };
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
    
    
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {
    
    };
Object.defineProperty(syObject, sy, {
    
    value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

注: 遇到唯一性的场景时要想到 Symbol，Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

Symbol 内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

参考文档

6.Map和Set

1.Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯
一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进
行遍历，集合的属性和方法：

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回 boolean 值
has 检测集合中是否包含某个元素，返回 boolean 值
clear 清空集合，返回 undefined

//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

2.Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”
的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了
iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属
性和方法：

size 返回 Map 的元素个数
set 增加一个新元素，返回当前 Map
get 返回键名对象的键值
has 检测 Map 中是否包含某个元素，返回 boolean 值
clear 清空集合，返回 undefined

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
 ['name','baicaotang'],
 ['slogon','不断提高']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

7. 数值扩展

1. 二进制和八进制

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。

//二进制
console.log(0b11 === 3); // true
console.log(0B11 === 3); // true
//八进制
console.log(0o11 === 9); // true
console.log(0O11 === 9); // true

2. Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true
// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false
 
console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false
 
// Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false

Number.isNaN() 用来检查一个值是否为 NaN

console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true
 
// 在全局的 isNaN() 中，以下皆返回 true，因为在判断前会将非数值向数值转换
// 而 Number.isNaN() 不存在隐式的 Number() 类型转换，非 NaN 全部返回 false
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({
    
    });         // false
Number.isNaN("true");     // false

3. Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。

// 不指定进制时默认为 10 进制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12
 
// 指定进制
Number.parseInt('0011',2); // 3
 
// 与全局的 parseInt() 函数是同一个函数
Number.parseInt === parseInt; // true
Number.parseFloat()
用于把一个字符串解析成浮点数。
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45
 
// 无法被解析成浮点数，则返回 NaN
Number.parseFloat('abc') // NaN
 
// 与全局的 parseFloat() 方法是同一个方法
Number.parseFloat === parseFloat // true

4. Math.trunc

用于去除一个数的小数部分，返回整数部分。

Math.trunc(12.3); // 12
Math.trunc(12);   // 12
 
// 整数部分为 0 时也会判断符号
Math.trunc(-0.5); // -0
Math.trunc(0.5);  // 0
 
// Math.trunc 会将非数值转为数值再进行处理
Math.trunc("12.3"); // 12
 
// 空值或无法转化为数值时时返回 NaN
Math.trunc();           // NaN
Math.trunc(NaN);        // NaN
Math.trunc("hhh");      // NaN
Math.trunc("123.2hhh"); // NaN

5. Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

Number.isInteger(value)
Number.isInteger(0); // true
// JavaScript 内部，整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值
Number.isInteger(1);   // true
Number.isInteger(1.0); // true
 
Number.isInteger(1.1);     // false
Number.isInteger(Math.PI); // false
 
// NaN 和正负 Infinity 不是整数
Number.isInteger(NaN);       // false
Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
 
Number.isInteger("10");  // false
Number.isInteger(true);  // false
Number.isInteger(false); // false
Number.isInteger([1]);   // false
 
// 数值的精度超过 53 个二进制位时，由于第 54 位及后面的位被丢弃，会产生误判
Number.isInteger(1.0000000000000001) // true
 
// 一个数值的绝对值小于 Number.MIN_VALUE（5E-324），即小于 JavaScript 能够分辨
// 的最小值，会被自动转为 0，也会产生误判
Number.isInteger(5E-324); // false
Number.isInteger(5E-325); // true
Number.isSafeInteger()
//用于判断数值是否在安全范围内。
Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

参考文档：菜鸟教程
 参考书籍：阮一峰教程

ES6的简单小结