es6 解构赋值 扩展运算符 字符串模板 等

解构赋值

<template>
    <div>
        <h1>解构赋值</h1>
    </div>
</template>

<script>
    export default {
        name: "demo4",
        mounted(){
            //以前
            // let a=0;
            // let b =1;
            // let c =2;
            //现在 数组解构
            let [a,b,c]=[0,1,2]
            console.log(a) //0
            console.log(b) //1
            console.log(c) //2
            //注意结构赋值的方法 等号两边的结构必须一样

            //2.设置默认值
            let [aa,bb='world']=['hello'];
           // console.log(aa+bb) //helloworld

            //3 对象解构
            let {foo,bar} = {foo:'hello',bar:'world'}
            console.log(foo+bar) //helloworld
            //注意点变量名 等号左右也必须统一

            //4 字符串的解构
            const [a1,b1,c1,d1,e1]='hello'
            console.log(a1) //h
            console.log(b1) //e
            console.log(c1) //l
            console.log(d1) //l
            console.log(e1) //o
        }
    }
</script>

<style scoped>

</style>

扩展运算符

<template>
    <div>
        <h1>扩展运算符</h1>
    </div>
</template>

<script>
    export default {
        name: "demo5",
        mounted(){
            function win(...arg) {
                console.log(arg[0]) //1
                console.log(arg[1]) //2
                console.log(arg[2]) //3
            }
            win(1,2,3)

            //拷贝数组 不改变原数组 添加删除值
            let arr1 = ['我','是','小羽'];
            let arr2 =[...arr1];
            arr2.push('hello world');
            console.log(arr2); //["我", "是", "小羽", "hello world"]
            console.log(arr1); //["我", "是", "小羽"]

            //rest 运算符... 剩余参数不确定
            function win2(first,...arg) {
               // console.log(arg.length) //6 剩余参数
                //打印出每项
                for(let val of arg){
                    console.log(val)
                }
            }
            win2(0,1,2,3,4,5,6)


            es6数组展开
            let arr = [1,2,3,4]
            console.log(...arr)


            合并数组
            let arr1=[1,2,3]
            let arr2=[4,5,6]
            let arr3=[...arr1,...arr2] //1,2,3,4,5,6


            es6 参数收集
            function show(a,b,...arr){
                console.log(a,b,arr)
            }
            show(1,2,6,7,3,4); //1,2[6,7,3,4]
            剩余参数必须是最后一个
        }
    }
</script>

<style scoped>

</style>

字符串模板

<template>
    <div>
    <h1>字符串模板</h1>
    </div>
</template>

<script>
    export default {
        name: "demo6",
        mounted(){
            //过去
            let name='我是王文琪';
            let say='很高兴认识你们'
            let my=name+'今年18,'+say
            //console.log(my) //我是王文琪今年18,很高兴认识你们

            //es6
            let my2 =`${name}今年18,${say}`
            //console.log(my2) //我是王文琪今年18,很高兴认识你们

            //可换行 可加html标签
            let my3 =
                `${name}
                <b>今年18,</b>
                ${say}`
            document.write(my3)

            //字符串查找
            let food = '西瓜'
            let foods='你爱吃的水果有：苹果，香蕉，葡萄，西瓜，百香果'
           //console.log(foods.includes(food)) //true

            //重复打印
            //document.write('winter|'.repeat(3)) winter打印三次
        }
    }
</script>

<style scoped>

</style>

startsWith endWith

该startsWith()方法确定字符串是否以指定字符串的字符开头，返回true或false视情况而定。

判断字符串以什么开头一般的话是用于来判断是否以http://开头或者以file:///开头

参数

接受两个参数

第一个参数，要在此字符串开头搜索的字符，第二个参数是指定从字符串开始的位置，默认从零开始。

注意：

此方法区分大小写；

        let str1 = "file:///C:/Users/iTAze/Desktop/1.html";
        let str2 = "https://mp.csdn.net/postedit";
        console.log(str1.startsWith("https://"))// false;
        console.log(str1.startsWith("file:///"))// true;
        console.log(str2.startsWith("https://"))// true;
        console.log(str2.startsWith("file:///"))// false;

endsWith()方法

endsWith()方法和startsWith()方法的语法都是一样的，不过endsWith()方法是从字符串的末尾开始查找。

比如你要判断这个字符串是不是以 .png .jpg 等这种

        let str1 = "file:///C:/Users/iTAze/Desktop/1.html.png";
        let str2 = "https://mp.csdn.net/postedit.jpg";
        console.log(str1.endsWith(".png"))// true;
        console.log(str1.endsWith(".jpg"))// false;
        console.log(str2.endsWith(".png"))// false;
        console.log(str2.endsWith(".jpg"))// true;

这个方法在IE中完全不兼容，在Edge中是兼容的，如果你想用这个方法请寻找兼容写法。