所以痛定思痛，还是觉得在学习前端同时，把一些看到的小知识点或者小技巧保存下来，方便自己以后查看，当然如果有大神看到可以稍微指点下就更好啦！
第一次写博客性质的文章，格式也不清楚，写的不好请多多包涵，下面开始正文！
缩短求值简写
将变量值分配给另一个变量时，你可能需要确保源变量不为 null、undefined 或者不为空。你可以使用多个条件写一个很长的 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^31−1 即：2147483647），会有一些异常情况。使用的时候明确的检查输入数值的范围。 具体可以查看 你可能不知道的 JavaScript 中数字取整：向上取整，向下取整，四舍五入，舍去小数
结语
第一篇博客终于写完啦(其实大部分都是复制粘贴。。。，当然我还是写了一些自己的感想)，以后会不定时的更新，算是给自己的一个激励吧(但是时间跨度多大emmmmm我也不清楚啊哈哈哈哈哈哈哈，毕竟工作很忙，而且我有女票嘿嘿嘿)
参考文献
19+ JavaScript 编码简写技巧
你可能不知道的 JavaScript 中数字取整：向上取整，向下取整，四舍五入，舍去小数
解构赋值
网友评论