ES6最重要最复杂的知识点： 1. 类和继承 2.promise 3. ES6模块化(在vue中讲)
与深拷贝相关的知识点
- Object.assgin()方法: 可以实现第一层对象的深拷贝
- 简单粗暴的深拷贝
JSON.parse(JSON.stringify(obj))
- 完整的深拷贝： 参考网上资料
常见的数组方法
下面的方法都有回调函数，回调的两个形参分别为项目值和索引
除了forEach, 其它的方法都需要return
- arr.forEach()
- arr.map()
- arr.filter()
- arr.some()
- arr.every()
- arr.reduce()
let: 声明块级作用域
- 不存在声明提前的问题
- 在同一个块中，不能重复声明
- 通过let可获取正确的索引
let arr = []
for (let i = 0; i < 6; i++){
arr[i] = function(){
console.log(i)
}
}
arr[3]()
const: 声明常量
- const也是块级作用域
- 声明的同时要赋值
箭头函数
arr.forEach(()=>{})
setInterval(()=>{},1000)
let fun = ()=>{}
let fun = x => {}
let fun = (x,y) => {}
let fun = (x,y) => 3
let fun = (x,y) => ({
name: 1,
age: 2
})
箭头函数的this指向
箭头函数自身没有this,它内部的this是定义箭头函数所在环境的this
box.onclick = function(){
// console.log(this);
let i = 0
setInterval(()=>{
this.innerHTML = i; //this是box
i++
},1000)
}
对象字面量的简写
let color = 'red',
age = 18;
let obj = {
color,
age,
run(){
console.log('run')
}
}
类和继承
定义父类
class Animal {
constructor(color){
this.type = 'animal';
this.eye = true;
this.color = color;
}
sound(){
console.log('sound')
}
}
var ani = new Animal('red')
定义子类
class Cat extends Animal{
constructor(nickname,age,color){
super(color);
this.nickname = nickname;
this.age = age;
}
eat(){
console.log('eat')
}
}
var cat = new Cat('小猫咪',5,'white')
cat.sound()
模板字符串
let color = 'red';
let str = `this is ${color}`
解构赋值
let obj = {
title: 'aaaa',
price: 300,
discount: 200
}
let {title,price} = obj;
展开运算符
把数组中的值打散，一个一个罗列
let arr = [34, 56, 78];
function total(Ch, En, Math) {
return Ch + En + Math;
}
let result = total(...arr)
let divList = document.querySelectorAll("div");
//伪数组可以调用 forEach,不能调用其它数组的遍历方法
divList.forEach((el)=>{
console.log(el);
})
var arr = [...divList].map((el)=>{
return el.innerHTML
})
console.log(arr);
默认参数
function draw(radius=100){
console.log(radius);
}
draw(30)
// 默认(default)参数必须设置在最后
function draw(y,x=2,z=20){
console.log(x,y,z);
}
draw(1)
draw(1,3)
剩余参数
function total(...args){
console.log(args);
console.log(args instanceof Array); //true
}
total(23,45)
Symbol数据类型
获取唯一的不会重复的变量，是ES6新增的基本数据类型
// Symbol的应用场景
//第三方的库中定义了一个对象(对用户来讲是隐蔽的)
let obj = {
name: '23',
count() {
console.log('count');
}
}
// 对对象的功能进行扩展：希望用一个一定不会和对象已有属性重复的属性名
let count = Symbol();
obj[count] = function(){
console.log('数量');
}
obj.count() // count
obj[count](); //数量
Set类型的数据
是ES6中新增的集合的数据类型，用来存放数组。但是，数组的元素不允许重复
数组去重
var arr = [1,2,3,2,5,1]
var result = [...new Set(arr)]
console.log(result);
Set常用的API
1. add
2. delete
3. has
4. clear
for...of语句
- for: （1）需要明确遍历次数 (2)不能遍历对象，可以遍历对象以外的集合 array,伪数组 （3）可以使用break和continue
- forEach: (1) 可以遍历对象以外的集合 （数组，Set, NodeList--->dom集合） （2）不能使用break和continue
- for...in (1)遍历对象 (2)不能直接访问对象的属性值 (3)（3）可以使用break和continue
- 新增的for...of:
(1) 自定义的对象不能使用for...of,但大部分原生的数据集合都可以使用 (数组、字符串、Set类型、Map类型、NodeList)
(2)可以使用break和continue
//作用于数组
var arr = ['a','c','d']
for(let i of arr){
console.log(i);
}
//作用于元素节点NodeList
let divList = document.querySelectorAll("div");
for (let el of divList){
console.log(el);
}
Object的API
- Object.assign: 合并对象
- Object.keys()： 返回对象所有键组成的集合
let obj = {
name: 'Peppa',
age: 4,
sex: '女'
}
// ["name","age","sex"]
console.log(Object.keys(obj));
Map类型的数据
类似于对象，用来存储键值对。
对象只能使用字符串作为属性名，而Map可以使用任意类型的数据做为属性名
//第一个键是"a",值是1, 第二个键是b,值是2
var map1 = new Map([["a",1],["b",2]]);
console.log(map1);
Map的API
属性: size
方法: set , get , has, delete ,clear
for...of 遍历
var map1 = new Map([["a", 1], ["b", 2]]);
//只遍历键
for (let key of map1.keys()){
console.log(key);
}
// 只遍历值
for (let val of map1.values()){
console.log(val);
}
// val是数组，存储了每一个的键和值
for (let val of map1){
console.log(val[0]);
console.log(val[1]);
}
//同时返回键值对
for (let [key,value] of map1){
console.log(key);
console.log(value);
}
// 等价于上面的写法
for (let [key,value] of map1.entries()){
console.log(key);
console.log(value);
}
Promise:
promise用来解决回调地狱的问题，把异步的代码用同步的方式来实现
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。一个Promise的三种状态
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
Resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
Reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
```
// 需求： ajax1执行完再执行ajax2,ajax2执行完再执行task
function ajax1() {
setTimeout(function () {
console.log('ajax1');
}, 1000)
}
function ajax2() {
setTimeout(function () {
console.log('ajax2');
}, 2000)
}
function task() {
console.log('task');
}
```
用Promise实现
var flag1 = true;
var flag2 = false;
function error(err) {
console.log(err);
}
function ajax1() {
return new Promise((resolve, reject) => {
setTimeout(function () {
if (flag1) {
resolve('ajax1的结果')
} else {
reject('ajax1错误')
}
}, 1000)
})
}
function ajax2(data) {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('ajax2接收ajax1的参数', data);
if (flag2){
resolve()
}else{
reject('ajax2错误')
}
}, 2000)
})
}
function task() {
console.log('task');
}
ajax1()
.then(ajax2)
.then(task)
.catch(error)
Promise.all() Promise.race()
Promise.all() 两个异步操作都成功完成后，再执行的逻辑
Promise.race() 最先得到结果的异步操作执行成功，即执行下面的逻辑
all()和race()中的参数必须是promise实例
Promise.all([ajax1(),ajax2()])
.then(function(data){
console.log('两个请求都成功后的数据',data);
task(data)
})
.catch(err)
Promise.race([ajax1(), ajax2()])
.then(function (data) {
console.log('请求返回最快的任务的结果', data);
task(data)
})
.catch(err)
async和await的用法
- async: 定义一个异步函数,消除promise中then的链式调用 ，让代码更加清晰，优雅
- await后面接一个会return new promise的函数并执行它
- await只能放在async函数里
- async函数通过try...catch处理失败时要执行的逻辑
var flag1 = false;
var flag2 = true;
function ajax1() {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('ajax1任务执行完毕');
if (flag1) {
resolve('ajax1的结果')
} else {
reject('ajax1错误')
}
}, 1000)
})
}
function ajax2(data) {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('ajax2', data);
console.log('ajax2任务执行完毕');
if (flag2) {
resolve('ajax2的结果')
} else {
reject('ajax2错误')
}
}, 2000)
})
}
function task(data) {
console.log('task任务执行完毕');
console.log('task', data);
}
async function render() {
try {
let result1 = await ajax1()
await ajax2(result1)
task()
}catch(err){
console.log('catch',err);
}
}
render()
Object.defineProperty()
定义对象的属性
let obj = {
name: '西游记',
addTime: '739754975945489'
}
//必须使用一个临时变量，来存储name属性的值
let temp = obj.name;
// 拦截器
Object.defineProperty(obj,"name",{
//存取器
get: function(){
console.log('get');
//get中一定要有return,return的结果即为name属性的新值
return "《" + temp + "》"
},
set: function(newVal){
console.log('set');
temp = newVal;
}
})
obj.name = "窗边的小豆豆";
console.log(obj.name);
