1 ES6 第七中数据类型 Symbol
<!-- ES第七中数据类型 Symbol--> <script> // 创建 symbol let s = Symbol() console.log(s, typeof Symbol) console.log(s, typeof s) let s2 = Symbol("我要上高速") let s3 = Symbol("我要上高速") console.log(s2 == s3) console.log(s2 === s3) let s4 = Symbol.for("上高速") let s5 = Symbol.for("上高速") console.log(s4==s5) console.log(s4===s5) // 不能与其他数据类型使用 // USONB you are so niubility // JS数据类型 // undefined string symbol object null number boolean
2 symbol表示独一无二的值
<!--!symbol表示独一无二的值 --> <script> // 向对象中增加方法 up down let game = { } let methods = { up: Symbol(), down: Symbol(), }; game[methods.up] = function () { console.log("我可以改变形状") } game[methods.down] = function () { console.log("我可以快速的下降") } console.log(game) </script> <script> let youxi = { name: "懒人山", [Symbol('say')]: function () { console.log("我可以讲话"); }, [Symbol('zibao')]: function () { console.log("我可以zaibao"); }, [Symbol('eat')]: function () { console.log("我可以zaibao"); } } console.log(youxi) </script>
3 symbol案例
<script> class Person{ static[Symbol.hasInstance](param){ console.log(param) console.log("我被用来查看数据类型") } } let o={}; console.log(o instanceof Person) const arr=[2,3,4,5,6] const arr1=[6,5,4,3,2,1] arr1[Symbol.isConcatSpreadable]=false console.log(arr.concat(arr1)) </script>
4 Promise对象
<!-- ! Promise1.html --> <script> // 实例化代码的对象 成功失败 const p=new Promise(function(resolve,reject){ setTimeout(function(){ let err="数据库中的用户的数据失败" // resolve(err); reject(err) },1000) }) // 调用函数的then方法 p.then(function(value){ console.log(p) },function(reason){ console.error(reason) })
5 Promise对象
<script> // const fs=require('fs') // fs.readFile('./resources/index.md',(err,data)=>{ // if(err) throw err // console.log(data.toString()) // }) // 封装 const p=new Promise(function(resolve,reject){ fe.readFile("./resources/index.md",(err,data)=>{ if(err) reject(err); resolve(data) }) }); p.then(function(value){ console.log("成功") },function(reaso){ console.log("失败") })
6 Promise对象
const xhr=new XMLHttpRequest() xhr.open("GET","https://api.apiopen.top/get") xhr.send(); xhr.onreadystatechange=function(){ // 判断 if(xhr.readyState===4){ // 响应代码 if(xhr.status>=200&&xhr.status<300){ console.log(xhr.response) }else{ console.error(xhr.status) } } }
7 ForEarch函数
<!--Es5 数组方法forEach遍历数组 --> <!-- 数组方法filter过滤数组 --> <script> var arr = [12, 66, 4, 88, 3, 7]; arr.forEach(function(value, index, array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 console.log(`值${value}数组下标索引${index}当前的数组${array}`) var newArr = arr.filter(function(a, b, c) { return a > 10; }) console.log(newArr) }) </script> <!-- some 查找数组中是否有满足条件的元素 --> <script> var arr = [10, 30, 4]; var flag = arr.some(function(value, index, array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 return value < 3; }); console.log(flag); //false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环 </script>
8 案例一
<!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> <style> .item { height: 60px; width: 120px; border: 1px solid red; margin-left: 20px; float: left; } </style> <div class="container"> <h2 class="page_header">点击切换色彩</h2> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script> // 获取div元素对象 let itemsEl = document.getElementsByClassName("item"); for (let i = 0; i < itemsEl.length; i++) { itemsEl[i].onclick = function () { // 修改背景色彩 // this.style.background='green' itemsEl[i].style.background = 'green' } } // { // let i = 0; // itemsEl[i].onclick = function () { // 修改背景色彩 // this.style.background='green' // itemsEl[i].style.background = 'green' // } // } </script> </body> </html>
9 迭代器
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-08 22:10:07 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-08 22:19:32 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\迭代器.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!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 xiyouji = ['A', 'B', 'C', 'D'] // 使用 for of 遍历 for (let v in xiyouji) { console.log(v) } for (let v of xiyouji) { console.log(v) } console.log(xiyouji) let iterator=xiyouji[Symbol.iterator](); console.log(iterator) console.log(iterator.next()) console.log(iterator.next()) console.log(iterator.next()) console.log(iterator.next()) console.log(iterator.next()) </script> </body> </html>
10 自定义遍历数据
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-08 22:20:41 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-08 22:36:23 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\自定义遍历数据.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEc --> <!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 banji = { name: "终极一班", stus: [ '张三', '李四', '赵武', '李留', '照片', '少年', 'why', ], [Symbol.iterator]() { // 声明变量 let index = 0; // let _this = this; return { next: function () { if (index < _this.stus.length) { const result = { vale: _this.stus[index], done: false }; index++; return result; }else{ return{value:undefined,done:true} } } } } } // 遍历对象 for (let v of banji) { console.log(v) } </script> </body> </html>
11 生成器1
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-08 22:39:52 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-09 14:43:00 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\生成器.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!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> function * gen(){ console.log("Hellow world") yield'一只没有耳洞'; console.log("111") yield'一只没有硬件'; console.log("112") yield'一只挂钩'; console.log("113") yield'一只自由'; console.log("114") } let iteratoe=gen(); // console.log(iteratoe) //返回的函数 console.log(iteratoe.next()) console.log(iteratoe.next()) console.log(iteratoe.next()) console.log(iteratoe.next()) console.log(iteratoe.next()) // for(let v of gen()){ // console.log(v) // } </script> </body> </html>
12 生成器案例2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <<!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> function* gen(arg) { console.log(arg); // yield 123; let one = yield 1111; console.log(one) let two = yield 456; console.log(two) let three=yield 789; console.log(three) } let iterator = gen("AAA") console.log(iterator.next()) console.log(iterator.next("BBB")) console.log(iterator.next("CCCC")) console.log(iterator.next("DDDD")) </script> </body> </html>eta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 参数的使用 --> <script> function* gen(arg) { console.log(arg); // yield 123; let one = yield 1111; console.log(one) let two = yield 456; console.log(two) let three=yield 789; console.log(three) } let iterator = gen("AAA") console.log(iterator.next()) console.log(iterator.next("BBB")) console.log(iterator.next("CCCC")) console.log(iterator.next("DDDD")) </script> </body> </html>
13 生成器案例3
<script> // 模拟数据 用户数据 订单数据 商品数据 function getUsers() { setTimeout(() => { let data = '用户的数据信息' iteratoe.next(data) }, 1000) } function getOrder() { setTimeout(() => { let data = '订单的数据信息' iteratoe.next(data) }, 1000) } function getGoods() { setTimeout(() => { let data = '商品的数据信息' iteratoe.next(data) }, 1000) } // 生成器的函数 function* gen() { let userUser = yield getUsers(); console.log(userUser) let userOrder=yield getOrder(); console.log(userOrder) let userGoods =yield getGoods(); console.log(userGoods) } // 调用生成器 let iteratoe = gen(); iteratoe.next(); </script>
14 异步编程技术
<script> // 异步编程技术 // 定时器的案例 生成器的的遍历 // 回调的地域 function one() { setTimeout(() => { console.log(11111) iteratoe.next(); }, 1000) } function two() { setTimeout(() => { console.log(21111) iteratoe.next(); }, 2000) } function three() { setTimeout(() => { console.log(31111) iteratoe.next(); }, 3000) } function *gen(){ yield one(); yield two(); yield three(); } // 调用的生成器的函数 let iteratoe=gen(); iteratoe.next(); </script>
15 Map
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-09 16:21:36 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-09 17:14:58 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\JS中的的集合对象\Map.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!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> <!-- MAP集合 --> <script> let m=new Map(); m.set('name','上高速') m.set('reading',function(){ console.log("YYDS") }); // 增加 let key={ school:'ASDFG' }; m.set(key,['山海','升职',"加强"]) for(let v of m){ console.log(m) } console.log(m) console.log(m.size) console.log(m.delete('name')) console.log(m.get(key)) console.log(m.clear()) console.log(m) </script> </body> </html>
16 Set
<script> // 声明的集合 let e=new Set(); let s2=new Set(["1+1","2+2","3+3","4+4","1+1"]) // 去重 console.log(e,typeof e) // 增加 s2.add('5+5') console.log(s2.size); // console.log(s2) s2.delete('1+1') console.log(s2) // 测试 console.log( s2.has("5+5")) console.log( s2.has("5+4")) // 清空 // s2.clear(); console.log(s2) for(let v of s2){ console.log(v) } let arr=[1,2,3,4,5,6,7,8,9,0,0,1,2,1,2,3,4,5,5] // 数组的去重复 let result=[...new Set(arr)]; console.log(result) // 交集 let arr2=[2,3,4,6,7,8]; let rs=[...new Set(arr)].filter(item=>{ let s2=new Set(arr2); if(s2.has(item)){ return true }else{ return false } }) // 并集 let user=[...new Set([...arr,...arr2])]; console.log(user) </script>
