为什么要有 let
以前都是用的 var ，let 出现就是解决 var 带来的问题。
var 的缺点：
- 重复声明
- 变量提升，官方可能开发这个是为了容错，但是真的非常糟糕。
alert(a)
// 报错，a is not defined
alert(a)
if (1) {
var a = 1
}
// 弹出 undefined
- var 的作用域是函数级别的
<button>1</button>
<button>2</button>
<script>
var aInput = document.getElementsByTagName('button')
for (var i = 0; i < aInput.length; i++) {
aInput[i].onclick = function () {
alert(i)
}
}
</script>
// 弹出 2、2
alert(a)
function show(){
var a = 1
}
show();
// 报错，因为作用域是函数级别，限制了变量提升到上一层。
let site = ['runoob', 'google', 'taobao'];
{
if(1){
var i=1;
let j=2;
alert(site)
}
}
alert(i);
alert(j); // 报错
箭头函数？语法糖
- 只有一个参数，小括号可省略
- 只有一个 return，return 和花括号可省略
let twice = function (i) {
return i * 2;
}
let twice = i => i * 2;
剩余参数
function show(a, b, ...args) {
// ...
}
show(1, 2, 3, 4, 5, 'aa')
let arr = [1, 2, 3];
show(...arr); // === show(1, 2, 3)
默认参数
function show(a, b=199) {
// ...
}
解构赋值
let [a, b] = [1, 2];
let {a, b} = {a: 1, b: 2};
let {a: A, b} = {a: 1, b: 2};
按粒度随意划分
let a = {a: 1, b: 2};
let [b, c] = ['leon', {a: 12}];
数组
- map 映射
let arr = [1, 2];
let result = arr.map( item => item * 2 );
- reduce 汇总
let sum = arr.reduce(
(tmp, item, index) => tmp + item
);
let average = arr.reduce(
(tmp, item, index) => {
if (index !== arr.length - 1) {
return tmp + item;
} else {
return (tmp + item) / arr.length;
}
}
);
- filter
let result = arr.filter(
item => item > 3;
);
let json = json.filter(
json => json.price > 10000;
);
- forEach
let result = arr.forEach(
item => alert(item)
);
let res = arr.forEach(
(item, index) => alert(index + ':' + item)
);
字符串
let a = 'aaa'
alert(a.startsWith('aa'))
alert(a.endsWith('aa'))
alert(a.includes('aa'))
console.log('Yo ', repeat(100));
面向对象
class User {
constructor(name, phone) {
this.name = name;
this.phone = phone;
}
showName() {
alert(this.name)
}
showPhone() {
alert(this.phone)
}
}
class VipUser extends User {
constructor(name, phone, level) {
super(name, phone);
this.level = level;
}
showLevel() {
alert(this.level);
}
}
Json
let str = '{"a": 1,"b": 12}'; // 注意 json 格式不能错，尤其是引号
let json = Json.parse(str);
str = Json.stringfy(json); // json 转 string
json 简写
{a: a} === {a}
{a: function(){ ... }} === {a(){ ... }}
Promise
let p1 = new Promise(function (resolve, reject) {
$.ajax({
url: 'http://baidu.com',
success(res) {
resolve(res);
},
error(error) {
reject(error);
}
});
});
let p2 = new Promise(function (resolve, reject) {
$.ajax({
url: 'http://qq.com',
success(res) {
resolve(res);
},
error(error) {
reject(error);
}
});
});
// single
p1.then(function (arr) {
// ...
}, function (err) {
// ...
});
// combine
Promise.all([p1, p2]).then(function (arr) {
let [res1, res2] = arr;
// arr 是两次 ajax 获取的东西。
// ...
}, function (err) {
// ...
});
// 其实 jQuery 的 ajax 在内部是用 Promise 封装的
Promise.all([
$.ajax({url: 'http://qq.com', dataType: 'json'}),
$.ajax({url: 'http://baidu.com', dataType: 'json'})
]).then(function (arr) {
// ...
}, function (err) {
// ...
});
Generator
function* show() {
alert(a);
yield;
alert(b);
}
let gen = show();
gen.next();
gen.next();
function* show() {
alert(a);
yield 10;
alert(b);
return 20;
}
let gen = show();
let first = gen.next();
let second = gen.next();
好处：写法简单多了
// 曾经
ajax('http://url-1', data1, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-2', data2, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-3', data3, function (err, result) {
if (err) {
return handle(err);
}
return success(result);
});
});
});
// 现在
try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}
