1. 常量和变量声明的改变
在es6中,变量名的定义不再使用var,而是用let,常量依然是用const。
新的变量声明就意味着变量的声明格式有了改变,let声明的变量的作用域是在块级作用域中 {};
变量提升对于var来说是不会报错的,但是对于let声明的变量会报错,它会提示你你所打印的变量没有定义
console.log(i); //02.html:15 Uncaught ReferenceError: i is not defined at 02.html:15 let i = 10;
var声明的变量,你如果重复声明的话,后面的会把前面的覆盖,而let声明的变量不允许重复声明。
常量的定义,只能一次定义,就不能对常量进行修改,而且在定义的时候就必须进行初始化,否则会报错。
2. 字符串的拼接
在es6以前,字符串的拼接只能通过"+"的形式进行拼接,在es6中可以通过反引号(``)拼接,其中的变量可以用${},将变量放在${}的花括号中
str += "<ul> <li> " + uname + "</li> <li>nan</li> <li>18</li> <li>150123456878</li> <li>xxx@xxx.com</li> </ul>" div.innerHTML = str; //es6 str += `<ul> <li>${uname}</li> <li>nan</li> <li>18</li> <li>150123456878</li> <li>xxx@xxx.com</li> </ul>` div.innerHTML = str;
3. 扩展运算符(...)
对于扩展运算符(...),我们只需记住一点:对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
说白了,就是复制,用数组来举例
var arr = [1,2,3,4,5,1,2]; var arr4 = [...arr]; arr4.push(6) console.log(arr); //1,2,3,4,5,1,2 console.log(arr4) //1,2,3,4,5,1,2,6
4. 解构赋值
解构赋值是赋值运算符的扩展。
是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
在解构中,有下面两部分参与:
- 解构的源,解构赋值表达式的右边部分。
- 解构的目标,解构赋值表达式的左边部分。
- 简单的说,按照解构的源的格式进行赋值就没有问题了。
let [a,b,c] = [1,2,3]; console.log(a,b,c); //1,2,3 let [a,[b,[c],d],e] = ["mercy",[5,["hello"],"world"],9]; console.log(a,b,c,d,e); //mercy 5 hello world 9 let [a,[b,[e],d],c] = ["mercy",[5,["hello"],"world"],9]; console.log(a,b,c,d,e); //mercy 5 9 world hello
5. 箭头函数
函数可以写成函数声明或者函数表达式的样子,但是箭头函数仅对函数表达式有效。
在es6以前,函数的格式是这样的:
function 函数名(参数1,参数2,...){
......
}
function ajax(url,success,errr){ var xhl = new XMLHttpRequest(); xhl.open(url,"GET",true); xhl.send(null); xhl.onload = function(){ if (xhl.readyState ==4 && xhl.status == 200){ success(xhl.responseText); }else{ errr(xhl.readyState); } } }
现在的函数格式:
let 函数名 = (参数1,参数2,...)=> {
......
}
而且,箭头函数不能使用arguments。
let add = () => { console.log(arguments) } add(1,2,3,4,5); //Uncaught ReferenceError: arguments is not defined
6. promise对象
promise就是一个对象,它是用来处理异步数据的。
异步数据分为前台和node所带来的,前台的主要是ajax,node主要有读文件,写文件,文件流等等。
promise的状态有三种,分别是pending(等待,处理中),resolve(成功,完成),rejected(失败,拒绝);
promise状态的改变只有两种:
1. pending -> resolve
2. pending -> rejected
而且这两种状态的改变是单向的,只能从等待到成功或者等待到失败,不能成功到失败,成功到等待,失败到等待。
下面是一个关于promise的小实例:
var pro = new Promise(function(resolve,reject){ resolve(123); //这个是成功的,我要把成功后的数据123传递出去,resolve和reject两者只能存在一个 // reject(456) }) pro.then(function(val){ //then方法执行完成以后又返回了一个promise对象 //这个是成功的回调 console.log("成功了,接收到的数据为:" + val); return val + 1; },function(err){ //这个是失败的回调 console.log(err); }).then(function(val){ console.log(val) },function(err){})
成功的promise里面可以传递一个成功的promise对象:
var p1 = Promise.resolve(10); var p2 = Promise.resolve(p1); //成功的promise里面可以传递一个成功的promise对象 p2.then(function(data){ console.log(data); //10 })
7. Generator函数
Generator 有两个区分于普通函数的部分:
一是在 function 后面,函数名之前有个 * ;
函数内部有 yield 表达式。
其中 * 用来表示函数为 Generator 函数;yield 用来定义函数内部的状态,yield相当于console.log,输出后面的值。
//generator是一个函数,可以将它看做状态机 function* fun(){ yield "hello"; yield "ES6"; yield "hello"; yield "mercy"; } var fn = fun(); //1 console.log(fn.next()); //{value: "hello", done: false} console.log(fn.next()); //{value: "ES6", done: false} console.log(fn.next()); //{value: "hello", done: false} console.log(fn.next()); //{value: "mercy", done: false} console.log(fn.next()); //{value: undefined, done: true} done表示已经讲整个generator函数遍历完成 //2 for (var a of fn){ console.log(a); } //1和2两者只能有一个存在,如果1存在的话,2就不会执行,也不会报错