ES 6 学习
1.变量
// let 和 const 不可重复申明 let a = 12 let a = 5 alert(a) // 报错,const 同理 // 限制修改值 let a = 12 a = 5 alert(a) // 5 const b = 12 b = 5 alert(b) // 报错, const定义的值不能修改 // 块级作用域 <input type="button" value="按钮1"> <input type="button" value="按钮1"> <input type="button" value="按钮1"> const aBtn = document.getElementsByTagName('input'); window.onload = function (){ for( var i = 0; i<aBtn.length; i++) { aBtn[i].onclick = function(){ alert(i); // 每次都是3 } } for( let i = 0; i<aBtn.length; i++) { aBtn[i].onclick = function(){ alert(i); // 0 1 2 } } }
2. 箭头函数
let show = function () { } let show = () => { } // 只有一个参数的时候,()可省略 let show = a => { return a*2 } // 只有return的时候,{}可省略 let show = a => a*2
3. 函数的参数
- 收集参数(这样用的位置必须在最后一个)
function show (a, b, ...args) { alert(a); alert(b); alert(args); } show(5, 12, 20, 35, 38, 42)
- 扩展参数
// 示例1 function show(...arg) { alert(a); } show(1,2,3); // 示例2 const arr1 = [1,2,3] const arr2 = [5,6,7] let arr = [...arr1,...arr2] alert(arr) // [1,2,3,5,6,7] // 示例3 function show (...arg){ fn(arg) } function (a, b) { return a+b } show(12,5) // 17
- 默认参数
function show(a,b=5,c=12) { console.log(a,b,c) } show(18) // 18,5,12 show(18,20) // 18,20 show(18,20,30) // 18,20,30
4. 数组方法
map reduce filter forEach
let arr = [5, 8 , 19, 34] const result = arr.map( item => item*2 ); console.log(result) // 10, 16, 38, 68 let arr1 = [16, 80, 200, 5042]; // reduce 进去一堆,出来一个总数 arr1.reduce( (temp,item,index) => { // temp是计算加法之后的中间值 // item 从数组第二个数开始的每个值 // index 从1开始的下标 return temp + item }) // filter 过滤,根据条件产生一个新数组 let arr2 = [400, 600, 1000, 2000, 3500] console.log(arr2.filter( v => v >= 2000 )) // [2000, 3500] // forEach 循环(迭代)
5. 字符串
- 多了两个方法 startsWith 和 endsWith
const str = 'http://www.baidu.com' if ( str.startsWith('http') ) { alert('普通网址') } else if ( str.startsWith('https') ){ alert('加密网址') } else { alert('其他') } const st = '1.txt'; if (st.endsWith('txt')) { alert('文本文件') }else if ( st.endsWith('jpg') ) { alert('jpg图片') }else { alert('其他') }
- 字符串模板 反单引号 可换行
const str = '测试'; `<div>这是一个${str}标签</div> `
6.面向对象
// 老的写法 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); this.level = level } VipUser.prototype = new User(); VipUser.prototype.constructor = VipUser; VipUser.prototype.showLevel = function(){ alert(this.level) } var ul2 = new VipUser('xiaoMao','123456', '99'); ul.showName(); ul.showPass(); ul2.showLevel(); // 新的写法 class User { constructor(name, pass) { this.name = name; this.pass = pass } showName(){ alert(this.name) } showPass(){ alert(this.pass) } } var ul = new User(); ul.showName(); ul.showPass(); // 新的继承写法 class VIpUser extends User{ constructor(name, pass, level){ super(name,pass) this.level = level } showLevel(){ this.level = level } } var ul = new VIpUser('xiaoMao','123456','99'); ul.showLevel()
7. json
JSON.stringify() // 字符串化 JSON.parse() // json 化 // key 和 value值相同,可以只写一个 示例 this.setState({ selectedKeys: selectedKeys // 可写成 selectedKeys }) // JSON里面的函数可以省略 : function class User { constructor () { } showName() { } }
8. Promise
异步: 操作之间没啥关系,同时进行多个操作 $.ajax({ url: '/api/getUser', datatype: 'json', success: function(){ $.ajax({ url: '/api/getUser', datatype: 'json', success: function(){ $.ajax({ url: '/api/getUser', datatype: 'json', success: function(){ } }) } }) }, error: function(err){ console.log(err) } }) 同步: 操作之间有关系,同时只能进行一个操作 let user_data = ajax_async('/api/getUser'); let banner_data = ajax_async('/api/banners'); let menu_data = ajax_async('/api/menus'); let item_data = ajax_async('/api/item'); Promise -------消除异步操作 *用同步一样的方式,来书写异步代码 var p1 = new Promise( function(resolve,reject){ $.ajax('data/1.txt', function(arr){ resolve(arr) }, function(err){ reject(err) }) }) var p1 = new Promise( function(resolve,reject){ $.ajax('data/json.txt', function(arr){ resolve(arr) }, function(err){ reject(err) }) }) /* p1.then(function(arr){ alert('成功'+arr) },function(err){ alert(err) }) */ Promise.all([ p1,p2 ]).then(function(arr){ let [a1, a2] = arr alert('全都成功了'); },function(){ alert('至少有一个失败了'); }) 所以写成通用的: function commonPromise(url){ return new Promise(function(resolve,reject){ // 这里不能写成箭头函数 $.ajax({ url, success: function(arr){ resolve(arr); }, error: function(err){ reject(err) } }) }) } Promise.all([ commonPromise('data/1.txt'), commonPromise('data/json.txt') ]).then( (arr) => { let [p1, p2] = arr; alert('全都成功了') }, () => { alert('至少有一个失败了') })
==高版本jQuery已经自己封装了Promise==
直接:
Promise.all([ $.ajax({url:'data/1.txt',dataType: 'json'}), $.ajax({url:'data/json.txt',dataType: 'json'}) ]).then( () => { alert('成功') }, () => { alert('失败') })
Promise.race 看谁先返回
Promise.race([ $.ajax({url:'data/1.txt'}), $.ajax({url:'data/2.txt'}), $.ajax({url:'data/3.txt'}), $.ajax({url:'data/4.txt'}), $.ajax({url:'data/5.txt'}), ]).then( ()=>{ // 由上面加载最快的,得到返回值 }, ()=> { } )
9. generator( * 和 yield )
- 普通函数 想象成飞机高铁,一路执行到底
- generator 想象成出租车,想停就能停,停的位置看yield
function *show(num){ alert('a'); let a = yield num; alert('b') alert(a); } var p = show(); // p.next() // a // p.next() // b p.next(12); // a p.next(5); // b 5 // Promose 里面如果带逻辑判断执行的话,代码更复杂 Promise.all([ $.ajax({url: '/getUser', dataType: 'json'}) ]).then( result => { let res = result[0]; if ( res.VIP ) { Promise.all([ $.ajax({url: '/VIPdata', dataType: 'json'}) ]).then( () => { }, () =>{ }) }else { Promise.all([ $.ajax({url: '/itemdata', dataType: 'json'}) ]).then( () => { }, () =>{ }) } }, err => { console.log(err) }) // yield 带逻辑 runner(function *show(){ let user_data = yield $.ajax({url: '/getUser', dataType: 'json'}); if ( user_data.VIP ) { let data = yield $.ajax({url: '/VIPdata', dataType: 'json'}); }else { let data = yield $.ajax({url: '/itemdata', dataType: 'json'}); } })
总结:
Promise 一次读一堆
generator 一次读一堆,可以带逻辑
10. for of (ES 7 语法)
11. async 和 await
let renderData = async () => { const data = await $.ajax({url:'data/1.txt', dataType: 'json'}) console.log(data) } renderData()
12. Array.from()
将一个类数组对象或者可遍历对象转换成一个真正的数组
let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4 } const arr = Array.from(arrayLike); console.log(arr) // ['tom','65','男',['jane','john','Mary']] arrayLike[4] = 'test'; const arr = Array.from(arrayLike); console.log(arr) // ['tom','65','男',['jane','john','Mary']] arrayLike.length = 0; const arr = Array.from(arrayLike); console.log(arr); // [ ] length为0,arr为空数组