ES6(ES2015)支持IE10+，Chrome，FireFox，移动端，NodeJS
转换方式
变量 var
可以重复声明
无法限制修改
没有块级作用域
let 不能重复声明，变量-可以修改，有块级作用域
const 不能重复声明，常量-不能修改，有块级作用域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 window.onload = function (){ var aBtn = document.getElementsByTagName('input'); for (var i=0; i<aBtn.length; i++){ aBtn[i].onclick = function (){ alert(i); } } } 输出结果：3 3 3 window.onload = function (){ var aBtn = document.getElementsByTagName('input'); for (var i=0; i<aBtn.length; i++){ (function (i){ aBtn[i].onclick = function (){ alert(i); }; })(i); } } 输出结果：1 2 3 window.onload = function (){ var aBtn = document.getElementsByTagName('input'); for (let i=0; i<aBtn.length; i++){ aBtn[i].onclick = function (){ alert(i); } } } 输出结果：1 2 3
函数
如果只有一个参数，()可以省
如果只有一个return，{}可以省
1 2 3 4 function show(a){return a*2} (a)=>{return a*2} a=>{return a*2} a=>a*2
函数的参数
参数扩展/数组展开
1 2 3 4 5 //收集参数 function show(a, b, ...args){} //Rest Parameter必须是最后一个 //展开数组 alert(args); //[] //展开后的效果，跟直接把数组的内容写在这一样
默认参数
解构赋值
左右两边结构必须一样
右边必须是个东西
声明和赋值不能分开(必须在一句话里完成)
1 2 let [a, b, c] = [12, 5, 8]; let {a, b, c} = {a:12, b:5, c:8};
数组 map 映射 1 2 3 4 let score = [19, 85, 99, 25, 90] let result = score.map(item=>item>=60?"及格":"不及格"); alert(score); alert(result);
reduce 汇总 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //算总数 let arr = [12, 69, 180, 8763]; let result = arr.reduce(function (tmp, item, index){ return tmp+item; }); alert(result); //算平均数 let arr = [12, 69, 180, 8763]; let result = arr.reduce(function (tmp, item, index){ if (index != arr.length-1){ return tmp+item; } else { return (tmp+item)/arr.length; } }); alert(result);
filter 过滤器 1 2 3 4 5 6 7 8 9 10 let arr = [ {title:'包1', price:35}, {title:'包2', price:45}, {title:'包3', price:55}, {title:'包4', price:75} ]; let result = arr.filter(json=>json.price>=55); alert(result);
forEach 循环(迭代) 1 2 3 4 5 let arr = [12, 5, 8, 9]; arr.forEach((item, index)=>{ alert(index + ":" + item); });
字符串
两个新方法
startsWith
1 2 var str = 'http://www.baidu.com'; str.startsWith('http://'');
endsWith
1 2 var str = '1.txt'; str.endsWith('.txt');
字符串模板
let a = 12;a${a}bc; //str = “a12bc”
字符串连接
可以直接放入字符串
可以折行
面向对象
class关键字，构造器和类分开了
class里面直接加方法
继承1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 //JavaScript function User(name, pass){ this.name = name; this.pass = pass; } User.prototype.showName = function (){ alert(this.name); } User.prototype.showPass = function (){ alert(this.pass); } function VipUser(name, pass, level){ User.call(this, name, pass); } VipUser.prototype = new User(); VipUser.prototype.constructor = VipUser; VipUser.prototype.showLevel = function (){ alert(this.level); } var u1 = new VipUser('name', 'pass', 3); u1.showName(); //name u1.showPass(); //pass u1.showLevel(); //3 //ES6 class User{ constructor(name, pass){ this.name = name; this.pass = pass; } showName(){ alert(this.name); } showPass(){ alert(this.pass) } } class VipUser extends User{ constructor(name, pass, level){ super(name, pass); this.level = level; } showLevel(){ alert(this.level); } } let v1 = new VipUser('name', 'pass', 3); v1.showName(); //name v1.showPass(); //pass v1.showLevel(); //3
面向对象应用 —— React
组件化 —— class
JSX == babel == browser.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script type="text/javascript" src="browser.js"></script> <script type="text/babel"> class Item extends React.Component{ constructor(...args){ super(...args); } render(){ return <li>{this.props.str}</li>; } } class List extends React.Component{ constructor(...args){ super(...args); } render(){ return <ul> {this.props.arr.map(a=><Item str={a}></Item>)} </ul>; } } window.onload = function (){ let oDiv = document.getElementById('div1'); ReactDOM.render( <List arr={['123', '456', '789']}></List>, oDiv ); }; </script> <body> <div id="div1"></div> </body>
JSON
JSON对象
函数
描述
JSON.stringify
用于将 JavaScript 值转换为 JSON 字符串
JOSN.parse
用于将一个 JSON 字符串转换为 JavaScript 对象
简写1 2 3 4 5 6 7 8 9 let a = 1; let b = 2; let json1 = {a, b: 2, c: 3}; //名字(key)和值(value)一样可以只写一个, 如:a == a:a let json2 = { a:1, show: function (){ //: function可以省略 alert(this.a); //1 } };
json的标准写法
只能用双引号
所有的key都必须用引号包起来1 2 {"a": 1, "b": 2} {"a": "1", "b": "2"}
Promise 异步: 操作之间不相关，同时进行多个操作，代码更复杂
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //异步 ajax('/banners', function (bannner_data){ ajax('/hotItems', function (hotitem_data){ ajax('/slides', function (slide_data){ }, function (){ alert('读取失败'); }); }, function (){ alert('读取失败'); }); }, function (){ alert('读取失败'); }); //同步 let banner_data = ajax_async('/banners'); let hotitem_data = ajax_async('/hotItems'); let slide_data = ajax_async('/slides');
Promise —— 清除异步操作 用同步一样的方式，来书写异步代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //方法一 function createPromise(url){ return new Promise(function (resolve, reject){ $.ajax({ url: url, dataType: 'json', success(arr){ resolve(arr); }, err(arr){ reject(arr); } }) }); } Promise.all([ createPromise('arr.txt'), createPromise('josn.txt') ]).then(function (arr){ let [res1, res2] = arr; alert('全都成功了'); alert(res1); //[1, 2, 3] alert(res2); //{"a": 1, "b": 2, "c":3} }, function (){ alert('至少有一个失败了'); }) //方法二 Promise.all([ $.ajax({url: 'arr.txt', dataType: 'json'}), $.ajax({url: 'josn.txt', dataType: 'json'}) ]).then(function (results){ let [arr, json] = results; alert('全都成功了'); console.log(arr, json); //[1, 2, 3], {"a": 1, "b": 2, "c":3} }, function (){ alert('至少有一个失败了'); }) </script> //arr.txt [1, 2, 3] //json.txt {"a": 1, "b": 2, "c":3}
有了Promise的异步
1 2 3 4 5 Promise.all([$.ajax(), $.ajax()]).then(results=>{ //对了 }, err=>{ //错了 });
Promise.race 竞速 1 2 3 4 5 Promise.race([ $.ajax({url: '服务器1'}), $.ajax({url: '服务器2'}), $.ajax({url: '服务器3'}) ]);
generator —— 生成器 不能用箭头函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function *show(){ alert('a'); yield; alert('b'); } let genObj = show(); genObj.next(); //a genObj.next(); //b function 函数(){ 代码... ajax(xxx, function (){ //回调函数 代码... }); } function *函数(){ 代码... yield ajax(xxx); 代码... }
yield 传参
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function *show(num1, num2){ alert('$(num1), $(num2)'); alert('a'); let a = yield; alert('b'); alert(a); return; } let gen = show(3, 4); gen.next(1); //3, 4 a gen.next(2); //b 2
返回
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function *show(){ alert('a'); yield 1; alert('b'); return 2 } let gen = show(); let res1 = gen.next(); console.log(res1); //a {value: 1, done:false} let res2 = gen.next(); console.log(res2); //b {value: 2, doen: true}
Promise —— 用于批量读取 generator —— 逻辑性用于逻辑性读取 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 //回调 $.ajax({url: 'getUserData', dataType: 'json', success(userData){ if (userData.type == 'VIP'){ $.ajax({url: 'getVIPItems', dataType: 'json', success(items){ //生成... }, error(err){ alert('错了'); }}); } else{ $.ajax({url: 'getItems', dataType: 'json', success(items){ //生成... }, error(err){ alert('错了'); }}); } }, error(err){ alert('错了') }}) //Promise Promise.all([ $.ajax({url: 'getUserData', dataType:'json'}) ]).then(results=>{ let userData = results[0]; if (userData.type == 'VIP'){ Promise.all([ $.ajax({url: 'getVIPItems', dataType: 'json'}) ]).then(results=>{ let items = results[0]; //生成... }, err=>{ alert('错了'); }); } else{ Promise.all([ $.ajax({url: 'getItems', dataType: 'json'}) ]).then(results=>{ let items = results[0]; //生成... }, err=>{ alert('错了'); }); } }); //generator runner(function *(){ let userData = yield $.ajax({url: 'getUserData', dataType: 'json'}); if (userData.type == 'VIP'){ let items = yield $ajax({url: 'getVIPItems', dataType "json"}); } else{ let items = yield $ajax({url: 'getItems', dataType "json"}); } //生成... })
koa 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const koa = require('koa'); const mysql = require('koa-mysql'); let db = mysql.createPool({ host: 'localhost', user: 'root', password: '132456' database: '20180919' }) server.user(function *(){ let data = yield db.query(`SELECT * FROM user_table`); this.body = data; }) server.listen(8080);
ES7预览 数组 includes 数组是否包含某个值
1 2 3 let arr = [1, 2, 3]; alert(arr.includes('1')); //true
数组 keys/values/entries 1 2 for…of //下标(key) for…in //值(value) 不能用于json
值
描述
keys
把所有的key拿出来
values
把所有的value拿出来
entries(实体)
把所有的键值对拿出来
幂 padStart/padEnd 1 2 alert('a'.padStart(5, '0')); //0000a alert('a'.padEnd(5, '0')); //a0000
async await 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 async function show(){ alert('a'); await; alert('b'); } //函数自带runner async function readData(){ let data1 = await $.ajax({url: 'data1.txt', dataType: 'json'}); let data2 = await $.ajax({url: 'data2.txt', dataType: 'json'}); let data3 = await $.ajax({url: 'data3.txt', dataType: 'json'}); console.log(data1, data2, data3); } //可以使用箭头函数 let readData = async ()=>{ let data1 = await $.ajax({url: 'data1.txt', dataType: 'json'}); let data2 = await $.ajax({url: 'data2.txt', dataType: 'json'}); let data3 = await $.ajax({url: 'data3.txt', dataType: 'json'}); console.log(data1, data2, data3); }
