编译/转换
- 在线转换（引入browser.js，<script type="text/babel">...</script>）
- 提前编译
变量
var变量存在的缺点：
- 可以重复声明
- 无法限制修改 PI
- 没有块级作用域
let 不能重复声明 变量-可以修改 块级作用域
const 不能重复声明 常量-不能修改 块级作用域
eg:解决了我们想通过循环定义函数，函数内部访问全局变量的问题：
window.onload = function () {
var aBtn = document.getElementsByTagName("input");
// for (var i = 0; i<aBtn.length; i++){
// (function(i){
// aBtn[i].addEventListener('click', function () {
// alert(i)
// })
// })(i)
// }
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].addEventListener('click', function () {
alert(i)
})
}
}
函数
胖剪头
- 如果只有一个参数，()可以省略
- 如果只有一个return，{}可以省略
{}内部使用到的this和外部使用到的this相同
window.onload = function () {
console.log(this);
let Method = {};
// Method.add = function (a, b) {
// console.log(this); //Method
// return a + b;
// }
Method.add = (a, b) => {
console.log(this); //Window
return a + b;
}
Method.add();
}
函数的参数
- 参数扩展/展开
- 默认参数
收集剩余参数，必须为最后一个
function show(a, b, c, ...args) {
// console.log(a);
// console.log(b);
// console.log(c);
console.log(...args); //4 5 6
}
show(1,2,3,4,5,6);
展开数组
let arr = [1,2,3,4,5,6];
show(...arr); //show(1,2,3,4,5,6);
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
show(...arr1, ...arr2);
默认参数
function show(a=1, b=2, c=3) {}
解构赋值
- 左右两边结构必须一样
- 右边必须是一个可以解构的对象
- 声明和赋值不能分开，必须在一句话中完成
数组：
let [a,b,c] = [1,2,3];
alert(a+b+c); //6
对象（声明的key和对象中的key必须相同，否则赋值失败！）：
let {x,y,z} = {x:1,y:2,z:3};
alert(x+y+z); //6
解构可以使用不同的粒度：
let [obj, arr, num, str] = [{
a: 5,
b: 4,
c: 'qet'
},
[1, 2, '3'], 12, 'wds'
]
console.log(obj, arr, num, str);
let [{
a,
b,
c
},
[n1, n2, s1], num1, str1
] = [{
a: 5,
b: 4,
c: 'qet'
},
[1, 2, '3'], 12, 'wds'
]
console.log(a, b, c, n1, n2, s1, num1, str1);
数组
新增方法
- forEach 迭代
- map 映射
- reduce 汇总
- filter 过滤
map：
let arr = [0, 1, 2, 3, 4, 5];
let _arr = arr.map(function (value, index, array) {
console.log(value, index, array);
return value>3;
})
console.log(_arr); //[false,false,false,false,true,true]
reduce：
let arr = [0, 1, 2, 3, 4, 5];
let result = arr.reduce(function (pre, cur, curIndex, arr) {
console.log(pre, cur, curIndex, arr);
if (curIndex === arr.length-1) {
return (pre + cur) / arr.length;
}
return pre + cur;
})
console.log(result); //2.5
filter：
let arr = [0, 1, 2, 3, 4, 5];
let _arr = arr.filter(function (value, index, array) {
console.log(value, index, array);
return index % 2 === 0;
})
console.log(_arr); //[0, 2, 4]
forEach：
let arr = [0, 1, 2, 3, 4, 5];
let _arr = arr.forEach(function (value, index, array) {
console.log(value, index, array);
array[index] = value * 2;
})
console.log(arr); //[0, 2, 4, 6, 8, 10]
console.log(_arr); //undefined
字符串
多了两个新方法：
- startsWith
- endsWith
字符串模板：
- 使用反单引号
- 通过 ${变量} 取值，格式化到字符串中
- 可以折行
面向对象
新增class：
// function User(username, password) {
// this.username = username;
// this.password = password;
// }
// User.prototype.getUsername = function () {
// alert(this.username);
// }
// User.prototype.getPassword = function () {
// alert(this.password);
// }
class User {
constructor(username, password) {
this.username = username;
this.password = password;
}
getUsername() {
alert(this.username);
}
getPassword() {
alert(this.password);
}
}
let user = new User('admin', '123456');
user.getUsername();
user.getPassword();
继承：
class User {
constructor(username, password) {
this.username = username;
this.password = password;
}
getUsername() {
alert(this.username);
}
getPassword() {
alert(this.password);
}
}
class VIPUser extends User {
constructor(username, password, level) {
super(username, password);
this.level = level;
}
getLevel() {
alert(this.level);
}
}
let user = new VIPUser('admin', '123456', 100);
user.getUsername();
user.getPassword();
user.getLevel();
JSON
两个常用方法
- JSON.stringify()
- JSON.parse() //只能用双引号，且key值必须用双引号包裹
简写：
let a = 1,
b = 2;
let json = {
// 键值相同可以简写
// a: a,
// b: b,
a,
b,
// showA: function () {
// alert(this.a);
// },
// showB: function () {
// alert(this.b);
// }
showA() {
alert(this.a);
},
showB() {
alert(this.b);
}
}
json.showA();
json.showB();
Promise
使用同步的方式组织异步的代码
let p = new Promise(function (resolve, reject) {
$.ajax({
url: 'arr.txt',
dataType: 'json',
success(resp) {
resolve(resp)
},
error(err) {
reject(err);
}
})
});
p.then(function (resp) {
console.log(resp);
}, function (err) {
console.log(err);
})
Promise.all：
Promise.all(
[
$.ajax({
url: 'arr.txt',
dataType: 'json',
}),
$.ajax({
url: 'json.txt',
dataType: 'json',
})
]
).then(function (resp) {
let [res1, res2] = resp;
console.log(res1, res2);
console.log("All success");
}, function (err) {
console.log("At least one failed");
})
Promise.race 竞速：
Promise.race(
[
$.ajax({
url: 'arr.txt',
dataType: 'json',
}),
$.ajax({
url: 'json.txt',
dataType: 'json',
})
]
).then(function (resp) {
console.log(resp);
}, function (err) {
console.log(err);
})
得到最先成功的promise执行then，失败的会被忽略。
generator
普通函数 一路到底
生成器函数 中间能停
关键字 yield
function* show(i) {
console.log(i);
let [t, p] = yield i;
console.log(t, p);
return 4;
}
let a = show(1);
console.log(a);
//第一个next无法传递参数，可以在创建生成器对象时传参
console.log(a.next()); //{value: 1, done: false}
console.log(a.next([2, 3])); //{value: 4, done: true}
每次执行到yield会放弃控制权，让外部函数执行，直到调用.next()方法。
promise 一次执行多个
generator 带逻辑的执行
ES7 预览
includes 数组是否包含某个值
let arr = [1,2,3];
alert(arr.includes(3)); //true
- for ... in ... 对象 数组-索引 对象-键值
- for ... of ... 迭代器 数组-值 对象-X
for/of
let arr = [1,2,3];
for(let i of arr){
console.log(i);
}
keys/values/entries
- keys：拿出所有的key值 []
- values：拿出所有的value值 []
- entries：拿出所有的key-value值 [{}, {}, {}]
求幂
console.log(2**3);
padStart/padEnd
let t = 'abc'.padStart(6);
console.log(`(${t})`); //( abc)
let t = 'abc'.padEnd(6);
console.log(`(${t})`); //(abc )
async
let readData=async ()=>{
let data1=await $.ajax({url: 'data/1.txt', dataType: 'json'});
let data2=await $.ajax({url: 'data/2.txt', dataType: 'json'});
let data3=await $.ajax({url: 'data/3.txt', dataType: 'json'});
console.log(data1, data2, data3);
}
readData();
