ES6重要知识点总结

发布时间:2023-09-02 11:30

ES6

1 ES6入门

阮一峰书籍推荐:https://es6.ruanyifeng.com/#docs/reference

1.1 简介

ECMAScript标准简称为ES6也称为ES2015,规定以后的ECMAScript标准每一年一更,统一以年份命名(每年的六月份)

1.2 块级作用域

通过块级声明的变量无法被代码块外部访问,这种就称为块级作用域,也成为语法作用域

块级作用域可以在函数内部和代码块{}内部创建

1.3 let和const

{
    var a=2;

    let b=10;
     变量b只能在代码块内访问
    console.log(a)//2
    console.log(b)//10
}

console.log(a)//2
console.log(b)//b is not defined

let特点:

  • let和const不存在变量提升,原因let和const之前的区域叫做暂存性死区,var的变量存在变量提升
  • let和const声明的变量不再属于window,不能通过window.变量名访问,var声明的变量属于window
  • 使用块级作用域不能在同一级中重复声明变量(let声明的变量不能重复)

const特点:

  • const和let,除了const是声明常量外,其他的特点和let一样
  • const声明的常量只能在声明的时候赋值
  • const声明的常量不可以修改

练习:实现点击输出当前下标

*{margin: 0;padding: 0;}
ul{list-style: none; margin: 50px auto; width: 200px;}
li{
    width: 200px;
    height: 50px;
    background-color: rgb(126, 235, 116);
    margin: 10px 0;
}
<ul>
    <li>li>
    <li>li>
    <li>li>
ul>

ES5:

var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
    li[i].index=i;
    li[i].onclick=function(){
        console.log(this.index)
    }
}

ES6:

//普通函数版
var li=document.getElementsByTagName('li');
console.log(li)
for(let i=0;i<li.length;i++){
    li[i].onclick=function(){
        console.log(i)
    }
}

//箭头函数版
var li=document.getElementsByTagName('li');
console.log(li)
for(let i=0;i<li.length;i++){
    li[i].onclick=()=>{
        console.log(i)
    }
}

2 ES6函数新增特性

2.1带默认值的函数

JavaScript函数最大的特性就是在传递参数时,参数的个数不受限制,为了函数的健壮性,一般在函数内部做默认值处理

ES6中从语法层面新增了‘默认值’的支持(默认值可以为数字、字符串、表达式甚至为函数)

ES5:

function fun(a,b){
    a= a || 10;
    b= b || 30;
    console.log(a,b)//10 30
}
// fun(10,30)//10 30
fun(0,0)//出现bug,得到10,30

ES6:

function demo(a=10,b=30){
    console.log(a,b)//10 30
}
// fun(10,30)//10 30
demo(0,0)//0,0

2.2 默认值影响arguments

ES5中arguments用于接收所有传入的实参,返回的是一个数组

ES5:

//非严格模式下,形参重新赋值,会影响arguments里面的值
function fun1(a,b){
    console.log(arguments)//[3,6]
    console.log(arguments[0]===a)//true
    console.log(arguments[1]===b)//true

    a=33;
    b=20;
    console.log(arguments[0]===a)//true
    console.log(arguments[1]===b)//true
    console.log(arguments)
}
fun1(3,6)

//严格模式
function fun2(a,b){
    //使用严格模式,形参重新赋值,不会影响arguments里面的值
    'use strict'
    console.log(arguments)
    console.log(arguments[0]===a)//true
    console.log(arguments[1]===b)//true

    a=33;
    b=20;
    console.log(arguments[0]===a)//false
    console.log(arguments[1]===b)//fasle
    console.log(arguments)
}
fun2(3,6)

fun1()结果:

ES6重要知识点总结_第1张图片

fun2()结果:

ES6重要知识点总结_第2张图片

ES6:

//在ES6中若有参数默认值,不管是在严格模式还是非严格模式,都和ES5中的严格模式相同
function fun3(a,b=1){
    console.log(arguments)
    console.log(arguments[0]===a)//true
    console.log(arguments[1]===b)//true

    a=33;
    b=20;
    console.log(arguments[0]===a)//false
    console.log(arguments[1]===b)//false
}
fun3(3,6)

fun3()结果:

ES6重要知识点总结_第3张图片

注:

“use strict” 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

2.3 默认参数为表达式

参数的默认值可以是一个表达式或者函数的调用

function getValue(){
    return 5;
}
function add(first,seconed=getValue()){
    return first+seconed;
}
var res = add(1)
console.log(res)//6

//注意:getValue()只会在调用add函数且不传入第二个参数时才会去调用
//由于默认值可以是表达式,所以我们可以使用前面的参数作为后面参数的默认值
//反之则不成立(不能采用后面的参数定义表达式作为参数默认值)
function add(first=2,seconed=first+1){
    return first + seconed;
}

var res = add(3);
console.log(res)//7

var res = add();
console.log(res);//5

2.4 剩余参数(重点)

ES6中提供了一种更加便捷处理未命名参数的方法,叫做剩余参数
语法:
    function fun(a,...b){
        [剩余参数用三个点接收,多余的参数则被放到数组b中]
    }
function run(a,b,...c){

    //arguments接收的是所有传入的实参
    console.log(arguments)//[1, 2, 3, 4, 5, 6, 7, 8]

    //...剩余参数只接收剩余的形参
    console.log(a,b)//1 2
    console.log(c)// [3, 4, 5, 6, 7, 8]
}
run(1,2,3,4,5,6,7,8)

注意:

  • 函数最多只能有一个剩余参数,且该参数必须放置在所有形参的最后
  • 虽然有剩余参数,arguments仍然存在
  • 剩余参数是在**“函数声明的时候”**出现

2.5 扩展运算符(重点)

1 扩展运算符拆散数组或对象

var arr=[1,2,3,4,5,6]
//Math.max()只能接收一个一个的数
var res=Math.max(1,2,3,4,5)
console.log(res)//6

//ES5中需要通过apply切换对象取得最大值
var res =Math.max.apply(Math,arr)
console.log(res)//6

//ES6中...扩展运算符可以获得数组中的一个一个的数,相当于拆散了数组或对象
console.log(...arr)//1 2 3 4 5 6
console.log(Math.max(...arr))//6

2 扩展运算符连接两个数组

var arr1=['胡桃','七七'];
var arr2=[1,2,3,4,5]

//ES5
var newArr=arr2.concat(arr1)
console.log(newArr)//[1, 2, 3, 4, 5, "胡桃", "七七"]

//ES6
var arr3=[1,2,3,4,5,...arr1]
console.log(arr3)//[1, 2, 3, 4, 5, "胡桃", "七七"]

3 扩展运算符继承的使用

 var People={
            nation:'中国',
            city:'北京'
        }
 var student={
     //继承父类
     ...People
 }
console.log(student)//{nation: "中国", city: "北京"}

People.city='上海'
console.log(People)//{nation: "中国", city: "上海"}
console.log(student)//{nation: "中国", city: "北京"}


var People={
    nation:'中国',
    city:'北京',
    foods:['烤鸭','抄手','小面']
}
var student={
    //继承父类
    ...People
}
People.foods.push('刀削面')
console.log(People.foods)// ["烤鸭", "抄手", "小面", "刀削面"]
console.log(student.foods)// ["烤鸭", "抄手", "小面", "刀削面"]

通过上面的实例可以看出,…扩展运算符的继承是实现的浅拷贝操作

2.6 结构赋值(重点)

ES6允许我们按照一定的模式从数组或者对象中提取变量进行赋值,被称为结构赋值

本质上,结构赋值属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值

//ES5的赋值,分别取出数组的值,赋值给对应的变量
var arr=[1,2,3];
var a=arr[0];
var b=arr[1];
var c=arr[2];
console.log(a,b,c)

//ES6数组的结构赋值主要依据相同下标进行赋值
var [a,b,c]=[10,20,30];
console.log(a,b,c);//10 20 30

var [d,,e]=[10,20,30]
console.log(d,e);//10 30
//对象的结构赋值主要查看属性名和方法名
//只有当变量名和属性名同名时,才能取到正确的值,和先后顺序无关
var People={
    nation:'中国',
    city:'北京',
    foods:['烤鸭','抄手','小面']
}

var {nation,city}=People
console.log(nation,city)//中国 北京

var {city,nation}=People
console.log(nation,city)//中国 北京

//结构赋值常见的使用方式
function demo({city}){
    //相当于{city}=People
    console.log(city)//北京
}
demo(People)

3 箭头函数(重点)

3.1 语法

ECMAScript6 允许使用箭头 =>定义函数,语法如下

(arg1,arg2...)=>{
    函数体
}

示例1:

  • 当箭头函数的形参只有一个时,包含形参的()可以省略,其他情况都不能省略
  • 当箭头函数后只有一行代码且不加大括号{},则自带return 功能
//普通函数
//ES5
var fun=function(){
    console.log(111)
}
//ES6
var fun=()=>{
    console.log(111)
}
fun()
//带参数的函数
var fun1=function(a){
    return a
}
var fun1=(a)=>{
    return a
}
//当箭头函数的形参只有一个时,包含形参的()可以省略,其他情况都不能省略
//当箭头函数后只有一行代码且不加大括号{},则自带return 功能 
var fun1=a=>a

var res=fun1(3)
console.log(res)//3

示例2:

特殊情况:return返回值为一个对象

//特殊情况:return返回值为一个对象

//ES5
var fun2=function(){
    // var obj={
    //     name:'胡桃',
    //     age:16
    // }
    return {
        name:'胡桃',
        age:16
    };
}

//ES6
var fun2=()=>{
    // var obj={
    //     name:'胡桃',
    //     age:16
    // }
    return {
        name:'胡桃',
        age:16
    };
}

//特殊情况,得在对象{}之外再加一个()
var fun2=()=>({ name:'胡桃',age:16})

var res=fun2();
console.log(res);//{name: "胡桃", age: 16}

示例3:

使用箭头函数自执行

//使用箭头函数自执行

//ES5
(function(){
    console.log('匿名函数')
})();

//ES6
(()=>{
    console.log('匿名函数')
})();

3.2 箭头函数中无this绑定

在ES5中this的绑定是一个比较麻烦的问题,稍微不注意就达不到想要的效果,因为在ES5中this的绑定和定义的位置无关,只和其调用的位置有关

ES5中this指代问题:

  • 在普通函数中,this指代全局对象window
  • 在普通对象中,this指代当前对象
  • 在构造函数中,this指代实例化对象
  • 在apply、call、bind切换对象时,this指代切换后的对象

箭头函数中没有this的绑定(并不是说ES6没有this),this的定义只和定义的作用域有关,和调用的位置无关

// ES5的写法
btn.onclick = function(){
    // 定时器  2s后输出
    setTimeout(function(){
        console.log(this)//window
    },2000)

    // ES6 箭头函数
    btn.onclick = function(){
        setTimeout(()=>{
            console.log(this);//btn按钮
        },2000)
    }

箭头函数可以让this指向固定化,这样有利于面向对象封装回调函数

//构造函数
function Dog(name,color){
    this.name = name;
    this.color = color;
}

Dog.prototype.doSomething = function(){
    
    document.onclick =()=>{
    	console.log(this)//Dog
    	console.log(this.color)//yellow
    }
}
			
var dog = new Dog('大黄','yellow');
console.log(dog)
dog.doSomething()//yellow

总结:

1、注意箭头函数中this指向固定化,并不是因为箭头函数内部有绑定this,实际原因时箭头函数内根本没有绑定this,导致函数内部的this就是外部代码块的this

2、箭头函数作为一个用完就扔的函数,不能作为构造函数使用,也就是说不能使用new的方式来使用箭头函数

3、由于箭头函数中的this与函数的作用域无关,所以不能使用call、apply、bind来重新绑定this

4、箭头函数内没有自己的arguments对象,但是箭头函数内可以使用外部的arguments对象

4 对象的扩展功能

在js中,几乎所有的类型都是对象,所以使用好对象,对提高js性能很重要

4.1 对象类别(了解)

普通对象(ordinary object)拥有js所有的默认行为

特异对象(exotic object)某些内部行为与默认有所差异

标准对象(stabdard object)是ES6中定义的对象,例如Array Date等,他们可能是普通对象也可能是特异对象

内置对象(built-in object)指js的运行环境开始运行时已存在的对象,标准对象均为内置对象

4.2 字面量语法扩展(重点)

4.2.1 简化属性的初始化

var name ='七七'
var age=16

var obj={
    name:name,
    age:age
}
console.log(obj)//{name: "七七", age: 16}

//改进
var name ='七七'
var age=16

var obj={
    name,
    age
}
console.log(obj)//{name: "七七", age: 16}


注意:在ES6中,若对象属性名和本地变量名相同时,赋值可以省略冒号和值,直接写属性

当对象字面量中属性只有属性名时,js引擎会在其作用域之内寻找是否有和属性名同名的变量,简写可以让对象的字面量更加简洁。

4.2.2 对象方法的简写

var name ='七七'
var age=16

var obj={
    name,
    age,
    //对象方法简写
    play(){
        console.log('僵尸')
    }
}
obj.play()//僵尸

4.2.3 属性名提前

var key1='adas_sd'
var key2='aacc_a'

var obj={
    key1:12312,
    key2:123456,
    
	//变量名作为属性名  需要加上中括号
    [key1]:12312,
    [key2]:123456,   
}
console.log(obj)//{key1: 12312, key2: 123456, adas_sd: 12312, aacc_a: 123456}

4.3 对象中新增的方法

4.3.1 Object.is()

Object.is()判断两个对象是否相等,该方法是对全等(===)的怪异行为的补偿,只有在两者的类型和值都相等时才会判断为相等

console.log(+0 == -0);//true
console.log(+0 === -0);//true
console.log(Object.is(+0,-0));//false

console.log(NaN == NaN)//false
console.log(NaN === NaN)//false
console.log(Object.is(NaN,NaN))//true

一般情况下Object.is()的效果和===(全等)是相同,他们的区别就是在怪异情况的判断 +0 -0 NaN

4.3.2 Object.assign()

使用Object.assign()主要是为了简化对象的混合(mixin),混合指的将一个对象引入到另一个对象的属性或者方法(拷贝)

var obj={
    name:'胡桃',
    age:16,
    love:['七七','钟离','烟绯']
}

var newObj={}

//obj对象复制给newObj对象
Object.assign(newObj,obj)
console.log(newObj)//{name: "胡桃", age: 16, love: Array(3)}


obj.love.push('凝光')
console.log(obj.love)//["七七", "钟离", "烟绯", "凝光"]
console.log(newObj.love)//["七七", "钟离", "烟绯", "凝光"]
//以上说明Object.assign() 方法为浅拷贝


//Object.assign()可以同时拷贝多个对象
var obj2={
    name:'甘雨',
    love:'雷军'
}

//newObj有多个提供者
Object.assign(newObj,obj,obj2)

console.log(obj2)//{name: "甘雨", love: "雷军"}
console.log(newObj)//{name: "甘雨", age: 16, love: "雷军"}
 多个提供者,意味着后面的提供者若同名则覆盖前面的提供者的属性

注意:

Object.assign()的这种copy(拷贝)是浅拷贝

浅拷贝指的是拷贝的属性的属性值不是基本数据类型(数组\对象)时

拷贝只是copy该对象的内存地址

5 字符串新增功能

5.1 查找字符串

在ES5中字符串的查找,都是使用indexOf() lastIndexOf()

ES6新增了三个方法来查找字符串

includes(text,index) 查找字符串是否在文本中,返回boolean值。存在->true  不存在->false
startsWith(text,index)文本是否以指定的字符开头,返回boolean值  
endsWith(text,length)文本是否以指定的字符结尾,返回boolean值  

注意:
length代表总长度从1开始计算
index代表下标从0开始计算
var str ='大丘丘病了二丘丘瞧,三丘丘采药,四丘丘熬';

var res=str.includes('大丘丘');
console.log(res)//true
var res=str.includes('大丘丘',2);//从2下标开始查找
console.log(res)//false

var res=str.startsWith('大丘丘');
console.log(res)//true
var res=str.startsWith('二丘丘',5);
console.log(res)//true


var res=str.endsWith('大丘丘');
console.log(res)//false
var res=str.endsWith('大丘丘',3);
console.log(res)//true

5.2 repeat()方法

//repeat(n) 重复前面字符串的次数
var str='胡桃';
var res=str.repeat(3)
console.log(res)//胡桃胡桃胡桃

5.3 字符串的模板字面量(重点)

模板字面量主要是ES6针对js的如下功能的改进:

多行字符串

基本的字符串格式化:将字符串中的变量转换为值的能力

转义HTML:将字符串进行转义并使用安全得插入Html的能力

1.语法

使用一对反括号 `` (Tab键正上方) 来表示模板字面量

2.多行字符串

//字符串的模板字面量 ``

//报错
// var str='胡桃
// 甘雨
// 钟离'

var str=`胡桃
甘雨
钟离`
console.log(str)//按原文本格式输出

3.字符串的置换(重点)

//字符串的置换
var obj={
    name:'胡桃',
    age:16,
    area:'璃月'
}

//ES5 字符串拼接
var str=obj.name+'今年'+obj.age+'岁,住在'+obj.area
console.log(str)//胡桃今年16岁,住在璃月

//ES6 模板字面量
var str=`${obj.name}今年${obj.age}岁,住在${obj.area}`
console.log(str)//胡桃今年16岁,住在璃月

4.模板标签

模板字面量真正的强大之处在于模板标签,一个模板标签可以被转换为模板字面量并作为最终值返回(标签必须在模板之前指定)

模板标签其实并不是模板而是一种函数的调用的特殊形式,标签指的就是函数,紧跟在后面的模板字符串就是他的参数

//模板标签
alert `璃月人`//等价于 alert('璃月人')

5.自义定模板标签

function myTag(str,...value){
    //str 拿到除了变量以外的字符
    console.log(str)//["", "今年", "", raw: Array(3)]

    //剩余参数拿到所有字符串中的变量,以数组的方式返回
    console.log(value)//["胡桃", 18]
}
var name = '胡桃'
var age = 18
myTag`${name}今年${age}`;

image-20210917185845710

6 新的基本类型 Symbol

ES5中有六种数据类型:

  • number数值类型
  • string字符串类型
  • boolean布尔类型
  • undefined未定义类型
  • null空类型
  • object对象类型(function)

ES6新增了一种数据类型Symbol

解决:在ES5中我们对象的属性为字符串,容易被重写。没有办法创建私有属性,只能通过封装。Symbol创建一个独一无二的值

6.1 创建Symbol

Symbol在基本数据类型中比较特殊,需要通过全局函数Symbol创建

//创建Symbol
var names= Symbol();
console.log(typeof name)//symbol

var obj={
    [names]:'胡桃',
    age:16
}

console.log(obj)//{age: 16, Symbol(): "胡桃"}
var a1=Symbol();
var a2=Symbol();
console.log(a1==a2)//false
console.log(a1===a2)//false

var obj={
    [Symbol()]:'独一无二'
}
console.log(obj)//{Symbol(): "独一无二"}
//此时Symbol()重新创建了另一个独一无二的值,则obj内该属性未被赋值,则为undefined
console.log(obj[Symbol()])//undefined

在创建symbol时,括号内允许传入字符串,该字符串仅为了区分symbol,没有任何实际作用

var s1 = Symbol('七七')
var s2 = Symbol('七七')
console.log(s1 === s2)//false

注意:s1 s2都是一个独一无二的值
若属性名使用symbol类型,可以保证属性名都是独一无二的,不会与其他属性名冲突

6.2 识别Symbol

symbol属于基本数据类型,可以使用typeof操作符辨别是否为symbol。

如果在控制台直接输出symbol变量,那么不好区分,建议在创建symbol变量时,添加参数(字符串),用于描述创建的symbol作为区分

6.3 Symbol作为对象属性(重点)

//symbol作为对象的属性
var user=Symbol('user');
var age=Symbol('age');

//方法一
var person={
    // 变量名作为属性   需要添加中括号
    [user]:'胡桃'
}
console.log(person)//{Symbol(user): "胡桃"}

//方法二
person[age]=16
console.log(person)//{Symbol(user): "胡桃", Symbol(age): 16}

var sex;
person[sex]='女'
for(var key in person){
    console.log(person[key])//女
    console.log(`属性:${person[key]},属性值:${person[key]}`)//属性:女,属性值:女
}//以上例子说明:Symbol作为属性名时,不能采用for...in 或者for...of遍历

注意:

1、symbol作为对象的属性时,只能使用[]去添加或访问,不能使用点语法

2、symbol作为对象属性名使用时,该属性还是公有属性,不是私有属性。但此时无法通过for…in 或者for…of遍历

6.4 Symbol属性名的遍历

//遍历Symbol Object.getOwnPropertySymbols():将所有对象中的symbol属性以数组方式返回
var res=Object.getOwnPropertySymbols(person)
console.log(res)//[Symbol(user), Symbol(age)]
console.log(res[0])//Symbol(user)
console.log(person[res[0]])//胡桃

//Reflect.ownKeys():将所有对象中的属性以数组方式返回
var keys=Reflect.ownKeys(person);
console.log(keys)//["undefined", Symbol(user), Symbol(age)]

说明:由于Symbol的值作为属性名时,不会被常规方法遍历到(for…in for…of),我们利用该特性,为对象创建一些非私有但是希望只用于内部的方法

6.5 Symbol.for()和Symbol.keyFor()的使用

Symbol.for(字符串):每次创建时会在全局环境中搜索以该字符串作为参数的Symbol的值,若搜到则返回该Symbol,若搜索不到才创建一个Symbol,并把它注册到全局环境中

//Symbol和Symbol.for的区别

var a1=Symbol('胡桃')
var a2=Symbol('胡桃')
console.log(a1==a2)//false

//Symbol.for()每次创建都会在全局环境中搜索以该字符串作为参数的Symbol是否存在,若存在则直接返回已创建的Symbol,不存在则重新创Symbol,并向全局进行注册

var b1=Symbol.for('七七')
var b2=Symbol.for('七七')
console.log(b1==b2)//true

//Symbol.keyFor(symbol)返回一个已注册到全局的symbol的key
//只有注册的Symbol才会返回字符串
var res=Symbol.keyFor(b1)
console.log(res)//七七

Symbol.for()和Symbol()的区别:

1、Symbol.for()对同样的字符串每次得到的结果肯定一样,Symbol()则不会有相同的结果,每次都会新创建。

2、Symbol()每次都会创建一个全新的Symbol,且不会向全局注册;Symbol.for()只有在全局找不到时才创建新的Symbol,并注册到全局

6.6 Symbol总结

//1.创建独一无二的值
//2.给对象属性添加唯一值,先创建并赋值,加上[]
//3.作为对象属性,不能被for ...in遍历到
//4.Symbol每次创建不会注册到全局,Symbol.for()先查找再注册

7 Set

set本身是一个构造函数

//创建
var set =new Set()
//添加
set.add('胡桃')
//长度
console.log(set.size)

7.1 创建Set集合并添加元素

var set=new Set();
console.log(set)//Set(0)
console.log(typeof set)//object

//添加元素 add()
set.add('胡桃')
console.log(set)//Set(1) {"胡桃"}

//set集合长度
console.log(set.size)//1

7.2 Set不能添加重复元素

set.add('a');
console.log(set);//{"a", "b"}
console.log(set.size);//2

注意:set是通过Object.is()方法判断两个元素是否相等(但是判断+0 -0的时候用===判断)

set.add(+0);
set.add(-0);
console.log(set)//{"a", "b", "c", 0}

特殊情况:

// 特殊情况,数组、对象这种引用类型 每次添加都是指向不同的内存空间
console.log(set.size)//1

set.add([])
console.log(set.size)//2
set.add([])
console.log(set.size)//3

7.3 数组去重

var arr=[2,3,5,6,2,5,3]
var set =new Set(arr);
console.log(set)//[2,3,5,6]

7.4 判断某值是否在Set中

// 判断Set中是否存在某一个值  has()
var arrSet = new Set([2,3,4])
console.log(arrSet.has(5))//false
console.log(arrSet.has(2))//true

7.5 删除Set中的值

delete(需要删除的值)

clear()清空所有的值

var set= new Set([1,2,5,3,6,4])

//删除指定的值
set.delete(1)
console.log(set)//{2,5,3,6,4}

//清空所有的值
set.clear()
console.log(set)//{}

7.6 Set遍历

Set遍历智能使用隐式迭代,也就是forEach

补充知识点:
数组遍历(迭代):
    显示迭代  for循环
    隐式迭代  forEach
    
语法:
遍历的数组.forEach(function(val,key,ownerArr){
    //forEach中的形参不需要手动传入
     参数一:val代表遍历到的元素的值
    参数二:数组的键(下标)  但是对于Set类型,第二个参数和第一个的值相同
    参数三:当前遍历的整个对象
})
set.forEach(function(val,key,ownARR){
    console.log(key,val,ownARR)
})//输出的结果没有下标,所以不能通过for遍历

//改为箭头函数
set.forEach((val,key)=>{
    console.log(`key为:${key},值为:${val}`)
})//输出的结果没有下标,所以不能通过for遍历

ES6重要知识点总结_第4张图片

7.7 将Set转为数组(重点)

数组转换为Set:创建Set时把数组当作一个参数传入

Set转换为数组:扩展运算符 …

//数组去重
var arr=[1,2,2,3,5,4,2,6]
var set=new Set(arr)

//将Set集合转为数组
// 方法一
var newArr=[...set]
console.log(newArr)// [1, 2, 3, 5, 4, 6]
// 方法二
console.log(Array.from(set))// [1, 2, 3, 5, 4, 6]

8 Map

在ES5中,对象的属性只能字符串

ES6中的map数据类型包含一组有序的键值对,其中键和值可以为任意的数据类型

8.1 创建Map

1、Map对象的创建同样使用Map构造函数

2、Map的存储键值对使用set(key,value)

3、通过get(key),来获取指定的key对应的value

var map=new Map();
console.log(map)//Map(0)

set(key,val)添加指定的键值对

//set()添加属性和属性值
map.set(5,50)
map.set(true,'满分')
console.log(map)//Map(2) {5 => 50, true => "满分"}

get(key)获取指定key对应的value值

//get()获取指定属性的值
console.log(map.get(true))//满分

// 若key不存在则返回undefined
console.log(map.get(liyue));//undefined

8.2 Map和Set类似的三个方法

has(key) 判断给定key是否在map中存在
delete(key) 删除map中指定的key及其对应的值
clear() 移除map中所有的键值对
size map对象的长度

8.3 初始化Map(了解)

map可以像Set一样传入一个数组,但是传入的数组必须为两两是一个子数组(二维数组)

var initMap = new Map([
    ['name','甘雨'],
    ['age','18'],
    [4,false]
])
console.log(initMap)//Map(3) {"name" => "甘雨", "age" => "18", 4 => false}
console.log(initMap.size)//3

8.4 Map遍历

var mapper=new Map();
    mapper.set(1,'胡桃')
    mapper.set(2,'甘雨')
    mapper.set(3,'七七')
    mapper.forEach((val,key)=>{
  	console.log(`key:${key},val:${val}`)
})

for(var key of mapper){
    console.log(key)
}

ES6重要知识点总结_第5张图片

9 Promise

9.1入门问题

1 什么是promise?

promise是异步编程的一种解决方案,传统的解决方案为:回调函数和事件,promise比传统的解决方案更合理。promise是由社区提出的。

  • 简单来说,promise就是一个容器,里面装的有某个未来才会结束的事件,一般为异步事件。
  • promise是一个对象,可以从对象中获取异步操作的消息,promise提供了同意的API,各种异步操作都可以采用同样的方法进行处理。

异步同步?

同步:代码从上到下执行,必须等前面的代码执行完了才执行后面的代码。JS中大部分代码都是同步的。

异步:代码执行到异步代码片时,异步代码片后面的代码可以和异步代码片同时执行。

JS常见的异步:

  • 定时器 setTimeout,setInterval
  • Ajax的异步请求
  • jQuery中的animate()动画
  • ES6中的Promise

2 promise三状态有哪些?

进行中(Pending),已完成(Resolved),已失败(Rejected)

3 promise优点?

  • 有了promise对象,可以把异步操作以同步操作的流程表现出来,避免层层嵌套的回调函数。
  • promise提供了统一的API,使得异步操作更加容易。

4 promise缺点?

  • 无法取消,一旦建立则立即执行,无法中途取消。
  • 如果不设置回调函数,promise内部抛出错误,不会反应到外部。
  • pending(进行中)状态下时,无法得知目前进行到那个阶段了。

5 promise有哪些特点?

  • 对象的状态不受外界的影响,promise代表一个异步操作。
  • 有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。
  • 只有异步的结果可以决定当前是哪一种状态,任何操作都不能改变结果。
  • 一旦状态改变,就不会再变。任何时候你都可以得到该结果。
  • Promise的状态只有两种可能:pending->resolved或者pending->rejected。只要这两两种情况发生了状态改变,该结果则凝固,不会再改变,一直保留该结果。

9.2 promise 的基本用法

1 语法

ES6规定Promise对象是一个构造函数,用于生成Promise实例

promise的基本使用语法:

const promise = new Promise(function(resolve,reject){
    ...(some code)
    //判断异步操作是否成功
    if(/*异步操作成功*/){
        resolve(value)
    }else{
        reject(error)
    }
})
说明:promise接受一个函数作为参数,该函数两个参数分别为resolve和reject
他们两个函数(resolve和reject)由js引擎提供,不需要自己部署
'resolve'函数的作用:将Promise状态从'未完成'变成'完成',在异步操作时调用
并将异步调用的结果作为参数传递出去
'reject'函数的作用:将Promise状态从'未完成'变成'失败',在异步操作时调用
并将失败的错误信息作为参数传递出去

promise.then(function(value){
    //成功时函数
},function(error){
    //失败时函数
})

说明:'then'方法可以接收两个回调函数作为参数
第一个回调函数是Promise对象变成resolved状态时调用
第二个回调函数是Promise对象编程rejected状态时调用
其中第二个回调的参数是可选值,不一定会提供

Promise.prototype.catch()接收promise抛出的错误

promise.catch(function(error){
    console.log(error)
})

2 随机数案例

const promise=new Promise(function(resolve,reject){
    //执行相关的异步操作
    let num=Math.random()*2;

    // var str=num>1 ? '调用成功': '调用失败';
    let flag=num>1 ? true: false;
    if(flag){
        // resolve('随机数大于1')
        setTimeout(resolve, 1000,'随机数大于1');
    }else{
        // reject('随机数小于1')
        setTimeout(reject, 1000,'随机数小于1');
    }
})
promise.then(
    function(data){
        //当resolve方法被调用时执行
        console.log(data)
    },
    function(err){
        //当reject方法被调用时执行
        console.error(err)
    })

3 在线视频加载案例

<div class="wrap">div>
//异步请求视频

let url='https://f.video.weibocdn.com/002akCN7gx07PPZAb9cX01041201dcf50E010.mp4?label=mp4_1080p&template=1920x1080.25.0&trans_finger=d88af6227b88881484d2b59dfbafa136&media_id=4681647124316211&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=34tsO1&ab=3915-g1,5178-g1,3663-g0,5786-g0,966-g1,1493-g0,1192-g0,1191-g0,3601-g17,1258-g0&Expires=1631935806&ssig=fFWuNnPpa5&KID=unistore,video'

const promise=new Promise((resolve,reject)=>{
    let video=document.createElement('video');
    video.src=url
    video.controls='controls'

    //onloadedmetadata当视频加载元数据成功后执行
    video.onloadedmetadata=function(){
        resolve(video)
    }
    video.onerror=function(){
        reject('视频加载失败')
    }
})
promise.then((data)=>{
    console.log(data)
    let wrap=document.querySelector('.wrap');
    wrap.appendChild(data)
},(err)=>{
    console.error(err);
})
//将上面代码封装
function loadVideoSync(url){

    return new Promise((resolve,reject)=>{
        let video=document.createElement('video');
        video.src=url
        video.controls='controls'

        //onloadedmetadata当时拍加载元数据成功后执行
        video.onloadedmetadata=function(){
            resolve(video)
        }
        video.onerror=function(){
            reject('视频加载失败')
        }
    })

}

let promise=loadVideoSync(url)

promise.then((data)=>{
    console.log(data)
    let wrap=document.querySelector('.wrap');
    wrap.appendChild(data)
},(err)=>{
    console.error(err);
})

结果:

成功:

ES6重要知识点总结_第6张图片

失败:

ES6重要知识点总结_第7张图片

4 请求本地json案例

function AjaxSync(url){
    return new Promise((resovle,reject)=>{
        //1.创建ajax对象
        let ajax=new XMLHttpRequest()

        //3.监听状态改变
        ajax.onreadystatechange=function(){
            if(ajax.readyState==4 && ajax.status==200){
                //4.成功则调用resolve
                // console.log(ajax.responseText)
                resovle(ajax.responseText)
            }
        }

        //2.发起get请求
        ajax.open('get',url,true)
        ajax.send(null)
    })
}

const promise =AjaxSync('wearth.json')

promise.then((data)=>{
    var  data =JSON.parse(data)
    console.log(data)
},(error)=>{
    console.error(error)
})

wearth.json数据:

{"desc":"OK","status":1000,"data":{"wendu":"22","ganmao":"风较大,较易发生感冒,注意防护。","forecast":[{"fengxiang":"北风","fengli":"5-6级","high":"高温 24℃","type":"晴","low":"低温 11℃","date":"3日星期六"},{"fengxiang":"北风","fengli":"4-5级","high":"高温 19℃","type":"晴","low":"低温 8℃","date":"4日星期日"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 21℃","type":"晴","low":"低温 9℃","date":"5日星期一"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 21℃","type":"多云","low":"低温 10℃","date":"6日星期二"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 24℃","type":"晴","low":"低温 12℃","date":"7日星期三"},{"fengxiang":"无持续风向","fengli":"微风","high":"高温 23℃","type":"晴","low":"低温 11℃","date":"8日星期四"}]}}

该代码需要在服务器上运行,我使用的WampServer,把代码拷贝到WampServer的www目录下,在浏览器url路径中输入localhost,再进入对应的代码文件。输出结果为:

ES6重要知识点总结_第8张图片

10 async异步

ES2017 标准引入了async函数,使异步操作更加方便

async语法中,可以指定函数返回一个then方法添加的回调函数,当函数执行时,一旦遇到await就先返回等待异步的操作完成之后,再去执行await后面的语句

// async的使用
async function getData(){
    // let promise=new Promise(function(resolve,reject){
    //     setTimeout(resolve,2000,'网路请求成功');
    // })
    return new Promise((resolve,reject)=>{
        setTimeout(resolve,2000,'网路请求成功');
    })
}

async function showAsync(){
    let promise=getData();

    //await等待异步执行的结果后调用
    await promise.then((data)=>{
        console.log(data)
    },(error)=>{
        console.log(error)
    })

    //如果上面不加await,则会直接输出'111',过两秒后才输出'网络请求成功'
    //如果上面加了await,则输出的'111'要等待上面的'网络请求成功'完成后才执行
    console.log(111)
}
showAsync();

async的多种函数使用函数

//标准函数
async funtion foo(){

}

//函数表达式
var foo = async function(){
}

//对象内的方法
let obj = {
    async foo(){}
}

//箭头函数
const foo = async ()=>{}

async的错误处理机制

有时前一个异步操作失败也不要中断后面的异步操作,则可以把await放在try…catch结构。那么不管该异步操作是否成功,第二个await都会执行

主要功能:使用该方法用来防止出错的写法

语法:
try{
    需要执行的代码
}catch(error){
    //error自动获取失败的错误信息
    console.error(error)
}
async function foo(){
    try{
        let value = await new Promise(fun)
        let data = await value.getData();
    }catch(error){
        console.error(error)
    }
}

11 class类

什么是class(类)?

对某一种事物的总称

js其实不是严格意义上的面向对象的语言,因为js中没有类的概念。

在ES5以前生成实例对象主要通过构造函数,(构造函数就是一个普通函数),这种代码风格和传统的面向对象语言差异较大。

ES6提供了一种更接近于传统语言的写法,引入Class这个概念,作为模板定义构造函数。ES6中class只能被认为是一个语法糖,他的绝大部分功能,ES5都可以完成。只是class让对象原型模式更加清晰,更加面向对象。

11.1 基本使用

//ES5中定义一个构造函数
function Animal(name,color){
    this.name=name;
    this.color=color;
    this.say=()=>{
        console.log('喵~')
    }
}

let dog=new Animal('小米','白色')
console.log(dog)//Animal {name: "小米", color: "白色", say: ƒ}

//ES6中定义一个类
class  Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(`你好我是${this.name},我今年${this.age}岁了!`)
    }

    //注意这里面有简写比如:
    // constructor:function(){}直接省略了':function'
    // say:function(){}直接省略了':function'
}
let ming=new Person('小名',16)
ming.say()//你好我是小名,我今年16岁了!

11.2 class中的私有化

私有化方法:只能在内部访问

公有方法:在外部可以正常访问

常见的几种方式:

方式一:在方法名前加_

注意这种方法只是行业规则,程序员自己标记这个方法为私有方法,希望其他人使用的时候不要调用。但是我们还是可以在外部访问到

//ES6
class  Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(`你好我是${this.name},我今年${this.age}岁了!`)
    }
    //定义私有方法
    //方法一,方法名前添加_
    _goHome(){
        console.log(`${this.name}准备回家!`)
    }
}

方法二:将私有方法移除

//ES6
class  Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(`你好我是${this.name},我今年${this.age}岁了!`)
        //方法二:将私有方法移除,在say()方法中调用
        //通过apply,call,bind切换为当前实例化对象
        goHome.call(this)
    }
}
//方法二:将私有方法移除
function  goHome(){
    console.log(`${this.name}准备回家!`)
}

let ming=new Person('小名',16)
ming.say()//你好我是小名,我今年16岁了!
          //小名准备回家!

方式三:使用Symbol(推荐)

//ES6
let gooHome=Symbol()
class  Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(`你好我是${this.name},我今年${this.age}岁了!`)
        this[gooHome]()//?
    }
    [gooHome](){
        console.log('内部方法')
    }
}
let ming=new Person('小名',16)
//调用symbol()创建的私有方法
ming[gooHome]()//内部方法

11.3 class中this指向(了解)

class方法内部如果含有this,默认指向类的实例(new实例化出来的对象),一旦单独使用该方法,则可能报错

class Demo{
    constructor(name){
        this.name = name;
    }
    print(){
        console.log(this.name)
    }
}

var demo = new Demo('胡桃');
demo.print()//

// 结构赋值
let {print} = demo
// console.log(print)
// print()//报错

print中的this默认指向demo实例,如果将其单独使用,则this指代当前的运行环境

解决方案:箭头函数

class Demo{
    constructor(name){
        this.name = name;
        this.print = ()=>{
            console.log(this.name)
        }
    }
}

var demo = new Demo('胡桃');
console.log(demo)
demo.print()

// 结构赋值
let {print} = demo
print()

11.4 class中的继承(重点)

class的继承主要通过’extends’关键字继承

class Animal{}
class Dog extends Animal{}

继承父类Person的所有属性

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(`我的名字是${this.name},我今年${this.age}岁了!`)
    }
}
//继承父类Person的所有属性
class stu extends Person{

}

var ming=new stu('小明',16)
ming.say()//我的名字是小明,我今年16岁了!

继承父类Person的所有属性,并且还加新的属性

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(`我的名字是${this.name},我今年${this.age}岁了!`)
    }
}

class stu extends Person{
     // 若子类不需要添加新的属性,则不需要写构造函数
    constructor(name,age,score){
        super(name,age);
        this.score=score;
    }
    
    sayScore(){
        console.log(`${this.name}的成绩为${this.score}`)
    }
    
    toSay(){
        //调用父类的方法使用super和this
        super.say()
    }
}

var ming=new stu('小明',16,98)
ming.toSay()//我的名字是小明,我今年16岁了!
ming.sayScore()//小明的成绩为98分

12 导入导出

export导出文件
import引入文件

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号