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为空数组
浙公网安备 33010602011771号