学习ES6-11的第一天
2024-05-09 11:40:21
学习ES6-11的第一天
- 一、ES6
- 1.1let关键字四大特性
- 1.2let点击变色小案例
- 1.3const关键字五大特性
- 1.4解构赋值
- 1.5模板字符串
- 1.6对象的简化写法
- 1.7箭头函数
- 1.7.1箭头函数中this是静态的，始终指向函数声明作用域下的this的值
- 1.7.2不能构造实例化对象，不能使用arguments变量
- 1.7.3demo01点击方块两秒变色
- 1.7.4demo02从数组中返回偶数
- 1.8给函数参数赋初始值
- 1.9rest参数
- 二、ES6
- 2.1扩展运算符
- 2.1.1扩展运算符介绍
- 2.1.2扩展运算符应用
- 2.2Symbol介绍与创建
- 2.2.1介绍
- 2.2.2往对象里面添加值demo01
- 2.2.3往对象里面添加值demo02
- 2.2.4Symbol内置值
- 2.3迭代器
- 2.3.1for in和for of循环
- 2.3.2遍历原理
- 2.3.3自定义遍历数据
- 2.4生成器
- 2.4.1函数声明及调用
- 2.4.2生成器函数的参数
- 2.4.3生成器的实例demo01（回调地狱）
- 2.4.4生成器的实例demo02
- 2.5set集合
- 2.5.1集合介绍和api
- 2.5.2集合基操
- 2.6map
- 2.6.1map介绍和api
- 2.7Class类基操
- 2.7.1Class初体验
- 2.7.2Class的静态成员介绍
- 2.7.3继承
- 2.7.4get和set
- 2.8数值扩展和对象扩展
- 2.8.1数值扩展
- 2.8.2对象扩展
- 2.9模块化
- 2.9.1暴露数据三种方式
- 2.9.2导入数据三种方式
- 三、ES6
- 3.1bable模块化代码转换（解决兼容性问题）
- 四、ES7
- 4.1查找数组元素存在，和幂运算
- 五、ES8
- 5.1async和await
- 5.2对象方法扩展
- 六、ES9
- 6.1rest参数
- 6.2扩展运算符（对象的合并）
- 6.3正则扩展（捕获命名）
- 6.4正则扩展（反向断言：根据前后面的东西做唯一识别）
- 6.5正则扩展（dotAll模式）
- 七、ES10
- 7.1对象扩展方法（二维数组转化为对象）
- 7.2字符串扩展方法（清除左右空格）
- 7.3数组扩展方法（维度降低）
- 7.4获取Symbol描述字符串
- 八、ES11
- 8.1私有属性
- 8.2Promise.allSeetled()
- 8.3字符串扩展（数据批量提取）
- 8.4可选链操作符
- 8.5动态import
- 8.6Bigint类型（超大数值运算）
一、ES6
1.1let关键字四大特性
1.2let点击变色小案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.item{width: 200px;height: 100px;border: 1px solid red;margin: 0 5px;float: left;}</style></head><body><h2>点击切换颜色案例</h2><div><div class="item"></div><div class="item"></div><div class="item"></div></div></body>
</html>
<script>// let item = document.getElementsByClassName('item');// for(var i = 0; i < item.length; i++){// item[i].οnclick=function(){// this.style.background='pink';// }// }// console.log(i); //i的值最后增加到3了如果这里使用item[i]做事件就会报错let item = document.getElementsByClassName('item');for(let i = 0; i < item.length; i++){item[i].onclick=function(){item[i].style.background='pink';}}//因为let具有块级作用域，不像var那样有全局作用域//执行代码的大致样式
// {// let i = 0
// {// item[i].οnclick=function(){// item[i].style.background='pink';
// 这里执行向外层去找i=0，不像var那样找到一个3
// }
// }
// {// let i = 1
// //-------
// }
// {
// let i = 2
// //----------
// }
</script>
1.3const关键字五大特性
最后一个只是修改了地址里面的值并没有修改地址所以不会报错
1.4解构赋值
<script>//数组const str = ['zhangshan','lisi','wangermazi'];let [zhang,li,wang] = str;console.log(zhang);console.log(li);console.warn('---------------------');//对象const duixiang = {name:'houwang',age:18,kk:function(){console.log('猴王爱吃香蕉');}}let {name,age,kk} = duixiang;console.log(name);kk();
</script>
1.5模板字符串
1.6对象的简化写法
<script type="text/javascript">let name = 'houwang';let age = function(){console.log('我的年龄18岁');}//ES6之前的写法// let duixiang = {// name:name,// age:age,// kk:function(){// console.log('这是ES6前面的写法');// }// }/**ES6写法**/let duixiang = {name,age, //重名既可省略kk(){console.log('ES6新写法');}}console.log(duixiang);
</script>
1.7箭头函数
1.7.1箭头函数中this是静态的，始终指向函数声明作用域下的this的值
<script>//1.箭头函数中this是静态的，始终指向函数声明作用域下的this的值function getName1(){console.log(this.name);}var getName2 = () => {console.log(this.name);}window.name='houwang';const name = {name:'猴子爷爷'}// getName1(); //均指向houwang// getName2(); //均指向houwang//使用call改变getName1.call(name);getName2.call(name);
</script>
1.7.2不能构造实例化对象，不能使用arguments变量
1.7.3demo01点击方块两秒变色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;background-color: aqua;}</style></head><body><div></div></body>
</html>
<script>let div = document.getElementsByTagName('div');//以前的写法// div[0].οnclick=function(){// var that = this;// setTimeout(function(){// that.style.background='pink';// },2000);// }//箭头函数中this是静态的，始终指向函数声明作用域下的this的值div[0].onclick=function(){setTimeout(() => {this.style.background='pink';},2000);}
</script>
1.7.4demo02从数组中返回偶数
<script>var str = [2,3,5,8,10];//filter方法筛选数组 返回true进行保留//之前的方法// var arr = str.filter(function(item){// if(item % 2===0){// return true;// }else{// return false;// }// })var arr = str.filter(item => item % 2 === 0); console.log(arr);
</script>
1.8给函数参数赋初始值
<script>function add(a,b,c=240){return a+b+c;}console.log(add(5,5)); //输出250console.log(add(5,5,15)); //输出25，15替换了c默认值console.warn(' ');//与解构赋值结合//以前的写法// function jiegou(options){// console.log(options.user);// console.log(options.user);// console.log(options.password);// }function jiegou({url='127.0.0.1',user,password}){console.log(url);console.log(user);console.log(password);}//传了url替换掉url默认值jiegou({url:'localhost',user:'root',password:'123456'})
</script>
1.9rest参数
<script>//ES6中新增rest参数，用来获取函数的实参，替代arguments//ES5写法function date1(){console.log(arguments);}date1('重庆','高等','猴王');//ES6写法function date2(...agrs){console.log(agrs);}date2('重庆','高等','猴王');
</script>
两者不同点就是ES5的是一个对象，ES6是一个数组
二、ES6
2.1扩展运算符
2.1.1扩展运算符介绍
<script>var str = ['重庆','高等','猴王'];function houwang(){console.log(arguments);}houwang(str); //['重庆','高等','猴王']houwang(...str); //'重庆','高等','猴王'
</script>
注：ES5是只有一个参数数组，ES6有三个参数
2.1.2扩展运算符应用
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div></div><div></div><div></div></body>
</html>
<script>//1.数组的合并var houhome = ['猴子','猴王'];var fenghuang = ['曾毅','玲花'];// //ES5的写法// var str1 = houhome.concat(fenghuang);//ES6的写法var str2 = [...houhome,...fenghuang];console.log(str2);//2.数组的克隆 //注意如果数组中的数据是引用数据类型则是浅拷贝var houhomecopy = [...houhome];console.log(houhomecopy);//3.将伪数组转化成真正的数组var div = document.querySelectorAll('div');console.log(div); //伪数组console.warn(' ');div2 = [...div];console.log(div2);
</script>
2.2Symbol介绍与创建
2.2.1介绍
<script>//这个字符串猴王只是做个描述 实际跟注释的差不多var s1 = Symbol('猴王');console.log(s1,typeof s1);var s2 = Symbol('猴王');console.warn(s1 === s2);//symbol.for访问的是一个全局的symbol表，如果有了就访问对应对象，没有就重新创建var s3 = Symbol.for('猴王');console.log(s3,typeof s3);var s4 = Symbol.for('猴王');console.warn(s3 === s4);
</script>
2.2.2往对象里面添加值demo01
var obj = {name:'俄罗斯方块',top:function(){console.log('我可以快速向上移动');},down:function(){console.log('我可以快速向下移动');}}//例如我们这里有一个obj对象 我们向里面添加top和down这两个方法//但我们不确定这里面有没有这个两个方法 为避免破坏里面的数据使用Symbol//1.先声明一个对象var methods = {top:Symbol(),down:Symbol() }//2.安全快速高效的添加进去这两个方法obj[methods.top]=function(){console.log('我可以快速向上移动');}obj[methods.down]=function(){console.log('我可以快速向下移动');}console.log(obj);
2.2.3往对象里面添加值demo02
let youxi = {name:'狼人杀',[Symbol('say')]:function(){console.log('我可以发言');},[Symbol('zibao')]:function(){console.log('我可以自爆');}}console.log(youxi);
2.2.4Symbol内置值
2.3迭代器
2.3.1for in和for of循环
<script>var houhome = ['猴子','猴儿','猴王'];//result保存的是键值for(let result of houhome) console.log(result);//result保存的是键名（我理解为下标）for(let result in houhome) console.log(result);
</script>
2.3.2遍历原理
<script>var houhome = ['猴子','猴儿','猴王'];//Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。var iterator = houhome[Symbol.iterator]();console.log(iterator);console.warn(iterator.next());console.warn(iterator.next());console.warn(iterator.next());console.warn(iterator.next()); //done为真，表示遍历完成
</script>
2.3.3自定义遍历数据
<script>var banji = {name:'花果山',arr:['houwang','houer','houba','houye'],[Symbol.iterator](){let index = 0;let _this = this;return {next:function(){if(index < _this.arr.length){let result = {value:_this.arr[index],done:false};index++;return result;}else{return {value:undefined,done:true};}}}}}for(let v of banji){console.log(v);}
</script>
2.4生成器
2.4.1函数声明及调用
next分割
<script type="text/javascript">//yield函数代码的分隔符 通过next方法来控制代码执行function * gen(){console.log('我是第1个');yield '1'console.log('我是第2个');yield '2'console.log('我是第3个');yield '3'console.log('我是第4个');}let iterator = gen();iterator.next();console.log('-----------');iterator.next();iterator.next();iterator.next();
</script>
每次调用的函数结果是yield的自变量的值
<script type="text/javascript">//yield函数代码的分隔符 通过next方法来控制代码执行function * gen(){//console.log('我是第1个');yield '111'//console.log('我是第2个');yield '222'//console.log('我是第3个');yield '333'//console.log('我是第4个');}let iterator = gen();console.log(iterator.next());console.log('-----------');console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());
</script>
2.4.2生成器函数的参数
gen调用可以传入参数
next方法可以传入实参
注：第n次调用传入的实参将作为第n-1个yield的整体返回结果
<script>function * gen(arg){console.log(arg);let one = yield 111;console.warn(one);let two = yield 222;console.log(two);let three = yield 333;console.log(three);}let iterator = gen('gen传入的参数');console.log(iterator.next('传入却没有输出'));console.log(iterator.next('AAA')); //第二次调用传入的实参将作为第一次yield返回的结果console.log(iterator.next('BBB')); //这次调用将作为第二次yield整体的返回结果console.log(iterator.next('CCC'));
</script>
2.4.3生成器的实例demo01（回调地狱）
回调地狱典型案例
<script>// 一秒后输出111，再过一秒输出222，再过一秒输出333//回调地狱setTimeout(() => {console.log(111);setTimeout(() => {console.log(222);setTimeout(() => {console.log(333);},1000)},1000)},1000)
</script>
咱们使用gen生成器函数来安排他
<script>let one = () => {setTimeout(() => {console.log(111);//执行完毕后自动执行下一个iterator.next();},1000)}let two = () => {setTimeout(() => {console.log(222);//执行完毕后自动执行下一个iterator.next();},1000)}let three = () => {setTimeout(() => {console.log(333);},1000)}function * gen(){yield one();yield two();yield three();}let iterator = gen();iterator.next();
</script>
2.4.4生成器的实例demo02
<script>//获取用户数据传给订单数据再查询商品数据let user = () => {setTimeout(() => {let data = '1用户数据'//这是第二次调用next会作为第一次yield的整体返回结果iterator.next(data);},1000)}let getOrder = () => {setTimeout(() => {let data = '2订单数据'iterator.next(data);},1000)}let getGoods = () => {setTimeout(() => {let data = '3商品数据'iterator.next(data);},1000)}function * gen(){let one = yield user();console.log(one);let two = yield getOrder();console.log(two);let three = yield getGoods();console.log(three);}let iterator = gen();iterator.next();
</script>
2.5set集合
2.5.1集合介绍和api
<script>let s = new Set();console.log(s,typeof s);let s1 = new Set(['1','2','3','1'])//自带去重功能console.log(s1);//检测长度console.log(s1.size);//分割console.warn('');//新增s1.add('4');console.log(s1);//删除s1.delete('4');console.log(s1);//检测有没有当前元素console.log(s1.has('5'));//清空s1.clear();console.log(s1);
</script>
2.5.2集合基操
<script>var arr1 = [1,2,3,4,5,4,3,2,1];var arr2 = [3,4,5,8,9];//1.数组去重//不使用三个点转换为数组，这里得到的是一个对象let result1 = [...new Set(arr1)];console.log(result1);console.warn('-----------');//2.求arr1和arr2的交集//先去重减少空间复杂度// let result2 = [...new Set(arr1)].filter(item => {// let s2 = new Set(arr2);// if(s2.has(item)) return true;// return false// })//简化19-23行代码let result2 = [...new Set(arr1)].filter(item => new Set(arr2).has(item));console.log(result2);console.warn('-----------');//3.求arr1和arr2并集 合并再去重let result3 = [...new Set([...arr1,...arr2])];console.log(result3);console.warn('-----------');//4.差集 arr1和arr2的差集就是在arr1里面有arr2里面没有的集合2//就是并集取反let result4 = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)));console.log(result4);
</script>
2.6map
2.6.1map介绍和api
<script>var m = new Map();//1.增加元素 键名,键值m.set('name','猴王');m.set('change',function(){console.log('猴王可以改变你~~~');});let obj = {address:'花果山'}//键名obj是一个对象，键值是一个数组m.set(obj,['水帘洞','白骨精','牛魔王'])console.log(m);console.warn('-------------------')//2.sizeconsole.log(m.size);//3.删除//console.log(m.delete('name'));//4.遍历for(let result of m ){console.warn(result);}//5.清空m.clear()console.log(m);
</script>
2.7Class类基操
2.7.1Class初体验
<script>//ES5前写法function HUAWEI(brand,price){//对实例对象做初始化this.brand=brand;this.price=price;}//添加方法HUAWEI.prototype.call = function(){console.log('我可以打电话');}let huawei = new HUAWEI('华为','5999');huawei.call();console.log(huawei);//Class写法class ONEPLUS{constructor(brand,price){this.brand=brand;this.price=price;}call(){console.log('我可以打电话');}}let oneplus = new ONEPLUS('1+','4999');console.log(oneplus);
</script>
2.7.2Class的静态成员介绍
<script>//实例对象和函数对象是不相通的function HUAWEI(){}//brand和price是属于函数对象的 这样的属性称之为静态成员HUAWEI.brand = '华为';HUAWEI.price = function(){console.log('我的价格是 5999');}HUAWEI.prototype.size = '6.72inch';let huawei = new HUAWEI();console.log(huawei.size); console.log(huawei.brand);//huawei.price(); //报错 实例对象访问不到函数对象的属性和方法class ONEPLUS{//静态属性static name='1+'price(){console.log('我的价格是 4999');}}let oneplus = new ONEPLUS();console.log(oneplus.name);console.log(ONEPLUS.name);oneplus.price()
</script>
2.7.3继承
<script type="text/javascript">class Person{constructor(age,sex){this.age = age;this.sex = sex;}call(){console.log('我会打人');}}class Son extends Person{constructor(age,sex,city){super(age,sex);this.city = city;}}let son = new Son('18','男','花果山');console.log(son);son.call();
</script>
2.7.4get和set
<script>class Houwang{get age(){console.log('我不知道我多少岁');return '18';}set city(value){console.log('我住'+value);}}let houwang = new Houwang();console.log(houwang.age); //age属性的值就是方法的返回值houwang.city='花果山'
</script>
2.8数值扩展和对象扩展
2.8.1数值扩展
<script type="text/javascript">//1.Number.EPSILON//Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，//就可以认为已经没有意义了，即不存在误差了console.log('javascript中最小精度为:'+Number.EPSILON);function main(a,b){if(a-b < Number.EPSILON) return true;return false}console.log(0.1+0.2 == 0.3);console.log(main(0.1+0.2,0.3));console.warn('---------------------')//2.Number.isFinite 检测是不是一个有限数值console.log(Number.isFinite(100));console.log(Number.isFinite(100/0));console.log(Number.isFinite(Infinity)); //Infinity表示无穷console.warn('--------------------')//3.Number.isNaN 检测是不是一个NaNconsole.log(Number.isNaN(123));//4.Number.parseInt和Number.parseFloat截断字符串console.log(Number.parseInt('1314520love'));console.log(Number.parseFloat('3.1415926神奇数字'));console.warn('--------------------')//5.Number.isInteger判断是不是一个整数console.log(Number.isInteger(555));console.log(Number.isInteger(5.55));//6.Math.trunc抹掉小数部分console.log(Math.trunc(3.1415926));console.warn('--------------------')//7.Math.sign判断一个数是正数(1),零(0),负数(-1)console.log(Math.sign(100));console.log(Math.sign(0));console.log(Math.sign(-100));
</script>
2.8.2对象扩展
<script>//1.Object.is判断两个值是否相等console.log(Object.is(100,100));console.log(Object.is(NaN,NaN));console.log(NaN === NaN); //NaN与任何数值做比较都是falseconsole.warn('---------------');//2.Object.assign对象合并 有的属性后面那个覆盖前面那个let configOne = {url:'127.0.0.1',name:'root',user:'root',password:'123456',}let configTwo ={url:'localhost',user:'admin',password:'cqhg'}console.log(Object.assign(configOne,configTwo));console.warn('---------------');//3.Object.setPrototypeOf设置和获取原型 let objOne = {name:'猴王'}let objTwo = {city:'花果山'}//设置objOne的原型有objTwoObject.setPrototypeOf(objOne,objTwo);console.log(objOne);//获取console.log(Object.getPrototypeOf(objOne));
</script>
2.9模块化
2.9.1暴露数据三种方式
2.9.2导入数据三种方式
模块化
三、ES6
3.1bable模块化代码转换（解决兼容性问题）
1.初始化
npm init --yes
安装（-D开发依赖）
npm i babel-cli babel-preset-env browserify -D
2.代码转换（局部安装的命令前要使用npx）
// 原文件路径 （可选参数） 需要转换到的文件目录 （必加参数）
npx babel ES6/20模块化基操/20原文件js -d ES6/20模块化基操/21babel打包js --presets=babel-preset-env
3.打包
//注意路径
npx browserify ES6/20模块化基操/21babel打包js/20模块化基操app.js -o ES6/20模块化基操/21babel打包js/bundle.js
此时已经多了一个bundle.js文件
4.准备工作完成我们的代码已经能跑了
5.当我们修改了原文件app.js的内容需要重新进行转换和打包
四、ES7
4.1查找数组元素存在，和幂运算
<script type="text/javascript">//查找数组存在某元素不 跟indexOf有点儿类似var arr = ['猴王','猴子','猴儿'];console.log(arr.includes('猴王'));console.log(arr.includes('猴爸'));console.warn('-------');// **幂运算console.log(2**10);//Math的幂运算console.log(Math.pow(2,10));
</script>
五、ES8
5.1async和await
参见csdnPromise
5.2对象方法扩展
<script>var obj = {name:'houwang',arr:['猴王','猴子','猴儿']}//获取键名console.log(Object.keys(obj));//获取键值console.log(Object.values(obj));
</script>
<script>var obj = {name:'houwang',arr:['猴王','猴子','猴儿']}//返回的是一个数组，而每一个成员又是一个数组//数组第一个值是键名，第二个是键值console.log(Object.entries(obj)); //创建mapvar m = new Map(Object.entries(obj));console.log(m);console.log(m.get('name'));
</script>
<script>var obj = {name:'houwang',arr:['猴王','猴子','猴儿']}//对象属性的描述对象console.log(Object.getOwnPropertyDescriptors(obj));// 第一个参数原型对象设置为null 第二个参数描述对象const objone = Object.create(null,{name:{//设置值value:'houwang',//属性特征writable:false, ///是否可写configuarble:true, //是否可以删除enumerable:true //是否可以枚举}})objone['name']="666" //重写name值失败console.log(objone);
</script>
六、ES9
6.1rest参数
<script>function kk({name,password,...arr}){console.log(name);console.log(password);console.log(arr);}kk({name:'admin',password:'123456',type:'master',port:'3306',url:'localhost'})
</script>
6.2扩展运算符（对象的合并）
<script>var houzi = {q:'我可以偷桃子'}var houwang = {w:'我可以吃香蕉'}var houmu = {e:'我可以生猴子'}const huaguoshan = {...houzi,...houwang,...houmu};console.log(huaguoshan);
</script>
6.3正则扩展（捕获命名）
<script>let str = '<a href="www.baidu.com">百度</a>'//提取域名和文字 ?<变量名> .*通配符 \用于转义var reg = /<a href="(?<url>.*)">(?<wangzhi>.*)<\/a>/;const result = reg.exec(str);console.log(result);console.log(result.groups.url);
</script>
6.4正则扩展（反向断言：根据前后面的东西做唯一识别）
<script>var str = 'ffgf567快快快555没有了'//1.正向断言 取‘没有了’前面的数字var reg1 = /\d+(?=没有了)/;const result1 = reg1.exec(str);console.log(result1);//反向断言var reg2 = /(?<=快)\d+/;const result2 = reg2.exec(str)console.log(result2);
</script>
6.5正则扩展（dotAll模式）
<script>let str = ` <ul><li><a>铠甲勇士</a><p>上市时间:2012-10-15</p></li><li><a>刑天铠甲</a><p>上市时间:2013-08-30</p></li></ul>`;//dot . 元字符 除了换行符以外的任意单个字符// 普及一哈：贪婪匹配多个，非贪婪带问号，匹配一个，// ?防止贪婪 模式修正符g全局匹配 模式修正符s，.将匹配任意字符var reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs//循环处理将数据保存好let data = [];let result;while(result = reg.exec(str)){console.log(result);data.push({title:result[1],time:result[2]});}console.log(data);
</script>
七、ES10
7.1对象扩展方法（二维数组转化为对象）
<script>var arr = [['name','猴王,猴子,猴儿'],['number','1,2,3']];console.log(arr);let result1 = Object.fromEntries(arr)console.log(result1);var m = new Map();m.set('name','猴王');console.log(m);let result2 = Object.fromEntries(m)console.log(result2);
</script>
<script>//ES8对象转换为二维数组const arr = Object.entries({name:'猴王,猴子',city:'花果山'})console.log(arr);
</script>
7.2字符串扩展方法（清除左右空格）
<script>let arr = ' 5201314 'console.warn(arr);console.log(arr.trim()); //左右console.log(arr.trimEnd()); //右console.log(arr.trimStart()); //左
</script>
7.3数组扩展方法（维度降低）
<script>//1.flat多维数组转换为一维数组let arrOne = [1,2,3,4,[5,6]]; //二位数组console.log(arrOne);//数字1表示深度console.log(arrOne.flat(1));let arrTwo = [1,2,3,4,[5,6,[7,8,9]]]; //三位数组//数字2表示深度console.log(arrTwo.flat(2));console.warn('------------')//2.flatmaplet arrThree = [1,2,3,4];let result1 = arrThree.map(item => [item * 10]) console.log(result1); //这里得到是一个二维数组//相当于flat和map的操作结合let result2 = arrThree.flatMap(item => [item * 10])console.log(result2);
</script>
7.4获取Symbol描述字符串
<script>var m = Symbol('猴王')console.log(m.description);
</script>
八、ES11
8.1私有属性
<script>//私有属性只可以在类内部可以访问 其他地方访问不了class Gril{//公有属性name;//私有属性#age;#naizi;constructor(name,age,naizi){this.name = name;this.#age = age;this.#naizi = naizi;}intro(){console.log(gril.name); console.log(gril.#age); console.log(gril.#naizi); }}let gril = new Gril('小鑫',20,'C');gril.intro();// console.log(gril.name); //正常访问// console.log(gril.#age); //直接报错// console.log(gril.#naizi); //直接报错
</script>
8.2Promise.allSeetled()
<script>//1.返回的结果始终是成功的 成功的值是Promise对象和状态const p1 = new Promise((resolve,reject) => {setTimeout(() => {resolve('成功')},1000)})const p2 = new Promise((resolve,reject) => {setTimeout(() => {reject('失败')},1000)})const result = Promise.allSettled([p1,p2]);console.log(result);
</script>
8.3字符串扩展（数据批量提取）
<script>let str = ` <ul><li><a>铠甲勇士</a><p>上市时间:2012-10-15</p></li><li><a>刑天铠甲</a><p>上市时间:2013-08-30</p></li></ul>`;var reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gsconst result = str.matchAll(reg);console.log(result);// //两种方法均可console.log([...result]);// for(let v of result){// console.log(v);// }
</script>
8.4可选链操作符
<script>function main(config){//以前的写法//const result = config && config.db && config.db.url;const result = config?.db?.url;console.log(result);}main({db:{user:'root',url:'127.0.0.1'}})
</script>
8.5动态import
8.6Bigint类型（超大数值运算）
<script>let n = 521n;console.log(n,typeof(n));let n1 = 88;console.log(BigInt(n1));//js能运算的最大数值let max = Number.MAX_SAFE_INTEGER;console.warn(max);console.log(max+1);console.log(max+10000+'运算错误的');//无效果console.log(BigInt(max)+BigInt(10000));
</script>
学习ES6-11的第一天相关推荐
- 通过这个免费的，由23部分组成的互动课程，学习ES6 +
JavaScript is undoubtedly one of the most popular programming languages in the world. It's used almo ...
- Hadoop学习笔记—11.MapReduce中的排序和分组
Hadoop学习笔记-11.MapReduce中的排序和分组 一.写在之前的 1.1 回顾Map阶段四大步骤 首先,我们回顾一下在MapReduce中,排序和分组在哪里被执行: 从上图中可以清楚地看出 ...
- HALCON 20.11：深度学习笔记(11)---目标检测
HALCON 20.11:深度学习笔记(11)---目标检测 HALCON 20.11.0.0中,实现了深度学习方法. 本章讲解了如何使用基于深度学习的对象检测. 通过对象检测,我们希望在图像中找到不 ...
- Python|线程和进程|阻塞|非阻塞|同步|异步|生成器和协程|资源竞争|进程间通信|aiohttp库|daemon属性值详解|语言基础50课：学习（11）
文章目录 系列目录 原项目地址 第34课:Python中的并发编程-1 线程和进程 多线程编程 使用 Thread 类创建线程对象 继承 Thread 类自定义线程 使用线程池 守护线程 资源竞争 G ...
- 狂神学习系列11：SpringBoot
狂神学习系列11:SpringBoot 声明: 本文章是基于狂神的课程所编写,本人才疏学浅,内容仅作参考 项目和markdown文件资料: 07_SpringBoot: 基于狂神说SpringBoot ...
- 学习ES6 The Dope Way Part I：const，let＆var
by Mariya Diminsky 通过玛丽亚·迪明斯基(Mariya Diminsky) 学习ES6 The Dope Way Part I:const,let&var (Learn ES ...
- Java学习第七天 ———— 第一周学习汇总（粗略）
Java学习第七天 ---- 第一周学习汇总 第一章Java Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大 ...
- 点云学习笔记11——VoxelNet算法+代码运行
点云学习笔记11--VoxelNet算法+代码运行 一.算法分析 摘要 介绍 相关工作 1.2. 贡献 2.VoxelNet 2.1.特征学习网络 2.1.1 特征学习网络 二.代码复现 2.1.环境 ...
- 【ES6 教程】第一章 新的ES6语法04—如何设置函数参数的默认值
英文 | https://www.javascripttutorial.net 翻译 | 杨小爱 在本节教程中,我们将学习如何在 ES6 中处理 JavaScript 默认参数. TL;DR func ...
- 【ES6 教程】第一章 新的ES6语法03—使用const 关键字定义常量
英文 | https://www.javascripttutorial.net 翻译 | 杨小爱 在本教程中,我们将学习如何使用 JavaScript const 关键字定义常量. JavaScrip ...
最新文章
- DG8SAQ 矢量网络分析
- TCP/IP 知识点问答(三)
- javamail发送邮件的简单实例[转]
- boost::type_erasure::add_assignable相关的测试程序
- Django从理论到实战(part15)--自定义path转换器
- 转:FileReader详解与实例---读取并显示图像文件
- 在你的Android上执行Linux命令
- VB6.0基于ADO连接access踩坑之数据库不显示数据
- 学习笔记(10):每一道试题都是有解题密码（2018年下半年信息系统项目管理师试题讲解）-用这种简单方法破解这么难的试题，我也是醉了（试题21-25）...
- Linux基础（三）
- 多媒体一体机计算机打不开,多媒体教学一体机突然打不开PPT是怎么回事？
- 下列哪个不是python的第三方库_以下选项中，不是 Python 中用于开发用户界面的第三方库是（）...
- 磨砂服务器波特率修改,MOXA串口服务器产品配置说明 附图.doc
- Java综合练习小项目——快递柜
- 好朋友结婚了，祝福你们！
- LaTex 的图片插入
- SNMP 协议RFC
- 清览题库--C语言程序设计第五版编程题解析（3）
- Excel2007使用SQL语句
- unity 音乐小游戏