数组和对象的另类用法

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

1. ‌直接索引访问

ini 复制代码
const arr = [10, 20, 30];
const first = arr; // 10
  • ‌特点‌:最简洁、高效,直接通过索引访问。
  • ‌注意 ‌:如果数组为空,返回 undefined。

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

ini 复制代码
const arr = [10, 20, 30];
const first = arr.shift(); // 10
// 此时 arr 变为 [20, 30]
  • ‌特点 ‌:返回第一个元素,但会‌修改原数组‌(移除第一位)。
  • ‌适用场景‌:需要同时删除第一个元素时。

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

ini 复制代码
const arr = [10, 20, 30];
const first = arr.slice(0, 1); // 10
// 或直接解构:const [first] = arr.slice();
  • ‌特点 ‌:返回新数组(包含第一个元素),‌不修改原数组‌。
  • ‌注意 ‌:如果数组为空,slice(0,1) 返回空数组,此时 `` 为 undefined。

4. ‌解构赋值(Destructuring)

ini 复制代码
const arr = [10, 20, 30];
const [first] = arr; // first = 10
  • ‌特点 ‌:语法简洁(ES6+),‌不修改原数组‌。
  • ‌注意 ‌:如果数组为空,first 为 undefined。

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

ini 复制代码
const arr = [10, 20, 30];
const first = arr.at(0); // 10
  • ‌特点 ‌:支持负数索引(如 arr.at(-1) 获取最后一个元素),‌不修改原数组‌。
  • ‌兼容性‌:需较新浏览器或 Node.js 16+。

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

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

ini 复制代码
const obj = { a: 10, b: 20, c: 30 };
const firstKey = Object.keys(obj); // 'a'
const firstValue = obj[firstKey]; // 10
  • ‌特点‌:直接获取第一个键,再通过键取值。
  • ‌注意 ‌:若对象为空,firstKey 为 undefined。

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

ini 复制代码
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() 转数组取第一个键值对

css 复制代码
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+)

ini 复制代码
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() 的规则。
相关推荐
Dream-Y.ocean40 分钟前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Csvn2 小时前
性能监控
前端
Highcharts.js2 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Csvn2 小时前
构建工具
前端
FRing033 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
kyriewen5 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒5 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫5 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
jerrywus6 小时前
我用 GPT-6.1-sol 做了台会讲解的 3D 售货机:60 罐饮料,一口没喝上
前端·agent·claude
孟陬7 小时前
Foobar 技术周刊#159:当看不懂代码时,如何高效排障调试。脏页陷阱:一条只读查询,写入数 TB 数据。推测解码:大模型加速利器
前端·人工智能·后端