当前位置:首页 > JavaScript

js实现属性

2026-04-05 15:39:21JavaScript

属性定义与访问

在JavaScript中,对象的属性可以通过点符号或方括号访问。属性可以是数据属性或访问器属性(getter/setter)。

const obj = {
  // 数据属性
  dataProp: 'value',

  // 访问器属性
  get accessorProp() {
    return this.dataProp;
  },
  set accessorProp(value) {
    this.dataProp = value;
  }
};

属性描述符

通过Object.defineProperty()可以精确控制属性特性:

js实现属性

  • configurable: 是否可删除或修改特性
  • enumerable: 是否出现在for...in循环中
  • value: 属性值
  • writable: 是否可修改值
  • get: getter函数
  • set: setter函数
Object.defineProperty(obj, 'newProp', {
  value: 42,
  writable: false,
  enumerable: true
});

动态属性名

ES6允许使用表达式作为属性名:

const propName = 'dynamic';
const obj = {
  [propName + 'Key']: 'value'
};

属性存在性检查

使用in运算符或hasOwnProperty()方法检测属性是否存在:

js实现属性

'dataProp' in obj; // true
obj.hasOwnProperty('accessorProp'); // true

属性枚举

获取对象所有可枚举属性:

Object.keys(obj); // 返回自有可枚举属性键数组
for (const key in obj) {
  console.log(key);
}

属性删除

使用delete操作符移除对象属性:

delete obj.dataProp; // 返回true表示成功

标签: 属性js
分享给朋友:

相关文章

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Promise…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js实现排序

js实现排序

数组排序方法 JavaScript提供了内置的sort()方法用于数组排序。默认情况下,sort()将元素转换为字符串并按照Unicode码点排序。对于数字排序,需传入比较函数。 const num…

js 实现图片轮播

js 实现图片轮播

基础实现方案 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS负责样式布局,JavaScript处理轮播逻辑。 <div class="…