变量的解构赋值与模版字符串|ES6学习笔记

目录

解构赋值

1.数组的解构赋值

2.对象的解构赋值

3.字符串的解构赋值 

4.函数参数的解构赋值

5.应用

模版字符串 


解构赋值

 解构赋值即按照一定的模式,从数组或对象中提取值,对变量赋值。

1.数组的解构赋值

let [a,b] = [1,2]
// a=1
// b=2
let [a, ,b] = [1,2,3]

// a=1
// b=3

let [a, ...b] = [1,2,3,4]

// a=1
// b=[2,3,4]
let [b] = []
let [a, b] = [1]

// 解构失败
// b的值都是 undefined

2.对象的解构赋值

let { a , b } = { a:'111', b:'222' };

//与数组不同,对象的属性没有次序要求,只要变量与属性同名,就可以取到对应的值

let { a , b } = { b:'222', a:'111'};

// a = "111"
// b = "222"


3.字符串的解构赋值 

const [a,b,c,d] = 'milk';

// a = 'm'
// b = 'i'
// c = 'l'
// d = 'k'

4.函数参数的解构赋值

function add([a,b]){

    return a+b;

}

add([1,2]);    // 3

5.应用

(1)交换变量的值

let a = 1;
let b = 2;

[ a , b ] = [ b , a ]

(2) 取得函数返回值

// 1.返回一个数组

function info (){
    return [1,2,3] ;
}

let [a,b,c] = info() ;

// 2.返回一个对象

function info (){
    return {
        name: 'lisa',
        age: 14
    };
}

let {name, age} = info();

(3)定义函数参数

function info([name, age]){
    ...
}

info(['lisa', 15]);

// 参数也可以无次序的值

function info({name, age}){
    ...
}

info({age: 12, name: 'lisa'})

(4)提取JSON数据

let info = {
    name: 'lisa',
    age: 10,
    data: [1029,17211]
};

let {name, age, data} = info

console.log(name); // lisa
console.log(age); // 10
console.log(data); // [1029,17211]

(5)遍历Map结构

const map = new Map();
map.set('name', 'lisa');
map.set('age', 18);

for(let [key, value] of map){
    console.log(key + ' is '+ value);
}

模版字符串 

模版字符串是增强版的字符串,用反引号 ` ` 标识,可以定义普通字符串,也可以定义多行字符串,可以在字符串中嵌入变量。

嵌入变量要写在 ${ }中, ${ }中还可以写JS表达式、函数。

eg:

let name = "lisa";
let age = "18";
let str = `<h1>${name} is ${age}</h1>`;

document.getElementById("info").innerHTML = str;

let a = 1;
let b = 2;

`${a+b}`    //3

function info(){
    return "hello"
}
` ${info()} world `    // hello world

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天又有什么bug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值