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 相关文章推荐
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue  自定义组件实现通讯录功能
Sep 30 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
10分钟学会js处理json的常用方法
Dec 06 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
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Yahoo-PHP面试题1
2016/07/20 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
现金会计岗位职责
2013/12/05 职场文书
铲车司机岗位职责
2014/03/15 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python