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

Souleigh ✨ 等级 510 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  
    
收藏
评论区

相关推荐

JavaScript 引擎、事件循环、任务队列
一、先引用别人的一幅图 (很好的概括了JS主线程和任务队列是如何执行的) 1.JS引擎和runtime的区别: 引擎:解释并编译代码,让它变成
😎手撕吊打面试官系列面试题
js基础 1. 用js打印一个乘法表 这一题面试官考察的是你关于js的打印相关基础api的熟悉程度,以及基本的数学常识,送分题 console.log( 111 212 224 313 326 339 414 428 4312 4416 515 5210 5315 5420 5525
项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
web性能优化的15条实用技巧
javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。 加载和执行 1.提高加载性能 1.IE8,FF,3.5,Safari 4和
每天学点 JS 编码规范(1):Types 和 References
每天学点 JS 编码规范(1):Types 和 References 前端大全 微信号 FrontDev 功能介绍 分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯 _前天_ 收录于话题 (给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kak
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
「组件」返回顶部按钮
样式如图1:在components文件夹下新建BackTop.vue js<template <div class"backTopBtn" <a href"javascript:;" <div vif"btnFlag" class"btn" @click"backTop"TOP</div
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
js删除表格中的某一行
点击表格中的内容,删除某一行正文js代码如下 function removeTd(obj) { obj.parentNode.parentNode.remove();}
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
React - Fiber原理
浏览器渲染 屏幕刷新率(FPS) 浏览器的正常绘制频率是60次/秒,小于这个值时,用户会感觉到卡顿 绘制一次的称为一帧,平均每帧16.6ms 帧 每个帧的开头包括样式计算、布局和绘制 js的执行是单线程,js引擎和页面渲染引擎都占用主线程,GUI渲染和Javascript执行两者是互斥的 如果某个js任务执行时间过长,浏览器会推迟渲染,每
扑克牌发牌
间隔2秒发牌且有大小王! coding:utf8import randomimport time 扑克牌54张poker [x for x in range(1, 55)]player pokers 每个花色的组合 玩家4人 列表for p in range(1, 5): player[p] [] 4个花色types ['♠', '♥'
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写