JavaScript编码小技巧分享

西格妮·霏霏

三元操作符
如果使用if...else语句，那么这是一个很好节省代码的方式。

1. const x = 20;
   
2. let big;
   
3. if (x > 10) {
   
4. big = true;
   
5. } else {
   
6. big = false;
   
7. }
   
8. //这样写...
   
9. const big = x > 10 ? true : false;

复制代码

Short-circuit Evaluation
分配一个变量值到另一个变量的时候，你可能想要确保变量不是null、undefined或空。你可以写一个有多个if的条件语句或者Short-circuit Evaluation。

1. if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
   
2.   let variable2 = variable1;
   
3. }
   
4. // 这样写
   
5. const variable2 = variable1 || 'new';

复制代码

不要相信我，请先相信自己的测试（可以把下面的代码粘贴在es6console）

1. let variable1;
   
2. let variable2 = variable1 || '';
   
3. console.log(variable2 === ''); // true
   
4. variable1 = 'foo';
   
5. variable2 = variable1 || '';
   
6. console.log(variable2); // foo

复制代码

声明变量
在函数中声明变量时，像下面这样同时声明多个变量可以节省你大量的时间和空间：

1. let x;
   
2. let y;
   
3. let x = 3;
   
4. 
   
5. // or
   
6. let x, y, z = 3;

复制代码

如果存在

这可能是微不足道的，但值得提及。做“如果检查”时，赋值操作符有时可以省略。

1. if (likeJavaScript === true)
   
2. //or
   
3. if (likeJavaScript)

复制代码

注：这两种方法并不完全相同，简写检查只要likeJavaScript是true都将通过。
这有另一个示例。如果a不是true，然后做什么。

1. let a;
   
2. if (a !== true) {
   
3. // do something ...
   
4. }
   
5. //or
   
6. let a;
   
7. if (!a) {
   
8. // do something ...
   
9. }

复制代码

JavaScript的for循环
如果你只想要原生的JavaScript，而不想依赖于jQuery或Lodash这样的外部库，那这个小技巧是非常有用的。

1. for (let i = 0; i < allImgs.length; i++)
   
2. //or
   
3. for (let index in allImgs)

复制代码

Array.forEach简写：

1. function logArrayElements(element, index, array) {
   
2. console.log('a[' + index + ']=' + element);
   
3. }
   
4. [2, 5, 9].forEach(logArrayElements);
   
5. // logs:
   
6. // a[0] = 2
   
7. // a[1] = 5
   
8. // a[2] = 9

复制代码

对象属性
定义对象文字（Object literals）让JavaScript变得更有趣。ES6提供了一个更简单的办法来分配对象的属性。如果属性名和值一样，你可以使用下面简写的方式。

1. const obj = {x: x, y: y};
   
2. //or
   
3. const obj = {x, y};

复制代码

箭头函数
经典函数很容易读和写，但它们确实会变得有点冗长，特别是嵌套函数中调用其他函数时还会让你感到困惑。

1. function sayHello(name) {
   
2. console.log('Hello', name);
   
3. }
   
4. setTimeout(function() {
   
5. console.log('Loaded')
   
6. }, 2000);
   
7. list.forEach(function(item){
   
8. console.log(item)
   
9. })
   
10. 
    
11. //or
    
12. sayHello = name => console.log('Hello', name);
    
13. setTimeout(() => console.log('Loaded'), 2000);
    
14. list.forEach(item => console.log(item));

复制代码

隐式返回
return在函数中经常使用到的一个关键词，将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果（函数必须省略{}，为了省略return关键词）。
如果返回一个多行语句（比如对象），有必要在函数体内使用()替代{}。这样可以确保代码是否作为一个单独的语句返回。

1. function calcCircumference(diameter) {
   
2. return Math.PI * diameter
   
3. }
   
4. //or
   
5. calcCircumference = diameter => (
   
6. Math.PI * diameter;
   
7. )

复制代码

默认参数值
你可以使用if语句来定义函数参数的默认值。在ES6中，可以在函数声明中定义默认值。

1. function volume(l, w, h) {
   
2. if (w === undefined)
   
3.     w = 3;
   
4. if (h === undefined)
   
5.     h = 4;
   
6. return l * w * h;
   
7. }
   
8. //or
   
9. volume = (l, w = 3, h = 4) => (l * w * h);
   
10. volume(2); // 24

复制代码

Template Literals(字符串模板)
是不是厌倦了使用+来连接多个变量变成一个字符串？难道就没有一个更容易的方法吗？如果你能使用ES6，那么你是幸运的。在ES6中，你要做的是使用撇号和${}，并且把你的变量放在大括号内。

1. const welcome = 'You have logged in as' + first + ' ' + last + '.';
   
2. const db = 'http://' + host + ':' + port + '/' + database;
   
3. //or
   
4. const welcome = `You have logged in as ${first} ${last}`;
   
5. const db = `http://${host}:${port}/${database}`;

复制代码

Destructuring Assignment（解构赋值）

1. const observable = require('mobx/observable');
   
2. const action = require('mobx/action');
   
3. const runInAction = require('mobx/runInAction');
   
4. 
   
5. 
   
6. const store = this.props.store;
   
7. const form = this.props.form;
   
8. const loading = this.props.loading;
   
9. const errors = this.props.errors;
   
10. const entity = this.props.entity;
    
11. 
    
12. //or
    
13. 
    
14. import {observable, action, runInAction} from 'mobx';
    
15. const {store, form, loading, errors, entity} = this.props;

复制代码

你甚至可以自己指定变量名：

1. const {store, form, loading, errors, entity:contact} = this.props; //通过 : 号来重命名

复制代码

Spread Operator(扩展运算符)
Spread Operator是ES6中引入的，使JavaScript代码更高效和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(...)。

1. // Joining arrays
   
2. const odd = [1, 3, 5];
   
3. const nums = [2, 4, 6].concat(odd);
   
4. 
   
5. 
   
6. // cloning arrays
   
7. const arr = [1, 2, 3, 4];
   
8. const arr2 = arr.slice();
   
9. //or
   
10. // Joining arrays
    
11. const odd = [1, 3, 5];
    
12. const nums = [2, 4, 6, ...odd];
    
13. console.log(nums); // [2, 4, 6, 1, 3, 5]
    
14. 
    
15. 
    
16. // cloning arrays
    
17. const arr = [1, 2, 3, 4];
    
18. const arr2 = [...arr];

复制代码

不像concat()函数，使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。

1. const odd = [1, 3, 5];
   
2. const nums = [2, ...odd, 4, 6];

复制代码

另外还可以当作解构符：

1. const {a, b, ...z} = {a: 1, b: 2, c: 3, d: 4};
   
2. console.log(a); // 1
   
3. console.log(b); // 2
   
4. console.log(z); // {c: 3, d: 4}

复制代码

强制参数

1. function foo(bar) {
   
2. if (bar === undefined) {
   
3. throw new Error('Missing parameter!');
   
4.   }
   
5. return bar;
   
6. }
   
7. //or
   
8. mandatory = () => {
   
9. throw new Error('Missing parameter!');
   
10. }
    
11. foo = (bar = mandatory()) => {
    
12. return bar;
    
13. }

复制代码

Array.find
如果你以前写过一个查找函数，你可能会使用一个for循环。在ES6中，你可以使用数组的一个新功能find()。

1. const pets = [
   
2.   {type: 'Dog', name: 'Max'},
   
3.   {type: 'Cat', name: 'Karl'},
   
4.   {type: 'Dog', name: 'Tommy'}
   
5. ]
   
6. function findDog(name) {
   
7. for (let i = 0; i < pets.length; ++i) {
   
8. if (pets[i].type === 'Dog' && pets[i].name === name) {
   
9. return pets[i];
   
10.     }
    
11.   }
    
12. }
    
13. // or
    
14. pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy');
    
15. console.log(pet); // {type: 'Dog', name: 'Tommy'}

复制代码

Object[key]
你知道Foo.bar也可以写成Foo[bar]吧。起初，似乎没有理由应该这样写。然而，这个符号可以让你编写可重用代码块。

1. function validate(values) {
   
2. if (!values.first)
   
3. return false;
   
4. if (!values.last)
   
5. return false;
   
6. return true;
   
7. }
   
8. console.log(validate({first: 'Bruce', last: 'Wayne'})); // true

复制代码

这个函数可以正常工作。然而，需要考虑一个这样的场景：有很多种形式需要应用验证，而且不同领域有不同规则。在运行时很难创建一个通用的验证功能。

1. // object validation rules
   
2. const schema = {
   
3. first: {
   
4. required: true
   
5.   },
   
6. last: {
   
7. required: true
   
8.   }
   
9. }
   
10. // universal validation function
    
11. const validate = (schema, values) => {
    
12. for(field in schema) {
    
13. if (schema[field].required) {
    
14. if(!values[field]) {
    
15. return false;
    
16.       }
    
17.     }
    
18.   }
    
19. return true;
    
20. }
    
21. console.log(validate(schema, {first: 'Bruce'})); // false
    
22. console.log(validate(schema, {first: 'Bruce', last: 'Wayne'})); //true

复制代码

现在我们有一个验证函数，可以各种形式的重用，而不需要为每个不同的功能定制一个验证函数。
Double Bitwise NOT
如果你是一位JavaScript新手的话，对于逐位运算符（Bitwise Operator）你应该永远不会在任何地方使用。此外，如果你不处理二进制0和1，那就更不会想使用。
然而，一个非常实用的用例，那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势，它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

1. Math.floor(4.9) === 4; // true
   
2. //or
   
3. ~~4.9 === 4; //true

复制代码

以上就是JavaScript编码小技巧分享的详细内容，更多关于JavaScript编码技巧的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

123463100

路过，支持一下

愿为你的左手诺

感谢楼主分享。

霜林醉2017

顶顶更健康！！！

杜素

感谢楼主，顶。