ES6入门(2)

朱雀 2021-01-18 13:51 718阅读 0赞

## ES6基本用法(2) ##

今天学习ES6的字符串、数值、函数、对象的一些新的方法、还有Symbol

复制字符串的方法

{ 
        let str = 'abc';
        console.log(str.repeat(2));//abcabc
    }

注意这里的repeat(1)的时候是不会复制的就是abc

对接收的参数进行拼接

{ 
        let name = 'zhangsan';
        let hobby = 'i love coding';
        console.log(`i am ${ name},${ hobby}`);//i am zhangsan,i love coding
    
    }

注意所有的参数以及字符串是被 \`\`包起来的,并且变量是用的$\{\}括起来的。

头部补全和尾部补全

{ 
        console.log('1'.padStart(2,'0'));//01
        console.log('2'.padEnd(2,'0'));//20
    }

这个很简单了,padStart对这个字符串1 在头部补了1个0,padEnd向这个字符串2的尾部补了一个0。

将函数参数作为返回值

{ 
        let user = { 
            name: 'zhangsan',
            info: 'hello,world'
        };
        console.log(abc `${ user.name},${ user.info}`);//,,,zhangsanhello,world
    
        function abc(s,o1,o2){ 
            return s + o1 + o2;
        }
    }

判断一个数是不是整数

{ 
        let iNumber1 = 10.2;
        let iNumber2 = 11.0;
        let iNumber3 = 11;
        console.log(Number.isInteger(iNumber1));//false
        console.log(Number.isInteger(iNumber2));//true
        console.log(Number.isInteger(iNumber3));//true
    }

注意这里的iNumber2 = 11.0 虽然带了小数,但是也是整数。

模板字符串函数

{ 
         console.log(String.raw`Hi\n${ 1+2}`);//Hi\n3
         console.log(`Hi\n${ 1+2}`);//
         
     }

将集合转换成真数组

{ 
       let p =  document.querySelectorAll('p');//获取页面上所有的p标签
       let arr = Array.from(p);//转成数组
       arr.forEach(function(item){ console.log(item.textContent)})
    }

如果用for in 或者 for of 的话 是不能够返回真正的数组,只是它们有数组相同的方法。

ES6中新增加的 for of 遍历

{ 
        let data = [1,2,3,true,undefined,NaN];
        for(let [index,value] of data.entries()){ 
            console.log('result:',index,value);//1,2,3,true,undefined,NaN
        }
    }

ES6中函数

{ 
        function foo(x,y = 'niubi'){ 
            console.log(x,y);
        }
        foo('wo hen ');//wo hen niubi 
        foo('wo hen ','shuai');//wo hen shuai
    }

可以看见在参数y中设置了默认值,当我们调用foo只传入了x,没有传入y的值,那么y的值就是默认的值,当我们传入了y的值那么就会覆盖默认值

…参数

{ 
        function foo(...args){ 
            for(let i of args){ 
                console.log(i);
            }
        }
        foo(1,2,3,NaN,undefined,true,{ });
    }

可变参数,将传入的值进行遍历

ES5对象中的方法和ES6的区别

{ 
        let es5 = { 
            hello: function(){ 
                console.log('hello');
            }
        };
    
        let es6 = { 
            hello(){ 
                console.log('hello');
            }
        };
        console.log(es5.hello(),es6.hello());
    }

相比es6更加的简洁

ES6对象

{ 
        let name = 'zhangsan';
        let hobby = 'love coding';
        let es5 = { 
            name: name,
            hobby: hobby
        };
    
        let es6 = { 
            name,
            hobby
        }
        console.log(es5,es6);
    }

在ES6中省略了: xxx 进行赋值。

## ES6中新增Symbol ##

在ES6中新增加原始数据类型 Symbol

{ 
        let a1 = Symbol();
        let a2 = Symbol();
        console.log(a1 === a2);//false
    }

用Sybol定义的变量 是独一无二的

但是想要找到Symbol那么可以用Symbol.for

{ 
        let a3 = Symbol.for('a3');
        let a4 = Symbol.for('a4');
    }

关于Symbol作为对象

{ 
        let a1 = Symbol.for('abc');
        let obj = { 
            [a1]: '123',
            'abc': 345,
            'c': 456
        };
        //传统的for of for in 拿不到[a1]
        for(let [key,value] of Object.entries(obj)){ 
            console.log(key,value);// abc 345 c 456 
        }
    }

如果想要拿到Symbol中a1的值 ,我们可以使用原型中的getOwnPropertySymbols()

{ 
       let a1 = Symbol.for('abc');
       let obj = { 
            [a1]: '123',
            'abc': 345,
            'c': 456
        };
     Object.getOwnPropertySymbols(obj).forEach(function(item){ 
            console.log('objs',obj[item]);//objs 123
        })
    }

上面虽然拿到了 \[a1\] 中的 123,但是原来的 abc he c都拿不到了,但是我们还是想拿到所有的信息,我们可以使用更加有用的返回值方法Reflect(ES6中新方法)

{ 
        let a1 = Symbol.for('abc');
        let obj = { 
            [a1]: '123',
            'abc': 345,
            'c': 456
        };
        Reflect.ownKeys(obj).forEach(function(item){ console.log(item,obj[item])}) //abc 345 c 456 Symbol(abc) "123"
    }

这样就拿到了所有的key 和value