1.箭头函数
function 名字(){}() => {}
1. 如果只有一个参数， （）可以省略
2. 如果只有一个return，return可以省略
let show = function (a){return a*2;}---------let show =(a)=> {return a*2;}-----省略圆括号------let show = a => {return a*2;}-----省略return------let show = a => a*2;
2.函数的参数(test01)
1. 参数展开/扩展
1.1 收集参数
function show(a,b){alert(a);alert(b);}此时，如果我调用show传入的参数不止两个的时候，其实参数只传入了前两个show(12, 15, 8, 9)只弹出12，15-----------------es6新写法：function show(a,b,...args){alert(a);alert(b);alert(args);}show(12,15,8,9,20);此时，先弹出12，接着弹出15，然后弹出8，9，20. args是一个数组
1.2 展开数组(test02)
展开后的效果就跟直接把数组的内容写在这里一样
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1, ...arr2];
alert(arr);
// 输出结果： 1,2,3,4,5,6
2. 默认参数(test03)
function show(a, b = 5, c = 12) {
console.log(a, b, c);
}
show(1); // 运行结果：1 5 12
show(12,14,13); // 运行结果： 12 14 13
3. 解构赋值()
原来：
let arr = [1,2,3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
这样写很麻烦。
左右两边结构必须一样
左右必须是个东西
声明和赋值必须不能分开（必须在一句话里完成）
数组：
let [a,b,c] = [1,2,3];
console.log(a,b,c);
json也支持：
let {a,b,c} = {a:12, b:5, c:22}
4. 数组
多了4个方法：
4.1 map—->映射（一个对一个）
1. 例子
eg1：
成绩 [12,58,99,45]
可以映射成 [不及格, 不及格, 及格, 不及格]
eg2：
用户id[45,57,135]
映射：[
{name:'zhang1', age: 22, sex: 1},
{name:'zhang2', age: 22, sex: 1},
{name:'zhang3', age: 22, sex: 1},
]
2. 用法(test04)
let arr = [12,5,8];
eg1：
let result = arr.map(function(item){
return item*2;
});
alert(result); // 运行结果：24，5，8
当然可以写成箭头函数
let result2 = arr.map(item => item *2);
alert(result2);
eg2:
let score = [19,86,22,65,70];
let result3 = score.map(item => item >=60? '及格':'不及格');
console.log(result3) //结果：["不及格", "及格", "不及格", "及格", "及格"]
4.2reduce—->汇总
用法（test05）
let arr = [12,69,180,8763];
arr.reduce(function(计算的中间值,每次在数组中取得值, •下标){})
- 算出总数
let arr = [12,69,180,8763];
arr.reduce(function(tmp, item, index){
return tmp + item;
})
- 算平均数(test06)
let arr = [12,69,180,8763];
let res = arr.reduce(function(tmp, item, index){
if (index != arr.length -1){
return tmp + item;
}else{
return (tmp + item)/arr.length;
}
})
alert(res); // 2256
4.3 filter—->过滤器(test07,test08)
(存一部分留一部分)filter通过返回true或者false来决定存不存
// 选出能被三整除的数
let arr = [12, 69, 180, 99,43,332,15];
let res = arr.filter(item => {
if (item % 3 == 0) {
return true;
} else {
return false;
}
})
alert(res); //运行结果：12,69,180,99,15
最简单的写法
let res = arr.filter(item => item %3 == 0)
4.4 forEach—->循环（test09）
// 选出能被三整除的数
let arr = [12, 69, 180, 99,43,332,15];
arr.forEach(item => {
alert(item)
})
5. 字符串
5.1 多了两个新方法
startWith()
以某个字符串开头，返回一个布尔值
endWith()
以某个字符串结尾，返回布尔值
5.2 字符串模板
利用反单引号
let a = 12;
let str = `a${a}bc`;
6. 面向对象
6.1 对象基础（test10）
多了class关键字，构造器和类分开了
class里面直接加方法
class User{
//构造器
constructor(name, pass){
this.name = name;
this.pass = pass;
}
// 方法
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
var u1 = new User('blue', '1233444');
u1.showName();
u1.showPass();
6.2 继承
class User {
//构造器
constructor(name, pass) {
this.name = name;
this.pass = pass;
}
// 方法
showName() {
alert(this.name);
}
showPass() {
alert(this.pass);
}
}
class VipUser extends User{
constructor(name, pass, level){
//继承父类的
super(name, pass);
this.level = level;
}
showLevel(){
alert(this.level);
}
}
var v1 = new VipUser('blue', '123456',3);
v1.showName();
v1.showPass();
v1.showLevel();
7. JSON
7.1 JSON对象(test12)
json标准写法：key只能用双引号，所有的名字都必须使用引号包起来
- 把json变为字符串
JSON.stringify(json)
- 把字符串变为json
JSON.parse(str)
7.2 简写(test13)
let a = 12;
let b = 5;
let json = {a,b,c:55};
console.log(json);
let json2 = {
a: 12,
// show: function(){
// alert(this.a);
// }
//可以简写为：
show(){
alert(this.a);
}
}
console.log(json2);
json2.show();
8. Promise (承诺)
8.1 背景
处理回调地狱
异步：操作之间没啥关系，同时进行多个操作。 但是代码复杂同步：同时只能做一件事。代码简单
8.2 promise—- 消除异步操作
- 用同步一样的方式，来书写异步代码
8.3 怎么用？
1.原始的
/**
* resolve -- 成功
* reject -- 失败
*/
let p = Promise(function (resolve, reject) {
// 异步代码
});
// then 接收两个参数，也是两个方法，第一个表示成功，第二个表示失败
p.then(function () {
alert('成功');
},
function () {
alert('失败');
});
2. jquery 封装的 （test15）
// Jquery底层封装了Promise，当为异步请求时，对象就是Promise对象
// 当有多个异步请求时
Promise.all([
$.ajax({url:'url1', dataType:'json'}),
$.ajax({url:'url2', dataType:'json'}),
]).then(
//两个异步请求都成功
function(results){
//有几个异步请求，results里面就有几个值
let [data1, data2] = results;
alert('成功了');
},
// 至少有一个异步请求失败
function(err){
alert('失败了');
});
// 简写：
Promise.all([$.ajax(),$.ajax()].then(results => {对了} , err =>{错了}))
3. 其他用法
Promise.race 同时发送请求，谁先完成用谁
9. generator —> 生成器
generator 是一个特殊的函数（test16）
- 普通函数： 一路执行到底
function show(){
alert('a');
alert('b');
}
show();
先弹出a，接着弹出b
- generator：中间可以停下来
function *show() {
alert('a');
yield; // 想要在哪里停，就在哪加yield。
alert('b');
}
let genObj = show(); // 返回的是一个generator对象
genObj.next(); // 弹出a
genObj.next(); // 弹出b
10. yield
yield 会将在写yield的地方将大函数分为两个小函数，第一次next执行的是yield之前的部分，第二次执行的是yield之后的部分。
1. yield可以传参
yield第一次传参是不管用的，如果想要第一次传参，就函数正常的传参方式
function* show() {
alert('a');
// 用变量接收传递的参数
let a = yield;
alert('b');
alert(a);
}
let genObj = show();
genObj.next(); // 弹出a
// 给yield传递参数
genObj.next(5); // 弹出b,弹出5
2.yield可以返回东西
上一步的操作结果作为下一步的输入
function *炒菜(菜市场买回来){
洗菜 -> 洗好的菜
let 干净的菜 = yield 喜好的菜;
干净的菜 -> 切 -> 丝;
let 切好的菜 = yield 丝;
切好的菜 -> 炒 -> 熟的菜;
return 熟的菜：
}
function* show() {
alert('a');
let b = yield 12;
alert(b);
return 55;
}
let gen = show();
let res1 = gen.next();
console.log(res1); // {value:12, done:false}
let res2 = gen.next();
console.log(res2); // {value:55, done:true}
11. 异步操作的比较
1. 回调
$.ajax(
url:xxx,
dataType: 'json',
success(data1){
$.ajax(
url:xxx,
dataType: 'json',
success(data2){
$.ajax(
...
)
}
error(){
// 失败
}
)
}
error(){
// 失败
}
)
2. Promise
适合一次读一堆
Promise.all([
$.ajax({url: xxx, dataType: 'json'}),
$.ajax({url: xxx, dataType: 'json'}),
$.ajax({url: xxx, dataType: 'json'})
]).then(results => {
// 成功
},err => {
// 失败
})
3. generator
适合在读的过程中夹杂着逻辑判断然后在读取其他数据
runnner(function *(){
let data1 = yield $.ajax({url: xxx, dataType: 'json'});
let data1 = yield $.ajax({url: xxx, dataType: 'json'});
let data1 = yield $.ajax({url: xxx, dataType: 'json'});
// 完事
})
12. es7/es8
1. 数组
新增方法 includes
- 检查数组是否包含某个东西
| | 数组 | json | | —- | —- | —- | | for…in | 循环下标key | key | | for…of | 循环值value | 不能用于json |
3. async await
写法：
// async函数默认返回一个Promise对象
async function readData(){
let data1 = await $.ajax({url: xxx, dataType: 'json'});
let data2 = await $.ajax({url: xxx, dataType: 'json'});
let data3 = await $.ajax({url: xxx, dataType: 'json'});
console.log(data1, data2, data3)
}
readData()
之前的写法：
runnner(function *readdData(){
let data1 = yield $.ajax({url: xxx, dataType: 'json'});
let data1 = yield $.ajax({url: xxx, dataType: 'json'});
let data1 = yield $.ajax({url: xxx, dataType: 'json'});
// 完事
})
enerator 不能写成箭头函数，而async是可以的
let readData = async () => {
let data1 = await $.ajax({url: xxx, dataType: 'json'});
let data2 = await $.ajax({url: xxx, dataType: 'json'});
let data3 = await $.ajax({url: xxx, dataType: 'json'});
console.log(data1, data2, data3)
}
readData();
async await优点：
不依赖于外部的runner， 标准统一，性能升高
可以使用箭头函数
let p = new Promise((resolve, reject) => {
//reject('sorry');
resolve('执行');
});
async function getA() {
// await 后面是一个Promise实例，如果不是也会默认转为Promise。
// 直接让Promise实例的回调执行，返回执行时的参数
// await 是一个语法糖，不用通过then就可以拿到resolve或者reject的参数
let res = await p;
// 等await 后面的异步完成之后再去执行后面的代码
// console.log('a');
return res;
}
// 成功
getA().then(
(res) => {
console.log(res);
})
// 失败
getA().catch((e) => {
console.log(e);
})
回调函数获取异步加载数据
1. 使用回调函数
// 使用回调函数
function getData(callback) {
//$.ajax
setTimeout(function () {
var name = 'zhangsan';
callback(name);
}, 1000);
}
// 外部获取异步方法里面的数据
getData(function (data) {
console.log(data);
})
2. 使用Promise来处理
/**
* Promise来处理异步
* resolve 成功的回调函数
* reject 失败的回调函数
*/
var p = new Promise(function(resolve, reject){
// $.ajax
setTimeout(() => {
var name = '张三';
resolve(name);
}, 1000);
})
p.then((data)=>{
console.log(data);
})
3. async 和 await
asybc 是“异步”的简写，而await可认为是async wait的简写，async用于申明一个 function 是异步的，而await 用于等待一个异步方法执行完成
简单理解：
async 是让方法变为异步
await是等待异步方法执行完成
// 普通方法
function getData1(){
return '这是一个数据';
}
console.log(getData1()); // 这是一个数据
-------------------------------------------------------------
// async定义方法
async function getData2(){
return '这是一个数据';
}
console.log(getData2()); // Promise { '这是一个数据' }
---------------------------------------------------------------
// 获取 async 异步方法里面的数据
async function getData2(){
return '这是一个数据';
}
async function test(){
var d = await getData2();
console.log(d);
}
test(); // 这是一个数据
若有收获，就点个赞吧
0 人点赞
