首頁 探索 說明
登入
chuck
/
es6-11study
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

es7、8、9新特性

DESKTOP-MK04A0R\chuck 3 年之前
父節點
45c918efa5
當前提交
dc9c6919ad
共有 9 個文件被更改，包括 243 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 22 0
      24/index.html
  2. 72 0
      25/index.html
  3. 1 0
      25/src/1.md
  4. 1 0
      25/src/2.md
  5. 1 0
      25/src/3.md
  6. 21 0
      25/src/ajax.js
  7. 36 0
      25/src/index.js
  8. 86 0
      26/index.html
  9. 3 0
      README.md

+ 22 - 0
24/index.html
查看文件 

@@ -0,0 +1,22 @@
 
+<!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>
 
+        //includes 返回布尔
 
+        const arr = [1,2,3]
 
+        console.log(arr.includes(2))
 
+        //indexOf 不存在返回-1 存在返回索引
 
+
 
+        //** 指数
 
+        console.log(2 ** 10)
 
+        console.log(Math.pow(2,10))
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 72 - 0
25/index.html
查看文件 

@@ -0,0 +1,72 @@
 
+<!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/ajax.js"></script>
 
+</head>
 
+<body>
 
+    <script>
 
+        //async
 
+        async function fn(){   //resolved
 
+            return '111'
 
+        }
 
+        async function fn1(){   //rejected
 
+            throw new Error('f')
 
+        }
 
+        async function fn2(){   
+            return new Promise((resolve,reject)=>{
 
+               // resolve('success') //resolved
 
+                reject('failed') //rejected
 
+            })
 
+        }
 
+        //await
 
+        //必须放在async函数中
 
+        //await返回成功值
 
+        //失败需要try catch捕获
 
+        const p = new Promise((resolve,reject)=>{
 
+            //resolve('success')
 
+            reject('failed')
 
+        })
 
+        async function main(){
 
+            try{
 
+                let result = await p;
 
+                console.log(result)
 
+            }catch(e){
 
+                console.log(e)
 
+            }
 
+        }
 
+        main()
 
+        //async和await结合
 
+        //示例 ./src/index.js
 
+
 
+        //async await 发送ajax示例
 
+        // ./src/ajax.js
 
+        //promise then
 
+        sendAjax('https://api.apiopen.top/getJoke').then(value=>{
 
+            //console.log(value)
 
+        })
 
+        //async await
 
+        async function main1(){
 
+            let result = await sendAjax('https://api.apiopen.top/getJoke')
 
+            //console.log(result)
 
+        }
 
+        main1();
 
+
 
+        /**
 
+         * 对象方法扩展
 
+         */
 
+        const school = {
 
+            name : 'hihi',
 
+            cities:['beijing','shanghai'],
 
+            sub:['php','java']
 
+        }
 
+        console.log(Object.keys(school))
 
+        console.log(Object.values(school))
 
+        console.log(Object.entries(school))  //把对象键和值转数组 [Array(2), Array(2), Array(2)]
 
+        console.log(Object.getOwnPropertyDescriptors(school))  //对象属性描述
 
+    </script>
 
+</body>
 
+</html>

+ 1 - 0
25/src/1.md
查看文件 

@@ -0,0 +1 @@
 
+123

+ 1 - 0
25/src/2.md
查看文件 

@@ -0,0 +1 @@
 
+456

+ 1 - 0
25/src/3.md
查看文件 

@@ -0,0 +1 @@
 
+789

+ 21 - 0
25/src/ajax.js
查看文件 

@@ -0,0 +1,21 @@
 
+/**
 
+ * ajax
 
+ * @param {*} url 
+ * @returns 
+ */
 
+function sendAjax(url){
 
+    return new Promise((resolve,reject)=>{
 
+        const x = new XMLHttpRequest()
 
+        x.open('GET',url)
 
+        x.send()
 
+        x.onreadystatechange = function(){
 
+            if(x.readyState === 4){
 
+                if(x.status >= 200 && x.status < 300){
 
+                    resolve(x.response)
 
+                }else{
 
+                    reject(x.status)
 
+                }
 
+            }
 
+        }
 
+    })
 
+}

+ 36 - 0
25/src/index.js
查看文件 

@@ -0,0 +1,36 @@
 
+const fs = require("fs")
 
+function read1(){
 
+    return new Promise((resolve,reject)=>{
 
+        fs.readFile("./1.md",(err,data)=>{
 
+            if(err) reject(err)
 
+            resolve(data)
 
+        })
 
+    })
 
+}
 
+function read2(){
 
+    return new Promise((resolve,reject)=>{
 
+        fs.readFile("./2.md",(err,data)=>{
 
+            if(err) reject(err)
 
+            resolve(data)
 
+        })
 
+    })
 
+}
 
+function read3(){
 
+    return new Promise((resolve,reject)=>{
 
+        fs.readFile("./3.md",(err,data)=>{
 
+            if(err) reject(err)
 
+            resolve(data)
 
+        })
 
+    })
 
+}
 
+async function main(){
 
+    try{
 
+        let t1 = await read1()
 
+        let t2 = await read2()
 
+        let t3 = await read3()
 
+        console.log(t1.toString(),t2.toString(),t3.toString())
 
+    }catch(e){
 
+        console.log(e)
 
+    }
 
+}
 
+main()

+ 86 - 0
26/index.html
查看文件 

@@ -0,0 +1,86 @@
 
+<!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 扩展运算符
 
+        //rest参数对对象的支持
 
+        function connect({host,port,name,password,...etc}){
 
+            console.log(host)
 
+        }
 
+        connect({
 
+            host:'hi',
 
+            port:23,
 
+            name:'3',
 
+            password:'',
 
+            bbb:'',
 
+            ccc:'d'
 
+        })
 
+        //将对象展开
 
+        const skillOne = {
 
+            a:'222',
 
+            b:'ccc'
 
+        }
 
+        //...skillOne => a:'222',b:'ccc'
 
+        const skillTwo = {
 
+            d:'ccc'
 
+        }
 
+        const m = {...skillOne,...skillTwo}
 
+        console.log(m)
 
+        
+        /**
 
+         * 2 正则扩展 -- 命名捕获分组
 
+         */
 
+        let str = '<a href="http://www.baidu.com">ggg</a>'
 
+        //提取url和标签文本
 
+        //未命名
 
+        const reg = /<a href="(.*)">(.*)<\/a>/
 
+        const result = reg.exec(str)
 
+        console.log(result)
 
+        //已命名
 
+        const reg1 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
 
+        const result1 = reg1.exec(str)
 
+        console.log(result1)
 
+
 
+        /**
 
+         * 3 正则扩展 -- 反向断言
 
+         */
 
+        //正向断言
 
+        let s1 = 'fksfjsk888fjdskfjslfjiwruo234uuu'
 
+        //提取数字 -- 后面234
 
+        const reg2 = /\d+(?=u)/
 
+        const r1 = reg2.exec(s1)
 
+        console.log(r1)
 
+        //反向断言 --- 根据前面内容判断
 
+        const reg3 = /(?<=o)\d+/
 
+        const r2 = reg3.exec(s1)
 
+        console.log(r2)
 
+
 
+        /**
 
+         * 4 正则扩展 -- dotAll
 
+         * dot . 元字符 除换行符以外的任意单个字符
 
+         */
 
+        let str3 = `
 
+        <ul>
 
+            <li>
 
+                <a>123</a>
 
+                <p>1</p>
 
+            </li>
 
+            <li>
 
+                <a>5345</a>
 
+                <p>2</p>
 
+            </li>
 
+        </ul>`
 
+        //const reg4 = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/
 
+        const reg4 = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s
 
+        const result3 = reg4.exec(str3)
 
+        console.log(result3)
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 3 - 0
README.md
查看文件 

@@ -22,6 +22,9 @@
 
 * 21 es6数值的扩展
 
 * 22 对象的扩展
 
 * 23 es6模块化 -- 防止命名冲突、代码复用、高维护性
 
+* 24 es7新特性 includes、指数运算符
 
+* 25 es8 async、await、对象方法扩展
 
+* 26 es9 扩展运算符、rest参数、正则扩展
 
 
 ## 运行说明
 
     npm i