你想学的ES6新功能都在这里了
你想学的ES6新功能都在这里了
越陌度阡
发布于 2022-11-27 17:24:33
发布于 2022-11-27 17:24:33
1. 展开操作符
'use strict';
let A = [1, 2, 3, 4];
let B = [0, ...A];
console.log(B);
// [0, 1, 2, 3, 4]2. 剩余操作符
'use strict';
function need(food, drink, ...study) {
console.log(food, drink, study);
}
need('meat', 'milk', 'english', 'programming');
// meat milk ["english", "programming"]3. 块级作用域let
3.1. 作用域问题：内层变量会覆盖外层变量；
var time = new Date();
function fun() {
console.log(time);
if (true) {
// 由于time的声明提前，导致输出时的time找不到外界的time
var time = 'HELLO'
};
};
fun();
// undefined3.2. 作用域问题：计数的循环变量泄露为全局变量；
var string = 'HELLO';
for (var i = 0; i < string.length; i++){
console.log(string[i]);
// H
// E
// L
// L
// O
};
// 循环内的i没释放，外面依然可用
console.log(i);
// 53.3. 作用域问题：内部变量存在变量提升；
var a = [];
for (var i = 0; i < 10; i++) {
var c = i;
a[i] = function () {
console.log(c)
}
};
a[5]();
// 9严格模式下，变量不会被提升。
'use strict';
var b = [];
for (var j = 0; j < 10; j++) {
// d每次进来都是新d,不会与之前的d产生任何关系
let d = j;
b[j] = function () {
console.log(d)
}
};
b[5]();
// 53.4. 作用域问题：内层函数可能会覆盖外层函数；
function fun() {
console.log('I am outside!');
};
(function () {
if (true) {
// 函数声明被提前
function fun() {
console.log('I am inside!');
}
};
fun()
}());
// I am inside! 严格模式下，声明不会被提前，内层函数不会覆盖外层函数。
'use strict';
function fun() {
console.log('I am outside!');
};
(function () {
if (true) {
// 严格模式下，不会被提前
function fun() {
console.log('I am inside!');
}
};
fun();
}());
// I am outside!3.5. 作用域问题：变量会产生全局污染；
for (var i = 0; i < 10; i++) {
i += 1;
}
console.log(i);
// 10使用ES6的 let 则不会出现这种问题：
for (let j = 0; j < 10; j++) {
j += 1;
}
console.log(j);
// j is not defined3.6. 块级作用域：模块内不允许重复声明同一个变量；
{
var b = 300;
let b = 400;
console.log(b);
// 报错
}
{
let c = 500;
let c = 600;
console.log(c);
// 报错
}4. 模板字符串
4.1. 模板字符串内可以写变量；
let dessert = 'cake';
let drink = 'tea';
let breakfast = `今天的早餐是 ${dessert} 与 ${drink} !`;
console.log(breakfast);
// 今天的早餐是 cake 与 tea !4.2. 模板字符串内写运算符；
let name = 'Augus';
let html = `<h1>${name === 'zoe' ? 'ok' : 'no'}</h1>`
console.log(html);
// <h1>no</h1>4.3. 模板字符串内写函数；
function log() {
return 'good'
}
let html = `<h1>${log()}</h1>`
console.log(html);
// <h1>good</h1>5. 带标签的模板
5.1. 案例一
let food = 'cake';
let water = 'tea';
let restaurant = kitchen`今天的早餐是 ${food} 与 ${water} !`;
function kitchen(strings, ...values) {
console.log(strings);
// ["今天的早餐是 ", " 与 ", " !", raw: Array(3)]
console.log(values);
// ["cake", "tea"]
let result = '大家好,';
for (var i = 0; i < values.length; i++) {
result += strings[i];
result += values[i];
}
result += strings[strings.length - 1];
return result;
}
console.log(restaurant);
// 大家好,今天的早餐是 cake 与 tea !5.1. 案例二
// 第一个参数strArr为模板中所有字符串的集合
// 第二个参数及后面的参数为模板中的变量
function tag(strArr, arg1, arg2) {
console.log(strArr);
// ['','','']
console.log(arg1);
// leo
console.log(arg2);
// 30
};
let name = 'leo';
let age = '30';
var result = tag`${name} ${age}`;5.2. 案例三
function safe(strArr) {
let result = '';
for (var i = 0, len = strArr.length; i < len; i++) {
result += strArr[i].replace(/p/g, 'a').replace(/hello/g, '你好');
//去掉结果多余的undefined
if (i < arguments.length - 1) {
result += arguments[i + 1];
}
}
return result;
};
let name = 'Augus';
let result = safe`<p>hello ${name}</p>`;
console.log(result);
// <a>你好 Augus </a>6. 常量const
6.1. 常量一但声明，不可更改；
const a = 10;
a = 11;
console.log(a);
// Assignment to constant variable.6.2. 常量可以声明一个空数组，然后push数组和值进去；
const b = [];
let c = [10, 11, 12];
let d = [20, 21, 22];
b.push(c, d);
console.log(b);
// [[10,11,12],[20,21,22]]7. 函数的name属性
7.1. 函数为匿名时，name为变量；
let lunch = function(argument){}
console.log(lunch.name);
// lunch7.2. 函数为有名时，name属性为函数名；
let dinner = function superDinner(argument) { }
console.log(dinner.name);
// superDinner8. 结构化
function web() {
return ['HTML', 'CSS', 'JS'];
};
let [skill1, skill2, skill3] = web();
console.log(skill1, skill2, skill3);
// HTML CSS JS9. 导入与导出
9.1. 新建一个用于导出的文件a.js；
// a.js
let fruit = 'apple';
let dessert = 'cake';
export { fruit, dessert };
// 可以导出的不仅是变量，还可以导出函数、类或是整个文件9.2. 新建一个文件b.js，并导入a.js；
第一种导入方式：
// b.js
import { fruit, dessert } from './a.js';
console.log(fruit, dessert);
// apple,cake第二种导入方式：
// b.js
import * as chef from './a.js';
console.log(chef.fruit, chef.dessert);
// apple,cake第三种导入方式：
// b.js
import chef from './a.js';
console.log(chef.fruit, chef.dessert);
// apple,cake10. 导入与导出重命名
10.1. 新建一个用于导出的文件a.js；
// a.js
let fruit = 'apple';
let dessert = 'cake';
function dinner(fruit, dessert) {
console.log(`今天的晚餐是 ${fruit} 与 ${dessert} !`);
}
export { fruit, dessert, dinner as supper };
// 可以导出的不仅是变量，还可以导出函数、类或是整个文件10.2. 新建一个文件b.js，并导入a.js；
// b.js;
import { fruit, dessert, supper as lunch } from './a.js';
lunch(fruit, dessert);
// 今天的晚餐是 apple 与 cake !11. 判断字符串
let first = 'word';
let second = 'grammar';
let english = `英语学习第一掌握${first},第二学习${second}!`;
// 判断是否以指定字符串开头
console.log(english.startsWith('英语'));
// true
// 判断是否以指定字符串结尾
console.log(english.endsWith('grammar!'));
// true
// 判断是否包含指定字符串
console.log(english.includes('掌握'));
// true12. 给函数的参数设置默认值
function life(third = 'money', fourth = 'dream') {
return `生活就是${third}与${fourth}`
}
// 不传参数，打印出来的是默认值
console.log(life());
// 生活就是money与dream
console.log(life('rice', 'sleep'));
// 生活就是rice与sleep13. 为函数设置一个对象作为参数
function party(dessert, drink, { location, restaurant } = {}) {
console.log(dessert, drink, location, restaurant);
};
// 对象参数设置为一个空数组时，不传参不会报错
party('cake', 'tea', { location: '深圳', restaurant: '左湘右邻' });
// cake tea 深圳 左湘右邻14. 箭头函数
14.1. 简头函数的写法；
普通函数的写法：
// 普通函数
var cup = function(tea) {
return tea;
}箭头函数的写法：
// 箭头函数
let cup = tea => tea;箭头函数中一个参数可以省略()，箭头函数中默认的有返回功能，不用return。
14.2. 箭头函数有多个参数时要加上小括号；
let cup = (tea, milk) => tea + milk;方法语句中只有一行可以省略{ }；
14.3. 需要对结果处理时加上大括号；
let cup = (tea, milk) => {
return `渴了你可以喝${tea}与${milk}`
};14.4. 在箭头函数中不能正常的使用arguments;
// 正常函数
var func=function(){
console.log(arguments);
};
func(12);
// 12箭头函数中的arguments会报错：
var func=()=>{
console.log(arguments)
};
func(12);
// arguments is not defined14.5 .在function中this是可变的，在箭头函数中是不可变的;
14.6. 箭头函数定义的方法不能作为构造函数，也就是不能用new ;
15. 用方括号添加带空格的属性
正常添加一个属性：
let weekend = {};
weekend.lunch = 'bread';
console.log(weekend);
// {lunch: "bread"}如果要添加的属性中包含空格，需要通过[ ]去添加。
let monday = {};
monday['hot drink'] = 'soup';
console.log(monday);
// {hot drink: "soup"}16. 定义类class
16.1. 在ES5中类的实现方法；
function User(name, age) {
this.name = name;
this.age = age;
};
// 静态方法
User.getClassName = function () {
return 'User';
};
// 原型对象上添加公共方法
User.prototype.changeName = function (name) {
this.name = name;
};
// 原型对象上添加公共方法
User.prototype.changeAge = function (age) {
this.age = age;
};
// 添加取值函数和存值函数
Object.defineProperty(User.prototype, 'info', {
get() {
return 'name:' + this.name + ' | age:' + this.age;
}
});
var user = new User('leo', 22);
console.log(user);
// {name:'leo',age:22} 在ES5中添加一个子类：
// 添加子类
function Manager(name, age, password) {
User.call(this, name, age);
this.password = password;
}
// 继承静态方法
Manager.__proto__ = User;
// 继承原型方法
Manager.prototype = User.prototype;
// 添加新方法
Manager.prototype.changePassword = function (password) {
this.password = password;
}
var manager = new Manager('leo', 22, '123');
manager.changeName('Augus');
console.log(manager.info);
// name:Augus | age:2216.2. 在ES6中类的实现方法；
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
static getClassName() {
return 'User';
}
changeName(name) {
this.name = name;
}
changeAge(age) {
this.age = age;
}
get info() {
return 'name:' + this.name + ' | age:' + this.age;
}
}在ES6中继承一个子类：
// 子类继承
class Manager extends User {
constructor(name, age, password) {
// 第一行必须要写super,因为首先要创建父类的对象
super(name, age);
this.password = password;
}
changePassword(password) {
this.password = password;
}
get info() {
var info = super.info;
console.log(info);
//name:Augus | age:22
return info + '--New';
}
}
var manager = new Manager('leo', 22, '123');
manager.changeName('Augus');
console.log(manager.info);
// name:Augus | age:22 --new在ES6中继承一个子类：
// 子类继承
class I extends User {
// 自动加入默认constructor
constructor(...arg) {
super(...arg)
}
};
var me = new I('leo', 28);
console.log(me);
// {name:'leo',age:28}16.3. ES6中立即执行的类；
let user = new class User {
constructor(name) {
this.name = name;
}
}('Augus');
console.log(user);
// {name:'Augus'}16.4. 类不能被提升；
var user = new User();
console.log(user);
// Uncaught ReferenceError: Cannot access 'User' before initialization
class User {
constructor(name) {
this.name = name;
}
};17. 类中的获取与投置
class chef {
constructor(food) {
this.food = food;
this.dish = [];
}
// 获取
get menu() {
return this.dish;
}
// 设置
set menu(dish) {
this.dish.push(dish);
}
cook() {
console.log(this.food);
}
};
let zoe = new chef();
console.log(zoe.menu = 'vegetable');
// vegetable
console.log(zoe.menu = 'fruit');
// fruit
console.log(zoe.menu);
// ["vegetable", "fruit"]18. 给类添加静态的方法
class chef {
constructor(food) {
this.food = food;
this.dish = [];
}
get menu() {
return this.dish;
}
set menu(dish) {
this.dish.push(dish);
}
// 添加cook成静态的方法
static cook(food) {
console.log(food);
}
}
// 不需要实例化对象就可以使用
chef.cook('orange');
// orange19. 类的继承
class Person {
constructor(name, birthday) {
this.name = name;
this.birthday = birthday;
}
info() {
return `${this.name},${this.birthday}`;
}
}
class worker extends Person {
constructor(name, birthday) {
// 使用super调用父类里面的东西
super(name, birthday);
}
}
let grice = new worker('grice', '1987-07-25');
console.log(grice.info());20. 对象字面量中的简写
let a = 100, b = 200;
let num = {
a,
// 直接加上属性，不需要写成a:a,
b,
// 直接加上属性，不需要写成b:b,
c() { }
// 直接简写,不需要写成c:function(){},
}
console.log(num);
// {a: 100, b: 200, c: ƒ}21. 判断对象是否相等
console.log(+0 == -0);
// true
console.log(+0 === -0);
// true
console.log(NaN == NaN);
// false在ES5中，上面的判断会很奇怪，以下是ES6使用Object.is判断两个对象的方法：
console.log(Object.is(+0, -0));
// false
console.log(Object.is(NaN, NaN));
// true22. 将一个对象的属性复制到另一个对象里面
let container = {};
Object.assign(
// 复制的目标地址
container,
// 复制源地址及属性
{ drink: 'beer' },
// 第二次复制的会覆盖第一次复制的
{ drink: 'water' }
);
console.log(container);
// {drink: "water"}23. 创建对象以后改变对象的prototype
let tuesday = {
getDrink() {
return 'tea';
}
};
let wendsday = {
getDrink() {
return 'water';
}
};
// 使用Object.create创建一个基于tuesday的对象
let thursday = Object.create(tuesday);
console.log(thursday.getDrink());
// tea
console.log(Object.getPrototypeOf(thursday) === tuesday);
// true
// 设置对象的原型类型
Object.setPrototypeOf(thursday, wendsday);
console.log(thursday.getDrink());
// water
console.log(Object.getPrototypeOf(thursday) === wendsday);
// true24. 得到和设置对象里面的prototype
let friday = {
getFood() {
return 'noodles';
}
};
let saturday = {
getFood() {
return 'pasta';
}
};
let sunday = {
__proto__: friday
};
console.log(sunday.getFood());
// noodles
console.log(Object.getPrototypeOf(sunday) === friday);
// rue
sunday.__proto__ = saturday;
console.log(sunday.getFood());
// pasta
console.log(Object.getPrototypeOf(sunday) === saturday);
// true25. 调用和修改父类型的方法
let one = {
getScore() {
return '20';
}
};
let two = {
getScore() {
return '30';
}
};
let three = {
__proto__: one,
getScore() {
return parseInt(super.getScore()) + 50;
}
};
console.log(three.getScore());
// 7026. Iterator迭代器
function chef(foods) {
let i = 0;
return {
// 特定方法
next() {
// 表示是否完成跌代，完成为true,否则为false
let done = (i >= foods.length);
// 表示返回来的值,每次执行完索引号加1
let value = !done ? foods[i++] : undefined;
return {
value: value,
done: done
}
}
}
};
let coco = chef(['tomatoes', 'egg']);
console.log(coco.next());
// {value: "tomatoes", done: false}
console.log(coco.next());
// {value: "egg", done: false}
console.log(coco.next());
// {value: undefined, done: true}27. 生成迭代器
let student = function* (foods) {
for (let i = 0; i < foods.length; i++) {
yield foods[i];
}
};
let john = student(['rice', 'soup']);
// next()为特定方法
console.log(john.next());
// {value: "rice", done: false}
console.log(john.next());
// {value: "soup", done: false}
console.log(john.next());
// {value: undefined, done: true}28. 有序列表集合set
28.1. set会将其内容打散成字母，并去掉重复字母；
let desserts = new Set('12 ab 12');
console.log(desserts);
// {"1", "2", " ", "a", "b"}28.2. 给集合中添加元素；
let desserts = new Set('12 ab 12');
desserts.add('34').add('45')
console.log(desserts);
// {"1", "2", " ", "a", "b","34","45"}值得注意的是，NaN不等于NaN ，但是在添加的时候会认为相等。
let desserts = new Set('12 ab 12');
desserts.add('34').add('45')
console.log(NaN === NaN);
// false
desserts.add(NaN).add(NaN).add(NaN);
console.log(desserts);
// {"1", "2", " ", "a", "b","34","45","NaN"}28.3. 判断集合的长度；
let desserts = new Set('12 ab 12');
desserts.add('34').add('45')
console.log(desserts);
// {"1", "2", "", "a", "b","34","45"}
// 获取length
console.log(desserts.size);
// 728.4. 判断集合中是否存在；
let desserts = new Set('12 ab 12');
desserts.add('34').add('45');
console.log(desserts.has('34'));
// true28.5. 删除集合中的某个元素；
let desserts = new Set('12 ab 12');
desserts.add('34').add('45');
desserts.delete('34');
console.log(desserts);
// {"1", "2", " ", "a", "b","45"}28.6. 循环集合；
let desserts = new Set('12 ab 12');
// 循环
desserts.forEach(desserts => {
console.log(desserts);
// 1
// 2
//
// a
// b
});28.7. 清除集合；
let desserts = new Set('12 ab 12');
console.log(desserts);
// {"1", "2", " ", "a", "b"}
// 清除
desserts.clear();
console.log(desserts);
// {}28.8. 用set给数组去重；
let arr = ['Augus', 'Augus', 'zoe'];
let newArr = Array.from(new Set(arr));
console.log(newArr);
// ['Augus','zoe']
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values);
// true;28.9. set中的value和key是一样的；
let set = new Set(['961601634', 'Augus', '越陌度阡']);
// 正常遍历
for (let v of set) {
console.log(v);
// 961601634
// Augus
// 越陌度阡
};
//
let key = set.keys();
for (let k of key) {
console.log(k);
// 961601634
// Augus
// 越陌度阡
};
let value = set.values()
for (let v of value) {
console.log(v);
// 961601634
// Augus
// 越陌度阡
};
let entrie= set.entries();
for (let o of entrie) {
console.log(o);
// ['961601634','961601634']
// ['Augus','Augus']
// ['越陌度阡','越陌度阡']
}29. 组织对象map
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
// 设置的属性值可以是任意的，NaN也可以
console.log(foods);
// {Object => "banana", function () { } => "knife" "面包" => "bread"};也可以这样直接声明：
let map = new Map([
['name', 'leo'],
['qq', '961601634']
]);
console.log(map);
// {'name=>'leo','qq'=>'961601634'}29.1. 获取Map对象长度大小；
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
console.log(foods.size);
// 229.2. Map对象中获取指定属性的值；
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
console.log(foods.get(fruit));
// banana29.3. Map对象中删除一个属性；
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
// 删除
foods.delete(main);
console.log(foods);
// {{Object => "banana"} {function () { } => "knife"}}29.4. 判断Map对象中是否存在某个属性；
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
console.log(foods.has(main));
// true29.5. 循环Map对象；
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
// 循环
foods.forEach((value, key) => {
console.log(`${key}=${value}`);
// [object Object]=banana
// function(){}=knife
// 面包=bread
})29.6. Map对象清除；
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
// 清除
foods.clear();
console.log(foods);
// {}29.7. 与Set不同，Map中的value和key是不一样的；
let map = new Map([
['name', 'leo'],
['qq', '961601634']
]);
let keys = map.keys();
for (let k of keys) {
console.log(k);
// name
// qq
}
let values = map.values();
for (let v of values) {
console.log(v);
// leo
// 961601634
}
let entries = map.entries();
for (let o of entries) {
console.log(o);
// ['name','leo'],
// ['qq','961601634']
}29.8. Set集合与Map对象中跌代器的一些区别；
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values);
// true;
console.log(Map.prototype[Symbol.iterator] === Map.prototype.values);
// false;
console.log(Map.prototype[Symbol.iterator] === Map.prototype.entries);
// true;29.9. Map对象遍历的特殊用法，绑定一个变量；
let map = new Map([
['name', 'leo'],
['qq', '961601634']
]);
var me = {
name: 'liang'
};
// 遍历的特殊用法，绑定一个变量
map.forEach(function(k,v) {
console.log(this.name,k,v)
// liang leo name
// liang 961601634 qq
}, me);31. Ajax请求转换图片二进制
var url = "https://pics3.baidu.com/feed/5243fbf2b2119313ca6bee282c5c72dd90238de8.jpeg";
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
};
};
xhr.send();32. 异步函数promise
32.1. 常规的异步函数回调写法；
function asyncFun(a, b, callback) {
setTimeout(function () {
callback(a + b);
}, 200);
}
// callback 对应function, a+b对应result
asyncFun(1, 2, function (result) {
if (result > 2) {
asyncFun(result, 2, function (result) {
if (result > 4) {
asyncFun(result, 2, function (result) {
console.log('OK')
});
}
});
}
});以上代码会产生思维断点，也不优雅，以下为运用promise的写法。
32.2. 用Promise来写异步函数；
// resolve 在计算过程中有了结果调用它,并把结果传给它;
// reject 表示异常处理函数;
function asyncFun(a, b) {
return new Promise(function (resolve, reject) {
if (typeof a != 'number' || typeof b != 'number') {
reject(new Error('no number'));
};
setTimeout(function(){
resolve(a + b);
}, 200);
})
};
// then中的回调函数接收resolve中的结果
// function(err){}代表上面代码中的reject,接收错误处理
// 当function(err){}里面捕获到错误了，catch里面就不会被运行了
asyncFun(1, 2).then(function (result) {
if (result > 2) {
return asyncFun(result, 2);
};
}, function (err) {
console.log('first-', err)
}).then(function (result) {
if (result > 4) {
console.log('OK')
}
}).catch(function (error) {
// 通过catch获取异常
console.log('second-', err);
});32.3. 异步函数案例一
首先实现一个异步函数：
function asyncFun(a, b, time) {
return new Promise(function (resolve, reject) {
if (typeof a != 'number' || typeof b != 'number') {
// 异常处理
reject(new Error('no number'));
}
setTimeout(function () {
resolve(a + b);
}, time)
});
};实现一个链式调用：
var resultList=[];
asyncFun(1,2).then(function(result){
resultList.push(result);
console.log(resultList);
// [3]
return asyncFun(2,3);
}).then (function(result){
resultList.push(result);
console.log(resultList);
// [3, 5]
});上面的链式调用可以有一种更优雅的写法，用Promise中的all代替。
var promise = Promise.all([asyncFun(1, 2, 20), asyncFun(2, 3, 30)]);
promise.then(function (result) {
// console.log(result);
// [3,5]
});Promise中的race可对执行结果进行时间排序，得出第一个执行完的结果。
var promise = Promise.race([asyncFun(1, 2, 10), asyncFun(2, 3, 30)]);
promise.then(function (result) {
// 第一个的时间最短为10毫秒
console.log(result);
// 5
});需要注意的是：Promise中的race执行时，如果某一个结果有错，都会停止运算，抛出错误。
var promise = Promise.race([asyncFun('a', 2, 200), asyncFun(2, 3, 30)]);
promise.then(function (result) {
console.log(result);
}).catch(err => {
console.log(err);
//[Error:no number]
});32.4. 异步函数案例二
封装一个校验用户的类：
class User {
constructor(name, password) {
this.name = name;
this.password = password;
}
validateName(cb) {
let name = this.name;
return new Promise(function (resolve, reject) {
// 模拟异步
setTimeout(function () {
if (name == 'admin') {
resolve('success');
} else {
reject('error');
}
});
});
}
validatePassword(cb) {
let password = this.password;
return new Promise(function (resolve, reject) {
// 模拟异步
setTimeout(function () {
if (password == '123456') {
resolve('success');
} else {
reject('error');
}
});
});
}
};调用封装的类对用户进行校验。
const user = new User('admin', '123456');
user.validateName().then(function (result) {
if(result=="用户名正确"){
// 执行密码验证
return user.validatePassword();
}
}).then(function(result){
if(result=="密码正确"){
alert("校验通过");
};
}).catch(function (error) {
alert(error);
// 用户名错误
// 密码错误
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-07-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录