es6

一、let

我们先看var，例如：

<script type="text/javascript">
        function test(){
            for(var i=1;i<3;i++){
                console.log(i);
            }
            console.log(i);
        }
            test();
</script>

浏览器结果：

如果将var改成let

<script type="text/javascript">
        function test(){
            for(let i=1;i<3;i++){
                console.log(i);
            }
            console.log(i);
        }
            test();
</script>

此时浏览器的结果会报错：

这是因为let所在的块（3,4,5行）在作用域之外（花括号之外）不存在了，es6强制开启严格模式。let声明的变量只在局部作用域内有效

let声明的变量，只能生成一次，不能重复创建。例如：

<script type="text/javascript">
        function test(){
            let a = 1;
            let a = 2;
            console.log(a);
        }
            test();
</script>

浏览器会报错：

二、const

const声明的常量不能修改，而且必须赋值否则会报错

<script type="text/javascript">
        function test(){
            const PI = 3.1415926;
            //PI = 3; //加上此句会报错
            console.log(PI);
        }
            test();
</script>

但是我们要注意的是：const声明的如果是对象，则其值是可以修改的，例如：

<script type="text/javascript">
        function test(){
            const PI = 3.1415926;
            const k = {
                a:1
            }
            k.b = 3;
            console.log(PI,k);
        }
            test();
</script>

浏览器结果：

其实const声明的值不是不可以改变，而是该变量指向的内存地址不能改变，在声明为一个常量的时候，变量的指针就是指向该常量，常量改变地址指向改变，所以会报错

三、解构赋值

数组解构赋值：

<script type="text/javascript">
    {
        let a,b,rest;
        [a,b] = [1,2];
        console.log(a,b);
    }
</script>

浏览器结果:

<script type="text/javascript">
    {
        let a,b,rest;
        [a,b,...rest]=[1,2,3,4,5,6];
        console.log(a,b,rest);
    }
</script>

浏览器结果：

对象解构赋值：

<script type="text/javascript">
    {
        let a,b;
        ({a,b} = {a:1,b:2});
        console.log(a,b);
    }
</script>

浏览器结果：

数组解构赋值和对象解构赋值的使用：

//默认值
<script type="text/javascript">
        {
            let a,b,c,rest;
            [a,b,c=3]=[1,2];
            console.log(a,b,c);
        }
</script>

浏览器结果：

<script type="text/javascript">
        //变量交换
        {
            let a=1;
            let b=2;
            [a,b]=[b,a];
            console.log(a,b);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            function f() {
                return [1,2]
            }
            let a,b;
            [a,b]=f();
            console.log(a,b);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            function f() {
                return [1,2,3,4,5]
            }
            let a,b,c;
            [a,,,b]=f(); //三个逗号之间的2和3不显示
            console.log(a,b);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            function f() {
                return [1,2,3,4,5]
            }
            let a,b,c;
            [a,...b]=f(); //2,3,4,5组成一个数组
            console.log(a,b);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            function f() {
                return [1,2,3,4,5]
            }
            let a,b,c;
            [a,,...b]=f(); //3,4,5组成一个数组
            console.log(a,b);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let {a=10,b=5}={a:3};
            console.log(a,b);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let metaData={
                title:'abc',
                test:[{
                    title:'test',
                    desc:'description'
                }]
            }
            let {title:esTitle,test:[{title:cnTitle}]}=metaData;
            console.log(esTitle,cnTitle);
        }
</script>

浏览器结果：

四、正则扩展

<script type="text/javascript">
        {    //es5中的两种方式
            let regex=new RegExp('xyz','i');//es5中两个参数的，第一个参数必须是字符串
            let regex2=new RegExp(/xyz/i);//es5中一个参数的

            console.log(regex.test('xyz123'),regex2.test('xyz123'));

            let regex3=new RegExp(/xyz/ig,'i');//es6中第二个修饰符i会覆盖第一个修饰符，所以输出结果为i
            console.log(regex3.flags);// flags用来获取修饰符的属性
        }
</script>

浏览器结果：

y修饰符

<script type="text/javascript">
        {
            let s='bbb_bb_b';
            let a1=/b+/g;
            let a2=/b+/y;

        console.log('one',a1.exec(s),a2.exec(s));//第一次匹配结果一致都为bbb
        console.log('one',a1.exec(s),a2.exec(s));//第二次匹配y返回null因为搜索到下横杠_认为不是b，所以返回null

        }
</script>

浏览器结果：

g和y都是全局匹配，g后面的若不是要匹配的项，会继续匹配直到找到要匹配的项为止，而y后面紧跟着的若不是要匹配的项，则返回none

<script type="text/javascript">
        {
            let s='bbb_bb_b';
            let a1=/b+/g;
            let a2=/b+/y;

            //console.log('one',a1.exec(s),a2.exec(s));
            //console.log('one',a1.exec(s),a2.exec(s));

            console.log(a1.sticky,a2.sticky);//a1未开启粘连模式（也就是y修饰符）a2开启了粘连模式
        }
</script>

浏览器结果：

XXXX.sticky:是否开启y粘连模式（也就是y修饰符）

<script type="text/javascript">
        {
            console.log('u-1',/^\uD83D/.test('\uD83D\uDC2A'));//未加u可理解为会把test中的部分按两个字符进行处理
            console.log('u-2',/^\uD83D/u.test('\uD83D\uDC2A'));//加u可理解为把他们当成一个字符进行处理，所以匹配不到

        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            console.log(`\u{20BB7}`);

            let s='𠮷';

            console.log('u',/^.$/.test(s));
            console.log('u-2',/^.$/u.test(s));

            console.log('test',);
        }
</script>

浏览器结果：

五、字符串扩展

<script type="text/javascript">
        {
            console.log('a',`\u0061`);
            console.log('s',`\u20BB7`);

            console.log('s',`\u{20BB7}`);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let s='𠮷';
            console.log('length',s.length);

            console.log('0',s.charAt(0));
            console.log('1',s.charAt(1));

            console.log('at0',s.charCodeAt(0));
            console.log('at1',s.charCodeAt(1));
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let s1='𠮷a';
            console.log('length',s1.length);
            console.log('code0',s1.codePointAt(0)); //十进制
            console.log('code0',s1.codePointAt(0).toString(16)); //转换成16进制
            console.log('code1',s1.codePointAt(1));
            console.log('code2',s1.codePointAt(2));
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            console.log(String.fromCharCode("0x20bb7"));
        //es5中用fromCharCode
            console.log(String.fromCodePoint("0x20bb7"));
        //es6中用fromCodePoint
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let str='\u{20bb7}abc';
            for(let i=0;i<str.length;i++){  //es5中的遍历
                console.log('es5',str[i]);
            }
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let str='\u{20bb7}abc';
            for(let code of str){  //es6中的遍历
                console.log('es6',code);
            }
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let str="string";
            console.log('includes',str.includes("c"));//判断str这个字符串中是否有c
            console.log('start',str.startsWith('str'));//判断字符串是否是str开始的
            console.log('end',str.endsWith('ng'));//判断字符串是否是已g结束的
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let str="abc";
            console.log(str.repeat(2));//repeat重复，打印字符串两次
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            let name="list";
            let info="hello world";
            let m=`i am ${name},${info}`;//必须在`符号之间
            console.log(m);
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            console.log('1'.padStart(2,'0'));//补白，在前面补，把0补到1的前面
            console.log('1'.padEnd(2,'0'));//补白，在后面补，把0补到1的后面
        }
</script>

浏览器结果：

<script type="text/javascript">
        //标签模板:处理多语言转换
        {
            let user={
                name:'list',
                info:'hello world'
            };
            abc`i am ${user.name},${user.info}`;
            function abc(s,v1,v2) {
                console.log(s,v1,v2);
            }
        }
</script>

浏览器结果：

<script type="text/javascript">
        //标签模板:处理多语言转换
        {
            let user={
                name:'list',
                info:'hello world'
            };
            console.log(abc`i am ${user.name},${user.info}`);
            function abc(s,v1,v2) {
                console.log(s,v1,v2);
                return s+v1+v2
            }
        }
</script>

浏览器结果：

<script type="text/javascript">
        {
            console.log(String.raw`Hi\n${1+2}`);//对换行符\n进行了转义
            console.log(`Hi\n${1+2}`);//没有转义所以会换行
        }
</script>

浏览器结果：

六、数值扩展

<script>
        {
            console.log(0b111110111);//二进制用0b或0B来表示十进制数
            console.log(0o767);//八进制用0o表示十进制数
        }
</script>

结果：

<script>
        {
            console.log('15',Number.isFinite(15));
            console.log('NaN',Number.isFinite(NaN));
            console.log('1/0',Number.isFinite('true'/0));
            console.log('NaN',Number.isNaN(NaN));
            console.log('0',Number.isNaN(0));
        }
</script>

结果：

//判断是不是整数
<script>
        {
            console.log('25',Number.isInteger(25));
            console.log('25.0',Number.isInteger(25.0));
            console.log('25.1',Number.isInteger(25.1));
            console.log('25.1',Number.isInteger('25'));
        }
</script>

结果：

<script>
        {
            console.log(Number.MAX_SAFE_INTEGER,Number.MIN_SAFE_INTEGER);
            console.log('10',Number.isSafeInteger(10));
            console.log('a',Number.isSafeInteger('a'));
        }
</script>

结果：

 <script>
        {
            console.log(4.1,Math.trunc(4.1));
            console.log(4.9,Math.trunc(4.9));
        }
</script>

结果：

<script>
        {
            console.log('-5',Math.sign(-5));
            console.log('0',Math.sign(0));
            console.log('5',Math.sign(5));
            console.log('50',Math.sign('50'));
            console.log('foo',Math.sign('foo'));
        }
</script>

结果：

<script>
        //立方根
        {
            console.log('-1',Math.cbrt(-1));
            console.log('8',Math.cbrt(8));
        }
</script>

结果：

七、数组扩展

<script>
        {
            let arr = Array.of(3,4,7,9,11);
            console.log('arr=',arr);

            let empty = Array.of();
            console.log('empty',empty);
        }
</script>

结果：

<script>
        {
            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]，如下图
        }
</script>

结果：

<script>
        {
            console.log('fill-7',[1,'a',undefined].fill(7));//将数组中的数全部替换成7
            console.log('fill,pos',['a','b','c'].fill(7,1,3))//从第一个开始换到第三个
        }
</script>

结果：

<script>
        {
            for (let index of ['1', 'c', 'ks'].keys()) {
                console.log('keys', index);//输出下标
            }
            for (let value of ['1', 'c', 'ks'].values()) {
                console.log('values', value);//输出值
            }
            for (let [index,value] of ['1', 'c', 'ks'].entries()) {
                console.log('values',index, value);//输出值
            }
        }
</script>

结果：

<script>
        {
            console.log([1,2,3,4,5].copyWithin(0,3,4));
            //从哪个位置开始替换，从哪个位置开始读取数据，从哪个位置截止
        }
</script>

结果：

<script>
        {
            console.log([1,2,3,4,5,6].find(function(item){return item>3}));//找到第一个就停止
            console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));
        }
</script>

结果：

<script>
        {
            console.log('number',[1,2,NaN].includes(1));
            console.log('number',[1,2,NaN].includes(NaN));
        }
</script>

结果：

八、函数扩展