JS新特性

尘珩

已于 2022-04-21 19:59:43 修改

阅读量825

点赞数 1

分类专栏： javascript 文章标签： javascript

于 2022-04-21 08:53:17 首次发布

本文链接：https://blog.csdn.net/m0_58656423/article/details/124312232

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ES6-ES11

ECMAScript
作用域：全局，函数，eval，块级

变量提升：

console.log(a);//并不会报错，会输出undefined
var a = 100;

异步编程解决方案：

生成器
promise
async和await

ES6

let关键字

```
let a,b, c;
let d=100
```

特性

1.变量不能重复声明

2.块级作用域

只在代码块里面有效

{let a = 100;}//let只在代码块中有效，不只是在{}里面，还有if else while for
console.log(a)
//报错

3.不存在变量提升

console.log(a);//会报错
let a = 100;

4.不影响作用域链

const关键字

```
const A = 100
```
注意事项：
- 1.一定要赋初始值
- 2.潜规则：一般常量使用大写，小写不报错
- 3.常量值不能修改
- 4.块级作用域
- 5.对于数组和对象的元素修改，不算对常量的修改，不会报错

变量解构赋值

ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值

模板字符串

ES6 引入了新的声明字符串的方式 ``
1.声明，与单双引号没区别
2.内容中可以直接出现换行符

3.变量拼接


        let a =`<ul>
                    <li></li>
                </ul>`
        console.log(a);
        let b = "abc"
        let c = "efg"
        let d = `${b}${c}`
        console.log(d);

对象的简化写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

在这里插入图片描述

箭头函数

ES6 允许我们使用箭头（=>）定义函数
声明函数：
- let a=(“形参a”,“形参b”)=>{return a+b}
调用函数：
- let b=a(1,2)
特性
- this是静态的，this是始终指向函数声明时所在作用域下的this的值
- 不能作为构造函数实例化对象
- 不能使用arguments变量

在这里插入图片描述

箭头函数的简写
- 省略小括号，当形参有且只有一个
- 省略大括号，当函数体只有一句，此时return必需省略，且语句执行结果就是返回值
箭头函数适合与this无关的回调（定时器，数组的方法回调）
不适合与this有关的回调（事件回调，对象方法）

函数参数的默认值

ES6允许给参数赋初始值

1.形参初始值,具有默认值的参数，一般位置要靠后

function add(a,b,c=10){
return a+b+c
}
add(1,2,3)//6
add(1,2)//13

与解构赋值配合

rest参数

ES6引入rest参数，用于获取函数实参，用来代替arguments
rest参数必须放在最后

扩展运算符

... 能将数组转化为参数序列（vue里的mapGetter啥的用到了）
数组合并（经常用）=》arr1.concat(arr2)
数组克隆
将伪数组转化为真正的数组

新的数据类型Symbol

创建方式

在这里插入图片描述

注意事项：
- 不能与其他数据进行运算，对比，比较
基本数据类型（USONB）
- U =>undefined
- S =>string symbol
- O=>object
- N=>null number
- B=>boolean
对象添加Symbol类型的属性

迭代器

必需有iterator接口才能遍历
for(let v in arr)=>for in 里面的v是数组下标
for(let v of arr)=>for of 里面的v是键值
迭代器制作过程：

生成器

其实是个函数
用于异步编程以前用纯回调函数
声明方法： function * xxx (){}
调用方法： xxx.next()
yield 是函数代码的分隔符
由next执行


       function * a(){
           console.log('hello');
           yield '你好啊'
           console.log("shabiiest");
           yield '再见'
           console.log("bye");
       }
    //    let c=a()
       c.next()
       for(let v of c){
           console.log(v);
       }

生成器函数传递参数
- next方法可以传递实参，将作为前一个yield的返回结果
回调地狱：一层一层的调，很多层

生成器实例

function m1(){
            setTimeout(()=>{
                console.log(111);
                c.next()
            },1000)
            
            }
        function m2(){
            setTimeout(()=>{
                console.log(222);
                c.next()
            },2000)
            }
        function m3(){
            setTimeout(()=>{
                console.log(333);
                c.next()
            },3000)
            }    
       function * a(){
           yield m1()
           yield m2()
          yield m3()
       }
       let c=a()
       c.next()

promise

异步编程：fs文件操作数据库操作 AJAX 定时器
Promise是一个构造函数，里面要传递一个function类型的参数，参数会收到两个形参：
- resolve(解决)，函数类型的数据，当异步任务成功时，调用
- reject(拒绝)，函数类型的数据，当异步任务失败时，调用

const p = new promise((resolve,reject)=>{
	//可以包裹一个异步操作
    xxxxxx
    if(xxxxx){resolve();//将Promise对象的状态设置为成功}
    else{reject();//将Promise对象的状态设置为失败}
})
p.then((value)=>{成功的时候调用},(reason)=>{失败的时候调用})

AJAX

创建对象
初始化，设置请求方法
发送请求
处理响应结果

 btn.onclick=function(){
        // 创建对象
        const xhr=new XMLHttpRequest();
        // 初始化，设置请求方法和url
        //清除本地缓存+Date.now()
        //超时设置
        xhr.timeout=2000;
        //超时回调
        xhr.ontimeout=function(){
            alert('网络不好')
        }
        //网络异常回调
        xhr.onerror=function(){
            alert('傻狗，网络异常')
        }
        xhr.open('GET','http://127.0.0.1:8080/delay');
        // 发送
        xhr.send();
        // 事件绑定 处理服务端返回的结果 
        // on when 
        // readystate xhr对象的属性，表示状态0(初始化)，1(open)，2(send)，3(服务端返回部分结果)，4(返回全部结果)
        // change
        xhr.onreadystatechange=function(){
            // 判断(服务端返回所有的结果)
            if(xhr.readyState === 4){
                // 判断响应状态码 2xx均表示成功
                if(xhr.status >= 200 && xhr.status <=300){
                    // 处理结果
                    //1.响应行
                    console.log(xhr.status);//状态码
                    console.log(xhr.statusText);//响应的状态字符串
                    console.log(xhr.getAllResponseHeaders());//所有的响应头
                    console.log(xhr.response);//响应体
                    div.innerHTML=xhr.response;
                }
                else{

                }
            }
        }
    }

Promise.prototype.then的返回值，返回结果是一个promise，状态是由回调函数执行结果决定的
- 如果回调函数返回的结果是非promise类型的属性，成功，返回状态为resolve，值为返回的值
- 如果回调函数返回的结果是promise对象，返回结果的promise的状态，就是Promise的状态
- 抛出错误，返回的状态是失败
链式调用改变回调地狱的现象
- ```
p.then(()=>{}).then(()=>{})
```
promise对象的catch方法
- 跟then一样，catch就是then不指定第一个参数

set

声明（会自动去重）

let s = new Set();
let s2 = new Set(["xx",'sss'])

元素个数 s.size
添加新元素 s.add(“xxxx”)
删除元素 s.delete(“xxx”)
检测集合里有没有该元素 s.has(“xxxx”) （存在返回true，不存在返回false）
清空 s.clear
由于有iterator接口，所以可以使用 for of 遍历

应用：

数组去重

let arr=[1,1,1,2,3,99,7,7,0]
let result =[ ...new Set(arr)]

交集

let arr=[1,1,1,2,3,99,7,7,0]
        let arr2=[1,3,5,5,7,8,6]
        let result=[...new Set(arr)].filter((item)=>{
            let result2=new Set(arr2)
            return result2.has(item)
        })
        console.log(result);

并集
```
let s =[...new Set([...arr,...arr2])]
```

差集

let diff = [...new Set(arr)].filter(item=>
           !(new Set(arr2).has(item))
        )

map

声明

let m = new Map()
m.set("name",'xxx')
let key ={
    school:"qinghua"
}
m.set(key,["中国","大连","xxx"])

返回Map元素个数 m.size
删除 m.delete(“name”)
获取 m.get(“xxx”)
清空 m.clear()
for (let v of m){},遍历的v，是键值对数组

class

class 并不能提升声明，要先初始化才能使用

    class Phione{
        //构造方法 名字不能修改，在构造实例化时，自动执行
        constructor(brand,price){
            this.brand=brand;
            this.price=price;
        }
        //这里只能写ES6的简写形式
        call(){
            console.log(`hello${this.brand}`);
        }
    }
    //   function Phione(brand,price){
    //     this.brand=brand;
    //     this.price=price
    // }  
    // Phione.prototype.call=function(){
    //     console.log(`hello${this.brand}`);
    // }
    let huawei=new Phione("华为",6666)
    huawei.call()
    console.log( Phione);

class静态成员
- 属性属于类，不属于实例对象
class Phnoe {
static name = “手机”
static change(){
console.log(“改变世界”)
}
}
let huawei = new Phone()
console.log(huawei.name)//undefined
console.log(Phone.name)//手机

构造函数继承

ES5（构造函数继承）

有个call方法，和Java有点像，可以自动生成this.xxx=xxx

function Phone(brand,price){
        this.brand=brand;
        this.price=price
    }  
    Phone.prototype.call=function(){
        console.log(`hello${this.brand}`);
    }
    function SmartPhone(brand,price,color,size){
        Phone.call(this,brand,price)
        this.color=color
        this.size=size
    }
    SmartPhone.prototype = new Phone;
    const a = new SmartPhone("锤子",9999,111,1181)
    console.log(a);

ES6（class）
使用extends进行继承（好像和c++有点像）
使用super(xxx,xx)代替this.xxx=xxx;this.xx=xx（和python有点像）

 class Phone{
        //构造方法 名字不能修改，在构造实例化时，自动执行
        constructor(brand,price){
            this.brand=brand;
            this.price=price;
        }
        //这里只能写ES6的简写形式
        call(){
            console.log(`hello${this.brand}`);
        }
    }
    class SmartPhone extends Phone{
        constructor(brand,price,color,size){
            super(brand,price);
            this.color=color;
            this.size=size;
        }
    }
    const a = new SmartPhone("锤子",9999,111,1181)
    console.log(a);

子类对父类方法的重写(直接在子类方法里面写)

class中的getter和setter设置

数值扩展

Number.EPSILON是js表示的最小精度，接近于 2.2204460492503130808472633361816E-16，如果两个数差值小于这个数，我们就称这两个数相等，js的浮点数运算有点问题，这个可以解决
二进制和八进制
- 二进制以0b开头
- 八进制以0o开头
- 十六进制以0x开头
Number.isFinite() 检测一个数是否为有限数
Number.NaN() 检测一个数值是否为NaN
Number.parseInt() Number.parseFloat() 将字符串转整数/浮点数
Number.isInteger() 判断一个数是否为整数，返回值为true/false
Math.trunc 将数字的小数部分抹掉
Math.sign ：判断一个属到底是正数，0，还是负数，正数返回1，零返回0，负数返回-1

对象方法的扩展

Object.is(x1,x2) 判断两个值是不是完全相等，类似于===，但Object.is(NaN,NaN）返回值为true
Object.assign(“被覆盖的对象”,“覆盖的对象”)，可以将两个对象进行合并，相同属性后者覆盖前者
Object.setPrototypeOf(“子类”,“父类”)设置原型对象，类似与继承但不推荐这么做
Object.getPrototypeof(“子类”)，可以获得原型对象

模块化

export用于暴露接口

分别暴露：

统一暴露：

在这里插入图片描述

默认暴露：

import方法：

bable模块化代码转换（将ES6转化为ES5的）

ES7新特性

Array.protorype.include(“xxx”),数组里是否包含某个元素值
添加了 2**10 =>1024(和python一样)=> Math.pow(2,10)

ES8

async和await

异步编程的新的解决方案，两种语法结合可以让异步代码像同步代码一样
async
- 返回值为promise对象
- promise对象的结果由async函数执行的返回值决定
- resolved已经变成了fulfilled
- 返回的不是一个promise对象
  - 函数return 字符串，返回值为空，结果都是成功的promise
  - 抛出错误，返回错误的promise对象
- 返回的值是promise对象，promise对象成功了，结果就是成功的
- 返回的值是promise对象，promise对象失败了，结果就是失败的

await

await必须写在async函数中
await右侧表达式一般为promise对象
await返回的是一个promise成功的值

await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // resolve(100)
                reject("失败了")
            },1000)})
        async function fn(){
           try{let a=await p
            console.log(a);} 
           catch(e)
            {console.log(e);}
        }
       fn()

对象方法扩展

获取所有的键 Object.keys(“对象名字”)

let a = {
name : "aaaa",
city : ["x","xx","xxx"]
}
console.log( Object.keys(a))

获取所有的值 Object.values(“对象名字”)
```
console.log(Object.values(a))
```
entries
- 可以用来创建map
```
console.log(Object.entries(a))
```
获取对象的属性特征Object.getOwnPrototypeDescriptor(“对象名字”)
- 可以用来对象的深层次克隆

ES9

rest 参数与扩展运算符
rest
扩展运算符Vue用过

ES10

字符串方法扩展

trim清除字符串的空白字符
trimStart清除字符串左侧空白
trimEnd清除字符串右侧空白

数组方法扩展

arr.flat(“深度，降几层”) 将多维数组转化为低维数组
arr.flatMap，将Map转化为低维数组

SYMBOL.PROTOTYPE.DESCRIPTION

symbol的属性扩展

ES11

私有属性（参考其他非脚本语言）

声明：属性前加#号
私有属性不能直接访问

Promise.allSettled

接受一个promise类型的数组，返回的结果也是一个promise类型的对象，但结果永远成功

Promise.all

接受一个promise类型的数组，返回的结果也是一个promise类型的对象，但有一个失败，结果就是失败

可选链操作符

新数据类型BigInt

声明：数字后加n： let n =512n
BigInt(n),数字转化成大整形，不能转化浮点数
用于更大数值的运算
不能直接跟普通Int做运算

绝对全局对象

globalThis始终指向全局对象

尘珩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS新特性

js新特性
复制链接

扫一扫

专栏目录