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