ES6笔记_const keywords = ['小王', '小黑'];-CSDN博客

本文链接：https://blog.csdn.net/qq_56088882/article/details/126486446

let变量声明以及声明特性：

1. 变量不能重复声明
let a=0             修改值不会==>   let a=0
let a=1 //报错                      a=1    //不会报错
-------------------------------------------------------------------------------------------
2. 具有块级作用域
  {
    let a=0
  }
  console.log(a) //报错 a is not defined
-------------------------------------------------------------------------------------------
3. 不存在变量提升
  console.log(a) //报错
  let a=0
-------------------------------------------------------------------------------------------
4. 不影响作用域链
   let school = '尚硅谷';
   function fn(){
      console.log(school);
   }
   fn(); //打印成功

const声明常量的特点：

1. 一定要赋初始值
   const a //报错
------------------------------------------------------------------------------------------
2.一般常量使用大写(潜规则)
  const A=0
-------------------------------------------------------------------------------------------
3. 常量的值不能修改
   const a=1
   a=2  //报错
-------------------------------------------------------------------------------------------
4. 块级作用域
   {
      const a=1
   }
   console.log(a) //报错
-------------------------------------------------------------------------------------------
5. 对于数组和对象的元素修改，不算做对常量的修改，不会报错
   const num=[1,4,7,8]
   num.push(5)
   console.log(num) //[1, 4, 7, 8, 5] ,不会报错

变量的解构赋值：

数组的解构赋值：
const person=["小王","小李","小黑"]
let [wang,li,hei]=person
console.log(wang) //小王
console.log(li)  //小李
console.log(hei) //小黑
-------------------------------------------------------------------------------------------
对象的解构赋值：
const person={
   name:"小王",
   age:18,
   say:function(){
       console.log("哈哈")
   }
}
let {name,age,say}=person
console.log(name) //小王
console.log(age)  //18
say()  //哈哈

模板字符串：

1. 声明
 let str=`我是一个字符串`
 console.log(str,typeof str) //我是一个字符串 string
-------------------------------------------------------------------------------------------
2. 内容可以直接出现换行符
   let str=`<ul>
             <li>小王</li>
             <li>小李</li>
             <li>小红</li>
            </ul> `
-------------------------------------------------------------------------------------------
3. 变量拼接
 let name="雷军"
 let love=`${name}是我最崇拜的人`
 console.log(love) //雷军是我最崇拜的人

对象的简化写法:

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
let name="小王"
let change=function(){
   console.log("我可以改变你")
}
const person={
   name,
   change,
   say(){
       console.log(":和function可以省略")
   }
}

箭头函数:

1. 声明一个函数：
let fn=(a,b)=>{
   return a+b
}
let result=fn(1,2)
console.log(result) //3
-----------------------------------------------------------------------------------------
2. this是静态的,this始终指向函数声明时所在作用域下的this的值。
     let name="小王"
     const myname={
        name:"小黑"
     }
     let getname=()=>{
        console.log(this.name)
     }
     getname.call(myname) //小王  使用call也不会改变this
-----------------------------------------------------------------------------------------
3. 不能作为构造实例化对象
    let person=(name,age)=>{
        this.name=name,
        this.age=age
     }
    let me=new person("小王",12) //报错
-----------------------------------------------------------------------------------------
4. 不能使用arguments
    let fn=(a,b)=>{
      console.log(arguments)
    }
    fn(1,2) //报错
-----------------------------------------------------------------------------------------
5. 箭头函数的简写：
   (1)省略小括号，当形参只有一个的时候
      let add=n=>{
       return n+n
      }
      console.log(add(1)) //2
   (2)省略花括号，当代码体只有一条语句时，此时return必须省略，而且语句的执行结果就是函数的返回值
      let add=n=>n+n
      console.log(add(1)) //2
   
-----------------------------------------------------------------------------------------
注意：箭头函数适合与this无关的回调，像定时器，数组的方法回调
      不适合与this有关的回调，像事件回调，对象的方法

函数参数默认值：

ES6允许给函数参数赋值初始值
1. 形参初始值具有默认值的参数，一般位置要靠后(潜规则)
   function add(a,b=10){
        return a+b
   }
   let result=add(1)
   console.log(result) //11
-------------------------------------------------------------------------------------------
2. 与解构赋值结合
function person({name="小黑",age,height}){
    console.log(name) //小王
    console.log(age) //18
    console.log(height) //180
}
person({
   name:"小王",
   age:18,
   height:180
})

rest参数：

ES6引入rest参数，用于获取函数的实参，用来代替arguments 
注意：得到的是一个数组，而arguments得到的是伪数组
function name(...args){
   console.log(args)
}
name("小王","小黑","小红")   //输出['小王', '小黑', '小红']
-------------------------------------------------------------------------------------------
注意：rest参数必须放在参数最后
function name(a,b,...args){
   console.log(a) //小王
   console.log(b) //小黑
   console.log(args) // ['小红', '小李']
}
name("小王","小黑","小红","小李")

扩展运算符：

...扩展运算符能将数组转换为逗号分隔的参数序列
1. 数组的合并：
     let a=[1,2]
     let b=[3,4]
     let c=[...a,...b]
     console.log(c) //[1, 2, 3, 4]
-------------------------------------------------------------------------------------------
2. 数组的克隆
    let a=[1,2,3,4,5]
    let b=[...a]
    console.log(b) //[1, 2, 3, 4, 5] 
  注意:如果有引用类型是浅拷贝
-------------------------------------------------------------------------------------------
3. 将伪数组转为真正的数组
   const divs=document.querySelector("div")
   const divArr=[...divs]

迭代器与生成器：见此博客

Set：

ES6提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历，集合的属性和方法：
1. size：返回集合的元素个数
2. add：增加一个新元素，返回当前集合
3. delete：删除元素，返回boolean 值
4. has ：检测集合中是否包含某个元素，返回boolean值

 let s=new Set()
 console.log(s,typeof s) //Set(0) {size: 0} 'object'
-----------------------------------------------------------------------------------------
 let s=new Set([1,3,5,7,2,1,3])
 console.log(s) //Set(5) {1, 3, 5, 7, 2} 可以自动去重
-----------------------------------------------------------------------------------------
let s=new Set([1,3,5])
s.size //元素的个数
s.add(7)//添加新元素
s.delete(1)//删除元素
s.has(1)检查是否有此元素
s.clear()//清空
-----------------------------------------------------------------------------------------
可以用for of进行遍历
 let s=new Set([1,3,5])
for(let v of s){
  console.log(v) //1 3 5
}
-----------------------------------------------------------------------------------------
数组去重
let num=[1,2,4,5,3,2,1,5,6]
let result=[...new Set(num)]
console.log(result) // [1, 2, 4, 5, 3, 6]
-----------------------------------------------------------------------------------------
求交集
let num1=[1,2,3,4,2,3]
let num2=[3,4,5,6,4,5]
let result=[...new Set(num1)].filter(item=>{
let s2=new Set(num2)
if(s2.has(item)){
    return true
}else{
    return false
}
})
console.log(result) // [3, 4]
-----------------------------------------------------------------------------------------
求并集
let num1=[1,2,3,4,2,3]
let num2=[3,4,5,6,4,5]
let result=[...new Set([...num1,...num2])] 
console.log(result) //  [1, 2, 3, 4, 5, 6]

Map：

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历。Map的属性和方法：
1）size：返回Map的元素个数
2）set：增加一个新元素，返回当前Map
3）get：返回键名对象的键值
4）has：检测Map中是否包含某个元素，返回boolean值
5）clear：清空集合，返回undefined

    let m=new Map()
     //添加元素
     m.set("name","小王")
     m.set("change",function(){
        console.log("我们可以改变你")
     })
     let sch={
        school:"唐山职业技术学院"
     }
     m.set(sch,["河北","唐山"])
     console.log(m.size)
     //删除
     m.delete("name") 
     //获取
     console.log(m.get(sch))
     //遍历
     for(let v of m){
        console.log(v)
     }
     //清空
     m.clear()

Class类:见此博客

数组的扩展：

1、Number. EPSILON是JavaScript 表示的最小精度
2、二进制和八进制
   0b二进制  
   0o八进制
   0x十六进制
3、Number.isFinite 检测一个数值是否为有限数
4、Number.isNaN检测一个数值是否为NaN
5、Number.parseInt字符串转整数、Number.parseFloat字符串转小数
6、Number.isInteger判断一个数是否为整数
7、Math.trunc 将数字的小数部分抹掉
8、Math.sign 判断一个数到底为正数、负数还是零

对象方法拓展：

1. Object.is 判断两个值是否完全相等(可以比较NaN)
   console.log(Object.is(NaN, NaN)); //ture
   console.log(NaN===NaN) //false
-------------------------------------------------------------------------------------------
2. Object.assign 对象的合并
const config1 = {
    host: 'localhost ',
    port: 3306,
    name: 'root',
    pass: 'root',
    test: 'test'
}
const config2 = {
    host: 'http://atguigu.com',
    port: 33060,
    name: 'baidu.com',
    pass: 'iloveyou',
    test2: 'test2' //有则覆盖，无则不覆盖
}
console.log(Object.assign(config1, config2)); //2覆盖1
-----------------------------------------------------------------------------------------
3、Object. setPrototype0f（设置原型对象）、Object.getPrototypeof（获取原型对象）
   const school = {
    name: '尚硅谷'
   }
   const cities = {
    xiaoqu: ['北京', ' 上海', '深圳']
   }
Object.setPrototypeOf(school, cities); //将cities设置为school的原型对象,但最好不用此方法设置

console.log(Object.getPrototypeOf(school)); //获取school的原型对象

模块化：见此博客

ES7 新特性：

  1. Array.prototype.includes   方法用来检测数组中是否包含某个元素，返回布尔类型值
      let num=[1,3,5,7]
      console.log(num.includes(5)) //true
------------------------------------------------------------------------------------------
  2. 指数操作符，在ES7中引入指数操作符 【**】，用来实现幂运算功能与Math.pow结果相同。
     console.log(2**10) //1024

ES8对象方法的扩展：

1.Object.values()方法返回一个给定对象的所有可枚举属性值的数组 (就是返回字典中的键值)
2.Object.entries()方法返回一个给定对象自身可遍历属性[key,value] 的数组 （就相当于是获取字典中的一整个条目,方便创建Map对象）
3.Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。（方便深克隆对象）

ES9新特性：

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

rest参数
function fun({name,...user}){
       console.log(name) //小王
       console.log(user) //{age: 18, height: 180}
}
fun({
    name:"小王",
    age:18,
    height:180
})
-------------------------------------------------------------------------------------------
扩展运算符
const a={
    name:'小王'
}
const b={
    age:18
}
const c={
    height:180
}
const d={...a,...b,...c}
console.log(d) //{name: '小王', age: 18, height: 180}

ES9正则扩展：命名捕获分组：

原始：
        //声明一个字符串
        let str = '<a href="http://www.baidu.com">百度</a>
        提取url 与 标签文本
        const reg = /<a href="(.*)">(.*)<\/a>/
        //执行  
        const result = reg.exec(str);
        console.log(result);
        console.log(result[1]);
        console.log(result[2]);
 -------------------------------------------------------------------
使用命名捕获分组：
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
        const result = reg.exec(str);
        console.log(result)
        console.log(result.groups.url)
        console.log(result.groups.text)

ES9正则扩展：反向断言：

let str = 'JS5211314你晓呆吗5555呜呜呜';
正向断言  取5555
reg = /\d+(?=呜)/
const result = reg.exec(str);
console.log(result);
--------------------------------------------------
反向断言
let str = 'JS5211314你晓呆吗5555呜呜呜';
reg = /(?<=吗)\d+/;
let result = reg.exec(str);
console.log(result);

ES9 正则扩展：dotAll模式

       //dot  有 . 的意思 而.在正则里表示  元字符（除换行符以外的任意单个字符）
        let str = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映时间:1994-09-10</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映时间:1994-20-10</p>
            </li>
        </ul>`;
        // 声明正则
        // const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s    
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs 
        let result;
        let data = [];
        while(result = reg.exec(str)){
            data.push({title:result[1],time:result[2]})
        }
        console.log(data);

ES10新特性：

ES10 对象扩展方法Object.fromEntries


Object.fromEntries 和 Object.entries是逆运算
Object.entrise是将对象转换为数组，而Object.fromEntries则是将数组转化为对象。

字符串方法扩展trimStart与trimStart：

trimStart是去除字符串左侧空格，trimEnd是去除字符串右侧空格
let str='   aa   '
console.log(str)
console.log(str.trimStart())
console.log(str.trimEnd())

数组方法扩展flat与flatMap:

flat可译为：平 ；能将多位数组转化为低位数组；如果传参，那么参数位数字，这个数字为转化的深度
flatMap是一个符合操作，可以将Map方法生成的多维数组转化为一维数组
  const arr = [1,2,3,4,5,[6,8,5,[8,9,10,11]]];
  console.log(arr.flat(2));
  const arr1 = [1,2,3,4,5]
  // const arr3 = arr1.map(item => item*10)   // [10, 20, 30, 40, 50]
  const arr3 = arr1.flatMap(item => [item*10])
  console.log(arr3);

symbol.prototype.description:

 Symbol对象的description属性可以获得Symbol对象的值
 let s = Symbol（"哈哈"）
 console.log(s.description)   //哈哈

ES11:

ES11 的私有属性:

 ES11的私有属性前要加#来区分，私有属性只能在类里面使用，不能用实例化的对象直接调用

Promise.allSettled() :

Promise.allSettled() 接收的是一个 Promise对象数组 
 返回的结果永远是Promise对象状态永远是resolve，该结果是数组中的Promise值的返回结果状态+值

字符串方法扩展 String.prototype.matchAll()

该方法是用来得到正则批量的匹配的结果

       let str = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映时间:1994-09-10</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映时间:1994-20-10</p>
            </li>
        </ul>`;
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
        let result = str.matchAll(reg);
        const arr = [...result]
        console.log(arr)

可选链操作符 ?.

?. 是用来判断对象的层级属性是否存在


        function main(config) {
            // 不用可选操作符？
            // const dbHost = config && config.db && config.db.host 
            const dbHost = config?.db?.host  //这两条语句 等价
            console.log(dbHost);
 
        }
        main({
            db:{
                host:'127.0.0.1:8000',
                username:'jiajia'
            },
            dba:{
                username:'xiaojiajia',
                password:'123456'
            }
        })

动态import :

动态import即按需加载，可实现import的懒加载效果
ES11的动态import就是不在开头引入，是在需要引入时调用import方法
这个方法返回的是一个Promise对象，可通过这个Promise对象调用模块方法。
import(传入的是模块路径).then(module=>{module.hello()});