1.let 关键字
let关键字用来声明,使用let声明的变量有几个特点:
1 .不允许重复声明
2.块儿级作用域
3.不存在变量提升
4.不影响作用域链
在这里插入 // let 声明
// console.log(a);//error
let a = 10;
// let a = false;//不可重复声明 并且会报错
if (true) {
let b = 10;
}
// console.log(b);//error:b is not defined
// for (let index = 0; index < 10; index++) {}//index is not defined
console.log(index);代码片
应用场景:以后声明变量用let就可以
2.const 关键字
const关键字用来声明常量,const声明有一下特点:
1.声明必须赋初始值
2.标识符一般为大写
3.不允许重复声明
4.值不允许修改
5.块级作用域
`javascript
//基本类型
// 1.不可变量提升
// console.log(a);//报错
// 2.必须有初始值
const a = 10;
// 3.基本类型值不可以修改
// a = 20;//报错
// 4.块级作用域
if (true) {
const x = 'hello,world';
}
// 5.不能重复定义
// console.log(x)//报错 x is not defined;
// for (const index = 0; index < 10; index++) {
// // const v = 10;
// }
//引用类型(可重复声明,可修改值)
const obj = {
name: 'asd',
age: 20,
};
obj.name = '张三';
obj.height = 180;
const arr = [1, 2, 3, 4, 5];
arr[1] = 10
console.log(obj, arr);
注意: 对象属性修改和数组元素变化不会触发 const 错误
应用场景:声明对象、数组类型、以及常量时使用 const,非对象类型声明选择 let
**
3.变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值
在这里插 //数组的解构赋值:将数组中的元素安装顺序取出来,通过=赋默认值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
const [a, b, c, d, e = '郭星楠'] = arr
console.log(a, b, c, d, e);
对象的解构赋值:通过属性名进行解构赋值,=默认值
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员'],
};
const {
tags,
name,
age = 20
} = lin;
console.log(tags, name, age);
//复杂结构
const wangfei = {
name: '王菲',
age: 18,
songs: ['红豆', '流年', '暧昧', '传奇'],
history: [{
name: '窦唯'
}, {
name: '李亚鹏'
}, {
name: '谢霆锋'
}],
};
let {
songs: [one, two, three],
history: [first, second, third],
} = wangfei;
console.log(one, two, three);入代码片
注意:频繁使用对象方法、数组元素,就可以使用解构赋值形式
4模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
在这 // 定义字符串
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`; // 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;里插入代码片
5简化对象写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁
在这里插入 const name = 'zhangsan';
const age = 20;
const sayHi = function () {
console.log('hi');
};
// const person = {
// name: name,
// age: age,
// sayHi: sayHi,
// };
// 对象简写
const person = {
name,
age,
sayHi,
sayHello() {
console.log('hello');
}
};
console.log(person);代码片
注意:对象简写形式简化了代码,所以以后用简写就对了
6 箭头函数
ES6 允许使用「箭头」(=>)定义函数
箭头函数的注意点:
- 如果形参只有一个,则小括号可以省略
- 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果
- 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
(1).箭头函数的基本写法
在这里插入代 //普通函数
const b = function () {
console.log('b');
};
b();
//箭头函数基本写法
const a = () => {
console.log('a');
};
a();码片
(2)箭头函数的参数问题
// 1.箭头函数 没有参数:()不可以取消
const a = () => {
console.log('a');
};
//2.箭头函数有一个参数:()可以省略
const b = m => {
console.log('b:', m);
};
b('hi');
//3.多个参数()不可以省略
const c = (x, v) => {
console.log('c', x, v);
}
c('hi');
(3).箭头函数的返回值问题
在这里插入代 const sum = (a, b) => {
return a + b;
}
//当方法体只有一行,{}可以省略 有return必须省略不写
const foo = (a, b) => console.log(a + b);
const vb = (a, b) => a + b;
console.log(sum(10, 20));
foo(1, 2);
console.log(vb(12, 12));码片
(4).箭头函数的this
const obj = {
name: 'zhangsan',
sayHi() {
console.log(this); //this指向obj
console.log(this.name + 'hi');
//普通函数
setTimeout(function () {
console.log(this); //this指向window
}, 1000);
// 箭头函数
setTimeout(() => {
console.log(this); //这个this没有指向,使用的是外部this obj
}, 1000);
},
};
obj.sayHi();
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适
(5).Auguments.参数列表
在这里插入代码// arguments 获取参数列表,在不定参数个数情况下使用
//普通函数
function foo() {
console.log(arguments);
};
foo(1, 2, 3, 4, 5);
//箭头函数不可以使用arguments
// const bar = () => {
// console.log(arguments); //报错
// };
// bar(1, 2, 3, 4, 5);片
7.rest 参数
ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments
在这里插入// 作用和arguments类似
//...args展开参数列表
function add(...args) {
console.log(args);
};
add(1, 2, 3, 4, 5);
//rest 参数必须是最后一个形参
function minus(a, b, ...args) {
console.log(a, b, ...args);
}
minus(100, 1, 2, 3, 4, 5, 19);代码片
8.spread 扩展运算符
扩展运算符(spread)也是三个点(…)
spread 运算符|扩展运算符|三点运算符
在这里插入 // spread 运算符|扩展运算符|三点运算符:展开
//展开数组
const arr1 = ['a', 'b', 'c'];
const arr2 = [...arr1, 'd', 'e', 'f'];
console.log(arr2);
//展开对象
const obj = {
name: 'guan',
age: 20,
height: 200,
};
const person = {
...obj,
sayHi() {
console.log('hi');
},
age:18,
};
console.log(person);代码片
9.回调地狱
在这//回调地狱 一层一层往下套
//登录
ajax({
url: '//login',
method: 'POST',
date: {
id: '',
phone: '',
password: '',
},
header: {
'Content-Type': 'application/json',
},
success(response) {},
//登陆成功的结果 response
//获取用户的角色,管理员,普通用户
});
ajax({
url: '/getRole',
date: {
id: response.id, //用户id
phone: '',
password: '',
},
header: {
'Content-Type': 'application/json',
},
success(response) {},
//管理员
//获取管理员的菜单列表
});
ajax({
url: '/getMenu',
date: {
id: response.role, //用户角色
phone: '',
password: '',
},
header: {
'Content-Type': 'application/json',
},
success(response) {
// response 菜单列表
},
});
//使用回调函数耦合度太高
//原则:低耦合,高内聚,职责单一
//回调函数
function login() {
ajax({
url: '//login',
method: 'POST',
date: {
id: '',
phone: '',
password: '',
},
header: {
'Content-Type': 'application/json',
},
success(response) {
getRole(response)
},
//登陆成功的结果 response
//获取用户的角色,管理员,普通用户
});
}
//获取角色
function getRole() {
ajax({
url: '/getRole',
date: {
id: response.id, //用户id
phone: '',
password: '',
},
header: {
'Content-Type': 'application/json',
},
success(response) {
getRole(response)
},
//管理员
//获取管理员的菜单列表
});
}
//获取菜单
function getMenu() {里插入代码片
10.promise
- Promise 是 ES6 引入的异步编程的新解决方案
- 语法上 Promise 是一个构造函数, 用来封装异步操作并可以获取其成功或失败的结果。
- Promise 构造函数: Promise (excutor) {}
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
在这里插入代//创建promise对象
// new promise(callback(resolve,reject))
// resolve,reject 是两个回调函数 resolve(成功的结果)reject(失败的结果)
const p1 = new Promise((resolve, reject) => {
const num = Math.floor(Math.random() * 100);
if (num % 2 === 0) {
resolve(num + '是偶数');
} else {
reject(num + '是奇数');
}
});
//成功走then
//失败走catch
p1.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})码片
promise.all
在这里插const p1 = new Promise((resolve, reject) => {
const num = Math.floor(Math.random() * 100);
if (num % 2 === 0) {
resolve(num + '是偶数 p1');
} else {
reject(num + '是奇数 p1');
}
});
const p2 = new Promise((resolve, reject) => {
const num = Math.floor(Math.random() * 100);
if (num % 2 === 0) {
resolve(num + '是偶数 p2');
} else {
reject(num + '是奇数 p2');
}
});
// 并发 当p1,p2都是偶数then,有一个为奇数则catch
Promise.all([p1, p2]).then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
promise.race
在这里插 // Promise.race 两个promise谁先返回,则结果就是他,无关乎成功和失败
Promise.race([p1, p2]).then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});入代码片