首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么JS允许以数组为key的属性访问?

JS允许以数组为key的属性访问是因为JS中的对象属性名实际上是字符串类型,而数组在JS中也是一种特殊的对象,可以作为属性名。这种特性使得JS具有更大的灵活性和扩展性。

数组作为属性名的访问方式在某些场景下非常有用,例如:

  1. 动态属性访问:通过数组作为属性名,可以根据变量的值来动态访问对象的属性。这在需要根据运行时的条件来确定属性名的情况下非常方便。
  2. 多维数据结构:通过使用多维数组作为属性名,可以构建复杂的数据结构,例如二维表格、多维矩阵等。这种方式可以简化对数据的操作和处理。
  3. 枚举和迭代:通过使用数组作为属性名,可以方便地对对象的属性进行枚举和迭代操作。这在需要对对象的属性进行遍历或者筛选时非常有用。

尽管JS允许使用数组作为属性名,但在实际开发中,建议尽量避免过于复杂的属性访问方式,以提高代码的可读性和维护性。如果需要使用复杂的数据结构或者键值对,可以考虑使用Map对象或者自定义的数据结构来代替。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue源码分析-基础数据代理检测_2023-03-01

拦截 数组被getter拦截 4 显然,已知长度数组是可以通过索引属性来设置属性访问属性。...首先思考一个问题,我们通过data选项去设置实例数据,那么这些数据可以随着个人习惯任意命名吗?显然不是的,如果你使用js关键字(像Object,Array,NaN)去命名,这是不被允许。...另一方面,Vue源码内部使用了$,_作为开头内部变量,所以$,_开头变量名也是不被允许,这就构成了数据过滤监测前提。接下来我们具体看hasHandler细节实现。...(key in target.$data)); // _和$开头变量不允许出现在定义数据中,因为他是vue内部保留属性开头。..._data可以拿到最终data选项合并结果,isReserved会过滤$,_开头变量,proxy会为实例数据访问做代理,当我们访问this.message时,实际上访问是this.

82930
  • vue源码分析-基础数据代理检测

    4显然,已知长度数组是可以通过索引属性来设置属性访问属性。...首先思考一个问题,我们通过data选项去设置实例数据,那么这些数据可以随着个人习惯任意命名吗?显然不是的,如果你使用js关键字(像Object,Array,NaN)去命名,这是不被允许。...另一方面,Vue源码内部使用了$,_作为开头内部变量,所以$,_开头变量名也是不被允许,这就构成了数据过滤监测前提。接下来我们具体看hasHandler细节实现。...(key in target.$data)); // _和$开头变量不允许出现在定义数据中,因为他是vue内部保留属性开头。..._data可以拿到最终data选项合并结果,isReserved会过滤$,_开头变量,proxy会为实例数据访问做代理,当我们访问this.message时,实际上访问是this.

    84400

    你不知道 WeakMap

    // 该对象将会被从内存中清除 但是,当对象、数组这类数据结构在内存中时,它们子元素,如对象属性数组元素都是可以访问。...之后,在命令行输入 node --expose-gc map.js 命令执行 map.js代码,其中 --expose-gc 参数表示允许手动执行垃圾回收机制。...3.2 属性 length:属性 0; prototype:WeakMap 构造器原型。 允许添加属性到所有的 WeakMap 对象。...与常规属性(甚至使用 private 修饰符声明属性)不同,私有字段要牢记以下规则: 私有字段 # 字符开头,有时我们称之为私有名称; 每个私有字段名称都唯一地限定于其包含类; 不能在私有字段上使用...Person 类内部私有属性为什么会这样呢?

    1.2K33

    Vue数据代理检测(源码)

    为什么这样设计 _ 或 开头属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置属性、API 方法冲突。你可以使用例如 vm.data._property 方式访问这些属性。...访问或者修改对象某个属性时,拦截这个行为并进行额外操作或者修改返回结果(在访问时进行依赖收集,在修改更新时对依赖进行更新),这也是 Vue 响应式系统核心。...Vue在响应式系统中对数组方法进行了重写,间接解决了这个问题。..._myName 实际访问是 this._data._myName , $, _ 开头,没有被代理,所以无法通过 this._myName 访问到。 为什么 this.$data....isAllowed } }; 模板中允许出现非vue实例定义变量 var allowedGlobals = makeMap( 'Infinity,undefined,NaN,isFinite

    2.9K31

    vue要点记录(待更新)

    使用在v-html里{{}}绑定会变成下面的样子,不会编译,直接当做字符串: ? 数据绑定使用js表达式 ? 过滤器 ?...这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前计算结果,而不必再次执行函数。 ?...在官方示例中,使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作频率,并在我们得到最终结果前,设置中间状态。 这是计算属性无法做到。...动态绑定class和style以及使用组件时如何添加动态class 自动添加前缀 当 v-bind:style 使用需要特定前缀 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应前缀...为什么在-HTML-中监听事件 表单控件绑定 v-model 本质上不过是语法糖,它负责监听用户输入事件更新数据,并特别处理一些极端例子。 ? ? ?

    1.4K30

    15个 Vue.js 高级面试题

    渲染项目列表时,key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一。...为了确保代理并可以从组件中访问它,可以配置 vue.config.js 文件并包含 devServer 部分,如下所示: 在 vue.config.js 文件中: module.exports: {...文档对象模型或 DOM 定义了一个接口,该接口允许 JavaScript 之类语言访问和操作 HTML 文档。元素由树中节点表示,并且接口允许我们操纵它们。...Vue 插件允许开发人员构建全局级别的功能并将其添加到 Vue。用于向程序添加可以全局访问方法和属性、资源,选项,mixin 以及其他自定义 API。...Vue 允许我们多种方式构建模板,其中最常见方式是只把 HTML 与特殊指令和 mustache 标签一起用于响应功能。

    3K20

    从源码解读 - Vue常考面试题

    ---- 核心答案: 数组考虑性能原因没有用defineProperty对数组每一项进行拦截,而是选择重写数组 方法进行重写。...---- 核心答案: 为什么$set可以触发更新,我们给对象和数组本身都增加了dep属性,当给对象新增不存在属性则触发对象依赖watcher去更新,当修改数组索引时我们调用数组本身splice方法去更新数组...我们可以判断key是否当前被代理对象target自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行trigger。 ?...,会采用“就近原则”组件数据为准。...computed 缓存特性,避免每次获取值时,都要重新计算; 2)当我们需要在数据变化时执行异步或开销较大操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API

    3K22

    Web前端面试敲重点知识,14个TypeScript核心基础面试题和答案

    对象是类似字典keys和values集合,key 必须是唯一。...它们类似于数组,有时也称为关联数组 但是,数组使用数字来索引值,而对象允许使用任何其他类型作为键 image.png 9、如何在 TypeScript 中指定可选属性 ? 通过添加 ?...枚举允许我们创建命名常量,这是一种数字常量值赋予更友好名称简单方法 枚举由关键字 enum 定义,后跟其名称和成员。 image.png 11、什么是参数解构 ?...protected:受保护成员仅对包含该成员子类可见。不扩展容器类外部代码无法访问受保护成员。 private:私有成员仅在类内部可见,没有外部代码可以访问私有成员。...静态类提供了一种方法来允许这些功能,而无需将它们与任何对象相关联。 在 TypeScript 中,您可以将任何数据和函数创建简单对象,而无需创建包含类。

    11.5K10

    12道vue高频原理面试题,你能答出几道?

    当我们需要在数据变化时执行异步或开销较大操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作频率,并在我们得到最终结果前,设置中间状态...Object.defineProperty 本身有一定监控到数组下标变化能力,但是在 Vue 中,从性能/体验性价比考虑,尤大大就弃用了这个特性(Vue 为什么不能检测数组变动 )。...谈一谈 nextTick 原理 JS 运行机制 JS 执行是单线程,它是基于事件循环。...,之后检查缓存实例数量是否超过 max 设置值,超过则根据 LRU 置换策略删除最近最久未使用实例(即是下标 0 那个 key) 最后组件实例 keepAlive 属性设置 true...对于已经创建实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

    1.3K60

    2021JavaScript面试题(最新)不定时更新(2021.11.6更新)

    对作用域理解 对作用域链理解(变量一个搜索过程) js怎么实现继承,优缺点 写代码,输出0-4,每隔一秒输一个 手写数组map函数 手写数组reduce函数 js是单线程为什么js能有异步任务...为什么 Js 要设计成弱类型语言 为什么js是单线程但是有settimout JS数组与其他语言数组区别 红宝书目录结构说说 对移动端开发有什么了解 前端设计组件原则 JS sort(...then方法的话,它允许注册成功、失败两个回调函数,如果当前状态pending,则分别放入成功、失败回调数组中;如果fulfilled,则执行成功回调;如果是rejected,则执行失败回调,最后返回...这个一层层搜索过程就是作用域链。 js怎么实现继承,优缺点 一、原型链继承 将父类实例作为子类原型,这样根据原型链,子类就可以访问到父类属性和方法。...应用场景:Vuex中Store、 MobxStore Mobx例,我们一般会抽象出一个功能Store,这个Store在全局Store里实例化,并只能通过全局Storestores进行访问

    2.6K11

    金九银十: 50 个JS 必须懂面试题为你助力

    允许你从内部函数访问外部函数作用域。 在JS中,每次创建函数时都会创建闭包。 要使用闭包,只需在另一个函数内定义一个函数并暴露它。 问题16:列出一些内置方法及其返回值。...问题19:如何使用 JS 创建 cookie 创建cookie最简单方法是document.cookie对象分配一个字符串值,如下所示: document.cookie = "key1 = value1...问题21:如何使用 JS 删除 cookie 如果要删除cookie以便后续尝试读取cookie,则只需将过期日期设置过去时间。 咱们应该定义cookie路径确保删除正确cookie。...问题49:为什么要将JS源文件全部内容包装在一个函数中 这是一种越来越普遍做法,被许多流行JS库所采用。...该技术另一个特性是允许全局变量提供一个简单别名,这在jQuery插件中经常使用。 问题50:JS转义字符是什么 JS转义字符使咱们能够在不破坏应用程序情况下编写特殊字符。

    6.6K31

    典型 MVVM 前端框架 Vue

    我们为什么需要缓存?假设我们有一个性能开销比较大计算属性 A,它需要遍历一个巨大数组并做大量计算。然后我们可能有其他计算属性依赖于 A 。...侦听器 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义侦听器。 这就是为什么 Vue 通过 watch 选项提供了一个更通用方法,来响应数据变化。...) } }) 在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作频率,并在我们得到最终结果前,设置中间状态。...key 当 Vue.js 用 v-for 正在更新已渲染过元素列表时,它默认用“就地复用”策略。...九、组件 组件 (Component) 是 Vue.js 最强大功能之一。组件可以扩展 HTML 元素,封装可重用代码。在较高层面上,组件是自定义元素,Vue.js 编译器它添加特殊功能。

    4.9K10

    字节跳动前端实习面经

    即域名系统,万维网上作为域名和IP地址相互映射一个分布式数据库,能够使用户用户更方便访问互联网,而不用去记住能够被机器直接读取IP数串。...maximum-scale:允许用户缩放到最大比例 minimum-scale:允许用户缩放到最小比例 user-scalable:用户是否可以手动缩放 设计弹出层具体过程 基础css水平居中...为什么会有点透现象 js 实现查询字符串中出现最多次数字符 var str = "zhaochucichu"; var o = {}; // 用对象属性来统计每一字符频数 for (var i =...这样做好处是可以在一个单独线程中执行费时处理任务,从而允许主(通常是UI)线程运行而不被阻塞/放慢。...say : function(){ console.log(this.name); } } say.call(obj,'one','two');//tom one two apply 数组形式传参

    1.5K20

    50 个JS 必须懂面试题为你助力金九银十

    允许你从内部函数访问外部函数作用域。 在JS中,每次创建函数时都会创建闭包。 要使用闭包,只需在另一个函数内定义一个函数并暴露它。 问题16:列出一些内置方法及其返回值。...问题19:如何使用 JS 创建 cookie 创建cookie最简单方法是document.cookie对象分配一个字符串值,如下所示: document.cookie = "key1 = value1...问题21:如何使用 JS 删除 cookie 如果要删除cookie以便后续尝试读取cookie,则只需将过期日期设置过去时间。 咱们应该定义cookie路径确保删除正确cookie。...问题49:为什么要将JS源文件全部内容包装在一个函数中 这是一种越来越普遍做法,被许多流行JS库所采用。...该技术另一个特性是允许全局变量提供一个简单别名,这在jQuery插件中经常使用。 问题50:JS转义字符是什么 JS转义字符使咱们能够在不破坏应用程序情况下编写特殊字符。

    4.6K30

    JavaScript新特性

    ,变量只有在声明之后才能被访问和使用,变量提升可以看一这篇文章 临时死区: let 声明变量在其声明之前不能被访问,这被称为临时死区会抛出错误 不允许重复声明 在同一个作用域内,不可以使用...;动态属性名 拼接属性名: 允许使用已存在变量值,[多个变量+拼接] 字面量对象属性名;动态属性名 //初始化一些变量|函数; let name = "wsm"; let age = 18;...: 允许使用已存在变量值,作为字面量对象属性名(动态属性名) //拼接属性名: 允许使用已存在变量值,多个变量[拼接]字面量对象属性名(动态属性名) let obj3 = { name:"...:语法糖 不必多想 如果有朋友想了解: JS对象前因后果,可以点击这里 箭头函数( )=>{ } 箭头函数允许更简洁语法来声明函数,特别是在编写简单匿名函数时非常方便 语法: (参数列表...|方法 私有属性和私有方法是指只能在类内部访问属性和方法: JavaScript私有|属性|方法|有多种声明方式: 早期JS私有属性|方法 一、通过规则规定属性|方法名来实现规则私有,外部依然可以通过变量进行访问

    20610

    京东前端一面面试题

    当从后端接收到 JSON 格式字符串时,可以通过这个方法来将其解析一个 js 数据结构,以此来进行数据访问。JavaScript 中如何进行隐式类型转换?...Domain:可以访问该cookie域名,Cookie 机制并未遵循严格同源策略,允许一个子域可以设置或获取其父域 Cookie。...因而,浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册二级域名,减小攻击发生范围。...Vue 为什么要用 vm.$set() 解决对象新增属性不能响应问题 ?你能说说如下代码实现原理么?1)Vue为什么要用vm....: any): any { // target 数组 if (Array.isArray(target) && isValidArrayIndex(key)) { // 修改数组长度,

    1K40
    领券