ES6新特性

门板_

已于 2024-05-10 17:05:51 修改

阅读量943

点赞数 10

文章标签： es6 javascript 笔记

于 2024-05-07 18:20:32 首次发布

本文链接：https://blog.csdn.net/like_a_diamond/article/details/138161563

版权

1.let声明变量

不允许重复声明、没有变量提升

暂存性死区

let a =1
function test(){
    console.log(a)//undefined
    let a=2
}
test()

不与顶层对象挂钩

let a =1
console.log(window.a)//undefined

块级作用域

var oli=document.querySelectorAll("ul li")
for(var i=0;i<oli.length;i++){
    oli[i].onclick = function(){
        console.log(i)//3 3 3
    }//点击是一个异步操作，for循环执行完了才打印
}

for(let i=0;i<oli.length;i++){
    oli[i].onclick = function(){
        console.log(i)//1 2 3
    }
}

2.const 声明常量

不允许被修改、初始化必须赋值、不能重复定义、块级作用域、声明不提升、暂存性死区、不与顶层对象挂钩

const obj={
    name:"123",
    age:100
}
obj.name="111"//可以修改成功
//如果不想被修改 freeze
const myobj=Object.freeze({
    name:"123",
    age:100
})
myobj.name='111'//不能修改

3.解构赋值

let str = 'test'
let [a,b,c]=str //t e s
let {length}=str //3

//默认值
let [x=1]=[]//x 1
let [x=1]=[100]//x 100

//对象
let obj={
    name:"123",
    age:100,
}
let {age}=obj //100

//重命名
let code = 'AAA'
let res={
    code:200;
    data:"111"
}
let {code} =res //报错
let {data,code:co}=res
console.log(co)//200

4.模板字符串

5.字符串方法

includes ('a',1) 判断字符串中是否存在指定字符下标，索引1开头的地方开始往后找
startswith('a',1) 判断一个字符或者字符串是否在指定的字符串开头，索引1开头的地方开始往后找
endswith('a',3) 判断一个字符或者字符串是否在指定的字符串结尾，索引3开头的地方开始往前找
repeat(2) 重复n次返回新的字符串包含原来那次 repeat(0)返回空字符串

6.数值扩展

6.1支持2进制、八进制写法

打印会自动转换为10进制

6.2Number.isFinite(100)

//true 对于非数值一律返回false 检测一个数值是否为有限数

6.3Number.isNaN(NaN)

//true 对于非NaN一律返回false

6.4 isInteger方法：判断一个数是否为正数

6.5极小常量值 Number.EPSILON

如果两个数的差小于极小常量值那就认为这两个数相等

6.6Math.trunc方法：抹掉小数部分

6.7 Math.sign方法

用来判断一个数到底是正数、负数、还是零，对于非数值会将其先转换为数值。

6.8Number.parseInt、Number.parseFloat：字符串转换为整数

//会截掉文字部分
Number.parseInt('1234123dff')//1234123
Number.parseFloat('3.1223isdf')//3.1223

7.数组扩展

7.1扩展运算符

let arr=[1,2,3,4,5,6]

let arr2=[...arr]
arr2.pop()
console.log(arr,arr2)
//合并数组
console.log(...arr,...arr2)

//解构赋值 ...只能放在最后
let arr1={
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}
let {a,b,...c}=arr1
console.log(c) //{ c: 3, d: 4, e: 5 }

7.2Array.from

//类数组转换为数组
function test(){
    console.log(Array.from(arguments))
}
test(1,2,3,4)
let li = document.querySelectAll("li")
li.map()//报错
Array.from(li).map(item=>{})

7.3Array.of

新建一个数组

let arr1=Array(3) //[empty*3]
let arr2=Array.of(3) //[3]

7.4find findIndex findLast findLastIndex

let arr=[11,12,13,14,15]

//find 查找第一个符合条件的值
let res =arr.find(item=>{
    return item>13
})

//findIndex 查找第一个符合条件的下标
let res =arr.findIndex(item=>{
    return item>13
})
//findLast 从后往前 查找第一个符合条件的值
let res =arr.findLast(item=>{
    return item>13
})

//findIndex 从后往前 查找第一个符合条件的下标
let res =arr.findLastIndex(item=>{
    return item>13
})

7.5fill

填充

let arr=new Array(3).fill("123")
let arr1 =[11,22,33]
console.log(arr1.fill("123",0,2))//替换 从下标0到2不包括2(默认替换所有元素)

7.6flat、flatMap

把二维数组展开成一维数组扁平化数组

let arr=[1,2,3,[4,5,6]]
console.log(arr.flat())// [1,2,3,4,5,6]不会改变原数组

//复杂结构的二维数组
let arr2=[
    {
     name:"A",
     list:["11","22",,"33"]   
    },
    {
     name:"B",
     list:["AA","BB",,"CC"]   
    }
]

let res=arr2.flatMap(item=>{
    return item.list
})
//["11","22",,"33","AA","BB",,"CC"]

8.对象扩展

8.1 对象简写

8.2 表达式写法

//表达式
let name="a"
let obj={
    [name]:"123"
}
console.log(obj)//{a:"123"}

8.4 扩展运算符... ES2018

//复制
let obj={
    name:"123"
}
let obj1={
    ...obj
}
console.log(obj1)//{name:"123"} 修改obj1 obj不会受到影响

//合并
console.log({...obj,...onj1})
//不同名合在一起，同名后面会覆盖前面的

8.5 Object.assign(obj1,obj2,obj3)

合并对象但是会修改obj1的值为最终合并的结果

8.6 Object.is(a,b)

判断两个值是否完全相等

===和==的弊端：无法判断NaN

NaN===NaN //false NaN==NaN //false

8.7设置原型对象（setPrototypeOf）

    const test={
        name:"123"
    }
    const test2={
        arr:['12','34','56']
    }
    Object.setPrototypeOf(test,test2)
    console.log(test.arr)//['12','34','56']
    console.log(Object.getPrototypeOf(test))

9.函数的扩展

9.1rest 剩余参数

function test(x,y,...data){
     console.log(data)//[3,4,5]
}
test(1,2,3,4,5)
console.log(test.name)//函数名 name

9.2箭头函数

只有return可以省略
但返回对象需要加括号

无法访问arguments 无法new

let test=()=>{
    console.log(arguments)
}
test(1,2,3)

箭头函数没有this，this指向父作用域

10.Symbol

表示独一无二的值，属于js的原生数据类型之一

let a =Symbol()  //生成symbol类型的数据
let b =Symbol()
console.log(a===b)//false

1.不能进行运算 a+"" a>1 都不行

2.显示调用toString()
a.toString + '111'

3.隐式的转换boolean
if(a){
    console.log('111')
}

//使用1
let obj={
    name:"test"
}
let name=Symbol()
obj[name]="123"
console.log(obj)//{name:"test",Symbol():"123"}
console.log(obj[name])//"123"

//使用2
let name=Symbol()
let age=Symbol()
let obj={
    [name]:"123",
    [age]:"111"
}
console.log(obj)//{Symbol():"123",Symbol():"111"}

//优化
let keys={
    name:Symbol("name"),
    age:Symbol("age"),
    location:Symbol("location"),
    test:Symbol("test"),
}

let obj={
    [keys.name]:"123",
    [keys.age]:18,
    [keys.location]:"123",
    [keys.test](){
        console.log("test")
    }
}

obj[keys.test]()

//Symbol的属性无法被 for in 遍历出来

Object.getOwnPropertySymbols(obj)

Reflect.ownKeys(obj).forEach(item=>{
    console.log(item,obj[item])
})

作为常量

11.Iterator迭代器

对象中的一个属性，具备iterator接口，可以使用for of 遍历

原理：

let iterator=xiyou[Symbol.iterator]()
console.log(iterator.next())//{value:"唐僧",done:false}

给对象设置迭代器

迭代器自定义遍历对象

12.生成器函数

特殊函数异步编程纯回调函数 fs ajax mongodb 解决回调地狱

生成器函数写法

用next方法执行

参数传递

实例-解决回调地狱

Promise

13.set结构

类似于数组，但成员值都是唯一的，没有重复的值

会删掉重复的值 (自动去重)

let s1 =new Set([1,2,2,3,4,5])
console.log(s1) //{1,2,3,4}

let s2=new Set()
s2.add(1)
s2.add(2)
s2.add(2)
s2.add(3)

可以用for of 遍历

set的实例属性和方法

s1.size //length 长度
s1.add(5).add(6) //添加元素
s1.has(5) //true 是否存在
s1.delete(5)//删除
s1.clear()//全部清除

14.Map结构

【ES6 Map数据结构】建议日常开发操作数组时使用 new Map_es6 new map-CSDN博客

类似于对象，也是键值对的集合，但键的范围不限于字符串，各种类型的值（包括对象）都可以当作键可以使用扩展运算符和for of

map的实例属性和方法

15.class类

原本的es5写法

function Test(phone,price){
    this.phone = phone;
    this.price = price;
}
Test.prototype.getPrice = function(){
    return this.price;
}
var test = new Test('iphone',100);

console.log(test.getPrice());
console.log(test);

es6 class类写法

class Test{
    constructor(phone,price){
        this.phone = phone;
        this.price = price;
    }
    //方法必须使用该语法 不能使用es5对象完整形式
    getPrice(){
        console.log('123');
    }
}
var test = new Test('iphone',100);
console.log(test);

静态属性(static)

function Test(name,age){
    
}
Test.name = 'iphone';
Test.change=function(){
    console.log("12332");
}
var test = new Test('iphone',100);
console.log(test.name);//undefined
console.log(Test.name);//iphone

class Test {
    static name = 'iphone';
    static change(){
        console.log("12332")
    }
}
let test = new Test();
console.log(test.name);//undefined
console.log(Test.name);//iphone

类的继承

子类重写父类的方法：在子类中声明一个同名的方法

class Test {
    constructor(brand,price) {
        this.brand=brand;
        this.price=price;
    }
    call(){
        console.log('call');
    }
}

class Phone extends Test {
    constructor(brand,price,color,size){
        super(brand,price);//子类调用父类的构造方法 Test.call(this,brand,price);
        this.color=color;
        this.size=size;
    }
    photo(){
        console.log('photo');
    }
    play(){
        console.log('play');
    }
    //子类重写父类的方法
    call(){
        //这里不能用super
        console.log('call-son');
    }
}

const phone=new Phone('apple',5000,'red','5.5inch');
console.log(phone);
phone.call(); //call-son
phone.photo();
phone.play();

get和set

class Test {
  get price(){
    console.log('price被访问了')
    return '100';
  }
  //set必须要有一个参数
  set price(val){
      console.log('price被设置了')
  }
}
//
const t = new Test();
console.log(t.price);
t.price='free