每天学点 JS 编码规范(1):Types 和 References

Souleigh ✨ 等级 817 0 0

每天学点 JS 编码规范(1):Types 和 References

前端大全

微信号 FrontDev

功能介绍 分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

前天

收录于话题

(给前端大全加星标,提升前端技能)

英文:AirBnB,翻译:Kakaka Hou

为什么要在前端大全推送这个系列?

前段时间有读者通过我的个人微信,提议能不能推送一些编程规范的文章。我们以前关注过 Airbnb 在 GitHub 上开源的 JS 编程规范(现在有10万+ star,可见受欢迎程度),但因为篇幅太长,一直没有推送过。现在化整为零,设立这个每天学点 JS 编程规范系列,把长篇的规范划分成小节推送,方便大家讨论和掌握。

以下就是今天要推荐的 JS 编码规范,欢迎大家结合自己的实践到评论中来探讨。相信有更多前端开发者参与讨论的规范,会更加精彩。

- 以下是正文 -

注意:这个指南假定你正在使用 Babel, 并且需要你使用或等效的使用 babel-preset-airbnb。同时假定你在你的应用里安装了带有或等效的 airbnb-browser-shims 的shims/polyfills

1、Types

  • 1.1 基本类型: 你可以直接获取到基本类型的值

    const foo = 1;  
    let bar = foo;  
    
    bar = 9;  
    
    console.log(foo, bar); // => 1, 9  
    
  • Symbols 不能被正确的 polyfill。所以在不能原生支持 symbol 类型的环境[浏览器]中,不应该使用 symbol 类型。

  • string

  • number

  • boolean

  • null

  • undefined

  • symbol

  • 1.2 复杂类型: 复杂类型赋值是获取到他的引用的值。相当于传引用

    const foo = [1, 2];  
    const bar = foo;  
    
    bar[0] = 9;  
    
    console.log(foo[0], bar[0]); // => 9, 9  
    
  • object

  • array

  • function

2、References

  • 2.1 所有的赋值都用const,避免使用var. eslint: prefer-const, no-const-assign

    Why? 因为这个确保你不会改变你的初始值,重复引用会导致bug和代码难以理解

    // bad  
    var a = 1;  
    var b = 2;  
    
    // good  
    const a = 1;  
    const b = 2;  
    
  • 2.2 如果你一定要对参数重新赋值,那就用let,而不是var. eslint: no-var

    Why? 因为let是块级作用域,而var是函数级作用域

    // bad  
    var count = 1;  
    if (true) {  
      count += 1;  
    }  
    
    // good, use the let.  
    let count = 1;  
    if (true) {  
      count += 1;  
    }  
    
  • 2.3 注意: letconst都是块级作用域

    // const 和 let 都只存在于它定义的那个块级作用域  
    {  
      let a = 1;  
      const b = 1;  
    }  
    console.log(a); // ReferenceError  
    console.log(b); // ReferenceError  
    
收藏
评论区

相关推荐

每天学点 JS 编码规范(1):Types 和 References
每天学点 JS 编码规范(1):Types 和 References 前端大全 微信号 FrontDev 功能介绍 分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯 _前天_ 收录于话题 (给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kak
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
JSON学习笔记(二、语法)
#### JSON和js关系 欲学JSON先学js,那么JSON和js的关系是什么样的呢? .JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。 .JSON 语法是 JavaScript 语法的子集 #### 基本语法 .数据在名称/值对中 .数据由逗号分隔 .大括号保存对象 .中括号保
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
vs code 下安装golang支持
1)安装gocode go get -u -v github.com/nsf/gocode 2)安装godef go get -u -v github.com/rogpeppe/godef 3)安装golint go get -u -v github.com/golang/lint/golint 4)安装go-find-references g
Eclipse更改默认字符集 设置UTF
#### eclipse 中UTF-8设置 1.windows->Preferences   打开"首选项"对话框; 2.然后,general->Workspace,右 侧Text file encoding,选择Other,改变为UTF-8。 3.Web->打开,把CSS、HTML、JSP、JavaScript、XML等设置为UTF-8。 或在这里
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JavaScript学习笔记
JavaScript学习笔记 ============== 和HTML和CSS不一样,它是一门编程语言。 JS简介 ---- JS是一个客户端脚本语言,不需要编译,每一个浏览器都有JS的解析引擎。可以增强用户和HTML页面的交互,使网页产生动态。 JS的生成是在当时网速所限,必须在客户端就完成一些表单的校验等工作以减少客户端和服务器端的通信次数的实际
PostgreSQL报跨库异常及解决一例
今天群里一个哥们发了个错误信息: ERROR: cross-database references are not implemented: "public.test.id" ********** 错误 ********** ERROR: cross-database references are not im
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"