ES6 (Es2015)新特性
ES6, 全称ECMAScript 6.0, 是JaveScript的下一个版本标准, 2015.06发版.
ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现
一、变量与常量
先看es5写法<script> var a = 10; var a = 15; var b = 20; b = 16; //有三个按钮绑定点击事件点击,依次弹出1,2,3 window.onload = function(){ var oBtn = document.getElementsByTagName('button'); for(var i =0; i < oBtn.length;i++){ oBtn[i].addEventListener('click',function(){ alert(i); // 3,3,3 }) } } //解决办法: 加立即执行函数 window.onload = function () { var oBtn = document.getElementsByTagName('button'); for (var i = 0; i < oBtn.length; i++) { (function (i) { oBtn[i].addEventListener('click', function () { alert(i); //0,1,2 }) })(i); } } </script>我们再看es6写法
<script> let a = 10; let a = 15;//error let b = 11; b = 22;//22 const c = 20; const c = 25; //error const d = 30; d = 35; //16 window.onload = function(){ var oBtn = document.getElementsByTagName('button'); for(let i =0; i < oBtn.length;i++){ oBtn[i].addEventListener('click',function(){ alert(i); // 0,1,2 }) } } </script>
var 可以重复声明,无限次修改,没有作用域
let 不能重复声明,变量可以修改值,有作用域
const 不能重复声明,常量不可以修改值,有作用域
二、解构赋值
<script> let [a,b] = [1,2]; console.log(a,b); //1,2 let [a,b]; [a,b] = [1,2]; //error let {name,age,job} = {name:"bobocode",age:23,job:'web'} console.log(name,age,job); // bobocode 23 web let [{a,b},[arr]] = [{a:'testa',b:'testb'},[1,2,3]]; console.log(a,b,arr); // testa testb [1, 2, 3] let arr1 = [1,2,3]; let arr2 = [5,6,7]; let newArr = [...arr1,...arr2]; console.log(newArr); //[1, 2, 3, 5, 6, 7] </script>
解构赋值声明和赋值不能分开写
解构赋值等号左右两边的结构必须相同
解构赋值右边必须是有意义的结构(arr,json等)
三、数组新方法
<script> //map(映射) [1,2,3,4].map(function(item){ console.log(item*2); //1,4,9,16 }); //reduce(总和) [1,2,3,4].reduce(function(temp,value,index){ return temp+ value; //10 }) //fliter(过滤) [1,2,4,8,9].filter(function(item){ return item % 2 == 0; // 2,4,8 }) //forEach(迭代) [3,51,34,53].forEach(function(item,index){ console.log(item+","+index);//3,0 51,1 34,2 53,3 }) </script>
四、箭头函数
<script> function Test(a,b){ return a + b; } function Test(c){ return c*c; } </script>es6写法
<script> (a,b)=>{a+b} c=>{c*c} </script>
函数只有一个参数,() 可以省略
函数返回语句只有一个,{} 可以省略
五、模板字符串
<script> //字符串拼装 var text = 'hello'; var div = '<div><ul>\ <li>'+text+'</li>\ </ul></div>'; </script>es6写法
<script> //字符串模板 let text = 'hello'; let div =`<div> <ul> <li>${text}</li> </ul> </div>` //字符串新的方法 //startWith() "http://www.baidu.com".startsWith('http'); //true //endsWith() "js/index.js".endsWith('.js'); //true </script>
六、面向对象class
<script> var Person = function(name,age){ this.name = name; this.age = age; } Person.prototype.showInfo = function(){ console.log(this.name + ","+ this.age); } var p = new Person('bb',12) p.showInfo() //bb,12 // es5 继承的写法 var Student = function(name,age,score){ Person.call(this,name,age); this.score = score; } Student.prototype = new Person(); Student.prototype.constructor = Student; Student.prototype.showScore= function(){ console.log(this.name + ","+ this.age +","+ this.score); } var s = new Student('bb',12,98); s.showScore() //bb,12,98 </script>
es6写法
<script> class Person{ constructor(name,age){ this.name = name; this.age = age; } showInfo(){ console.log(this.name + ","+ this.age); } } var p = new Person('bb',12) p.showInfo() //bb,12 // es6继承的写法 class Student extends Person{ constructor(name,age,score){ super(name,age,score); this.score = score; } showScore(){ console.log(this.name + ","+ this.age +","+ this.score); } } var s = new Student('bb',12,98); s.showScore() // bb,12,98 </script>
七、Promise
<script> //发送一个ajax请求(jquery3版本之前的写法,版本3ajax内嵌promise语法) var p = new Promise(function(resolve,reject){ $ajax({ url: '', dataType: 'json', success(){ resolve(); }, error(){ reject(); } }); }); let result = p.then(function(data){ console.log('success'+data); },function(err){ console.log('error'+err); //Promise.all 的使用 function createPromise(urls){ reutrn new Promise(function(resolve,reject){ $ajax({ urls //key 和 value 相同,可以省略 dataType: 'json', success(){ resolve(); }, error(){ reject(); } }); }); } Promise.all([ createPromise('data/test.txt'), createPromise('data/test2.txt') ]).then(function(arr){ let [res1,res2] = arr; console.log('success'+res1); console.log(''+res2); },function(err){ console.log('error'+err); }) </script>
八、generator
<script> //标准的生成器写法 let a = 'a'; let b = 'b'; function *test(){ console.log(a); yield; console.log(b); } let res = test(); res.next(); // 'a' res.next(); // 'b' ----------------------------------- //yeild 带参数的 let a = 'a'; let b = 'b'; function *test(){ console.log(a); b = yield; console.log(b); } let res = test(); res.next(11); //a res.next(3); //3 //{value: undefined, done: true} 没返回值 ----------------------------------- //yeild 带返回值的 let a = 'a'; let b = 'b'; let c = 'c'; function *test(){ console.log(a); b = yield; console.log(b); c = yield; console.log(c); return 5; } let res = test(); res.next(11); //a res.next(3); //3 res.next(2); //2 //{value: 5, done: true} 返回值是5 </script>
网友评论0