let 和const
//let 用于定义变量
//let a = 10;
//let和var的区别
//1.let不能重复声明
/* let a = 10;
//let a = 20; //直接报错
a = 20; */
//2. let没有声明提升
/* console.log(a); //知道有a在,但是不让用,这种情况称为TDZ(暂时性死区)
let a = 20; */
//3. let声明的变量具有块级作用域
/* {
let a = 10;
var b = 20;
}
console.log(b);
console.log(a); //报错,a是局部变量 */
/* if (true) {
let a = 10;
}
console.log(a); */
//点击li,添加类名
//let aList = document.querySelectorAll("li");
/* for (let i = 0; i < aList.length; i++) {
aList[i].onclick = function () {
//this.className = "test";
console.log(i);
aList[i].className = "test";
};
}
console.log(i); //i是一个局部变量 */
/* {
let i = 0;
aList[i].onclick = function () {
aList[i].className = "test";
};
}
{
let i = 1;
} */
//4.let声明的变量不作为window的属性
/* var a = 10;
let b = 20;
console.log(window.a, window.b); //10 undefined */
//const 用于定义常量
//const a ; //报错,常量需要初始化(必须赋值)
//const a = 10;
//a = 20; //报错,不能重新赋值
const obj = { a: 1, b: 2 };
obj.a = 10;
obj.b = 20;
console.log(obj); //不会报错,obj存的值(地址)并没有改变
箭头函数
箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方,都可以使用箭头函数
需要注意的是箭头函数没有this指向 ,没有arguments
模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
解构赋值
//是一种灵活的取值方式,便于提取数组或者对象里面的值,对变量进行赋值
//有一定对应关系的
//数组的解构
let arr = [1, 2, 3];
//let [a, b, c] = arr;
let [a, b, c] = [10, 20, 30];
console.log(a, b, c);
//let [a, b = 1] = [10]; //b有一个默认值,没有重新赋值的情况下,取默认值
let [a, b = 1] = [10, 20]; //
console.log(a, b);
let a;
let [b = 1] = [a]; //b有一个默认值,重新赋值赋的是undefined,取默认值
console.log(b);
//交换两个变量的值
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);
//对象的解构
let { a, b } = { a: 1, b: 2 };
console.log(a, b);
let { a: b } = { a: 111 };
console.log(a); //a不是一个变量,只是键名
console.log(b);
//对象增加的一些的写法
//1.当键名和键值是同一个字母或者单词时(写法相同),可以简写
let a = 10;
//let obj = { a: a, b:b };
let obj = { a, b };
console.log(obj);
//2.方法
let obj = {
a: 1,
fn: function () {},
};
let obj = {
a: 1,
fn1() {},
fn2() {},
};
console.log(obj);
//默认赋值
let { a, b = 5 } = { a: 111 };
console.log(a, b);
function fn() {
return [10, 20];
}
let [a, b] = fn();
拓展运算符
拓展运算符用到左侧是聚合,用到右侧是展开
let [...a] = arr
console.log(a); //[ 1, 2, 3, 4 ]
let obj = {name:"zhangsan",age:18}
let obj1 = {gender:'male'}
let temp = {
...obj,
...obj1,
}
temp.id = 100
console.log(temp); //{ name: 'zhangsan', age: 18, gender: 'male', id: 100 }
class
/*
射手 法师 坦克 3类职业-英雄
三个类- 都具备 血量hp 都会跑
射手--自己的方法 远程攻击
法师 -- 范围攻击
坦克 -- 近程攻击
*/
class Hero {
hp = 100;
f = 0;
constructor(name) {
this.name = name;
}
run() {
console.log(this.name + ':跑');
}
attack() {
console.log(this.name + ':攻击');
}
}
class ADC extends Hero {
constructor(name) {
super(name);
this.f = 100;
}
run() {
super.run()
console.log('速度中等');
}
attack() {
super.attack()
console.log('adc 特定的攻击');
}
}
class Hy extends ADC { }
class DRJ extends ADC { }
promise
解决在异步编程过程中的回调函数的嵌套问题
在使用promisae时要先生成实例对象,通过promise将嵌套调用变成链式调用
promise内部有三种状态,pending 进行中 fufilled(resolved)成功 rejected失败
这三种状态对应两种状态变化,pending > resolved pending >rejected,并且一旦状态发生改变就不再变化
只要状态变化,then方法就会执行
let promise = new Promise((resolve, reject) => {
setTimeout(function(){
reject();
},1000)
});
//then方法有两个参数第一个对应的是成功的回调(pending->resolved)第二个对应的是失败的回调
promise.then(() => {
()=>{
console.log("success")
}
()=>{
console.log("failed")
}
});
let promise = new Promise((resolve, reject) => {
setTimeout(function(){
reject(11);
},1000)
});
//then方法有两个参数第一个对应的是成功的回调(pending->resolved)第二个对应的是失败的回调
promise.then(() => {
(data1)=>{
console.log("success"+data1)
},
(data2)=>{
console.log("failed"+data2)
}
});
封装
function ajax(url){
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let resData = xhr.responseText;
resolve(resData);
} else {
reject();
}
}
};
})
}
promise相关的一些其他方法
catch 捕获异常状态 try catch 捕获的是运行时的异常
all是所有promise实例状态发生改变时才执行then方法。以耗时长的为准
race是所有promise实例状态发生改变时才执行then方法。以耗时短的为准
any是碰到promise实例中第一个发生成功状态(resolve)是执行then方法
碰到失败状态改变,立即执行then/catch