ES6的新增的特性及扩展

一、什么是ES6

ES6，是指ES6以及ES6后面所有的新的ES标准

二、对字符串提供的相关操作api

1.新增的方法

startWith 判断一个字符串是否是以某个子串打头
endsWith 判断一个字符串是否是以某个子串结尾
includes 判断一个字符串是否包含某个子串
repeat 重复某个字符串
…

<script>
    let url = "http://www.baidu.com"
    console.log(url.startsWith("http"))  // true

    let url2 = "http://www.baidu.com"
    console.log(url2.endsWith("com"))  // true
    console.log(url2.endsWith("cn"))  // false

    let url3 = "http://www.baidu.com"
    console.log(url3.includes("baidu"))  // true
    console.log(url3.includes("jd"))  // false

    let url4 = "baidu"
    console.log(url4.repeat(10))  // baidubaidubaidubaidubaidubaidubaidubaidubaidubaidu
</script>

2.遍历字符串

<script>
    // 遍历字符串
    // for of
    let url = "http://www.baidu.com"
    for(let char of url){
   
        console.log(char);
    }
</script>

3.模板字符串

<script>
    // 模板字符串
    let name = "wc";
    let age = 100;
    // 普通的字符串拼接
    console.log("它的名字是"+name+"，年龄是"+age+"岁");
    console.log(`它的名字是${
     name}，年龄是${
     age}岁`);
</script>

二、对函数的扩展

1.箭头函数

1）如果只有一个形参，()可以不写
2）函数体中如果只有一条非return语句，{}可以不写
3）函数体中如果吸有一条return语句，{}和return都可以不写
4）函数中如果返回一个对象，那么这个对象需要使用()包起来
5）箭头函数中的this需要向上找一级

---

（1）箭头函数的简略写法

<script>
    var fn = function(){
   
        console.log("fn");
    }
    
    // 箭头函数  
    var gn = ()=>{
   
        console.log("gn");
    }
    gn()

    // 如果形参只有一个，()可以不写
    var fn = function(a){
   
        return a*2;
    }
    console.log(fn(2));

    // 如果形参只有一个，()可以不写
    // 如果没有形参，或者形参有多个，()必写
    var fn = a=>{
   
        return a*2;
    }
    console.log(fn(2));
</script>

（2）箭头函数的this问题

<button>点击</button>
<script>
    // 箭头函数中的this，需要注意
    // 箭头函数中的this，需要向上找一级
    let btn = document.getElementsByTagName("button")[0]
    // 箭头函数中的thsi需要特别注意
    btn.onclick = ()=>console.log(this);
</script>

（3）箭头函数返回一个对象时需用（）包起来

<script>
    let fn = function(){
   
        return {
   a:1}
    }
    // { 不知道代表是函数的{}还是对象的{}
    let gn = ()=>({
   a:1})
    console.log(gn());
</script>

2.形参问题

（1）可以给形参提供默认值，如果不传值就使用默认值

<script>
    // 可以给形参提供默认值  如果不传值就使用默认值
    function fn(a=666,b=888){
   
        console.log(a,b);
    }
    fn(1,2)
    fn()
</script>

（2） 形参默认值需要从右向左赋值，从右向左依次指定默认值

<script>
    // 形参默认值需要从右向左赋值
    // 从右向左依次指定默念值
    function fn(a,b=666){
   
        console.log(a,b);
    }
    // 1是传给了a还是传给了b了？
    // 答：传给a
    fn(1)
</script>

3.rest参数

（1）arguments
arguments 是一个伪数组，伪数组本质是对象，argumetns也可以收集实参，函数调用时，除了给形参赋值外，还会把实参给到函数内部的arguments对象上。

<script>
    // rest参数
    function fn(a,b,c,d){
   
        console.log(arguments);
        // isArray 判断一个数据是否是真实数组
        console.log(Array.isArray(arguments));  // false
    }
    // 函数调用时，除了给形参赋值外，还会把实参给到函数内部的arguments对象上
    fn(1,2,3,4)
</script>

（2）…args
…args 整体也叫res