ES6
变量/赋值
-
变量:
-
var 可以重复定义/不能限制修改/函数级作用域/没有块级作用域
-
let 变量/不能重复定义/(块级)
-
const 常量/不能重复定义/限制修改(块级)
-
-
解构赋值:
左右两边必须一样,右边得是合法的
必须定义和赋值同步完成
let [a,b,c] = [1,2,3] console.log(a,b,c) => 1,2,3
let [a,b,c] = [1,[4,5],3] console.log(a,b,c) => 1,[4,5],3
函数
-
箭头函数:
function (参数,参数) {} == (参数,参数) =>{}
;如果有且仅有一个参数可以省略(); 参数 => {};
如果函数体仅有一句话,而且是return,{}可以省略;
-
默认参数:
function (a,b) {a = a||5}
(a=5,b) => -
参数展开:
** 剩余参数必须在参数最后 **
- 三个点的第一个用途:接收剩余参数
function show(a,...args) { alert(a,args) } show(2,3,4,5,56) => 2,[3,4,56]
- 第二用途:展开一个数组
let arr = [1,2,3,4] ...arr => 1,2,3,4
数组/json
Array.from([array-like]) => 将类数组转为为数组
-
map: 映射
let arr = [1,2,3,4,5]; let arr1 = arr.map(item=>item>3) // 数值大于3的为true arr1 => [false, false, false, true, true]
-
reduce: 汇总
let arr = [1,2,3,4,5]; let sum = arr.reduce((tmp,item,index)=>tmp+item) // 求和 // tmp:临时值,items:当前值,index:下标 // tmp第一次为第一个数值,然后tmp = tmp+item // 平均值 let ave = arr.reduce((tmp,item,index)=>{ if (index < arr.length-1){ return tmp+item } else { return (tmp+item)/arr.length } }) sum => 15 ave => 3
-
filter: 过滤
let arr = [1,2,3,4,5]; let arr1 = arr.filter(item=>item>3); arr1 = > [4,5]
-
forEach: 遍历
let arr = [1,2,3,4,5]; let sum = 0 // 没有返回值,只是过一遍数据 arr.forEach(item=>sum+=item); sum => 15
-
json
- 简写:名字和值一样的,可以省略
- function 可以不写
let a = 1, b = 2; let json1 = {a:a,b:b}; json1 => {a: 1, b: 2} // 简写 let json2 = {a,b} json2 => {a: 1, b: 2}
字符串模板
反斜杠``:植入变量、任意折行 ---- 例子:
这是变量${xxx}
startsWith : 以什么开头 startsWith('xxx',n) n开始位置
endsWith :以什么结尾 endsWith('xxx',n) 前n个字符
includes: 返回布尔值,是否找到参数字符串
repeat: 重复n次
padStart: 补全,省略第二个值默认为空格, padStart(n,'xxx') n表示字符长度
padEnd: 补全 padEnd(n,'xxx') n表示字符长度
matchAll(): 返回正则表达式的所有匹配 (类数组)
Array.from(xxx.matchAll(regex))
[...'xxx'.matchAll(regex)]
面向对象
优点:底层支持、标准
class Person{
constructor (name,age) {
this.name = name;
this.age = age;
}
showName () {
alert(this.name)
}
showAge () {
alert(this.age)
}
}
let person = new Person('张山',16);
person.showName() => 张山
person.showAge() => 16
继承
```javascript
class Person{
constructor (name,age) {
this.name = name;
this.age = age;
}
showName () {
alert(this.name)
}
showAge () {
alert(this.age)
}
}
class Worker extends Person{
constructor(name,age,obj){
super(name,age);
this.obj = obj;
}
showWork(dd=this.obj){
alert(dd)
}
}
let work = new Worker('张山',19,'asdf');
work.showName(); => 张山
work.showAge(); => 16
work.showWork('dasdf') => dasdf
work.showWork() => asdf
```
this指向通过bind()绑定
普通函数: 根据调用者确定this指向 (老变)
箭头函数: 根据所在环境确定this指向 (恒定)
Promise:
优点:解决异步操作
缺点:对逻辑操作麻烦
-
用法:需要在服务器环境下测试
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 第一种 let p = new Promise((resolve, reject)=>{ $.ajax({ url:'1.txt', dataType:'json', success(json){ resolve(json) }, error(err){ reject(err) } }) }) p.then(json=>{ console.log(json) }, err=>{ console.log(err) }) // 第二种使用 // Promise.all([p,p1,p2,p3]).then(arr=>{}); 与操作 Promise.all([ $.ajax({url:'1.txt',dataType:'json'}), $.ajax({url:'2.txt',dataType:'json'}), $.ajax({url:'3.txt',dataType:'json'}), ]).then((arr)=>{ let [a,b,c] = arr; console.log(arr) }) // 第三种使用 // Promise.race([p,p1,p2,p3]).then(arr=>{}); 或操作(不常用) </script>
注意: 测试中的1.txt等文本中的json {"name":66,"obj":"te"}使用双引号
generator函数
-
*号
-
yield -- 暂停
-
obj.next() -- 向下执行
function *show(){ console.log('aaa'); yield; console.log('bbb'); } // show()是一个generator对象 let gen = show(); gen.next(); => aaa gen.next(); => bbb
-
yield:
- 参数:
function *show(){ let a = yield; // a获取的参数为第二次next()传递的值 console.log(a); } // show()是一个generator对象 let gen = show(); gen.next(2); gen.next(3);
- 返回:
function *show(){ console.log('aaa'); yield 55; console.log('bbb'); } // show()是一个generator对象 let gen = show(); let a = gen.next(); // {value: 55, done: false} let b = gen.next(); // {value: 89, done: true}
generator+promise的配合:
-
外来的runner辅助执行 ---- 不统一、不标准、性能低
-
generator函数不能写入(=>) 箭头函数
async/await
async function show(){
try{
let data1 = await $.ajax({url:'1.txt',dataType:'json'});
let data2 = await $.ajax({url:'2.txt',dataType:'json'});
let data3 = await $.ajax({url:'3.txt',dataType:'json'});
console.log(data1,data2,data3)
}catch(e){
console.log(e);
alert('Erro in show')
}
}
show(); // {a: 2, b: 4} {name: 3, age: 12} {name: 66, obj: "te"}
- async函数可以使用箭头函数
- await 后跟异步操作promise、generator、另一个async函数
- 错误处理:使用
try{}catch(e){}
进行处理