js学习小计
学习自赖雪峰大佬 https://es6.ruanyifeng.com/#README
弹出对话框询问
var answer = confirm("准备好了吗")
点击确定answer为true 取消则为false
延迟触发(前面放方法，后面放要延迟的时间)
setTimeout(fun,4000)
定义变量
let 是在代码块内有效作用域是块作用域在 { } 里面，var 是在函数内有效 const 是定义的常量是块作用域在 { } 里面
解构赋值
数组
let [foo, [[bar], baz]] = [, [[2], 3]];
foo // undefined
bar // 2
baz // 3
对象
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { first: f, last: l } = { first: 'hello', last: 'world' };
f // 'hello'
l // 'world'
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line，column }} } = node;
line // 1
column // 5
loc // Object {start: Object}
start // Object {line: 1, column: 5}
赋默认值
// 默认值生效的条件是，对象的属性值严格等于undefined
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x: y = 3} = {};
y // 3
var {x: y = 3} = {x: 5};
y // 5
// 属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
map+解构赋值
[1, undefined, 3].map((x = 'yes') => x*2);
// [ 1, 'yes', 3 ]
// x='yes'是赋予初始值如果为undifined的时候
// map是将前面的数组进行循环并执行括号里的方法
模板字符串
let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`)
// 输出 Hello Bob, how are you today?
字符串判断是否存在
.startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
.endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
.includes()：返回布尔值，表示是否找到了参数字符串。
复制字符串
'123'.repeat('3') // 123123123
'na'.repeat(2.9) // "nana"
'na'.repeat(0) // ""
'na'.repeat(NaN) // ""
清除空格
str.trim() // 清除内容内所有的空格
str.trimStart() // 清除内容头部所有的空格
str.trimEnd() // 清除内容尾部所有的空格
Math.cbrt()方法用于计算一个数的立方根。
遍历数组
var youList = [2,55,33,11]
for(var item of youList ){
console.log(item)
// 输出 2 55 33 11
}
for(var item in youList ){
console.log(item)
// 输出 0 1 2 3
console.log(youList[item])
// 输出 2 55 33 11
}
for(var [index,elem] of youList.entries()){
console.log(index, elem);
// 0 2
// 1 55
// 2 33
// 3 11
}
判断数组中是否有该元素
[1,2,3,4,5].includes(1) // true
// 返回的是布尔值 还可以判断NaN
将嵌套的数组拉平
如果原数组有空位，flat()方法会跳过空位。
方法内填写2的时候值拉平2层
var a = [1,[2,3],[3,4,5,[5,6,7,[66]]]]
console.log(a.flat(Infinity))
// [1, 2, 3, 3, 4, 5, 5, 6, 7, 66]
链判断运算符（判断对象中的对象）
由于是2020新出的，会有部分浏览器不适用，不建议使用
let message = {
body:{
user:{
firstName :'pan'
}
}
}
const firstName = message?.body?.user?.firstName || undefined
// firstName pan
// 如果message 或者 下一层如果不存在 firstName = undefined
合并对象（浅拷贝）
修改 firstName.body 会修改 message.body
let message = {
body:{
user:'pan'
}
}
let firstName = Object.assign({},message,{a:2})
{
a:2,
body:{
user:"pan"
}
}
对象的深拷贝(可对合并对象操作)
let message = new Map(Object.entries(message));
message = Object.fromEntries(message);
对象的遍历
从obj中取出values，keys，entries
let message = {a:1,b:2,c:3}
for(let key of keys(message )){
console.log(key)
// a b c
}
for(let value of values(message )){
console.log(value)
// 1 2 3
}
for(let entrie of entries(message )){
console.log(entrie)
// ["a",1] ["b",2] ["c",3]
}
Promise对象（用于执行异步操作）
有三种状态 pending（进行中）、fulfilled（已成功）和rejected（已失败）
该对象是不可逆结果固定的对象
const p1 = new Promise(function (resolve,reject){
if(a == 2){
setTimeout(() => {resolve(a+3);},2000)
}else{
setTimeout(() => {reject(a+40);},2000)
}
})
resolve 方法是返回 fulfilled 可以用 .then获取
reject 方法是返回 rejected 可以用 .catch获取
var a = 2
p1
.then(result => {console.log(result)}) // 如果没有下面的修改 在2秒后输出 5
.catch(err => console.log(err)) // 在2秒后输出 50
a = 10
p1
.then(result => {console.log(result)})
.catch(err => console.log(err)) // 在2秒后输出 50
用于执行方法调用前面方法的返回值
let pro = new Promise(function(resolve,reject){
if(true){
//调用操作成功方法
resolve('操作成功');
}else{
//调用操作异常方法
reject('操作异常');
}
});
//用then处理操作成功，catch处理操作异常
pro.then(requestA)
.then(requestB)
.then(requestC)
.catch(requestError);
function requestA(){
console.log('请求A成功');
return '请求B，下一个就是你了';
}
function requestB(res){
console.log('上一步的结果：'+res);
console.log('请求B成功');
return '请求C，下一个就是你了';
}
function requestC(res){
console.log('上一步的结果：'+res);
console.log('请求C成功');
}
function requestError(){
console.log('请求失败');
}
//打印结果：
//请求A成功
//上一步的结果：请求B，下一个就是你了
//请求B成功
//上一步的结果：请求C，下一个就是你了
//请求C成功
Promise的 all()方法
会将返回值放进数组
会等待所有的异步结束才会返回
var flag = false
let pro1 = new Promise(function(resolve){
setTimeout(function () {
resolve('实例1操作成功');
},1000);
});
let pro2 = new Promise(function(resolve,reject){
if(flag){
setTimeout(function () {
reject('实例2操作失败');
},5000);
}else{
setTimeout(function () {
resolve('实例2操作成功');
},1000);
}
});
Promise.all([pro1,pro2])
.then(result => {
console.log(result);
})
.catch(err => {
console.log(err);
})
// 如果flag为 true 会在5秒后输出 "实例2操作失败"
// 如果flag为 false 会在1秒后输出 ["实例1操作成功", "实例2操作成功"]
Generator函数
Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
let hg = helloWorldGenerator()
要让hg执行下去使用.next 会以{ value: ‘hello’, done: false }形式返回 当执行的 return 的时候 done 会变成 true
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
Generator用来做开关锁
每执行一遍 g.next() 就会执行一遍yield 会记录执行
let g = function* generator() {
while (true) {
console.log('Tick!');
yield;
console.log('Tock!');
yield;
}
}
语法糖 await 和 async
await是等待这一步完成后, 获得结果, 才能执行下一步
async用于修饰函数, 如果函数内部出现了await关键词,函数前面必须添加async, 这是语法
await 后面必须跟 Promise 对象
类Class
class a{
doit(){
console.log('111')
}
static doit(){
console.log('222')
}
get prop() {
console.log('getter: '+this.pro)
return this.pro;
}
set prop(value) {
this.pro = value
console.log('setter: '+value);
}
}
类的 get 属性可以在调用的时候触发
类的 set 属性可以再赋值的时候触发
类的 static 属性是当对本类调用才取得到
不用 static 的方法要用实例对象调用
var aa = new a()
aa.doit() // 111
aa.prop = 123 // setting: 123
a.doit() // 222
aa.prop // getter: 123