JS基础知识:ES6语法规范

初步整理:

1、块级作用域:let取代var、全局常量和线程安全

ES6 提出了两个新的声明变量的命令: let 和const。其中,let可以完全取代var,因为两者语义相同,而且let没有副作用。var命令存在变量提升的特性,而let没有这个命令。所谓变量提升,即指变量可以先使用,再声明,显然,这种编码规范非常不适合阅读。letconst之间,优先使用constlet应出现在单线程模块代码内,而const则非常适合多线程。// badvar a = 1, b = 2, c = 3;
// goodconst a = 1;const b = 2;const c = 3;
// bestconst[a, b, c] = [1, 2, 3];

2、字符串

静态字符串一律使用单引号或者反引号,不推荐使用双引号。动态字符串(字符串模板)使用反引号。// badconst a = "zhaoyi";const b = a + ", hello.";
// little goodconst c = `zhaoyi`;
// very goodconst a = 'zhaoyi';const b = `zhaoyi,${a}, I say your name twice`;

3、解构赋值

1、使用数组成员对变量进行赋值时,优先使用解构赋值。const arr = ['I', 'love', 'you'];
// badconst one = arr[0];const two = arr[1];const three = arr[2];
// goodconst [first, second, third] = arr;
// testconsole.log(first, second, third);// I love you2、函数的参数如果是对象的成员,优先使用解构赋值。// badfunction getUserInfo(user){ const name = user.name; const age = user.age;}
// goodfunction getUserInfo2(user){ const {name, age} = user; console.log(name, age); // }
// testgetUserInfo2({name: 'zhaoyi', age: 20}); // zhaoyi 203、如果函数返回多个值,优先使用对象的结构赋值,而不是数组的结构赋值。这样便于以后添加返回值,以及更改返回值的顺序。// badfunction getInfo(input){ return [left, right];}
// goodfunction getInfo2(input){ return {left, right};}
// 此处使用对象的解构赋值方式接收返回结果const {left, right} = getInfo2('test');

4、对象

1、单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。// badconst a1 = {k1: v1, k2: v2, k3: v3,};
// good const a2 = {k1: v1, k2: v2, k3: v3};
// badconst b1 = { k1: v1, k2: v2};
// goodconst b2 = { k1: v1, k2: v2,};2、对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用assign方法。// badconst a = {};a.attr = 3;
// if reshape anavoidable(若无可避免)const b = {};Object.assign(b, {atrr: 3});
// goodconst c = {attr: null};c.attr = 3;
// testconsole.log(a); //{attr: 3}console.log(b); //{attr: 3}console.log(c); //{attr: 3}3、如果对象的属性名是动态的(所谓动态是指,需要通过计算得到),可以在创建对象的时候使用属性表达式定义。(此种情况在开发时,并不多见。)

5、数组

使用扩展运算符(...)复制数组。// badfunction copyArr1(arr){ const itemCopy = []; for (let index = 0; index < arr.length; index++) { itemCopy[index] = arr[index]; } return itemCopy;}
// goodfunction copyArr2(arr){ return [...arr];}
// testconst arr = ['z', 'y', 'z'];console.log(copyArr1(arr)); // ["z", "y", "z"]console.log(copyArr2(arr)); // ["z", "y", "z"]
使用Array.from 方法将类似数组的对象转为数组。const obj = { "0": "a", "1": "b", length: 2};const arr = Array.from(obj);
// testconsole.log(arr); // ["a", "b"]

6、函数

1、立即执行函数可以写成箭头函数的形式。(() => { console.log('this is a good night.');})();2、在需要使用函数表达式的场合,尽量用箭头函数代替。因为这样可以更简洁,而且绑定了this// badconst sayHello = ['a', 'b', 'c'].map(function (w){ return 'Hello, ' + w;})
// good const sayHello2 = ['a', 'b', 'c'].map(w => { return 'Hello, ' + w;});
// testconsole.log(sayHello2); // ["Hello, a", "Hello, b", "Hello, c"] 3、箭头函数取代Function.prototype.bind,不应再用self/_this/that绑定this.// badconst self = this;const boundMethod = function(...params){ return method.apply(self, params);}
// acceptableconst boundMethod2 = method.bind(this);
// bestconst boundMehod3 = (...params) => method.apply(this, params);4、单行简单、无需复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应采用传统的函数写法。
5、所有配置项都应该集中在一个对象,放在到最后一个参数,布尔值不可以直接作为参数。// badfunction divide(a, b, option = false){
}
// goodfunction divide(a, b, {option = false} = {}){
}6、不要在函数体内使用arguments变量,使用rest运算符(...)代替。因为rest运算符可以显示声明我们想要获取的参数,而且arguments是一个类似数组的对象,而rest元素安抚可以提供一个真正的数组。// badfunction f1(){ const args = Array.prototype.slice.call(arguments); return args.join('-');}
// goodfunction f2(...args){ return args.join('-');}
// testconsole.log(f1(1, 2, 3)); // 1-2-3console.log(f2(1, 2, 3)); // 1-2-3扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值;而rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组。rest是剩余的意思。
7、使用默认值语法设置函数参数的默认值。// badfunction handleThings(opts){ opts = opts || {}; // ...}
// goodfunction handleThings2(opts = {}){ // ...}

7、Map结构

MapObject给人的感觉是同一个数据类型,但是在实际语义还需要更为准确的区分,原则如下:
模拟实体对象时,使用Object只需要k-v键值对数据结构时,使用MapMap拥有内建的遍历机制(实现了Iterator结构)// Map拥有许多初始化方式,这里使用数组成员为两个长度的数组进行初始化(第一个元素为K,第二个元素为V)let map = new Map([['k1', 'I'], ['k2', 'love'], ['k3', 'your']]);
// 遍历Kfor(const key of map.keys()){ console.log(key); // k1 // k2 // k3}
// 遍历Vfor (const value of map.values()) { console.log(value); // I // love // you}
// 遍历K-Vfor (const item of map.entries()) { console.log(item); // ['k1', 'I'] // ['k2', 'love'] // ['k3', 'your']}

8、Class

1、总是用Class取代需要prototype的操作。因为Class的写法更简洁,更易于理解。接触过JavaC

9、模块

1、Module语法是js模块的标准写法,要坚持使用这种写法。使用import取代require// badconst ma = require('moduleA');const f1 = ma.f1;const f2 = ma.f2;
// goodimport {f1, f2} from 'moduleA';2、使用export取代module.export// badmodule.exports = SomeObj;
// goodexport default SomeObj; 3、如果模块只有一个输出值,就使用 export default; 若有镀铬,就不要使用 export default, 不要同时使用 export default 和 普通的 export,虽然规则上允许此种编写代码的方式。
4、不要在模块中使用通配符,因为这样可以确保模块中有一个默认输出:export default// badimport * as myObject './someModule';
// goodimport myObject from './someModule';5、如果模块默认输出一个函数,函数的首字母应该小写。 function someFunction(){ // ... } export default someFunction;6、 如果模块默认输出一个对象,对象名的首字母应该大写。
const someObj = { // ...}export default SomeObj;

10、ESLint

前面说了那么多规则,其实只是规则范本的冰山一角,真正想要写出格式优美、符合主流厂商规范的代码,仅仅靠我们的自觉是不够的。有没有什么类似软件编译工具检查代码正确性来检查代码编写规范的软件呢,答案是有的。ESLint就是这样的一款检查工具。可以用于保证写出语法正确、风格统一的代码。以下是安装ESLink的教程(确保您的环境已经安装了npm),当然,如果您使用一些脚手架工具(例如@vue-cli)等方式生成的项目,那么这样的项目都是提供了可选的eslint插件的。当前版本为: v6.6.0。该版本的eslint提供了更为简单的配置方式,可以参考https://eslint.bootcss.com/docs/user-guide/getting-started/进行配置。以下是一个粗略的配置步骤
1、安装所需插件$ npm install eslint -g2、生成package.json文件
$ npm init该方法会在当前目录生成package.json文件,该文件类似于环境的说明文件。3、生成eslint配置文件$ eslint --init该命令会询问你使用哪种类型的配置(通过上下箭头选取)
推荐选用json或者JavaScript类型,我这里使用的是JavaScript类型的配置文件style guide选用airbnb。其他的选项根据你的需要进行选取即可。完成选择之后,会自动下载所需要的依赖包。
生成的配置文件内容大致如下:module.exports = { env: { browser: true, es6: true, }, extends: [ 'airbnb-base', ], globals: { Atomics: 'readonly', SharedArrayBuffer: 'readonly', }, parserOptions: { ecmaVersion: 2018, sourceType: 'module', }, rules: { },};我们在该配置文件中可以修改验证规则,具体的内容同样参考上面给出的链接。
4、在当前目录下,创建一个js文件// index.jsvar unused = '灰与幻想的格林姆迦尔'; function hello(){ var message = "Hello, zhaoyi!"; alert(message);} hello();5、通过eslint验证代码编写正确性

JS基础知识:ES6语法规范》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:https://www.hashtobe.com/1100.html