ES6
简单了解一下es6
ES6是ECMAScript的第六个版本。JavaScript包括ECMA,DOM,BOM三个部分。es6中更新了一些更加方便快捷的语法。ECMA是js的实现者。
1.let&const
let也是声明变量, 但是和var 有一定的区别。首先弄清楚var 和 let 的区别。
1)var 声明提前,let在执行到这一行的时候才会声明变量
2)在使用未声明变量的时候let会报错。
3)如果有重复声明的时候,var 同名的后面的值会覆盖前面的值,let有同名的会报错。
4)let会出现作用域死区,只能在自己的代码块中使用let声明的变量,只能在当前作用域有作用。
{ var varTest = 'test var OK.'; let letTest = 'test let OK.'; { var varTest = 'varTest changed.'; let letTest = 'letTest changed.'; } console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明 console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量
const用来声明常量,也同样的没有变量声明提升,不能重复定义,且不能挂在到window上。
const和let一样,也会产生作用域临时死区。比如
const A = 100; { //临时死区 console.log(A); const A = 200; } 会报错 A未声明
2.spreed & rest 收集与展开
展开和收集
3.解构
解构过程中具备赋值和变量声明两个功能,目的在于把等号左右的两个东西内部的值取出来
对象数组都可以参与解构,解构的作用在于简化书写长度,提高开发效率
解构数组:let [a, b, c] = [1, 2, 3];
可忽略中间值 let [a, , b] = [1, 2, 3]; // a = 1 b = 2 c = 3
可嵌套 let [a, [[b], c]] = [1, [[2], 3]]; // a = 1 b = 2 c = 3
不完全解构 let [a = 1, b] = []; // a = 1, b = undefined
剩余运算符 ... let [a, ...b] = [1, 2, 3]; //a = 1 b = [2, 3]
解构默认值 : let [a = 2] = [undefined]; // a = 2
对象模型的解构
解构对象 let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' bar = 'bbb'
同样具有可嵌套 可忽略 不完全解构和剩余运算符的写法,用法和数组的基本相似。比如
剩余运算符:let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 b = 20 rest = {c: 30, d: 40}
4.箭头函数
箭头函数的作用:函数的目的指向性更强,可读性更好。简化代码,提升开发效率。
箭头函数的特点:
1)不用写function
2)不能使用new关键字,没有原型。只能作为函数使用
3)参数不能重复命名
4)返回值可以不写return,箭头函数返回对象时,要加一个小括号
5)内部arguments this 由定义是外围最接近一层的非箭头函数的arguments和this决定其值
6)箭头函数this为父及作用域的this,不能使用call apply等任何方法改变this
箭头函数用=>符号来定义,箭头函数相当于匿名函数所以要用函数表达式的方法来写。
箭头函数的基本写法,num1 num2是传入的参数,右边是函数的执行的代码,当代码只有一句的时候可以省略大括号。当参数只有一个的时候可以省略小括号。当不需要参数的时候直接写()。
let sum = (num1,num2) => num1 + num2;
5.Map对象与set
map是一个对象,用来存储内容的。创建方式有
var map = new Map();
map.abc = 123;
map.bcd = 456; 输出map 是一个长度为0的对象 ,包含属性值abc :123 bcd:456
get()可以用来获取map中的指定元素,不存在就返回undefined
size属性返回成员的数量
clear() 清空
set(key,value) 添加或修改元素
遍历map对象
myMap.forEach(m=>{console.log(m)})
删除 myMap.
delete
(keyString)
6. for in for of
for of不能循环对象但可以遍历数组,主要用来循环map对象
var arr = [1,2,3]; for(var index of arr){ console.log(index) } 输出 1 2 3
for in 循环数组
var arr = [1,2,3]; for(var index in arr){ console.log(index) } 输出的是 0 1 2
for in 循环对象
var obj = { a : "1", b : "2", c : "3" } for(var index in obj){ console.log(index); console.log(obj[index]) }
输出的是:a 1 b 2 c 3
7.类 class
在es6以前对象和类是不分的,如果要生成一个对象实例,要先定义一个构造函数。es6中可以通过class关键字定义类。写法更加的清晰。
class Person{//定义了一个名字为Person的类 constructor(name,age){ this.name = name;//constructor是一个构造方法,用来接收参数 this.age=age; } say(){//这是一个类的方法,不要加function return "我的名字叫" + this.name+"今年"+this.age+"岁了"; } } var obj=new Person("tom",10); console.log(obj.say());//我的名字叫tom今年10岁了
类的本质上是一个函数,类自身指向就是构造函数。也可以通过prototype来添加属性方法。
class没有变量提升,需要先定义再使用。
类的继承用extends实现。
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
首先定义一个类,里面包含constructor。constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。cat类通过extends关键字继承了Animal的所有属性和方法。super()相当于父类的this对象。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,如果不调用super方法,子类就得不到this对象。
8. Promise
Promise就是一个对象,用来做异步消息处理的。AJAX异步请求
new Promise(function(resolve,reject){ if(成功){ resolve(成功的数据) }else{ reject(失败的原因) } }) 状态: pending等待 -> resolve(成功) -> reject(失败)
then是promise状态发生改变的毁掉函数,可以链式调用。
var p1 = new Promise(function(resolve,reject){ resolve(1) }) //then调用以后又返回一个promise对象 p1.then(function(data){ return data + 10; },function(){ }).then(function(data){ console.log(data) },function(err){ }) console.log(p1) //输出了promise对象 和 11 因为data+10 resolve传入1