ES6新特性介绍

模板字符串

• 模板字符串实现字符串拼接

var red=80;
var green=100;
var blue=120;
//模板字符串写法
var rgb=`rgb(${red},${green},${blue}`
//拼接字符串写法
var rgb=='rgb('+red+','+green+','+blue+')';

• 模板字符串实现多行字符串

var year=1998;
var year1=1997;
var year2=1999;
var year3='2000-2005';

var html=`
    <p style="margin-left:18pt;">1、${year}：JavaScript诞生，它的初始名叫LiveScript。</p>
    <p style="margin-left:18pt;">2、${year1}：ECMAScript标准确立。</p>
    <p style="margin-left:18pt;">3、${year2}：ES3出现，与此同时IE5风靡一时。</p>
    <p style="margin-left:18pt;">4、${year3}： XMLHttpRequest又名AJAX， 在Outlook Web Access (2000)、Oddpost (2002)，Gmail (2004)和Google Maps (2005)大受重用。</p>
    <p style="margin-left:18pt;">5、2009： ES5出现，（就是我们大多数人现在使用的）例如foreach，Object.keys，Object.create和JSON标准。</p>
    <p style="margin-left:18pt;">6、2015：ES6/ECMAScript2015出现。</p>
`;

结构赋值

对象的解构赋值

var obj={name:'zs',age:19,sex:'男'}
//传统方式
var a=obj.name;
var b=obj.age;
var a=obj.sex;
//es6解构赋值
var {a,b,c}=obj;
console.log(a,b,c);

数组的结构赋值

var arr=['zs',19,'男'];
//传统方式
var name=arr[0];
var age=arr[1];
var sex=arr[2];
//es6数组的结构赋值
var [name,age,sex]=arr;
console.log(name,age,sex);

字面量的增强

• 当属性名和属性值相同的时候,可以省略属性名

var name='zs';
var age=29;
var sayHi=function(){
        console.log(`My name is ${this.name}`);
    }
//传统方式
var obj={
    name:name,
    age:age,
    sayHi:sayHi,
    exam:function(){
        console.log('学生考试');
    }
}

// es6字面量增强
var obj={
    name
    age
    sayHi,
    exam(){
        console.log('学生考试');
    }
}

箭头函数

• 箭头函数声明函数

//如果函数体只有一句代码,可以不用return;也可以省略{}
var sum=(a,b)=>a+b;

var reduce=(a,b)=>{
    return a-b;
}

• 箭头函数作为参数

var arr = [1, 2, 3];
//传统写法
arr.forEach(function(val, index, array) {
    console.log(val);
});

//ES6箭头函数
//1-当函数体只有一句代码的时候,可以省略大括号,并且可以省略return关键字
arr.forEach(val = > console.log(val));

arr.forEach((val,index)=>{
    console.log(`${index}=${val}`);
})

• 箭头函数修正定时器内部this的指向

var names='zs';
var obj={
    names:'ls',
    sayName:setTimeout(()=>{
        console.log(this,this.names);
    },100);
}
//测试
obj.sayName();

let与const 关键字

let声明的变量

• 有块级作用域
• 没有声明提升

//输出: 0,1
for (let i=0;i<2;i++){console.log(i)};
//输出：undefined
console.log(i);

const 声明常量

• 常量的值不能被修改

const version='1.0'
//后期不能version的值进行修改
version='2.0'  //报错

for of 值遍历

• 专门用于遍历数组

var someArray = [ "a", "b", "c" ];
// v代表的是数组的元素, 并不是索引 
for (v of someArray) {
    //输出 a,b,c
    console.log(v);
}

延展操作符

• 用在函数调用的时候(用于修饰实参)
• 通过它可以将数组作为参数直接传入函数：

var arr=[10,20,9,8,100];
//使用apply调用Math.max()求最大值
Math.max.apply(Math,arr)
//使用延展操作符,求数组最大值
Math.max(...arr);

不定参数(剩余参数)

• 不定参数使用...
• 作用和arguments有点类似
• 注意区分不定参数和延展操作符
• 用于函数的声明部分(用于修饰形参)

// 通过arguments解决不定参数
function add(){
    sum=0;
    for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
    }
    return sum;
}

//传统方式实现求多个数的和
function add(...x){
    console.log(x);
    sum=0;
    for(var i=0;i<x.length;i++){
        sum+=x[i];
    }
    return sum;
}
//forEach实现求多个数的和
function add(...x){
    console.log(x,x instanceof Array);
    sum=0;
    x.forEach(function(val,index,array){
        console.log(val);
        sum+=val;
    });
    return sum;
}

函数默认值

• ES5设置默认值

var link = function (height, color, url) {
  var height = height || 50;
  var color = color || 'red';
  var url = url || 'http://www.itcast.cn';
  console.log(height,color,url);
}

• ES6设置默认值

var link = function (height=50, color='red', url='http://www.itcast.cn') {
    console.log(height,color,url);
}

类的支持

• 相当于ES5中的构造函数

//类的定义
class Person {
    //ES6中新型构造器;属性constructor中初始化
    constructor(name,age,sex) {
        this.name = name;
        this.age=age;
        this.sex=sex;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }

    sayHi(){
        console.log('hello world!!!');
    }
}
//测试
var p1=new Person('zs',19,'男');
p1.sayName();

• 使用extends实现类的继承

//类的继承: 让Student继承Person的属性和方法
class Student extends Person {
    constructor(name,age,sex,score) {
        //必须在此处使用super调用父类的constructor&&必须写在constructor的第一行
        super(name,age,sex);
        this.score=score;
    }
    //打印学生成绩
    printScore() {
        console.log('My score is '+this.score);
    }
}
// 测试
var s1=new Student('ls',20,'男',100);
s1.printScore();

• ES5的写法

// 声明构造函数
function Person(name,age,sex){
     this.name = name;
     this.age=age;
     this.sex=sex;
}
//将方法绑定在原型上
Person.prototype.sayName=function() {
     console.log('My name is '+this.name);
}


// 组合继承
function Student(name,age,sex,score){
    // 借用构造函数: 继承属性
    Person.apply(this,[name,age,sex]);
    // Student的特有属性
    this.score=score;
}
// 原型继承: 继承方法
Student.prototype=new Person();
Student.prototype.constructor=Student;
Student.prototype.printScore=function(){
    console.log(this.name+'的考试成绩是'+this.score);
}

// 测试
var s1=new Student('zs',22,'男',99);
console.log(s1.name);
s1.sayName();
s1.printScore();