首页 > 其他分享 >Vue 中const 命令 

Vue 中const 命令 

时间:2022-11-22 14:01:04浏览次数:38  
标签:count Vue const goodconst item 对象 命令 eslint

const 命令

  • 请记得 const 和 let 都是块级作用域,var 是函数级作用域
// const and let only exist in the blocks they are defined in.
{
let a = 1
const b = 1
}
console.log(a) // ReferenceError
console.log(b) // ReferenceError

对所有引用都使用 const,不要使用 var,eslint: prefer-const, no-const-assign 原因:这样做可以确保你无法重新分配引用,以避免出现错误和难以理解的代码

// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

如果引用是可变动的,使用 let 代替 var,eslint: no-var 原因:let 是块级作用域的,而不像 var 属于函数级作用域

// bad
var count = 1
if (count < 10) {
count += 1
}

// good
let count = 1
if (count < 10) {
count += 1
}

​对象​

请使用字面量值创建对象,eslint: no-new-object

// bad
const a = new Object{}

// good
const a = {}
别使用保留字作为对象的键值,这样在 IE8 下不会运行

// bad
const a = {
default: {}, // default 是保留字
common: {}
}

// good
const a = {
defaults: {},
common: {}
}

当使用动态属性名创建对象时,请使用对象计算属性名来进行创建 原因:因为这样做就可以让你在一个地方定义所有的对象属性

function getKey(k) {
return `a key named ${k}`
}

// bad
const obj = {
id: 5,
name: 'San Francisco'
};
obj[getKey('enabled')] = true

// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true
};

请使用对象方法的简写方式,eslint: object-shorthand

// bad
const item = {
value: 1,

addValue: function (val) {
return item.value + val
}
}

// good
const item = {
value: 1,

addValue (val) {
return item.value + val
}
}

请使用对象属性值的简写方式,eslint: object-shorthand 原因:这样更简短且描述更清楚

const job = 'FrontEnd'

// bad
const item = {
job: job
}

// good
const item = {
job
}

将简写的对象属性分组后统一放到对象声明的开头 原因:这样更容易区分哪些属性用了简写的方式

只对非法标识符的属性使用引号,eslint: quote-props 原因:因为通常来说我们认为这样主观上会更容易阅读,这样会带来代码高亮上的提升,同时也更容易被主流 JS 引擎优化

不要直接使用 Object.prototype 的方法, 例如 hasOwnProperty, propertyIsEnumerable 和 isPrototypeOf 方法,eslint: no-prototype-builtins 原因:这些方法可能会被对象自身的同名属性覆盖 - 比如 { hasOwnProperty: false } 或者对象可能是一个 null 对象(Object.create(null))

标签:count,Vue,const,goodconst,item,对象,命令,eslint
From: https://blog.51cto.com/u_15832634/5877915

相关文章

  • C/C++预处理命令
    防止重复包含头文件#ifndef__文件名大写_H__#define__文件名大写_H__#endif//__文件名大写_H__//c++pragmaonce较老编译器不支持,以上两种方法都行。......
  • Vue2 + antdv 动态修改a-table的行的值的数据
    需求:在如下编辑页面的表格中,点击编辑,弹出频段编辑页面。修改完后数据回传并更新表单数据,不要通过后台。实现步骤:1.点击编辑时记录行号2.传递当前记录到子页面3.子......
  • new Blob vue中使用文件流进行下载
    封装方法functiongetExel(url,params,index){+returnnewPromise(function(resolve,reject){letdata={method:"GET",url:url,headers:......
  • vue+ openlayers + GeoServer 地图初始化 标点加弹窗看详情
    <template><divclass="mapCont"><divid="map"><divid="popup"ref="popup"class="ol-popup"v-show="vehiclePointInfo"><divid="popup-......
  • ⑧ vue+echarts实现热词分析
    依赖"dependencies":{"echarts":"^4.0.4","echarts-wordcloud":"^1.1.3",},tip:echarts-wordcloud现在有2.0和1.x两个版本,2.0对应echarts5.x版本......
  • vue 项目中,后端返回文件流,导出excel
    之前写过文件流导出excel,这次直接把上次的代码拿过来复制粘贴,但是导出的表格里面没有数据,只显示undefined。这是之前的代码//api接口页面//excel导出接口export......
  • Android设计模式系列(7)--SDK源码之命令模式
    命令模式,在.net,java平台的事件机制用的非常多,几乎每天都与之打交道。android中对我印象最深的就是多线程多进程的环境,所以必然大量使用到Runbable,Thread,其实用的就是最......
  • Android命令行查看内存情况
    在学习如何查看内存前先来介绍几个概念VSS-VirtualSetSize虚拟耗用内存(包含共享库占用的内存)RSS-ResidentSetSize实际使用物理内存(包含共享库占用的内存)PSS......
  • VUE
    VUESoc:HTML+css+js:视图网络通信:axios页面跳转:vue-router状态管理:vuexVue-UI:ICE  M:模型V:视图C:控制器View:JSP{{}}DATA:mvvm:数据双向绑定 虚拟Dom:利......
  • swiper鼠标悬停(自由切换),拒绝大佬,珍爱生命![email protected]
    [email protected]@4.1.1--save-dev实测有效!JavaScript:<script>import{Swiper,SwiperSlide}from'vue-awesome......