B站小马哥ES6（一）

为什么学习ES6

• 大部分公司目前的项目目前都在使用ES6
• 为了后面学习vue，尤其是react框架做好准备

ES6简介

• 它是JS语言的下一代标准，目标是使得JS语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6新特性

• let和const命令
• es6的模板字符串
• 增强的函数
• 扩展的字符串，对象，数组功能
• 解构赋值
• Symbol
• Map和Set
• 迭代器和生成器
• Promise对象
• Proxy对象
• async用法
• 类 class
• 模块化实现

1. let 和const

let

1. let声明变量，没有变量提升

<script>
    console.log(a)
    let a;
</script> 

2. 是一个块作用域

console.log(b)//会报错
if(1==1){
	let b = 10;
}

3. 不能重复声明

let a = 1;
let a = 3;
console.log(a);

const

1.const声明变量，一旦被声明就无法修改。

const max = 30;
max = 40;
console.log(max);

2. 符合let声明的特性（3条）
3.const声明对象，可以对其中对象属性进行修改，但不能修改常量对象。

const person = {
	name : '小马哥'
}
//person.name = 'xiaoming';  可以
//person = {
	age:20;
}会报错
console.log(person)

作用

1. for循环（经典例子）

const arr = [];
for(let i = 0; i < 10; i++){
	arr[i] = function(){
		return i;
	}
}
console.log(arr[5]()) // 用let定义会返回正确的值，用var定义会返回10

2. 不会污染全局变量

let RegExp = 10;
console.log(RegExp);
console.log(window.RegExp)//会正确输出

建议

在默认情况下用const，只有在你知道变量值需要被修改的时候使用let

2 模板字符串

• 使用``符号(Tab键上面)，插入变量使用${变量名}

const obox = doccument.querySelector('.box');
let id = 1;
name = '小马哥'
let htmlStr = `<ul>`
	<li>
		<p id=${id}>${name}</p>
	</li>
</ul>;
oBox.innerHTML = htmlStr;

3.函数

ES5

//es5的写法
function add(a, b){
	  a = a || 10;
	  b = b || 20;
	  return a + b;
}
console.log(add());

ES6 带参数传入默认值

//es6的写法
function add(a = 10, b = 20){
    return a + b;
}
console.log(add())

如果传入一个值，则另一个用默认值

默认的表达式也可以是一个函数

function add(a, b = getVal(5)){
    return a + b;
}
function getVal(val){
    return val + 5;
}
console.log(add(10))
//输出20

剩余参数：由三个点…和一个紧跟着的具名参数指定 …keys

主要解决arguements的问题

function checkArgs(...args){
     console.log(args);
     console.log(arguments);
 }
 checkArgs('a','b','c');

输出

function pick(obj,...keys){
      let result = Object.create(null);
      for(let i = 0; i < keys.length; i++){
          result[keys[i]] = obj[keys[i]]
      }
      return result;
  }
  let book = {
      title: 'es6的教程',
      author: '小马哥',
      year: 2019
  }
  let bookData = pick(book, 'title', 'year', 'author');
  console.log(bookData)

扩展运算符…

剩余运算符：把多个独立的参数合并到一个数组当中
扩展运算符：将一个数组分割，并将各个项作为分离的参数传给函数
处理最大值用apply

const arr = [10, 20, 50, 30, 90]
console.log(Math.max.apply(null,arr));

es6 扩展运算符更方便

console.log(Math.max(...arr))

箭头函数

使用=>定义 （）=> { } == function() { }

let add = function(a, b){
    return a + b;
}
console.log(add(10, 20));

let add = (a, b)=>{
    return a + b;
}
console.log(add(10, 20));

如果只有一个参数

let add = a =>{
    return a
}
console.log(add(10));

也可以简写成

let add = a => (a + 10) // 表示return a + 10, 如果返回a的话小括号也可以去掉
console.log(add(10));

如果是两个参数

let add = (a, b) => (a + b) //也可以不加括号
console.log(add(10, 20));

没有参数的情况

let fn = () => 'hello'
console.log(fn())

返回的是对象

let getObj = id =>{
    return {
        id:id,
        name:'小马哥'
    }
}
console.log(getObj(1))
//可以简写为
let getObj = id =>({
    id:id,
    name:'小马哥' 
});

console.log(getObj(1))

闭包函数

let fn = (function(){
    return function(){
        console.log('hello world')
    }
})();
fn();
//箭头函数写法
let fn = (() =>{
    return () =>{
        console.log('hello')
    }
})();
fn();

箭头函数this指向
es5中的this指向:取决于调用该函数的上下文对象

let PageHandle = {
    id:123,
    init:function(){
        document.addEventListener('click',function(event){
            this.doSomeThings(event.type); //this指向document
        })
    },
    doSomeThings:function(type){
        console.log(`事件类型:${type},当前id:${this.id}`);
    }
}
PageHandle.init()

es5解决方法用.bind

let PageHandle = {
    id:123,
    init:function () {
        document.addEventListener('click',function(event){
            this.doSomeThings(event.type); //this指向document
        }.bind(this),false) //用.bind
    },
    doSomeThings:function(type){
        console.log(`事件类型:${type},当前id:${this.id}`);
    }
}
PageHandle.init()

es6箭头函数解决
箭头函数没有this指向，箭头函数内部this只能通过查找作用域链确定
使用箭头函数当前就不存在作用域链，往上找

let PageHandle = {
    id:123,
    init:function () {
        document.addEventListener('click',(event) => {
            this.doSomeThings(event.type); //this指向document
        },false)
    },
    doSomeThings:function(type){
        console.log(`事件类型:${type},当前id:${this.id}`);
    }
}
PageHandle.init()

注意

1. 使用箭头函数，内部不存在arguements

let getVal = (a, b) => {
    console.log(arguements);
    return a + b;
}
console.log(getVal(1, 3)); //报错

2. 箭头函数不能使用new关键字来实例化对象

let person = () {
	
};
//function函数 也是一个对象,但是箭头函数不是一个对象。
let p = new Person();

4. 解构赋值

• 是对赋值运算符的扩展
• 针对数组和对象的扩展

完全解构

let node = {
    type:'aaa',
    name: 'xiaoming'
}
let {type, name} = node;
console.log(type, name)

不完全解构

let obj = {
    a:{
        name:'xiaoming'
    },
    b:[],
    c:'hello,world'
}
let {a} = obj; //输出name:'xiaoming'
let {a, ...res} = obj;
console.log(res)

对数组解构

let arr = [1,2,3];
let [a,b] = arr;
console.log(a, b); // 1, 2

5.扩展的对象功能

• es6直接写入变量和函数,作为对象的属性和方法

const name = 'xiaoming'
        age = 20;
const person = {
    name, //等价于name:name  一样才能简写
    age,
    sayName(){
        console.log(this.name);
    }
  }
  person.sayName();

const obj = {};
obj.isShow = true;
const name = 'a';
obj[name+'bc'] = 123;
obj['f'+'bc'] = function(){
    console.log(this);
}
console.log(obj)

输出为

is() ===

• 比较两个值是否严格相等

console.log(Object.is(NaN, NaN)); //true

assign() 对象的合并

//返回合并后的新对象
let newObj = Object.assign({},{a:1},{b:2});
console.log(newObj)//{a:1, b:2}