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=`
1、${year}：JavaScript诞生，它的初始名叫LiveScript。
2、${year1}：ECMAScript标准确立。
3、${year2}：ES3出现，与此同时IE5风靡一时。
4、${year3}： XMLHttpRequest又名AJAX， 在Outlook Web Access (2000)、Oddpost (2002)，Gmail (2004)和Google Maps (2005)大受重用。
5、2009： ES5出现，（就是我们大多数人现在使用的）例如foreach，Object.keys，Object.create和JSON标准。
6、2015：ES6/ECMAScript2015出现。
`;
结构赋值
对象的解构赋值
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函数默认值
- 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();