数组和对象的另类用法

以下是几种在 JavaScript 中获取数组第一位的方法：

1. ‌直接索引访问

const arr = [10, 20, 30];
const first = arr; // 10

• ‌特点‌：最简洁、高效，直接通过索引访问。
• ‌注意‌：如果数组为空，返回 undefined。

2. ‌使用 Array.prototype.shift() ‌

const arr = [10, 20, 30];
const first = arr.shift(); // 10
// 此时 arr 变为 [20, 30]

• ‌特点‌：返回第一个元素，但会‌修改原数组‌（移除第一位）。
• ‌适用场景‌：需要同时删除第一个元素时。

3. ‌使用 Array.prototype.slice() ‌

const arr = [10, 20, 30];
const first = arr.slice(0, 1); // 10
// 或直接解构：const [first] = arr.slice();

• ‌特点‌：返回新数组（包含第一个元素），‌不修改原数组‌。
• ‌注意‌：如果数组为空，slice(0,1) 返回空数组，此时 `` 为 undefined。

4. ‌解构赋值（Destructuring）

const arr = [10, 20, 30];
const [first] = arr; // first = 10

• ‌特点‌：语法简洁（ES6+），‌不修改原数组‌。
• ‌注意‌：如果数组为空，first 为 undefined。

5. ‌使用 Array.prototype.at()（ES2022+）

const arr = [10, 20, 30];
const first = arr.at(0); // 10

• ‌特点‌：支持负数索引（如 arr.at(-1) 获取最后一个元素），‌不修改原数组‌。
• ‌兼容性‌：需较新浏览器或 Node.js 16+。

以下是几种在 JavaScript 中获取对象第一位的方法：

1. ‌使用 Object.keys() 取第一个键

const obj = { a: 10, b: 20, c: 30 };
const firstKey = Object.keys(obj); // 'a'
const firstValue = obj[firstKey]; // 10

• ‌特点‌：直接获取第一个键，再通过键取值。
• ‌注意‌：若对象为空，firstKey 为 undefined。

2. ‌使用 for...in 循环取第一个属性

const obj = { a: 10, b: 20, c: 30 };
let firstValue;
for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // 避免原型链上的属性
    firstValue = obj[key];
    break;
  }
}
console.log(firstValue); // 10

• ‌特点‌：兼容性较好，但需手动终止循环。
• ‌注意‌：若对象包含数字键（如 '1'），顺序可能与预期不同（数字键升序优先）。

3. ‌使用 Object.entries() 转数组取第一个键值对

const obj = { a: 10, b: 20, c: 30 };
const [firstEntry] = Object.entries(obj); // ['a', 10]
const [key, value] = firstEntry || []; // key='a', value=10

• ‌特点‌：直接获取第一个键值对组成的数组。
• ‌注意‌：若对象为空，firstEntry 为 undefined。

4. ‌使用 Reflect.ownKeys()（ES6+）

const obj = { a: 10, 2: '数字键', b: 20 };
const firstKey = Reflect.ownKeys(obj); // '2'（数字键优先升序）
const firstValue = obj[firstKey]; // '数字键'

• ‌特点‌：包含所有自有属性（含 Symbol 类型），且数字键会升序排列。
• ‌注意‌：顺序规则：数字键升序 → 字符串键插入顺序 → Symbol 键插入顺序。

总结

• ‌推荐 Object.keys(obj) ‌：简单直观，兼容性好。
• 若需键值对，用 Object.entries(obj)。
• 需要兼容数字键顺序时，注意 Reflect.ownKeys() 的规则。