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) ```
网友评论