es6学习之解构表达式

2021-01-05 20:05:16 阅读：261 来源： 互联网

标签：es6 console log 解构 let str true 表达式 name

1.数组解构

	let arr = [1,2,3];
    //以前我们想获取其中的值，只能通过角标。
    // let a = arr[0];
    // let b = arr[1];
    // let c = arr[2];
    //ES6可以这样，a,b,c 将与arr中每个位置对应来取值
    let [a,b,c] = arr;
    console.log(a,b,c)

Snipaste_2021-01-05_17-41-35

2.对象解构

		const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //解构表达式获取值，将person里面的每个属性和左边对应赋值
        //const { name, age, language } = person;
        //等于下面
        //以前的写法
        //         const name = person.name;
        //         const age = person.age;
        //         const language = person.language;

        //或者将name值给abc
        const { name: abc, age, language } = person;
        console.log(abc, age, language)
        //console.log(name, age, language)

Snipaste_2021-01-05_18-08-50

3、字符串扩展

3.1 几个新的API

includes() : 返回布尔值，表示是否找到了参数字符串

startWith(): 返回布尔值，表示参数字符串是否在原字符串的头部

endsWith() : 返回布尔值，表示参数字符串是否在原字符串的尾部

   let str = "hello.vue";
   console.log(str.startsWith("hello"));//true
   console.log(str.endsWith(".vue"));//true
   console.log(str.includes("e"));//true
   console.log(str.includes("hello"));//true

   let str = "hello.vue";
   console.log(str.startsWith("hello"));//true
   console.log(str.endsWith(".vue"));//true
   console.log(str.includes("e"));//true
   console.log(str.includes("hello"));//true

Snipaste_2021-01-05_18-16-35

3.2 字符串模板

//1、大段字符串不用想以前那样拼接
    let ss = `<div>
          <span>hello world<span>
        </div>`;
    console.log(ss);

Snipaste_2021-01-05_18-23-17

 //2、字符串插入变量和表达式，变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    function fun() {
      return "这是一个函数"
    }
    //其中abc是前面获得person的name值变量
    let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
    console.log(info);

Snipaste_2021-01-05_18-23-42

标签：es6,console,log,解构,let,str,true,表达式,name
来源： https://blog.csdn.net/weixin_45942124/article/details/112251581