ES6语法 学习笔记（二）解构赋值-字符串模板

解构赋值

几个用法示例：

//解构赋值时要一一对应
//1.
let [a,b,c] = [1,2,3];
console.log(a,b,c);//1,2,3

//2.
let [a,[b,c]] =[12,[5, 6]];

//3.
let json ={
        name:'qwe',
        age:18,
        job:'student'
    };
let {name,age, job} = {
        name:'qwe',
        age:18,
        job:'student'
    };
console.log(name,age,job);

//4.
let json ={
        name:'Strive',
        age:18,
        job:'码畜'
    };
let {name:n,age:g, job:a} = json;//可以给name,age,job重新取一个名字，如果打印name,age,job会显示is not defined
console.log(n,g,a);

//5.
//可以给c设置一个默认值，不设置则打印undefined
let [a, b,c='暂无数据'] = ['aa','bb'];
console.log(a,b,c);

//6.在函数传参中的应用
function show({a,b='默认'}){
    console.log(a, b);
}
show({
    a:1
})

//7.解构赋值可以很方便的交换两个数的值
let a = 12;
let b = 5;
[a,b] = [b,a];
console.log(a,b);//5,12

字符串模板

``(字符串模板)

• 优点:
  1.可以随便的换行
  2.${变量名}
• 示例：

let name ='Strive';
let age = 18;
let str = `这个人叫${name}, 年龄是 ${age}岁`;
console.log(str);//这个人叫Strive, 年龄是 18岁

• 字符串查找
  str.indexOf() 返回索引(位置) ，没找到返回-1
  str.includes() 返回索引(位置) ，没找到返回-1

let str = 'apple banana2 pear';
alert(str.includes('banana'));//true

• 字符串是否以谁开头:
  str.startsWith(检测东西)

let str2 ='https://www.baidu.com/';
console.log(str2.startsWith('http'));

• 字符串是否以谁结尾:
  str.endsWith(检测东西)

let str2 = 'aaaa.html';
console.log(str2.endsWith('png'));

• 重复字符串:
  str.repeat(次数);

let str = 'asd';
console.log(str.repeat(2));//asdasd

• 填充字符串:
  str.padStart(整个字符串长度, 填充东西) 往前填充
  str.padEnd(整个字符串长度, 填充东西) 往后填充
  str.padStart(str.length+padStr.length, padStr)

let str = 'apple';
let padStr = 'x';
console.log(str.padStart(str.length+padStr.length, padStr));

• 小练习:

<ul id="ul1">
</ul>

let data = [
            { title: '..................', read: 100 },
            { title: 'DSJKSDNKSJVDFKNKDJB', read: 9 },
            { title: '188954949539822', read: 10 },
            { title: 'sfgfngnghngjmhmjhmjmjh', read: 180 },
            { title: 'bjk3b63k4n42kl6k362k4', read: 900 }
        ]

        window.onload = function () {
            let ul1 = document.querySelector('#ul1');

            for (let i = 0; i < data.length; i++) {
                let ol1 = document.createElement('li');

                ol1.innerHTML = `<span>${data[i].title}</span>
                                <span>阅读人数：${data[i].read}</span>
                                <a href="javascript:;">详情</a>`;
                ul1.appendChild(ol1);
            }
        };