ES6的学习 字符串模板以及字符串新增 函数的使用

// 字符串模板 是1前面的那个键 ``

    //进行字符串的链接操作
    let name = "张三疯";
    let age = 18;
    //在字符串里面使用变量
    let str = '名字：'+name+'，年龄是：'+age+'';
    //但是在ES6里面是可以这样进行拼接的 
    let strs = `名字叫做${name},年龄是${age}`
    console.log(str)
    console.log(strs)

    //模拟字符串模板的 作用
    let data = [
        {title: "465654645654645",read: 10},
        {title: "987465645645654",read: 200},
        {title: "489846545646565516",read: 500}
    ]
    //请求的资源都加载完之后才会触发事件函数里面的代码，注意与jq中ready事件的三点区别，继续加油吧！
    window.onload = function() {
        //得到dom对象
        let oUL = document.querySelector('#uls')
        for(let i =0; i<data.length; i++) {
            let Oli = document.createElement("li");
            Oli.innerHTML = `<span>这是一段文字的描述${data[i].title}</span><span>这是一段文字的描述${data[i].read}</span>`
            oUL.appendChild(Oli)
        }
    }

    //字符串的查找 indexof  ES6 includes
    // str.indexOf(要找的东西)  返回的索引位置  没找到 但会-1
    // str.includes(要找的东西) 返回值 true/false

    //字符串是否以谁开头 str.startsWith("")
    let string = "httplocalhost:8080";
    let stras = string.startsWith("http")
    //是否结尾
    let stras2 = string.endsWith("80")
    console.log(stras)

    //判断字符串是否以谁进行来结尾 str.endsWith
    console.log(stras2)

    //重复字符串
    let str3 = "强哥";
    console.log(str3.repeat(3));

    //ES8字符串填充 str.padStart(真个字符串长度，填充东西)
    //str.padEnd(真个字符串长度，填充东西)
    let i = 'apples'
    let j = 'orange'
    console.log(i.padStart(i.length+j.length,j))

函数 的默认参数 箭头函数 剩余参数

//1.给函数的参数 设置默认值 非常好用
    function show(a="第一个参数不能为空",b="第二个参数不能为空") {
        //以前的 写法 
        // a = a || "第一个参数不能为空"
        // b = b || "第二个参数不能为空！！"
        console.log(a,b)
    }
    show("aaa","bbbb")
    show("aaa")
    // show("","bbbb")

    //下面是进行小练习
    function fn({x='这个是x的默认值',y='这个是y的默认值'}={}) { //这边进行解构
        console.log(x,y)
    }
    fn({x:100,y:200})
    fn({x:400})
    fn({y:400})
    fn()   //{x='这个是x的默认值',y='这个是y的默认值'}={} 这个前面的大括号是一个对象 相当于a

    //2.函数参数默认已经定义了 不能在使用let，const进行在申明了 不然报错 使用var的话就会直接覆盖
    // function func(arg) {
    //     let arg = 777;
    //     console.log(arg)
    // }
    // func(666)

    //3.rest（重置）运算符 扩展运算符
        // ... 展开运算符
        let array = ['banana','orange','dog'];
        console.log(array)
        console.log(...array) //这样就把数组展开来了 还可以进行重置
        //下面是函数进行传参 可以把数组展示出来
        function g(...c){ //这样参数里面就不要 写诗歌参数了
            console.log(c)
        }
        g(1,2,3,4,5,6,7,8,9,10) //这边传递过去相当于 ...g

        //练习小排序
        function dailogs(...n){ //这边因为场地进去的是一个数组
            console.log(n.sort())
        }
        dailogs(1,341,34,12,934,23)
        //当剩余参数来进行使用
        function m(o,...p) {
            console.log(o)
            console.log(p) //这样可以把 数组 得到数组里面剩余的数据
        }
        m(12,324,32)

        //试一下对象可以使用三个点吗
        // let data = {
        //     aaaa: 22,
        //     bbbb: 444,
        //     cccc: 5555
        // }
        // console.log(...data) 这样使用就会报错了 ...现在只适用于数组

    //4.最重要的箭头函数 =>
            // () => { 语句 return;}
        let funcc=(a="12",b="23") => {
            console.log(a,b)
            return a+b  //凡是用大括号括起来的部分如果想拿到返回值就必须用return关键字返回，否则返回undefined。
        }
        funcc()   
        
        //****当在箭头函数里面使用this的时候 这个this只是指向这个json对象里面的数据
            //箭头函数里面没有 arguments,用 "..." 
            //箭头不能当构造函数构造函数