目次
ES6 の新しい構文に分解メソッドが追加されました。これにより、配列やオブジェクトからデータを簡単にフェッチできるようになり、多くの繰り返しコードが簡素化され、コードがより読みやすく保守しやすくなります。
1. オブジェクトの分解
オブジェクトの分解がない期間に、オブジェクトのデータを取得したい場合は、 user.name のような構文を使用してデータを取得する必要があります。単一レイヤーの分解オブジェクトのみの場合は、オブジェクトが入れ子になっている場合は問題ありませんが、あまり深くなると非常に面倒になり、コードも非常に冗長になり、可読性に影響を与えるため、分解文法が登場しました。
次のコードを見てください。ES6 より前では、次のようにオブジェクトの値を取得する必要があります。
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
//传统的获取值
let name = user.name
let age = user.age
let sex = user.sex
let pro = user.address.pro
let city = user.address.city
オブジェクトの分割により文法は非常に短くなりますが、機能はまったく変わりません。
//对象解构语法
let {name,age,sex,address: { pro, city }} = userコードが非常に短くなっていることが非常に直感的にわかるので、非常に快適です。
2. オブジェクト分解の詳細
2.1. 非構造化バリューオブジェクトが存在しない場合
分解する値がオブジェクトに存在しない値の場合
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
//对象解构语法
let { name, age, gender, address:{ pro,city} } = user
console.log(name, age, gender, pro,city)
たとえば、性別を分解しましたが、この値はオブジェクトに存在しません。この時点での値は未定義です。ここで知っておく必要があるのは、コード行が実際には定義であるためです。 、年齢、性別、住所: { pro,city} }、定義した時点ではそれ自体に値がないため未定義となります。
2.2. 値の構造化にデフォルトパラメータを与える
前の分解で存在しない値は未定義であるため、デフォルト値を与えたい場合は、それに値を割り当てるだけで済みます。つまり、デフォルト値を与えることになります。
//对象解构语法
let { name, age, gender="女", address:{ pro,city} } = user
console.log(name, age, gender, pro,city) 
2.3. 非同一プロパティの分解
この場合、分解された値によって定義された変数名がオブジェクト内の変数名と異なる場合は、構文 sex:gender を使用して、分解された値が性別に割り当てられるようにすることができます。
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
//对象解构语法
let { name, age, sex:gender, address:{ pro,city} } = user
console.log(name, age, gender, pro,city)
3. 配列の分割
実際、配列の分解はオブジェクトの分解とそれほど違いはなく、配列を分解する場合、配列もオブジェクトとみなすことができます。
3.1 基本的な分解文法
インデックスによって構造を分割する方法は次のとおりです
//数组解构
let arr = ['a', 'b', 'c', 'd']
let { 0: n1, 1: n2 } = arr
console.log(n1, n2) // a b
let { 2: n3, 3: n4 } = arr
console.log(n3, n4) // c d
このように分解することもできます
//数组解构
let arr = ['a', 'b', 'c', 'd']
let [n1, n2] = arr
console.log(n1, n2) // a b
let [, , n3, n4] = arr
console.log(n3, n4) // c dもちろん、配列構造はデフォルト値を保持することもできます。オブジェクトの分解と同様に、値を直接割り当てるだけです。
3.2 配列の入れ子構造の分割
//数组嵌套解构
let arr = ['a', 'b', 'c', 'd', [1, 2, 3, 4]]
let [, , , , newArr] = arr
console.log(newArr) // [1,2,3,4]
//获取第五项中的某一个值
let [, , , , [, , n3]] = arr
console.log(n3) // 3
4. 関数分解パラメータの受け渡し
これは通常、オブジェクトパラメータを渡して関数で使用するシーンです
//函数解构传参
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
function print(user) {
console.log(`name:${user.name}`)
console.log(`age:${user.age}`)
console.log(`sex:${user.sex}`)
console.log(`pro:${user.address.pro}`)
console.log(`city:${user.address.city}`)
}
print(user)
分解すると非常にシンプルになります
function print({ name, age, sex, address: { pro, city } } = user) {
console.log(`name:${name}`)
console.log(`age:${age}`)
console.log(`sex:${sex}`)
console.log(`pro:${pro}`)
console.log(`city:${city}`)
}
print(user)実際にプロジェクトを進めていくと、関数内でさまざまなパラメータを使用することが多く、デフォルト値がある場合とデフォルト値がない場合がありますが、その際、上記のオブジェクトの分解方法や配列の分解方法を柔軟に使用できるため、コードを実行することができます。見た目がより簡潔になり、多くの冗長なコードも削減できるため、コードの読みやすさが大幅に向上します。
5. 解体演習
5.1、以下はオブジェクトです。名前を構造化してから、他のすべての属性を新しいオブジェクトに入れる必要があります。
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}これはスプレッド演算子を使用して実現できます。
let { name, ...obj } = user //利用展开运算符收集剩下的属性
console.log(name, obj)
5.2 では、以下に 2 番目のコメントのユーザー名とユーザー コンテンツを分解するオブジェクトがあります。
let article = {
title: '文章标题',
content: '文章内容',
comments: [
{
content: '评论1',
user: {
id: 1,
name: '用户名1'
}
},
{
content: '评论2',
user: {
id: 2,
name: '用户名2'
}
}
]
}上記の知識を使用すると、必要な要素を簡単に分解できます
//解构出第二条评论的用户名和用户内容
//name:'用户名2',content:'评论2'
let {
comments: [
,
{
content,
user: { name }
}
]
} = article
console.log(content, name)
