其实我不算刚入坑的 web 前端工程师, 已经在 web 这行干了一年了, 但还是觉得自己很垃圾啊~~~ 摔!!!
所以痛定思痛, 还是觉得在学习前端同时, 把一些看到的小知识点或者小技巧保存下来, 方便自己以后查看, 当然如果有大神看到可以稍微指点下就更好啦!
第一次写博客性质的文章, 格式也不清楚, 写的不好请多多包涵, 下面开始正文!
缩短求值简写
将变量值分配给另一个变量时, 你可能需要确保源变量不为 nullundefined 或者不为空你可以使用多个条件写一个很长的 if 语句
- if (variable1 !== null || variable1 !== undefined || variable1 !== '')
- {
- let variable2 = variable1
- }
也可以使用缩短求值的简写办法
let variable2 = variable1 || 'new'
上面的'new'为缺省值
原理也很简单, 利用或运算符, 如果 variable1 存在且有值则将值赋给 variable2, 反之将预设好的值赋给 variable2
JavaScript for 循环简写
涉及到 js 中数组或者对象的操作我们往往会用 for 循环比如:
for (let i = 0; i < allImgs.length; i++)
而 es6 里提供了一个更方便的写法
for (let value of allImgs)
说道 for ...of 就不免想到他还有个兄弟 for ...in, 它也可以遍历数组, 但是会存在以下问题
index 索引为字符串型数字, 不能直接进行几何运算
遍历顺序有可能不是按照实际数组的内部顺序
使用 for in 会遍历数组所有的可枚举属性, 包括原型
所以 for in 更适合遍历对象, 不要使用 for in 遍历数组
当然 es5 还提供了 forEach 用来遍历数组, 不过无法用 break 和 return 结束循环, 剩下的还有 map,filter,some,every,reduce,reduceRight 等, 它们的返回值各不相同, 就不一一细说了
对于遍历对象而又不想遍历原型来说, es5 也提供了 Object.keys(), 它可以把对象的实例属性组成数组
- var myObject = {
- a: 1,
- b: 2,
- c: 3
- }
- Object.keys(myObject).forEach(function(val, index) {
- //console.log(val)
- })
对象属性简写
在 JavaScript 中定义对象字面量非常容易
const obj = { x:x, y:y }
而 es6 提供了一种更加简便直观的写法
const obj = {x, y}
当然用上面这种方法, name 和 key 的名字必须要相同
解构赋值简写
如果你正在使用任何流行的 web 框架, 那么你很有可能会使用数组或者对象字面量形式的数据在组件和 API 之间传递信息一旦组件接收到数据对象, 你就需要将其展开
- 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;
这样写非常麻烦且难以维护, 所以 es6 的解构就因运而生了:
- import { observable, action, runInAction } from 'mobx';
- const { store, form, loading, errors, entity } = this.props;
为了防止从数组中取出一个值为 undefined 的对象, 可以为这个对象设置默认值
- import { observable, action, runInAction } from 'mobx';
- const { store, form, loading, errors, entity, newVal = 'xxx' } = this.props;
还可以交换变量
- var a = 1;
- var b = 3; [a, b] = [b, a];
- console.log(a); // 3
- console.log(b); // 1
可以说解构是一个非常实用的方法, 而且和下面的展开运算符配合更是如虎添翼
展开运算符简写
平时我们需要拼接或者克隆数组需要
- // 拼接数组
- const odd = [1, 3, 5];
- const nums = [2, 4, 6].concat(odd);
- // 克隆数组
- const arr = [1, 2, 3, 4];
- const arr2 = arr.slice()
在 ES6 中引入的 展开运算符 有几个用例, 使 JavaScript 代码更高效更有趣它可以用来替换某些数组函数展开运算符写起来很简单, 就是三个点
- // 拼接数组
- const odd = [1, 3, 5];
- const nums = [2, 4, 6, ...odd];
- console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
- // 克隆数组
- const arr = [1, 2, 3, 4];
- const arr2 = [...arr];
而且重点是它可以在任意一个地方插入数组!!
- const odd = [1, 3, 5];
- const nums = [2, ...odd, 4, 6];
你也可以将展开运算符和 ES6 解构赋值结合起来使用:
- 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 }
可以说解构和展开运算符是最让我这个小白高兴的点, 因为实在是为本码农减少了非常多的代码量, 而且读起来非常的简洁!!
如果想要了解更多解构的写法可以戳这里
双位非运算符简写
双位运算符有一个非常实用的使用场景: 可以用来代替 Math.floor 双位非运算符的优势在于它执行相同操作的速度更快
普通写法:
Math.floor(4.9) === 4 //true
简写
~~4.9 === 4 //true
按位运算符方法执行很快, 当你执行数百万这样的操作非常适用, 速度明显优于其他方法但是代码的可读性比较差还有一个特别要注意的地方, 所有的按位运算都以带符号的 32 位整数进行处理比较大的数字时 (当数字范围超出 ±2^311 即: 2147483647), 会有一些异常情况使用的时候明确的检查输入数值的范围 具体可以查看 你可能不知道的 JavaScript 中数字取整: 向上取整, 向下取整, 四舍五入, 舍去小数
结语
第一篇博客终于写完啦 (其实大部分都是复制粘贴, 当然我还是写了一些自己的感想), 以后会不定时的更新, 算是给自己的一个激励吧 (但是时间跨度多大 emmmmm 我也不清楚啊哈哈哈哈哈哈哈, 毕竟工作很忙, 而且我有女票嘿嘿嘿)
参考文献
19+ JavaScript 编码简写技巧
你可能不知道的 JavaScript 中数字取整: 向上取整, 向下取整, 四舍五入, 舍去小数
解构赋值
来源: http://www.jianshu.com/p/78d2e2cccf53