[JavaScript] 回顾对象(+ 数组)

目录

1. 背景

我在工作中使用 JavaScript,“关于对象的评论。”一位负责教育的前辈告诉我。

因此,这次我想总结一下对象(+数组)。

2.环境 windows 10 版本 21H2 3. 什么是对象?

解释如下:

对象是属性的集合。属性是一对名称(键)和值(值)。字符串或Symbol 可以用于属性键,并且可以为值指定任意数据。此外,一个对象可以具有多个属性,因此单个对象可以表示多种值。

创建并声明一个空对象。

const humanObj = {};

也可以设置初始值并创建并声明它,或者用花括号({}) 列出并声明它。

// 初期値を設定
const humanObj = new Object();
humanObj.name = "Taro";
humanObj.from = "Tokyo";
humanObj.year = 1989;

// 中括弧({})でリスト化
const humanObj = {
	// 名前(キー): 値(バリュー)。キーのクォーテーションは省略可能。
	"name": "Taro",
    "from": "Tokyo",
    "year" : 1989
};

对象:具有键值对的属性集合

3-1.(补充)符号

它表示可以将字符串或Symbol 用作属性键。

符号特征是:

保证唯一(= 不重复) 值本身不能作为数据,必须调用toString()
const gender = Symbol();
const age = Symbol();
const humanObj = {
    "name": "Taro",
    "from": "Tokyo",
    "year" : 1989,
    [gender] : "man", // シンボル
    [age] : 35 // シンボル
};
console.log(gender); //Symbol()
console.log(age); //Symbol()
console.log(humanObj[gender]); //man
console.log(humanObj[age]); //35

我刚刚在代码中定义的humanObj 中添加了gender 和age。

您可以使用humanObj[gender] (オブジェクト[シンボル値]) 访问它。

当console.log();确认gender和age时,返回Symbol(),但toString()生成并输出字符串Symbol()。

所以它看起来一样,但内部不同。

其他

无法枚举(排除在 forEach 语句中) 无法转换为 JSON

还有一个方面反之,由于它没有被其他代码访问或覆盖,我认为根据情况使用它会很好。

*forEachメソッド:当你想重复处理时使用。与可以在任何地方使用的for 语句不同,它只能对数组数据执行。

4.如何使用对象 4-1. 添加

您可以附加点符号或括号符号。

让我们在每个符号的前面添加gender 和age 到humanObj。

const humanObj = {
	"name": "Taro",
    "from": "Tokyo",
    "year" : 1989
};
humanObj.gender = "man"; //ドット記法
humanObj["age"] = 35; //ブラケット記法
console.log(humanObj); //=> {name: 'Taro', from: 'Tokyo', year: 1989, gender: 'man', age: 35};

您可以添加オブジェクト.プロパティ 或オブジェクト["プロパティ"]。

如果您打印对象本身,您可以看到它已被添加。

4-2. 取出

以以下代码为基础。

const humanObj = {
	// 名前(キー): 値(バリュー)。
	"name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};
4-2-1. 仅值
const humanObj = {
	"name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

//取り出してみる
console.log(humanObj.gender); //=> man
console.log(humanObj["age"]); //=> 35

您可以通过オブジェクト.プロパティ 或オブジェクト["プロパティ"] 检索它。

如果您想将其作为数组获取,请使用Object.values() 获取。

const humanObj = {
	"name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

console.log(Object.values(humanObj));
//(5) ['Taro', 'Tokyo', 1989, 'man', 35]
4-2-2. 仅名称(键)

如果您想将其作为数组获取,请使用Object.keys() 获取。

const humanObj = {
	"name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

console.log(Object.keys(humanObj));
//(5) ['name', 'from', 'year', 'gender', 'age']

也可以结合forEachメソッド输出。

const humanObj = {
	"name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

const keys = Object.keys(humanObj); //一度配列にする
keys.forEach(key => {
    console.log(key);
});
//name
//from
//year
//gender
//age
4-2-3.总体

如果您想将其作为数组获取,请使用Object.entries() 获取。返回字符串键控的可枚举属性集[key, value]。

const humanObj = {
    "name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

for (const [key, value] of Object.entries(humanObj)) {
    console.log(`${key}: ${value}`);
}
//name: Taro
//from: Tokyo
//year: 1989
//gender: man
//age: 35
4-3. 检查是否有

在这里,我想做“检查是否有,如果没有则添加”。

我以in演算子为例介绍一下。如果指定的属性存在于对象中,in演算子 返回 true。

const humanObj = {
    "name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

if ( "age" in humanObj === false ) {
    humanObj["age"] = 35;
} else {
    console.log("既に登録済みです"); //こちらが表示される
}
4-4. 删除

要删除时使用delete演算子。

您可以通过添加オブジェクト.プロパティ 或オブジェクト["プロパティ"] 并在其前面加上“delete”来删除它。

const humanObj = {
    "name": "Taro",
    "from": "Tokyo",
    "year": 1989,
    "gender": "man",
    "age": 35
};

delete humanObj.gender; //=> man を削除
delete humanObj["age"]; //=> 35 を削除
console.log(humanObj); //=> {name: 'Taro', from: 'Tokyo', year: 1989}
5.数组和对象的区别

数组:使用下标(索引)引用存储的数据。索引从 0 开始。

const humanArr = ["Taro", "Tokyo", 35];
console.log(humanArr[0]); //=> Taro

对象:使用属性来引用存储的数据。

数组适用于仅按顺序排列的数字时要获取数据数量的情况,以及要集中处理多个数据或获取更具体的数据时的对象。

对于 JavaScript,数组包含在对象中。

6.总结

通过回顾对象,我的理解加深了。另外,由于与数组的区别已经很明显,我想适当地使用它们。

7. 参考

8. 最后

如果您有任何错误,推荐的代码编写方法等,如果您能越来越多地告诉我,我将不胜感激。

感谢您的阅读!

原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308623009.html

192人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册