ECMAScript6语法重点(一)
一. let和const
①let声明的变量只在它的块作用域有效({ }括起来)
②let不能重复声明同一变量
③const声明的常量不能改(但对象可以加属性)
④const也有块作用域概念
⑤const声明时必须赋值
二. 解构赋值(左右一 一对应赋值,主要是数组和对象两种)
①数组:
若解构赋值左右没配对上则为undefined;
{ let a,b,c,rest; [a,b,c=3]=[1,2];//可以用默认值 console.log(a,b,c);//1 2 3 }
使用场景:
变量交换 [a,b] = [b,a];
{ let a=1; let b=2; [a,b]=[b,a]; console.log(a,b);//2 1 }
函数fn返回值赋给变量 [a,b] = fn( );
{ function f(){ return [1,2] } let a,b; [a,b]=f(); console.log(a,b);//1 2 }
fn返回多个值 [a, , ,b] = fn( );(逗号中间占一个数)
{ function f(){ return [1,2,3,4,5] } let a,b,c; [a,,,b]=f(); console.log(a,b);//1 4 }
不知道fn返回多少个值,我只关心某一个 [a, ,...b] = fn( );(...b是数组)
{ function f(){ return [1,2,3,4,5] } let a,b,c; [a,,...b]=f(); console.log(a,b);//1 [3,4,5]两逗号之间占一个数 }
②对象:
赋值可以覆盖默认值,key相等则value相等
{ let o={p:42,q:true}; let {p,q}=o; console.log(p,q);//42 true }
使用场景:
嵌套赋值
{ let metaData={ title:'abc', test:[{ title:'test', desc:'description' }] } let {title:esTitle,test:[{title:cnTitle}]}=metaData; console.log(esTitle,cnTitle);//abc test }
三.正则扩展
新增特性:构造函数的变化 正则方法的扩展 u修饰符 y修饰符 s修饰符
{ let regex = new RegExp('xyz', 'i'); //第一个参数是字符串,第二个是修饰符 }
{ let regex3 = new RegExp(/abc/ig, 'i'); console.log(regex3.flags);//i,找修饰符 }
{ let s = 'bbbb_bbb_bb_b'; var a1 = /b+/g; var a2 = /b+/y; console.log(a1.exec(s), a2.exec(s)); // ["bbbb"],["bbbb"] console.log(a1.exec(s), a2.exec(s)); // ["bbb"],null /g再次调用往下匹配,/y则不会 console.log(a1.sticky, a2.sticky); //false,true表示是否开启了粘连模式/y }
{ console.log(/\u{61}/.test('a')); // false console.log(/\u{61}/u.test('a')); // true // 使用u修饰符后,所有量词都会正确识别大于码点大于0xFFFF的Unicode字符 }
四.字符串扩展
新增特性:Unicode表示法 遍历接口 模板字符串 新增方法
{ console.log(`\u0061`);//a Unicode表示 }
{ let s1='𠮷a'; console.log(s1.length);//3 console.log(s1.codePointAt(0));//134071 取一个字节 console.log(s1.codePointAt(0).toString(16));//20bb7 console.log(s1.codePointAt(1));//57271 console.log(s1.codePointAt(2));//97 }
{ console.log(String.fromCodePoint("0x20bb7"));//𠮷 }
{ let str="string"; console.log(str.includes("c"));//false 包含 console.log(str.startsWith('str'));//true 起始 console.log(str.endsWith('ng'));//true 结束 }
{ let str="abc"; console.log(str.repeat(2));//abcabc 重复 }
{ let name="list"; let info="hello world"; let m=`i am ${name},${info}`; console.log(m);//i am list,hello world 模板字符串 }
五.数值扩展(Math对象很多方法移植到Number对象上)
新增特性:新增方法 方法调整
{ console.log(Number.isFinite(15));//true 判断一个数是否有尽 console.log(Number.isFinite(NaN));//false console.log(Number.isFinite('true'/0));//false }
{ console.log(Number.isNaN(NaN));//true 判断是否不是数 console.log(Number.isNaN(0));//0 false }
{ console.log(Number.isInteger(25.1));//25.1 false 是否为整数 }
{ console.log(Math.trunc(4.1));//4.1 4 取整数部分 console.log(Math.trunc(4.9));//4.9 4 }
{ console.log(Math.sign(-5));//-1 判断正负数,结果有-1,0,1 }
{ console.log(Math.cbrt(8));//2 开立方根 }
六.数组扩展
新增特性:Array.from Array.of copyWithin find/findIndex entries/keys/values includes
{ let arr = Array.of(3,4,7,9,11); console.log(arr);//[3,4,7,9,11] 数变数组 }
{ let p = document.querySelectorAll('p'); let pArr = Array.from(p); pArr.forEach(function(item){ console.log(item.textContent);//伪元素或集合变数组 }); console.log(Array.from([1,3,5],function(item){return item*2}));//[2,6,10] 可以当Map用 }
{ console.log([1,'a',undefined].fill(7));//[7,7,7] console.log(['a','b','c'].fill(7,1,3));//["a",7,7] 从第1位到第3位前填满7 }
{ for(let index of ['1','c','ks'].keys()){ console.log(index);//0 1 2 } for(let value of ['1','c','ks'].values()){ console.log(value);//1 c ks 值 } for(let [index,value] of ['1','c','ks'].entries()){ console.log(index,value);//0 1 1 c 2 ks } }
{ console.log([1,2,3,4,5].copyWithin(0,3,4));//[4,2,3,4,5] 从位0开始替换,换的是从位3开始到位4前 }
{ console.log([1,2,3,4,5,6].find(function(item){return item>3}));//4 找到一个就不找了 console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));//3 返回下标 }
{ console.log([1,2,NaN].includes(1));//true 包含1吗? }
七.函数扩展
新增特性:参数默认值 rest参数 扩展运算符 箭头函数 this绑定 尾调用
{ function test(x, y = 'world'){//没默认值的变量放前面 console.log(x,y); } test('hello');//hello world test('hello','kill');//hello kill } { let x='test'; function test2(x,y=x){ console.log(x,y); } test2('kill');//kill kill 作用域 } { function test3(...arg){ for(let v of arg){ console.log(v); } } test3(1,2,3,4,'a');//1 2 3 4 a } { console.log(...[1,2,4]);//1 2 4 console.log('a',...[1,2,4]);//a 1 2 4 rest } { let arrow = v => v*2; let arrow2 = () => 5; console.log(arrow(3));//6 箭头函数 console.log(arrow2());//5 } { function tail(x){ console.log(x); } function fx(x){ return tail(x) } fx(123)//123 尾调用,代替递归 }
八.对象扩展
新增特性:简洁表示法 属性表达式 扩展运算符 新增方法
{ // 简洁表示法 let o=1; let k=2; let es5={ o:o, k:k }; let es6={ o, k }; console.log(es5,es6);//{o: 1, k: 2} {o: 1, k: 2} let es5_method={ hello:function(){ console.log('hello'); } }; let es6_method={ hello(){ console.log('hello'); } }; console.log(es5_method.hello(),es6_method.hello()); } { // 属性表达式 let a='b'; let es5_obj={ a:'c', b:'c' }; let es6_obj={ [a]:'c' } console.log(es5_obj,es6_obj);//{a: "c", b: "c"} {b: "c"} } { // 新增API console.log(Object.is('abc','abc'),'abc'==='abc');//true true console.log(Object.is([],[]),[]===[]);//false false console.log(Object.assign({a:'a'},{b:'b'}));//{a: "a", b: "b"} 拷贝 let test={k:123,o:456}; for(let [key,value] of Object.entries(test)){ console.log([key,value]);//["k", 123] ["o", 456] } }
九.Symbol(这种数据类型提供一个独一无二的值)
{ // 声明 let a1=Symbol(); let a2=Symbol(); console.log(a1===a2);//false let a3=Symbol.for('a3'); let a4=Symbol.for('a3'); console.log(a3===a4);//true } { let a1=Symbol.for('abc'); let obj={ [a1]:'123', 'abc':345, 'c':456 }; console.log(obj);//{abc: 345, c: 456, Symbol(abc): "123"} for(let [key,value] of Object.entries(obj)){ console.log(key,value);//abc 345 c 456 } Object.getOwnPropertySymbols(obj).forEach(function(item){ console.log(obj[item]);//123 }) Reflect.ownKeys(obj).forEach(function(item){ console.log(item,obj[item]);//abc 345 c 456 Symbol(abc) 123 }) }
十.数据结构
Set用法 Map用法 WeakSet用法 WeakMap用法
{ let list = new Set(); list.add(5); list.add(7); console.log(list.size);//2 } { let arr = [1,2,3,4,5]; let list = new Set(arr); console.log(list.size);//5 } { let list = new Set(); list.add(1); list.add(2); list.add(1); console.log(list);//{1, 2} let arr=[1,2,3,1,'2']; let list2=new Set(arr); console.log(list2);//{1, 2, 3, "2"} } { let arr=['add','delete','clear','has']; let list=new Set(arr); console.log(list.has('add'));//true console.log(list.delete('add'),list);//{1, 2} list.clear(); console.log(list);//{} } { let arr=['add','delete','clear','has']; let list=new Set(arr); for(let key of list.keys()){ console.log(key);//add delete clear has } for(let value of list.values()){ console.log(value);//add delete clear has } for(let [key,value] of list.entries()){ console.log(key,value);//add add delete delete clear clear has has } list.forEach(function(item){console.log(item);})//add delete clear has } { let weakList=new WeakSet();//元素只能是对象,不会检测引用地址是否被回收,没有.size属性和clear()方法,不能遍历,其他和Set一样 } { let map = new Map(); let arr=['123']; map.set(arr,456); console.log(map,map.get(arr));//{Array(1) => 456} 456 } { let map = new Map([['a',123],['b',456]]); console.log(map);//{"a" => 123, "b" => 456} console.log(map.size);//2 console.log(map.delete('a'),map);//{"b" => 456} console.log(map.clear(),map);//{} } { let weakmap=new WeakMap();//类似WeakSet(),Map简化版 }