ES6核心技术

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。

1. ES6介绍;
2. let和const命令;
3. 模板字符串;
4. 箭头函数;
5. 解构赋值; 
6. 对象和数组的扩展功能;
7. Symbol/Set/Map新数据类型;
8. 迭代器和生成器的用法;
9. Generator的应用;
10. Promise和async解决异步操作; 
11. class类的使用;
12. ES6模块化实现;

• npm(包管理工具)

• Babel转码器

• webpack脚手架工具

最常用的ES6特性：

变量的块级作用域

变量的块级作用域声明变量:
let
用途类似于 var 都是用来声明变量的,但是又有很大的区别;
    1. let 为JavaScript新增了 块级作用域 ,使用 let 声明的变量,只在 let 命令所在的代码块内有效;

常量const
 同样是声明变量,但是声明的是 常量.(常量的值不能改变)

原型:ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。

类和对象

用 ECMAScript 6，我们从“构造函数”🔨 来到了“类”🍸

在 JavaScript 中，每个对象都有一个原型对象。所有的 JavaScript 对象都从它们的原型对象那里继承方法和属性。

 class Animal {
            constructor(){
                this.type = 'animal'
            }
            says(say){
                console.log(this.type + ' says ' + say)
            }
        }

        let animal = new Animal()
        animal.says('hello') //animal says hello

        class Cat extends Animal {
            constructor(){
                super()
                this.type = 'cat'
            }
        }

        let cat = new Cat()
        cat.says('hello') //cat says hello

箭头函数(arrow function)：

常规写法

这种方法也称之为函数声明。

// 函数的写法 
function sum(a, b){ 
return a + b; 
} 
// 调用
 sum(1,2); 

匿名函数写法

这种方法也称为函数表达式。

// 函数写法 
var sum = function (a, b) { 
return a + b; 
} 
// 调用
 sum(2, 3);

将方法作为一个对象

// 作为对象方法，函数写法
 var foo = { 
sum: function(a, b) { return a + b }, 
subtraction: function(a, b) { return a - b },
multiplication: function (a, b) { return a * b } 
}

 // 调用 
foo.sum(1, 4); // 5
 foo.subtraction(1, 4); // -3
 foo.multiplication(2, 4); // 8

构造函数中给对象添加方法

// 给对象添加方法
 var calculate = function() {}; 
calculate.prototype.sum = function(a, b){
 return a + b 
}

箭头函数在有些地方也称为胖函数，使用箭头=>定义的函数，称为箭头函数，它也属于匿名函数一类。
首先使用=>来替代关键词function：特性:箭头函数里面的this指向父级;

es5

var sum = function(a, b) { return a + b }

es6

var sum = (a, b) => { return a + b }

  ES5：
function(i){ 
return i + 1; 
}
ES6：
 (i) => i + 1 //ES6

 

模板字符串 `` (反引号)：

ES5：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

ES6：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

解构

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

声明了2个变量,cat dog,再声明 zoo = {cat,dog} 就可以把这两个合并;

 

  　　　　let cat = 'ken'
        let dog = 'lili'
        let zoo = {cat, dog}
        console.log(zoo)  //Object {cat: "ken", dog: "lili"}

 

 

 

参数默认值

 

在ES6中有函数参数默认值,当你没有给函数传递参数的时候,就会使用默认值

 function animal(type = 'cat'){
            console.log(type)
        }
        animal()

 

。。。。。。。。。。