JS中[]与{}的核心区别：数组 vs 对象

在JavaScript中，中括号（[]）和大括号（{}）是两种非常基础且常用的语法符号，但它们有着完全不同的用途和特性。下面从多个维度详细解释它们的区别：

1. 创建的数据类型不同

中括号（[]）- 创建数组（Array）

中括号用于创建JavaScript中的数组数据类型，数组是一种有序的元素集合。

// 创建一个空数组
const emptyArray = [];

// 创建包含元素的数组
const numbers = [1, 2, 3, 4, 5];
const mixedArray = [1, "hello", true, {name: "John"}, [1, 2, 3]];

大括号（{}）- 创建对象（Object）

大括号用于创建JavaScript中的对象数据类型，对象是一种无序的键值对集合。

// 创建一个空对象
const emptyObject = {};

// 创建包含属性的对象
const person = {
  name: "Alice",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "coding"]
};

2. 数据结构特性不同

3. 访问和操作元素的方式不同

数组（中括号）的访问和操作

const fruits = ["apple", "banana", "orange"];

// 通过索引访问元素
console.log(fruits[0]); // 输出: "apple"

// 修改元素
fruits[1] = "grape";

// 添加元素
fruits.push("mango"); // 在末尾添加

// 删除元素
fruits.pop(); // 删除末尾元素

对象（大括号）的访问和操作

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

// 通过点表示法访问属性
console.log(car.brand); // 输出: "Toyota"

// 通过方括号表示法访问属性
console.log(car["model"]); // 输出: "Corolla"

// 添加新属性
car.color = "blue";

// 修改属性
car.year = 2021;

// 删除属性
delete car.color;

4. 特殊用法

中括号的其他用法

1. 计算属性名 ：在对象字面量中使用

const key = "dynamicKey";
const obj = {
    [key]: "This is a dynamic value"
};
console.log(obj.dynamicKey); // 输出: "This is a dynamic value"

2. 解构赋值 ：从数组中提取值

const [first, second] = [10, 20];
console.log(first); // 输出: 10
console.log(second); // 输出: 20

3. 数组字面量 ：创建数组

// 1. 创建空数组
const emptyArray = [];
console.log("空数组:", emptyArray);

// 2. 创建包含数字的数组
const numbers = [1, 2, 3, 4, 5];
console.log("数字数组:", numbers);

// 3. 创建包含字符串的数组
const fruits = ["苹果", "香蕉", "橙子", "葡萄"];
console.log("水果数组:", fruits);

// 4. 创建包含混合数据类型的数组
const mixedArray = [1, "hello", true, {name: "John"}, null];
console.log("混合类型数组:", mixedArray);

// 5. 创建嵌套数组（多维数组）
const nestedArray = [[1, 2], [3, 4], [5, 6]];
console.log("嵌套数组:", nestedArray);

// 6. 使用数组字面量创建后立即使用数组方法
const colors = ["红", "绿", "蓝"].push("黄");
console.log("添加元素后的数组长度:", colors); // 输出: 4

大括号的其他用法

1. 代码块 ：定义函数体、条件语句体等

function example() {
     // 函数体在大括号内
     if (true) {
       // 条件语句体在大括号内
     }
}

2. 解构赋值 ：从对象中提取属性

const {name, age} = {name: "Bob", age: 25};
console.log(name); // 输出: "Bob"
console.log(age); // 输出: 25

3. 对象字面量 ：创建对象

// 1. 创建空对象
const emptyObject = {};
console.log("空对象:", emptyObject);

// 2. 创建带有属性的基本对象
const person = {
  name: "张三",
  age: 30,
  isStudent: false
};
console.log("基本对象:", person);

// 3. 创建包含嵌套对象的对象
const company = {
  name: "科技有限公司",
  address: {
    city: "北京",
    district: "朝阳区",
    street: "科技路100号"
  },
  employees: 500
};
console.log("嵌套对象:", company);

// 4. 创建包含数组的对象
const user = {
  username: "user123",
  roles: ["admin", "editor"],
  permissions: ["read", "write", "delete"]
};
console.log("包含数组的对象:", user);

// 5. 创建包含方法的对象
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};
console.log("使用add方法结果:", calculator.add(5, 3));

// 6. 使用ES6简写语法创建对象
const name = "李四";
const age = 25;
const isEmployed = true;

const employee = {
  name,  // 等同于 name: name
  age,   // 等同于 age: age
  isEmployed,
  sayHello() {  // 方法简写，等同于 sayHello: function() {}
    return `你好，我是${this.name}`;
  }
};
console.log("使用ES6简写的对象:", employee);
console.log(employee.sayHello());

// 7. 使用计算属性名（动态属性名）
const dynamicKey = "email";
const contact = {
  name: "王五",
  [dynamicKey]: "wangwu@example.com",
  [`phone_${Math.random().toString(36).substr(2, 9)}`]: "13800138000"
};
console.log("使用计算属性名的对象:", contact);

// 8. 创建包含Symbol作为属性的对象
const id = Symbol("id");
const product = {
  [id]: "PROD-123",
  name: "笔记本电脑",
  price: 5999
};
console.log("包含Symbol属性的对象:", product);
console.log("Symbol属性值:", product[id]);

4. JSON格式 ：JavaScript Object Notation基于JavaScript对象语法

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "email": "zhangsan@example.com"
}

5. 遍历方式不同

数组的遍历

const numbers = [1, 2, 3, 4, 5];

// for循环
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// forEach方法
numbers.forEach(num => {
  console.log(num);
});

// for...of循环
for (const num of numbers) {
  console.log(num);
}

对象的遍历

const person = {name: "Alice", age: 30, city: "New York"};

// for...in循环
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Object.keys + forEach
Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

// Object.entries + for...of
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

总结

中括号（ [] ）主要用于创建和操作数组，数组是有序的元素集合，通过数字索引访问元素，适用于需要按顺序存储和访问数据的场景。
大括号（ {} ）主要用于创建和操作对象，对象是键值对的集合，通过键（属性名）访问值，适用于需要存储相关属性和方法的数据结构。

在实际开发中，根据数据的特性和需求选择合适的数据结构是非常重要的。数组适合存储有序数据，而对象适合存储具有键值关系的数据。