1.babel
1、简介:让不支持ES6的浏览器支持它,原理就是把ES6语法转码成ES5。
2、使用:babel-cli脚手架(npm可直接下载);脚本引入(<script type="text/babel" src="./js/babel.js"></script>)。
3、官网:https://babel.docschina.org/
2.let 块级作用域
1、使用:
//看准大括号{},这就是一个块
let a = 2;
if (a > 1) {
let b=10;
for (let i = a; i <= b; i++) {
let j = i + 10;
}
let c = a + b;
}
2、注意:
1.let定义的变量放在语句块的最前边;
2.多变量在同意块中声明,最好用一个let;
3.let声明的变量属于隐式的转换,因为其把{}去除掉了;
4.let在用之前一定要先定义好,不然触动“死区”可就麻烦了;
5.let在for循环中应用很多,因为每次的遍历都会定义一个新的 i 然后去赋值或计算;
3、比较:
1.var声明变量只有函数才能创建新作用域,let会在所有大括号 {} 中建立新的作用域;
2.同一个作用域中,var出的变量名可重复声明,let不可以重复声明;
3.let声明变量之前任何语句不可使用let出来的变量,会报错(死区);
3.const声明
1、使用
//声明常量a
const a = 2;
console.log( a ); // 2
a = 3; // TypeError!
2、注意:
1.const定义的为常量,即不能改变的值(特殊的是数组和对象);
2.const a;这时候是不会有a=undefined的;
3.常量不是对这个值本身的限制,而是对赋值的那个变量的限制(数组&对象中的元素还是可以更改的);
4.常量所定义的常量名一般均为大写字母,方便和变量区分;
4.class类声明
1、简介:class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。
2、使用:
class One{ //定义可以new出来的对象类
constructor(){ //构造器,实例对象自己的属性||方法
this.type = 'one'
}
getName(name){ //所有实例对象公用的属性||方法
console.log(this.type + ' name is:' + name)
}
}
let one= new One(); //实例化的one
one.getName('yjs') //one name is:yjs
class Other extends One{ //子类Other继承父类One
constructor(){
super() //得到实例化的this(子类必须要有的)
this.type = 'other'
}
}
let other= new Other()
other.getName('丫头') //other name is:丫头
3、注意:
1.class定义的类可以使用new初始化实例,其中的constructor为必填的,只要你需要实例对象独有属性|方法;
2.继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this;
5.箭头函数
1、初识:
//原始
function add(a,b){
return (a+b)
}
//箭头
var add=(a,b)=>{a+b};
//调用
add(1,2)
2、讲解:
1.箭头函数总是函数表达式( var fn=(){ } );并不存在箭头函数声明( function fn(){} )。
2.作为回调函数,箭头函数的公用还是很大的,如:
var a = [1,2,3,4,5];
//a = a.map( function(v){ retrun v*2 } );
a = a.map( v => v * 2 );
console.log( a ); //[2,4,6,8,10]
3.箭头函数的设计目的之一:改变this的指向问题,看下边的例子:
/* 实例1 */
var obj={
fn:function(){
var self=this; //this指向的是obj这个对象
btn.addEventListner("click",function(){
self.fn(); //这里的this指向的是触发的DOM元素
})
}
}
//箭头函数
var obj={
fn:function(){
btn.addEventListner("click",function(){
this.fn(); //这里的this指向的是语法环境中调用的obj
})
}
}
/* 实例2:this指向混乱的可能 */
var obj={
fn:()=>{this.fn2()},
fn2:()=>{ ... }
}
obj.fn(); //此时调用的时候,是在全局进行的,所以语法环境中this就是全局:window
4.切记一点,箭头函数的this是语法环境中传递的,不是动态环境中时刻变换的;
3、区别
1.箭头函数式匿名函数,不可以作为构造函数(不能new出来);
2.箭头函数不绑定arguments参数伪数组,可以使用扩展运算符(...)替代;
3.箭头函数不绑定this,而其内部的this是上下文中调用起始对象;
4.箭头函数无法使用apply,call改变this的指向;
5.箭头函数没有原型属性;
6.模板字符串
1、简介:大段字符串的拼接,用“ + ”拼接很麻烦,所以这个模板字符串就诞生了。
2、使用:
var a="aaa";
var b="bbb";
$("#ids").append(""+
"<p>"+a+"</p>"+
"<p>"+b+"</p>"+
);
$("#ids").append(`<p>${a}</p><p>${b}</p>`) //符号 ` 位置在数字1左边
7.扩展运算符
/* 展开:...后边是数组的情况 */
//示例1:
function foo(x,y,z) {
console.log( x, y, z );
}
foo( ...[1,2,3] ); // 1 2 3
//示例2:
var a = [2,3,4];
var b = [ 1, ...a, 5 ];
console.log( b ); // [1,2,3,4,5]
/* 收起:...后边不是数组的情况 */
function foo(...args) {
console.log( args ); //这里的args是真正的数组,跟arguments这个伪数组还是不一样的
}
foo( 1, 2, 3, 4, 5); // [1,2,3,4,5]
8.默认值
var w = 1;
function foo( x = w + 1, y = x + 1 ) {
console.log( x, y);
}
foo(); //2,3
9.解构
1、使用:
function arr(){
return [1,2,3]
}
function obj(){
return {x:4,y:5,z:6}
}
var [a,b,c]=arr();
var {x:x,y:y,z:z}=obj(); //简写方式:var {x,y,z}=obj();(key,value名称相同)
console.log(a,b,c); //1,2,3
console.log(x,y,z); //4,5,6
2、注意:
1.简写方式省略的是x:这部分,即 {} 书写的是被赋值的变量;
2.对于那些不需要整体赋值的情况,可不使用var来声明;
3.不使用var时,对象解构需要放在小括号里,如:({x,y,z}=obj()),因为{}会当成语句块进行执行;
4.对象解构允许重复赋值,如:var {a:a1,a:a2}={a:1};结果是a1=1,a2=1;
5.数组解构赋值和对象解构赋值来说,你不需要把存在的所有值都用来赋值,如:
var [,b] = arr();
var { x, z } = obj();
console.log(b); //2
console.log(x,z) //4,6
6.解构(现仅限于数组)在平时和扩展运算符一起使用比较多,可简洁我们的代码,如:
var a = [2,3,4];
var [ b, ...c ] = a;
console.log( b, c ); // 2 [3,4]
7.解构和默认值一起使用也是我们平时开发较为常见的,如:
var [ a = 3, b = 6, c = 9, d = 12 ] = arr();
var { x = 5, y = 10, z = 15, w = 20 } = obj();
console.log( a, b, c, d ); // 1 2 3 12
console.log( x, y, z, w ); // 4 5 6 20
8.嵌套解构,如:
var a1 = [ 1, [2, 3, 4], 5 ];
var o1 = { x: { y: { z: 6 } } };
var [ a, [ b, c, d ], e ] = a1;
var { x: { y: { z: w } } } = o1;
console.log( a, b, c, d, e ); // 1 2 3 4 5
console.log( w ); // 6
10.对象字面量简易写法
//key-value相同的
var z=10;
var obj={z:z}; //原始写法
var obj1={z}; //简易写法
//对象属性值为函数的
var obj={ a:function(){...} }; //原始写法
var obj1={ a(){...} } //简易写法
11.import&export导入导出
1、简介:ES6提出了模块的构想,而这就需要引入模块和输出模块,因此import&export就诞生了,并广泛使用。
2、使用:
//导出
export default 'A cat'
export function say(){
return 'Hello!'
}
export const type = 'dog'
//导入
import { say, type } from './content'
3.注意:
1.export命令除了导出变量,还可以导出函数,甚至是类;
2.导入的时候要注意:大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同;
3.导入文件多的默认导出, 可以写在大括号外面;
4.更改导入名称,使用 as 进行更改如:import { type as typeValue } from './js/jsFile.js';
5.导入所有的导出值,可使用 * 进行导入,如:import * from './js/jsFile.js';
如需了解更多有关ES6的内容请点击这里!!!