ES6的新特性

最新推荐文章于 2024-10-07 09:24:46 发布

weixin_58732695

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量258

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_58732695/article/details/125357440

版权

本文详细介绍了ES6中的新特性，包括模板字符串的使用，Symbol作为唯一的数据类型，Set集合的创建与操作，Map集合的遍历与成员访问，以及静态成员的概念。此外，还讲解了类的创建、继承以及函数参数的默认值和箭头函数的用法。最后，探讨了模块化导出与导入的实现。

摘要由CSDN通过智能技术生成

模板字符串

ES5中采用字符串拼接。例如：'姓名’ :'+name',性别’+sex

ES6中采用反引号（``)若要用变量采用￥（变量名）方式嵌入反引号中
let arr={
    uname:'刘备',
    age:35
},
{
    uname:'关羽',
    age:25

},
{
    uname:'张飞',
    age：30
},
let str=''
for(let item of arr){
    str+=`姓名：￥{item,uname},年龄：￥{item,age}\n`
}
console.log(item)

Symbol

ES5中基本数据类型：number boolean undefined null string object

ES6新增数据类型：Symbol 唯一数据类型

A.使用方法：

let 变量名=Symbol

或

let 变量名=Symbol('字符串'）
const id1=Symbol('111')
const id2=Symbol('111')
let obj1={
    id:id1,
    name:'张三'
}
let obj2={
    id:id2,
    name:'李四'
}
console.log(obj)
console.log(obj2)
console.log(obj.id===obj2.id)

Set集合

一种数据结构，类似于数组，不能存放重复的值，用于数组去重、字符串去重

创建方式：new Set（）

常用方法：add（）向集合中添加元素

delete（）删除元素

clear（）亲空所有元素

let set =new Set()
set.add(1)
set.add(2)
set.add(3)
set.add(3).add(12).add(15)
console.log(set)//输出：set（5）{1,2,3,12,15}
console.log(...set)//输出：1,2,3，12,15
console.log([...set])//输出：[1,2,3,12,15]
set.delete(12)//返回true表示删除成功，false表示删除失败
console.log([...set])
console.log(set(12))//判断集合中12元素是否存在
set.clear()
console.log(set)

集合遍历：Set集合中key和value是相同的，所以keys{}和values{}的返回值是一样的

a.获取集合的keys或values进行遍历

b。通过forEach()循环

通过数组构造一个set集合

实现集合的并集和交集

WeakSet集合：只能存放对象，支持add.用于存储DOM节点，不用担心节点从文档中泄露

let set=new Set()
set.add('西安').add('咸阳').add('渭南').add('宝鸡')
for(let i of set.keys()){//keys函数的作用：获取set中所有的键{key}，返回集合
    console.log(i)}
    console.log('------------')
for(let t of set.values()){//values()函数的作用：获取set中所有的值{value}，返回值是集合
consaole.log(t)}

set.forEach(function(key){
console.log(key)}
)


let arr=[11,22,33,44,55]
let list=[66,77,22,33]
let A=new Set(arr)
let B=new Set(list)
//实现A和B的并集
let C=new Set([...A,...B])
console.log('A集合：',...A)
console.log('B集合：'，...B)
console.log('A和B的并集：',...C)
//实现A和B的并集
let D=new Set([...A].filter(function(val){
if(B.has(val))
{return val}
}))
//通过过滤器找到两个集合中都出现的元素
console.log('A和B的交集：'，...D)

let ws=new WeakSet()
ws.add({id:1001,uname:'刘备'})
//ws重要存放的是一个对象{}
console.log(ws)

Mep集合

在ES5中没有Maps，但是有object对象（采用hash结构：key-value）键（key）的数据类型只能是字符串

ES6种增加了Map

属性：size表示集合中的元素个数

常用方法：set（）：添加数据 get（）获取数据 has（）检测key是否存在 delete（）删除key clear（）清除所有元素

遍历顺序就是插入顺序

a.keys（）：返回map所有的key

b.values:返回map中所有的value

c.entries:返回所有map成员

d.forEach

函数带两个参数，第一个参数对应key 第二个参数对应val；一个参数时对应val

将key/value转化为数组：使用...运算符

可以对map中的元素过滤，使用过滤器
let map=new Map()
//创建map
map.set('id',1001)
map.set('name','刘备')
map.set('age',25)
console.log(map,size)
let n=map.get('name')
//get (key)
console.log(n)
console.log(map.has('age'))
//map集合的遍历顺序就是插入顺序
for(let i of map.keys()){
    //console.log(key)
    console.log(`${key}:${map.get(key)}`)
}
for(let val of map.values()){
    console.log(val)
}
for(let kv of map.entries()){
    console.log(kv)
}
for {let [key,val]of map.entries()}{
console.log(`${key}:${val}`)
}
map.forEach(function(key,val){
console.log(`${key}:${val}`)
})
//将key转化为数组
let k =[...map.keys()]
conaole.log(k)
//将value转化为数组
let v=[...map.values()]
console.log(v)
let obj=[...map.entries()]
console.log(obj)
let map=new Map()
map.set('101',15)
map.set('102',5)
map.set('103',150)
map.set('104',20)
console.log(map)
//将map中value是偶数的键值（key-value）对过滤出来，存入一个新的map中
let map1=new Map([...map].filter(function([key,val]){
    if(val%2==0){
        return [key,val]
    }
}))

静态成员

：类的所有对象共享的成员说明：类的成员包括成员属性（变量）和成员方法

//ES5中静态成员的定义
function Student (name,age){
    this.name=name
 this.age=age
}Student.school='西安邮电大学'
//studentshistudent静态属性，为所有成员共享

ES5中定义静态成员的方法：

静态属性：构造方法名.属性名//属性是静态的，为所有对象共享

静态方法：构造方法名.方法名

//ES5中静态成员的定义
function Student (name,age){
    this.name=name
     this.age=age
//Student.school='西安邮电大学'
//studentshistudent静态属性，为所有成员共享
Student.prototype.showInfo(){
    console.log('学校'+this.school)
    console.log('姓名'+this.name)
    console.log('年龄'+this.age)
}
}
var s1=new Student('曹操',23)
var s2=new Student('袁绍',24)
var s3=new Student('刘备',25)
Student.school='西安邮电大学'
 s1.showInfo()
 s2.showInfo()
 s3.showInfo()

ES6中静态成员的定义：用static关键字来定义

class Student{
    static school='西安邮电大学'
    constructor(name,age){
        this.name=name
        this.age=age
    }
    show(){
        console.log('学校'+Student.school)
        console.log('姓名'+this.name)
        console.log('年龄'+this.age)
    }
    static fun (){
        console.log('我是静态方法')
    }
}
var s1=new Student('林黛玉',20)
var s2=new Student('贾宝玉',28)
Student.school='中国邮电大学'
s1.show()
s2.show()

类的继承

ES6中通过extends关键字来实现

class Father{
    constroctor(name){
        this.name=name
    }
    fun(){
        console.log('我是父亲的方法')
    }
}
class Son extends Father{
    constroctor(name){
        super(name)
    }
    hobby(){
        console.log('我爱打篮球')
    }
}
var S1=new Son('张无忌')
S1.fun()//子类对象调用父类的方法
S1.hobby()//子类对象调用自己的方法

ES5中t通过call.bind关键字来实现类的继承

function Father(name){
    this.name=name
    this.fun =function(){
        console.log('我是父亲的方法')
    }
}
function Son(name){
    Father.call(this,name)
    Father.bind(this)(name)
    this.hobby=function(){
        console.log('我爱打篮球')
    }
}
var s1=new Son('张无忌')
s1.fun()//继承了父亲的方法
s1.hobby()

模块

：一个模块就是一个js文件，在模块内定义的变量函数对象在模块外无法访问

在模块外部访问模块内部内容，在ES6中可以将其导出

导出方法：export到户一个变量 export{..}导出多个变量 import导入

默认导出：export default名称

一个模块只有一个默认导出，导入名称和导出名称可以不一致

一个默认导出，包含多个内容，可以打包到对象中
let username ='西安邮电大学'
let userage=20
let showinfo=function(){
    console.log('校名'+username)
    console.log('年龄'+userage)
}
export{
    username as name,
    userage,
    showinfo
}
let username ='西安邮电大学'
let userage=20
let showinfo=function(){
    console.log('校名'+username)
    console.log('年龄'+userage)
}
export{
    username as name,
    userage,
    showinfo
}


import { userage,username,showinfo } from "./01.js"; 
import * as info from "./01.js"
console.log(info.userage)
//export default function()
var obj={
   f1(){
    console.log('xian')
   },
   //一个方法
   pt:'aaaa'
   //一个属性
}
export default obj
import fun from"./01/js"
//导入01模块中默认导出韩束，命名为fun
import fun from"./01.js"
//fun是一个对象，等价于fun=obj
fun.f1()//调用导入模块的f1函数
fun.pt//调用导入模块的pt方法
node运行.js文件不识别模块化指令

报错：SyntaError Cannot use import statement outside module

原因：node模块化指令和ES6的模块化指令不同：node不支持 ES6模块化指令

解决办法：将js文件放入html文件中，<script type="moudle" src='../js/t6.js'</script>

给vscode安装插件：live server 目的是解决跨域访问问题

函数

函数参数的默认值

   function fun(name='张三',age,cb){

       函数体语句;
   }

箭头函数

（1）没有参数用括号代替

       let fun = ()=>{ 函数体语句 }

           b、只有一个参数,省略'()'

           let fn = arg=>{ 函数体语句 }

           c、箭头函数本身隐含有return的作用(函数体只有一条语句,不带'{}')

           let add = (arg1,arg2)=> arg1+arg2

           等价于

           let add = function(arg1,arg2){

               return arg1+arg2
               }

（2）在箭头函数中若要使用隐式返还的功能返回一个对象,则必须用'()'将对象括起来

           let test = ()=>({})

           e、在箭头函数中没有this绑定

           f、在箭头函数中没有内置的对象arguments

类

ES5类的创建

定义构造方法,在构造方法中封装类的功能,使用new运算符创建类的对象

      在ES6中使用class关键字创建类，语法更简洁、语义化更强

      ES6支持getter(获取属性值)和setter(设置属性值)方法

           class Person{
               constructor(name,age){
                   this.pname = name
                   this.page = age
               }
               get pname(){ //必须带get,方法名必须和属性名相同，用来获取私有属性pname的值

                   return this._pname //pname必须带上'_',表示pname是Person类的私有属性
               }
               set pname(newName){//setter方法用来设置私有属性pname的值，必须带set

                   this._pname = newName
               }
           }

           var p1 = new Person('关羽',28)
           console.log(p1.pname) //默认调用的是get方法（pname()）

           p1.pname = '李四' //默认调用的是set方法

           强调：属性的getter和setter方法必须同时定义