0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JSでデストラクチャリングを使って名前の衝突を回避する

Last updated at Posted at 2023-09-16

はじめに

Chome拡張機能のチュートリアルをやっていてリストからオブジェクトへの変換で詰まったので簡易モデルでテストしていたら、そこでもまた詰まったのでGPT先生に解決してもらった方法を記録

デストラクチャリングとは

GPT先生より

JSにおいてオブジェクトや配列から特定の要素を取り出して、簡潔な構文を使って新たな変数に代入する方法です。
ES6から導入された機能で、コードをより簡潔で読みやすくし、特定の要素にアクセスする際に冗長なコードを減らすのに役立ちます。

オブジェクトデストラクチャリング

デストラクチャリングを使ってオブジェクトから特定の要素を変数に代入する

destruct_to_object.js
const person = { firstName: 'Ama' ,lastName: 'Tatsu' };
const { firstName, lastName } = person;

console.log(firstName); //'Ama'
console.log(lastName); //'Tatsu'

配列デストラクチャリング

デストラクチャリングを使って配列から特定の要素を変数に代入する

destruct_to_list.js
const numbers = [1, 2, 3];
const [first, second, third];

console.log(first); //1
console.log(second); //2
console.log(third); //3

やったこと

test.js
const test = {
    list:["a", "b", "c"]
};

const { list }=test; //testオブジェクトからlistキーの配列を受け取る
//配列の要素をオブジェクトにしてるだけ
const list_to_map = test1.map((hoge) => {
    return { "content": hoge };
});

console.log(list_to_map); //{content: 'a'}, {content: 'b'}, {content: 'c'}
0
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?