ES6至ES11（一）

什么是ECMAScript
是由ecma国际通过ECMA262标准化其中的一个。

一. let 关键字 声明变量

let a; 
let a,b,c;
let f=21;

特性:
1. 变量不能重复声明

	let a = 'xxx'
	let a = 'vvv'
	// 报错

2. 块级作用域(在代码块内起有效)

  {
      let name = 'jack'
   }
    console.log(name) // 报错

3. 不存在变量提升

console.log(song) // 报错
let song = 'aaa'

4. 不影响作用域链

{
    let song = 'aaa';
    function fn(){
        console.log(song) // aaa
    }
    fn();
}

二 const 定义常量

const song = '七里香'

特性：
1. 一定要赋初始值
2. 潜规则(一般常量使用大写)
3. 常量的值不能修改
4. 块级作用域
5. 对数组和对象的修改，不算对常量的修改，不会报错

三 解构赋值

// 数组
const f4 = ['f1','f2','f3','f4'];
let [f1,f2,f3,f4] = f4;
// 对象
const star = {
    name:'jack',
    age:20',
    say:function(){
        console.log('对象')
    }
}
let {name,age,say} = star; // 解构 相当于声明了三个变量，并对其赋值

四 模板字符串 ``

let str = `一个字符串`;
console.log(str)

特性:
1. 内容中可以直接出现换行符

 let str = `<ul>
                <li>1</li>
                <li>2</li>
                </ul>`

2. 变量拼接

 let star = 'jack'
    console.log(`${star}是一个明星`)

五 简化对象写法

允许在大括号里面，直接写入变量和函数，作为对象的属性和方法.

const user = {
    name,
    age,
    say(){
        console.log('简化')
    }
}

六 箭头函数 =>

let fn = function(){...}
let fn = () => {...}

特性：
1. this值是静态，始终指向函数声明时所在作用域下的this的值

function getName(){
    console.log(this.name)
}
let getName2 = () => {
    console.log(this.name)
}
window.name = 'jack';
const star = {
    name:'tom'
}
getName(); // jack
getName2(); // jack
//call调用
getName.call(star) // tom
getName2.call(star) // jack

2. 不能作为构造实例化对象

let user = (name,age)=>.{
    this.name = name;
    this.age = age;
}
let me = new user('tom',20);
console.log(me) // 报错

3. 不能使用arguments变量

 let fn = () => {
        console.log(arguments)
    }
    fn(1,2,3)// 报错

4. 箭头函数的简写

    // 省略小括号 当只有一个形参的时候
    let add = n => {return n+1}
    // 省略小括号，当代码体只有一条语句的时候
    let user = n => n+1;

七 给函数参数赋初始值

// 具有默认值的参数，一般位置要靠后(潜规则)
function add(a,b,c=10){
    return a+b+c;
}
// 默认值可以与解构赋值联合使用
function connect({host,user,pass,port}){...}
connect({
    host:'xxx.com',
    user:'tom',
    pass'root',
    port:3306
})

八 rest参数 用于获取函数的实参，用来代替arguments

function date(...args){console.log(args)}
date('tom','jack') // 打印出来是数组
// 如果参数有多个，rest参数必须放到参数最后。

九 扩展运算符 […]

const tf = ['f1','f2''f3']
function get(){
    console.log(arguments)
}
get('''tf) // 'f1','f2''f3'这里相当于三个参数

使用场景:
1. 数组合并

const ary1 = [1,2,3];
const ary2 = [4,5,6];
const ary = [...ary1,...ary2]
console.log(ary); 

2. 数组克隆

const ary1 = [1,2,3];
const ary2 = [...ary1];
console.log(ary2); // [1,2,3]

3. 将伪数组转为真正的数组

const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr)

十 Symbol 表示独一无二的值

特点:
1. 值是唯一的，解决命名冲突的问题
2. 不能与其它数据进行运算
使用场景
1. 给对象添加属性和方法

十一 迭代器 自定义遍历数据

for in 键名
for of 键值
工作原理：
1. 创建一个指针对象，指向当前数据结构起始位置
2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4. 每调用next方法返回一个包含value和done属性的对象

十二 生成器 es6提供的一种异步解决方案

function * get(){
    yield 'xxxx';
    yield 'ccccc';
}
let iterator = gen();
iterator.next();

十三 promise 异步编程的新解决方案 语法上promise是一个构造函数

promise