Strona główna Odkrywaj Pomoc
Zaloguj się
chuck
/
es6-11study
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

es9、es10、es11、es12新特性

DESKTOP-MK04A0R\chuck 3 lat temu
rodzic
dc9c6919ad
commit
3f54ef2908
6 zmienionych plików z 243 dodań i 0 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 52 0
      27/index.html
  2. 112 0
      28/index.html
  3. 3 0
      28/src/hello.js
  4. 10 0
      28/src/index.js
  5. 63 0
      29/index.html
  6. 3 0
      README.md

+ 52 - 0
27/index.html
Wyświetl plik 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        //二维数组
 
+        const result = Object.fromEntries([
 
+            ['name','hi'],
 
+            ['age','15,34,45']
 
+        ])
 
+        console.log(result)  //{name:'hi',age:'15,34,45'}
 
+
 
+        //Map
 
+        const m = new Map()
 
+        m.set('name','zhang')
 
+        const result1 = Object.fromEntries(m)
 
+        console.log(m)
 
+
 
+        //es8中 Object.entries  对象转数组
 
+        const arr = Object.entries({
 
+            name:'zhang'
 
+        })
 
+        console.log(arr)
 
+
 
+        //2、trimStart
 
+        let str = '   hi   '
 
+        console.log(str)
 
+        console.log(str.trimStart())
 
+        console.log(str.trimEnd())
 
+        console.log(str.trim())
 
+
 
+        //3、flat、flatMap  数组的两个方法 平 将多维数组转低维数组
 
+        const arr1 = [1,2,3,[4,5]]
 
+        console.log(arr1.flat())
 
+        const arr2 = [1,2,3,[4,5,[6,7]]]
 
+        console.log(arr2.flat(2))  //2表示深度
 
+
 
+        const arr3 = [1,2,3,4]
 
+        const result2 = arr3.flatMap(item=>[item*10])
 
+        console.log(result2)
 
+
 
+        //4、Symbol.prototype.description
 
+        let s = Symbol('beida')
 
+        console.log(s.description)  //beida
 
+    </script>
 
+</body>
 
+</html>

+ 112 - 0
28/index.html
Wyświetl plik 

@@ -0,0 +1,112 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./src/index.js" type="module"></script>
 
+</head>
 
+<body>
 
+    <button id="btn"> hello </button>
 
+    <script>
 
+        /**
 
+         * 1、es11私有属性
 
+         */
 
+        class Person{
 
+            name
 
+            #age   //私有
 
+            #weight
 
+            constructor(name,age,weight){
 
+                this.name = name
 
+                this.#age = age
 
+                this.#weight = weight
 
+            }
 
+            intro(){
 
+                console.log(this.#age)
 
+            }
 
+        }
 
+        const girl = new Person('lily',18,'45kg')
 
+        console.log(girl)
 
+        //console.log(girl.#age)  //私有 无法访问
 
+        girl.intro() //18
 
+        /**
 
+         * 2、Promise.allSettled
 
+         */
 
+        const p1 = new Promise((resolve,reject)=>{
 
+            setTimeout(()=>{
 
+                resolve('goods1')
 
+            },1000)
 
+        })
 
+        const p2 = new Promise((resolve,reject)=>{
 
+            setTimeout(()=>{
 
+                resolve('goods2')
 
+            },1000)
 
+        })
 
+        const result1 = Promise.allSettled([p1,p2])  //无论reject与否，都会返回结果及状态
 
+        console.log(result1)
 
+        // Promise.all()
 
+        const result2 = Promise.all([p1,p2])  //当有一个reject时，则终断程序，全部成功时只返回结果
 
+        console.log(result2)
 
+        /**
 
+         * 3、String.prototype.matchAll   正则批量匹配
 
+         */
 
+         let str = `
 
+        <ul>
 
+            <li>
 
+                <a>123</a>
 
+                <p>1</p>
 
+            </li>
 
+            <li>
 
+                <a>5345</a>
 
+                <p>2</p>
 
+            </li>
 
+        </ul>`
 
+        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
 
+        const result4 = str.matchAll(reg)
 
+        console.log(result4) //可迭代对象
 
+        for(let v of result4){
 
+            console.log(v)
 
+        }
 
+        let r4 = [...result4]
 
+        console.log(r4)
 
+        /**
 
+         * 4、可选链操作符 ?. 
+         */
 
+        function main(config){
 
+            const dbHost = config?.db?.host  //免去层层判断
 
+            //等价于cosnt dbHost = config && config.db && config.db.host
 
+        }
 
+        main({
 
+            db:{
 
+                host:'23443243243',
 
+                usernmae:'root'
 
+            },
 
+            catch:{
 
+                host:'34343',
 
+                username:'admin'
 
+            }
 
+        })
 
+        /**
 
+         * 5、动态import
 
+         */
 
+        //示例：./src/index.js
 
+        /**
 
+         * 6、BigInt类型 
+         * 应用于大数值运算
 
+         */
 
+        let n = 521n
 
+        console.log(n,typeof(n))
 
+        console.log(BigInt(123))  //123n  不支持浮点
 
+
 
+        let max = Number.MAX_SAFE_INTEGER  //最大安全整数
 
+        console.log(max+2)  //无法再加
 
+        console.log(BigInt(max)+BigInt(2))
 
+        /**
 
+         * 7、globalThis  全局 浏览器 node
 
+         */
 
+        console.log(globalThis)  //widnow  global
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 3 - 0
28/src/hello.js
Wyświetl plik 

@@ -0,0 +1,3 @@
 
+export function hello(){
 
+    alert('hello')
 
+}

+ 10 - 0
28/src/index.js
Wyświetl plik 

@@ -0,0 +1,10 @@
 
+//静态导入
 
+//import * as m1 from "./hello.js"
 
+
 
+const btn = document.getElementById('btn')
 
+btn.onclick = function(){
 
+    //动态导入 返回Promise对象
 
+    import('./hello.js').then(module=>{
 
+        module.hello()
 
+    })
 
+}

+ 63 - 0
29/index.html
Wyświetl plik 

@@ -0,0 +1,63 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 1、replaceAll
 
+         */
 
+        const str = 'hello world';
 
+        str.replaceAll('l', ''); // "heo word"
 
+
 
+        /**
 
+         * 2、Promise.any
 
+         * 若有成功，返回其中一个成功的，若都不成功，则返回All promises were rejected
 
+         * es11中Promise.allSettled 无论成功失败都返回，并有状态
 
+         */
 
+        const promise1 = new Promise((resolve, reject) => resolve('我是成功的Promise_1'));
 
+        const promise2 = new Promise((resolve, reject) => resolve('我是失败的Promise_2'));
 
+        const promiseList = [promise1, promise2];
 
+        Promise.any(promiseList)
 
+        .then(values=>{
 
+            console.log(values);   //AggregateError: All promises were rejected
 
+        }).catch(e=>{
 
+            console.log(e);
 
+        });
 
+        /**
 
+         * 3、WeakRefs
 
+         * 使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)
 
+         */
 
+            
+        /**
 
+         * 4、运算逻辑符和赋值表达式
 
+         */
 
+        // a ||= b
 
+        // //等价于
 
+        // a = a || (a = b)  //取第一个真值，都是假时返回最后一个值
 
+
 
+        // a &&= b
 
+        // //等价于
 
+        // a = a && (a = b)  //第一个真值，返回第二个，第一个假值，直接返回假值，都是真时，返回最后一个
 
+
 
+        // a ??= b
 
+        // //等价于
 
+        // a = a ?? (a = b)
 
+        let a = 1
 
+        let b = 2
 
+        console.log(a ?? (a=b))
 
+        /**
 
+         * 5、数字分割符
 
+         */
 
+        const money = 1_000_000_000;
 
+        //等价于
 
+        const money1 = 1000000000;
 
+
 
+        console.log(1_000_000_000 === 1000000000); // true
 
+    </script>
 
+</body>
 
+</html>

+ 3 - 0
README.md
Wyświetl plik 

@@ -25,6 +25,9 @@
 
 * 24 es7新特性 includes、指数运算符
 
 * 24 es7新特性 includes、指数运算符
 
 * 25 es8 async、await、对象方法扩展
 
 * 25 es8 async、await、对象方法扩展
 
 * 26 es9 扩展运算符、rest参数、正则扩展
 
 * 26 es9 扩展运算符、rest参数、正则扩展
 
+* 27 es10 Object.fromEntries、trimStart、trimEnd、flat、flatMap、Symbol.prototype.description
 
+* 28 es11 私有属性、Promise.allSettled、String.ptototype.matchAll、可选链操作符、动态import、BigInt类型、globalThis
 
+* 29 es12 replaceAll、Promise.any、WeakRefs、逻辑运算符、数字分隔符
 
 
 
 ## 运行说明
 
 ## 运行说明
 
     npm i
 
     npm i