最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JS解构赋值

XAMPP新闻 admin 732浏览 0评论
  从ES6开始,JavaScript引入了解构赋值,可以同时对一组变量进行赋值。。
1. 基本类型
let [lString, lBoolean, lNumber] = [‘ES6’, true, 20181227];
// 结果:lString = ES6, lBoolean = true, lNumber = 20181227

/**
* 注意,对数组元素进行解构赋值时,多个变量要用[…]括起来。
* 如果数组本身还有嵌套,也可以通过下面的形式进行解构赋值,注意嵌套层次和位置要保持一致:
*/
let [lString, lBoolean, lNumber] = [‘ES6’, [true, 20181227]];
// 结果:lString = ES6, lBoolean = true,20181227, lNumber = undefined
// 正确的做法
let [lString, [lBoolean, lNumber]] = [‘ES6’, [true, 20181227]];
// 结果:lString = ES6, lBoolean = true, lNumber = 20181227

// 解构赋值还可以忽略某些元素:
let [, , lNumber] = [‘ES6’, [true, 20181227]];
// 结果:lNumber = 20181227
2. 数组类型
let [clubs, players] = [
[‘Lakers’, ‘Magic’],
[‘Lonzo Ball’, ‘Anthony Davis’, ‘Kawhi Leonard’, ‘Donovan Mitchell’, ‘达龙 福克斯’]
];
// 结果:clubs = [ ‘Lakers’, ‘Magic’ ]
// 结果:players = [ ‘Lonzo Ball’, ‘Anthony Davis’, ‘Kawhi Leonard’, ‘Donovan Mitchell’, ‘达龙 福克斯’ ]
3. 对象类型
let person = {
name: ‘达龙 福克斯’,
age: 20,
gender: ‘male’,
passport: ‘G-12345678’,
school: ‘Kentucky’,
address: {
city: ‘重庆’,
street: ‘龙湖时代天街’,
zipcode: ‘400002’
}
};
let { name, address: { city, zip } } = person;
/**
* name = ‘达龙 福克斯’
* city = ‘重庆’
* zip  = undefined #因为属性名是zipcode而不是zip
* 注意: address不是变量,而是为了让city和zip获得嵌套的address对象的属性:
* address; #ReferenceError: address is not defined
*/

/**
* >> 使用解构赋值对对象属性进行赋值时,如果对应的属性不存在,变量将被赋值为undefined,
*    这和引用一个不存在的属性获得undefined是一致的。
* >> 如果要使用的变量名和属性名不一致,可以用下面的语法获取:
*/
let { name, address: { city, zipcode:code } } = person;
// code = ‘400002’

// 解构赋值还可以使用默认值,这样就避免了不存在的属性返回undefined的问题:
let { name, address: { city, zipcode:code }, club=’kings’ } = person;
// club = ‘kings’
4. 使用场景
// 快速获取当前页面的域名和路径:
let {hostname:domain, pathname:path} = location;

/**
* 如果一个函数接收一个对象作为参数,那么,可以使用解构直接把对象的属性绑定到变量中。
* 例如,下面的函数可以快速创建一个Date对象:
*/
function buildDate({year, month, day, hour=0, minute=0, second=0}) {
return new Date(year + ‘-‘ + month + ‘-‘ + day + ‘ ‘ + hour + ‘:’ + minute + ‘:’ + second);
}
buildDate({ year: 2018, month: 12, day: 27 });
// Thu Dec 27 2018 00:00:00 GMT+0800 (中国标准时间)
// 传入hour、minute和second属性:
buildDate({ year: 2018, month: 12, day: 27, hour: 20, minute: 15 });
// Thu Dec 27 2018 20:15:00 GMT+0800 (中国标准时间)

转载请注明:XAMPP中文组官网 » JS解构赋值

您必须 登录 才能发表评论!