es6
Posted mataoblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了es6相关的知识，希望对你有一定的参考价值。
一、let
我们先看var，例如：
1 <script type="text/javascript"> 2 function test(){ 3 for(var i=1;i<3;i++){ 4 console.log(i); 5 } 6 console.log(i); 7 } 8 test(); 9 </script>
浏览器结果：
如果将var改成let
1 <script type="text/javascript"> 2 function test(){ 3 for(let i=1;i<3;i++){ 4 console.log(i); 5 } 6 console.log(i); 7 } 8 test(); 9 </script>
此时浏览器的结果会报错：
这是因为let所在的块（3,4,5行）在作用域之外（花括号之外）不存在了，es6强制开启严格模式。let声明的变量只在局部作用域内有效
let声明的变量，只能生成一次，不能重复创建。例如：
1 <script type="text/javascript"> 2 function test(){ 3 let a = 1; 4 let a = 2; 5 console.log(a); 6 } 7 test(); 8 </script>
浏览器会报错：
二、const
const声明的常量不能修改，而且必须赋值否则会报错
1 <script type="text/javascript"> 2 function test(){ 3 const PI = 3.1415926; 4 //PI = 3; //加上此句会报错 5 console.log(PI); 6 } 7 test(); 8 </script>
但是我们要注意的是：const声明的如果是对象，则其值是可以修改的，例如：
1 <script type="text/javascript"> 2 function test(){ 3 const PI = 3.1415926; 4 const k = { 5 a:1 6 } 7 k.b = 3; 8 console.log(PI,k); 9 } 10 test(); 11 </script>
浏览器结果：
其实const声明的值不是不可以改变，而是该变量指向的内存地址不能改变，在声明为一个常量的时候，变量的指针就是指向该常量，常量改变地址指向改变，所以会报错
三、解构赋值
数组解构赋值：
1 <script type="text/javascript"> 2 { 3 let a,b,rest; 4 [a,b] = [1,2]; 5 console.log(a,b); 6 } 7 </script>
浏览器结果:
1 <script type="text/javascript"> 2 { 3 let a,b,rest; 4 [a,b,...rest]=[1,2,3,4,5,6]; 5 console.log(a,b,rest); 6 } 7 </script>
浏览器结果：
对象解构赋值：
1 <script type="text/javascript"> 2 { 3 let a,b; 4 ({a,b} = {a:1,b:2}); 5 console.log(a,b); 6 } 7 </script>
浏览器结果：
数组解构赋值和对象解构赋值的使用：
1 //默认值 2 <script type="text/javascript"> 3 { 4 let a,b,c,rest; 5 [a,b,c=3]=[1,2]; 6 console.log(a,b,c); 7 } 8 </script>
浏览器结果：
1 <script type="text/javascript"> 2 //变量交换 3 { 4 let a=1; 5 let b=2; 6 [a,b]=[b,a]; 7 console.log(a,b); 8 } 9 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 function f() { 4 return [1,2] 5 } 6 let a,b; 7 [a,b]=f(); 8 console.log(a,b); 9 } 10 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 function f() { 4 return [1,2,3,4,5] 5 } 6 let a,b,c; 7 [a,,,b]=f(); //三个逗号之间的2和3不显示 8 console.log(a,b); 9 } 10 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 function f() { 4 return [1,2,3,4,5] 5 } 6 let a,b,c; 7 [a,...b]=f(); //2,3,4,5组成一个数组 8 console.log(a,b); 9 } 10 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 function f() { 4 return [1,2,3,4,5] 5 } 6 let a,b,c; 7 [a,,...b]=f(); //3,4,5组成一个数组 8 console.log(a,b); 9 } 10 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let {a=10,b=5}={a:3}; 4 console.log(a,b); 5 } 6 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let metaData={ 4 title:‘abc‘, 5 test:[{ 6 title:‘test‘, 7 desc:‘description‘ 8 }] 9 } 10 let {title:esTitle,test:[{title:cnTitle}]}=metaData; 11 console.log(esTitle,cnTitle); 12 } 13 </script>
浏览器结果：
四、正则扩展
1 <script type="text/javascript"> 2 { //es5中的两种方式 3 let regex=new RegExp(‘xyz‘,‘i‘);//es5中两个参数的，第一个参数必须是字符串 4 let regex2=new RegExp(/xyz/i);//es5中一个参数的 5 6 console.log(regex.test(‘xyz123‘),regex2.test(‘xyz123‘)); 7 8 let regex3=new RegExp(/xyz/ig,‘i‘);//es6中第二个修饰符i会覆盖第一个修饰符，所以输出结果为i 9 console.log(regex3.flags);// flags用来获取修饰符的属性 10 } 11 </script>
浏览器结果：
y修饰符
1 <script type="text/javascript"> 2 { 3 let s=‘bbb_bb_b‘; 4 let a1=/b+/g; 5 let a2=/b+/y; 6 7 console.log(‘one‘,a1.exec(s),a2.exec(s));//第一次匹配结果一致都为bbb 8 console.log(‘one‘,a1.exec(s),a2.exec(s));//第二次匹配y返回null因为搜索到下横杠_认为不是b，所以返回null 9 10 } 11 </script>
浏览器结果：
g和y都是全局匹配，g后面的若不是要匹配的项，会继续匹配直到找到要匹配的项为止，而y后面紧跟着的若不是要匹配的项，则返回none
1 <script type="text/javascript"> 2 { 3 let s=‘bbb_bb_b‘; 4 let a1=/b+/g; 5 let a2=/b+/y; 6 7 //console.log(‘one‘,a1.exec(s),a2.exec(s)); 8 //console.log(‘one‘,a1.exec(s),a2.exec(s)); 9 10 console.log(a1.sticky,a2.sticky);//a1未开启粘连模式（也就是y修饰符）a2开启了粘连模式 11 } 12 </script>
浏览器结果：
XXXX.sticky:是否开启y粘连模式（也就是y修饰符）
1 <script type="text/javascript"> 2 { 3 console.log(‘u-1‘,/^\\uD83D/.test(‘\\uD83D\\uDC2A‘));//未加u可理解为会把test中的部分按两个字符进行处理 4 console.log(‘u-2‘,/^\\uD83D/u.test(‘\\uD83D\\uDC2A‘));//加u可理解为把他们当成一个字符进行处理，所以匹配不到 5 6 } 7 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 console.log(`\\u{20BB7}`); 4 5 let s=‘??‘; 6 7 console.log(‘u‘,/^.$/.test(s)); 8 console.log(‘u-2‘,/^.$/u.test(s)); 9 10 console.log(‘test‘,); 11 } 12 </script>
浏览器结果：
五、字符串扩展
<script type="text/javascript"> { console.log(‘a‘,`\\u0061`); console.log(‘s‘,`\\u20BB7`); console.log(‘s‘,`\\u{20BB7}`); } </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let s=‘??‘; 4 console.log(‘length‘,s.length); 5 6 console.log(‘0‘,s.charAt(0)); 7 console.log(‘1‘,s.charAt(1)); 8 9 console.log(‘at0‘,s.charCodeAt(0)); 10 console.log(‘at1‘,s.charCodeAt(1)); 11 } 12 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let s1=‘??a‘; 4 console.log(‘length‘,s1.length); 5 console.log(‘code0‘,s1.codePointAt(0)); //十进制 6 console.log(‘code0‘,s1.codePointAt(0).toString(16)); //转换成16进制 7 console.log(‘code1‘,s1.codePointAt(1)); 8 console.log(‘code2‘,s1.codePointAt(2)); 9 } 10 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 console.log(String.fromCharCode("0x20bb7")); 4 //es5中用fromCharCode 5 console.log(String.fromCodePoint("0x20bb7")); 6 //es6中用fromCodePoint 7 } 8 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let str=‘\\u{20bb7}abc‘; 4 for(let i=0;i<str.length;i++){ //es5中的遍历 5 console.log(‘es5‘,str[i]); 6 } 7 } 8 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let str=‘\\u{20bb7}abc‘; 4 for(let code of str){ //es6中的遍历 5 console.log(‘es6‘,code); 6 } 7 } 8 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let str="string"; 4 console.log(‘includes‘,str.includes("c"));//判断str这个字符串中是否有c 5 console.log(‘start‘,str.startsWith(‘str‘));//判断字符串是否是str开始的 6 console.log(‘end‘,str.endsWith(‘ng‘));//判断字符串是否是已g结束的 7 } 8 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let str="abc"; 4 console.log(str.repeat(2));//repeat重复，打印字符串两次 5 } 6 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 let name="list"; 4 let info="hello world"; 5 let m=`i am ${name},${info}`;//必须在`符号之间 6 console.log(m); 7 } 8 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 console.log(‘1‘.padStart(2,‘0‘));//补白，在前面补，把0补到1的前面 4 console.log(‘1‘.padEnd(2,‘0‘));//补白，在后面补，把0补到1的后面 5 } 6 </script>
浏览器结果：
1 <script type="text/javascript"> 2 //标签模板:处理多语言转换 3 { 4 let user={ 5 name:‘list‘, 6 info:‘hello world‘ 7 }; 8 abc`i am ${user.name},${user.info}`; 9 function abc(s,v1,v2) { 10 console.log(s,v1,v2); 11 } 12 } 13 </script>
浏览器结果：
1 <script type="text/javascript"> 2 //标签模板:处理多语言转换 3 { 4 let user={ 5 name:‘list‘, 6 info:‘hello world‘ 7 }; 8 console.log(abc`i am ${user.name},${user.info}`); 9 function abc(s,v1,v2) { 10 console.log(s,v1,v2); 11 return s+v1+v2 12 } 13 } 14 </script>
浏览器结果：
1 <script type="text/javascript"> 2 { 3 console.log(String.raw`Hi\\n${1+2}`);//对换行符\\n进行了转义 4 console.log(`Hi\\n${1+2}`);//没有转义所以会换行 5 } 6 </script>
浏览器结果：
六、数值扩展
以上是关于es6的主要内容，如果未能解决你的问题，请参考以下文章