ES6入门(2)

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