1.let和const命令
let和const的相同点:
1.声明变量没有变量提升
console.log(a)
let a = 123
2.是一个块级作用域
if (true) {
let b = 123
console.log(b)
}
console.log(b)
3.同一作用域下,不能重复声明
let a = 123
let a = 456
console.log(a) //报错
let和const的不同点:
let声明的变量可以改变,const声明的常量不可以改变。
const a = 123
a = 456 //报错
2.模板字符串
模板字符串是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
3.函数的默认值
ES5写法
function add(num1,num2){
num1 = num1 || 10
um2 = num2 || 20
return num1+num2
}
ES6写法
function add(num1=10,num2=20){
return num1+num2
}
4.函数的剩余参数
剩余参数:由三个点...和一个紧跟着的具名参数指定...keys
function fn(obj,...keys){
console.log(keys) //['汪汪', '大鸭子', '老母鸡']
}
fn('喵喵','汪汪','大鸭子','老母鸡')
5.扩展运算符
对象的扩展运算符
let bar = { a: 1, b: 2 }
let baz = { ...bar }
数组的扩展运算符
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr = [...arr1,...arr2]
console.log(arr) //[1, 2, 3, 4, 5, 6]
6.箭头函数
普通函数
function sum(a, b) {
return a + b
}
箭头函数
const sum = (a, b) => a + b
7.解构赋值
从数组和对象中提取值,对变量进行赋值,这被称为解构
以前,为变量赋值,只能直接指定值。
let a = 1
let b = 2
let c = 3
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3]
对象的解构赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
8.Set
类似于数组,但它的一大特性就是所有元素都是唯一的,没有重复。我们可以利用这一唯一特性进行数组的去重工作。
有三个常用属性
add 添加元素
delate 删除元素
has 校验元素
let set = new Set()
set.add('喵喵')
set.add('狗子')
set.delete('喵喵')
console.log(set.has('喵喵'))
console.log(set)
数组去重
let arr = [1,2,2,3,3,3]
let set = [...new Set(arr)]
console.log(set)
9.Map
类型是键值对的有序列表,键和值可以使任何类型。
set()添加键/值对
get()获取值
has()进行查询
delete()删除
clear()清除
let map = new Map([
['name','王大顺']
])
map.set('age',18)
map.set('sex','男')
console.log(map.get('name'))
console.log(map.has('age'))
map.delete('sex')
map.clear()
console.log(map)
10.Promise
(1)Promise是什么:
Promise是异步编程的一种解决方案,比传统的回调函数和事件更合理和强大。
所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事情。从语法上说,Promise是一个对象,从他可以获取异步操作的消息。
(2)Promise特点:
Promise的状态不受外界影响
一旦状态改变,就不会再变,任何时候都是可以得到这个结果的。
(3).Promise的实例有三个状态:
pending(进行中)
resolved(已完成)
rejected(已拒绝)
(4)Promise的实例有两个过程:
pending -> resolved(成功)
pending -> rejected(失败)
(5)优点:
将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。流程更加清晰,代码更加优雅。
Promise对象提供统一的接口,使得控制异步操作更加容易。
(6)缺点:
无法取消Promise,一旦新建它就会立即执行,无法中途取消。
如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
当处于pending状态时,无法得知目前进展到哪一个阶段。
(7)手写promise
function fn(flag) {
return new Promise((resolve, reject)=> {
if (flag === true) {
resolve('promise状态为成功!')
};
if (flag === false) {
reject('promise状态失败!')
};
}).then(function(res) {
console.log(res);
},
function(err) {
console.log(err);
})
}
fn(true)
fn(false)
11.async和await
有些时候我们一个流程里使用了太多的promise,会发现then也一大堆,仿佛又回到了之前的回调地狱,理解起来也没那么容易。
先创建一个函数,async放到函数前面, async执行后返回的是一个Promise对象
async function a() {
console.log(1)
}
await的意思就是同步,而且await必须在async标记的函数里面才能使用,不然会报错,Promise函数前面加上await,说明等待,需要这个代码执行完毕,才能执行下面的
async function a() {
console.log( await b())
}
function b() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 1000)
})
}
a()
12.Class 类
在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
类声明:
class Person{
constructor(name,age){
this.name = name
this.age = age
}
onName(){
console.log(this.name)
}
onAge(){
console.log(this.age)
}
}
let p1 = new Person('大顺',28)
console.log(p1.onName)
constructor 方法:
constructor 方法是类的默认方法,创建类的实例化对象时被调用。
new:
class 的实例化必须通过 new 关键字。
继承
通过 extends 实现类的继承
class Child extends Father { ... }
13.export和export default
export和export default 都可用于导出常量、函数、文件、模块等
export导出多个 export default导出单个
使用import导入