JavaScript编码小技巧分享


Posted in Javascript onSeptember 17, 2020

三元操作符

如果使用if...else语句,那么这是一个很好节省代码的方式。

const x = 20;
let big;
if (x > 10) {
big = true;
} else {
big = false;
}
//这样写...
const big = x > 10 ? true : false;

Short-circuit Evaluation

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

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
  let variable2 = variable1;
}
// 这样写
const variable2 = variable1 || 'new';

不要相信我,请先相信自己的测试(可以把下面的代码粘贴在es6console)

let variable1;
let variable2 = variable1 || '';
console.log(variable2 === ''); // true
variable1 = 'foo';
variable2 = variable1 || '';
console.log(variable2); // foo

声明变量

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

let x;
let y;
let x = 3;

// or 
let x, y, z = 3;

如果存在

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

if (likeJavaScript === true)
//or
if (likeJavaScript)

注:这两种方法并不完全相同,简写检查只要likeJavaScript是true都将通过。

这有另一个示例。如果a不是true,然后做什么。

let a;
if (a !== true) {
// do something ...
}
//or
let a;
if (!a) {
// do something ...
}

JavaScript的for循环

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

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

Array.forEach简写:

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

对象属性

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

const obj = {x: x, y: y};
//or
const obj = {x, y};

箭头函数

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

function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item){
console.log(item)
})

//or
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

隐式返回

return在函数中经常使用到的一个关键词,将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果(函数必须省略{},为了省略return关键词)。

如果返回一个多行语句(比如对象),有必要在函数体内使用()替代{}。这样可以确保代码是否作为一个单独的语句返回。

function calcCircumference(diameter) {
return Math.PI * diameter
}
//or
calcCircumference = diameter => (
Math.PI * diameter;
)

默认参数值

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

function volume(l, w, h) {
if (w === undefined)
    w = 3;
if (h === undefined)
    h = 4;
return l * w * h;
}
//or
volume = (l, w = 3, h = 4) => (l * w * h);
volume(2); // 24

Template Literals(字符串模板)

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

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

Destructuring Assignment(解构赋值)

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');


const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

//or

import {observable, action, runInAction} from 'mobx';
const {store, form, loading, errors, entity} = this.props;

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

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

Spread Operator(扩展运算符)

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

// Joining arrays
const odd = [1, 3, 5];
const nums = [2, 4, 6].concat(odd);


// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();
//or
// Joining arrays
const odd = [1, 3, 5];
const nums = [2, 4, 6, ...odd];
console.log(nums); // [2, 4, 6, 1, 3, 5]


// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

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

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

另外还可以当作解构符:

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

强制参数

function foo(bar) {
if (bar === undefined) {
throw new Error('Missing parameter!');
  }
return bar;
}
//or
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}

Array.find

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

const pets = [
  {type: 'Dog', name: 'Max'},
  {type: 'Cat', name: 'Karl'},
  {type: 'Dog', name: 'Tommy'}
]
function findDog(name) {
for (let i = 0; i < pets.length; ++i) {
if (pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
    }
  }
}
 // or
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy');
console.log(pet); // {type: 'Dog', name: 'Tommy'}

Object[key]

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

function validate(values) {
if (!values.first)
return false;
if (!values.last)
return false;
return true;
}
console.log(validate({first: 'Bruce', last: 'Wayne'})); // true

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

// object validation rules
const schema = {
first: {
required: true
  },
last: {
required: true
  }
}
// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if (schema[field].required) {
if(!values[field]) {
return false;
      }
    }
  }
return true;
}
console.log(validate(schema, {first: 'Bruce'})); // false
console.log(validate(schema, {first: 'Bruce', last: 'Wayne'})); //true

现在我们有一个验证函数,可以各种形式的重用,而不需要为每个不同的功能定制一个验证函数。

Double Bitwise NOT

如果你是一位JavaScript新手的话,对于逐位运算符(Bitwise Operator)你应该永远不会在任何地方使用。此外,如果你不处理二进制0和1,那就更不会想使用。

然而,一个非常实用的用例,那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势,它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

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

以上就是JavaScript编码小技巧分享的详细内容,更多关于JavaScript编码技巧的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JS Timing
Apr 21 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
如何利用node转发请求详解
Sep 17 #Javascript
前端性能优化建议
Sep 17 #Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 #Javascript
JavaScript中如何调用Java方法
Sep 16 #Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 #Javascript
Vue父子组件传值的一些坑
Sep 16 #Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 #Javascript
You might like
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
轮播图组件js代码
2016/08/08 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
网络教育自我鉴定
2014/02/04 职场文书
《猫》教学反思
2014/02/26 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
授权委托书范本
2014/04/03 职场文书
协议书与合同的区别
2014/04/18 职场文书
保研推荐信
2014/05/09 职场文书
施工质量承诺书范文
2014/05/30 职场文书
社会工作专业自荐信
2014/09/26 职场文书
六查六看心得体会
2014/10/14 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers