ES特性学习

ES

ES全称EcmaSctipt，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaSctipt的一种实现，所以ES新特性其实指的就是JavaScript的新特性

一、ES6

1.1 let和const

1.1.1 let

1. 声明变量

   let a;
   let b,c,d;
   

2. 特性

• 变量不能重复声明，例如：

  let star = 'xxx';
  let star = 'yyy';
  

• 块级作用域 全局，函数，eval

  {
      let star = 'xxx';
  }
  console.log(star)
  //此时会报错
  

• 不存在变量提升

  console.log(song);
  let song = 'hello'
  

• 不影响作用域链

  {
      let song = 'hello';
      function fn(){
          console.log(song);
      }
      fn();
  }
  //能输出正确结果
  

1.1.2 const

1. 声明常量

   const SONG = 'HELLO';
   

2. 特性

• 一定要赋初始值

   const A;
   //会报语法错误

• 一般常量使用大写(潜规则)

• 常量的值不能修改

• 块级作用域

• 对于数组和对象的元素修改，不算做对常量的修改，不会报错

  const TEAM =['UZI','MXLG','letme'];
  TEAM.push('meiko');
  //不会报错 因为TEAM指向的是一个地址值 添加只是改变了地址值所指向的存储单元 并未改变TEAM存储单元的值
  

1.2 结构赋值

//对象的结构
const zhao = {
    name:'1111',
    age:'23',
    xiaopin:function(){
        console.log('123')
    }
}

let {xiaopin} = zhao;

1.3 模板字符串

1.声明

let str = `我也是一个字符串`；

2.内容中可以直接出现换行符

3.变量拼接

1.4 箭头函数

//声明
let fn = (a,b) => {
    return a+b;
}

//调用
fn(1,2);

箭头函数的声明与以前的区别

• this是静态的。this始终指向函数声明时所在作用域下的this的值

/*例子*/
function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}
//设置window对象的name属性
window.name = '123'
const school = {
    name:'456'
}

//直接调用
getName()    //输出结果：'123'
getName2()    //输出结果：'123'

//call方法调用
getName.call(school);      //输出结果：'456'
getName2.call(school);     //输出结果：‘123

• 不能作为构造实例化对象

let Person = (name,age) => {
    this.name = name;
    this.age = age;
}
let me = new Persom('xiao',20)   //输出结果：报错

• 不能使用arguments变量
• 箭头函数的简写
  • 省略小括号，当形参有且只有一个的时候
  • 省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值

1.5 参数默认值

允许给参数赋值初始值

1. 形参初始值，具有默认值的参数，位置一般都靠后（潜规则）

   function add(a,b,c=10) {
       return a+b+c;
   }
   let result = add(1,2)
   

2. 与解构赋值相结合

   function conncet ({host,username,password,port}) {
       console.log(host)
   }
   connect({
   	host:'localhost',
       username:'name',
       pasword:'word',
       port:'port'
   })
   

1.6 rest参数

function date(...args){
    console.log(args)
}
date('ajiao','lumon');         //输出结果说数组形式

1.7 扩展运算符

​ […]

1.8 Symbol基本使用

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值

特点：

• Symbol的值是唯一的，用来解决命名冲突的问题
• Symbol值不能与其他数据进行运算
• Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

1.9 迭代器

​ 迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

1. ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费
2. 工作原理
   • 创建一个指针对象，指向当前数据结构的起始位置
   • 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
   • 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
   • 每调用next方法返回一个包含value和done属性的对象

1.10 生成器函数

生成器其实是一个特殊的函数，来进行异步编程

function * gen(){
    console.log('hello')
}
let iterator= gen();
iterator.next();

yield是函数代码分隔符

function * gen(){
    yield '111';
    yield '222';
    yield '333';
}
for(let v of gen){
    console.log(v)
}

1.11 Promise

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

//实例化Promise对象
const p = new Pormise(function (resolve,reject){
    setTimeout(function(){
        let data = 'hello'
        resolve(data)
    })
})
//调用promise对象的then方法
p.then(function(value){
    
},function(reason){
    
})

1.12 Set

//声明一个set
let s= new Set();
let s2 = new Set(['json','bob','nik'])

//元素个数
s.size
//添加新的元素
s.add('willim')
//删除元素
s.delete('json')
//检测
s2.has('json')
//清空
s2.clear()

1.13 Map

//声明Map
let m = new Map();

//添加元素
m.set('name','Peter');
m.set('change',function(){
    console.log('改变')
})
let key = { school:'AI'}
m.set(key,['bob','nik'])

1.14 class类

1.15 数值扩展

• Number.EPSILON是javaScript表示的最小精度
• 进制
  • 八进制：let b = 0b1010
  • 二进制：let o = 0o777
  • 十进制：let d =100
  • 十六进制：let x = 0xff
• Number.isFinite 检测一个数值是否为有限数
• Number.isFNaN 检测一个数值是否为NaN
• Number.parseInt Number.parseFloat 字符串转整数
• Number.isInteger 判断一个数是否为整数
• Math.trunc 将数字的小数部分抹掉
• Math.sign 判断一个数到底是正数 负数 还是零

1.16 对象方法扩展

• Object.is 判断两个值是否完全相等 Object.is(120,120)

• Object.assign 对象的合并

  const config1 = {
      host:'localhost',
      port:3306,
      name:'root',
      pass:'root'，
      test:'test'
  }
  const config1= {
      host:'http://',
      port:33060,
      name:'bob',
      pass:'bob'
  }
  Object.assign(config1,config2)  //config2的值覆盖config1的值，当config2中没有完全覆盖config1的值时，相应的字段显示config1的值
  

• Object.setPrototypeOf 设置原型对象

1.17 模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处：

• 防止命名冲突
• 代码复用
• 高维护性

二、ES7新特性

2.1 includes

includes方法用来检测数组中是否包含某个元素，返回布尔类型值

const mingzhu = ['西游记','水浒传','三国演义','红楼梦']
console.log(mingzhu.includes('西游记'))

2.2 指数操作符

在ES7中引入指数运算符[**]，用来实现幂运算，功能与Math.pow结果相同

三、ES8新特性

3.1 async和await

async和await两种语法结合可以让异步代码像同步代码一样

1. async函数

   • async函数的返回值为promise对象
   • promise对象的结果由async函数执行的返回值决定

2. await表达式

   • await必须写在async函数中
   • await右侧的表达式一般为promise对象
   • await返回的时promise成功的值
   • await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

3.2 Obkect.values 和 Object.entries

1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
2. Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

//声明对象
const school = {
    name:"popmart",
    cities:['西安','上海','北京'],
    price:['68','70']
}
//获取对象所有的键
Object.keys(school)
//获取对象所有的值
Object.values(school)
//entries
Object.entries(school)

四、ES9

4.1 对象展开

rest参数与spread扩展运算符在ES6中已经引入，不过ES6中只针对于数组，在ES9中为对象提供了像数组一样的rest参数和扩展运算符

五、ES10

5.1 对象扩展方法

 //二维数组
   const res = Object.fromEntries([
       ['name','RHF'],
       ['cities','成都','武汉']
   ])
   console.log(res) //{name: "RHF", cities: "成都"}

//Map
   const m = new Map();
   m.set('name','ranhaifeng')
   const result = Object.fromEntries(m)
   console.log(result); //{name: "ranhaifeng"}

5.2 trimStart 和trimEnd

  //trim
   let str= ' asd  '
   console.log(str) //asd
   console.log(str.trimStart()) //asd  清空头空格
   console.log(str.trimEnd()) //  asd  清空尾空格

5.3 flat与flatMap

  const arr = [1,2,3,[4,5,6,[7,8,9]]]
    //参数为深度，是一个数字
    console.log(arr.flat(2)) //[1,2,3,4,5,6,7,8,9]

	const arr2=[1,2,3,4]
    const result = arr2.flatmap(item => [item * 10]); //如果map的结果是一个多维数组可以进行flat 是两个操作的结合

5.4 Symbol的description

let s = Symbol('尚硅谷');
console.log(s.description) //尚硅谷

六、ES11

6.1 私有属性

class Person {
        //公有属性
        name;
        //私有属性
        #age;
        #weight;

        //构造方法
        constructor(name, age, weight) {
            this.name = name;
            this.#age = age;
            this.#weight = weight;
        }
        intro(){
            console.log(this.name);
            console.log(this.#age);
            console.log(this.#weight);
        }
    }

    //实例化
    const girl = new Person('陈', 18, '45kg');
    console.log(girl.#age) //error
    console.log(girl); //Person{name: "陈", #age: 18, #weight: "45kg"}
    girl.intro(); // 陈 18  45kg

6.2 Promise.allSettled

//声明两个promise对象
    const p1 = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('商品数据-1')
        },1000)
    })

    const p2 = new Promise((resolve, reject) => {
        setTimeout(()=>{
            reject('出错了！')
        },1000)
    })

    //调用allsettled方法:返回的结果始终是一个成功的，并且异步任务的结果和状态都存在
    const res = Promise.allSettled([p1,p2]);
    console.log(res)

    // Promise {<pending>}
    //     __proto__: Promise
    //     [[PromiseState]]: "fulfilled"
    //     [[PromiseResult]]: Array(2)

    //调用all方法：返回的结果是按照p1、p2的状态来的，如果都成功，则成功，如果一个失败，则失败，失败的结果是失败的Promise的结果
    const result = Promise.all([p1,p2])
    console.log(result)

6.3 可选链操作符

//相当于一个判断符，如果前面的有，就进入下一层级
function main(config){
   // const dbHost = config && config.db && config.host  //当config没传值时 会报错
    const dbHost = config?.db?.host
    console.log(dbHost) //192.168.1.100
}

main({
    db:{
        host:'192.168.1.100',
        username:'root'
    },
    cache：{
    	host:'192.168.1.200',
    	username:'admin'
	}
})

6.4 动态import

btn.onclick = function(){
    //使用之前并未引入，动态引入，返回的其实是一个Promise对象
    import('./hello.js').then(module=>{
        module.hello();
    })
}

6.5 BigInt类型

//大整型
let n = 521n;
console.log(n,typeof(n))  // 521n  bigint 

//函数
let n = 123;
console.log(BigInt(n)) // 123n  //不能使用浮点型，只能用int

//大数值运算
let max = Number.MAX_SAFE_INTEGER; // 9007199254740991
console.log(max +1) // 9007199254740992
console.log(max +2) // 9007199254740992 出问题了
console.log(BigInt(max)+BigInt(1)) 9007199254740992n
console.log(BigInt(max)+BigInt(2)) 9007199254740993n

6.6 绝对全局对象globalThis

console.log(globalThis) //window  //适用于复杂环境下直接操作window