js 的一些简写

数组去重 Set()

Set类似于数组，区别在于它所有的成员都是唯一的，不能有重复的值

function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1,1,2,3])  // [1, 2, 3]

set对象的方法

set方法详情点这里

方法	描述
add	添加某个值，返回Set对象本身。
clear	删除所有的键/值对，没有返回值。
delete	删除某个键，返回true。如果删除失败，返回false。
forEach	对每个元素执行指定操作。
has	返回一个布尔值，表示某个键是否在当前 Set 对象之中。

由于扩展运算符（…）内部使用 for…of 循环也可以用它取出参数对象的所有可遍历属性，拷贝到当前数组之中

function dedupe(array) {
  return  [...new Set(array)];
}
dedupe([1,1,2,3])  // [1, 2, 3]

小数取整

_{是按位取反的意思，计算机里面处理二进制数据时候的非，}~就是再转回来，利用两个按位取反的符号，进行类型的转换，转换成number类型，并向下取整。

var num = 123.123
// 常用方法
console.log(parseInt(num)); // 123
// “双按位非”操作符
console.log(~~ num); // 123
// 按位或
console.log(num | 0); // 123
// 按位异或
console.log(num ^ 0); // 123
// 左移操作符
console.log(num << 0); // 123

~~的一些测试

下面的输出结果都是true

~~true == 1
~~false == 0
~~"" == 0
~~[] == 0
~~undefined ==0
~~!undefined == 1
~~null == 0
~~!null == 1

多维数组一行代码实现一维转换

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
var resultArr = arr.toString().split(',').map(Number);

console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

对象属性简写

如果属性名与key名相同，则可以采用ES6的方法：

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

简写为

const obj = { x, y };

十进制指数

当数字的尾部为很多的零时（如10000000），咱们可以使用指数（1e7）来代替这个数字，例如：

for (let i = 0; i < 10000; i++) {}

可以简写为：

for (let i = 0; i < 1e7; i++) {}
// 下面都是返回 true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

Object.keys()、 Object.values()、Object.entries()

可以把一个对象的键值以数组的形式遍历出来，但不会遍历原型属性。

function A() {
	this.a = 1
	this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
var keys = Object.keys(a)
var values = Object.values(a)
var et = Object.entries(a)
console.log(et)//[['a':1],['b':1]]
console.log(keys,values)//['a','b'][1,1]

循环语句 for of

for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。for…of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等

for (let i = 0; i < allImgs.length; i++)

简写为：

for (let i of allImgs)

• i：每个迭代的属性值被分配给该变量。

• allImgs ：一个具有可枚举属性并且可以迭代的对象。

for…in 和 for…of的区别

1、for…in遍历key值，for…of遍历value值。

2、for…in可以遍历对象或者数组，但是一般不推荐遍历数组，for…of不能遍历普通对象。

声明变量

在申明多个变量时：

let x;

let y;
let z = 3;

可以简写为：

let x, y, z=3;

多行字符串

用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

用法

// 普通字符串
`In JavaScript '\n' is a line-feed.`
 
// 多行字符串
`In JavaScript this is
not legal.`
 
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

上面代码中，模板字符串都是用反引号表示，如果在模板字符串中需要使用反引号，则前面需要用反斜杠转义。

var greeting = `\`Yo\` World!`; // `Yo` World!

如果使用模板字符串表示多行字符串，则所有的空格、缩进和换行都会被保留在输出中。

var a = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`
console的输出结果如下：
"
<ul>
  <li>first</li>
  <li>second</li>
</ul>
"

上面代码中，所有模板字符串的空格和换行都是被保留的，比如

标签前面会有一个换行。如果想把行首和行尾的换行、空格等去掉，则使用trim方法即可。

对象属性简写

ES6 提供了一个很简单的办法，来分配属性的对象。如果属性名与 key 名相同，则可以使用简写。

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

简写为：

const obj = { x, y };

隐式返回值

返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。

要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。

function calcCircumference(diameter) {

return Math.PI * diameter
}

简写为：

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;
}

简写为：

volume = (l, w = 3, h = 4 ) => (l /* w /* h);

volume(2) //output: 24

解构赋值

解构赋值是一种表达式，用于从数组或对象中快速提取属性值，并赋给定义的变量。

在代码简写方面，解构赋值能达到很好的效果。

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;

简写为：

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

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

const { store, form, loading, errors, entity:contact } = this.props;

展开运算符

展开运算符,将一个数组转为用逗号分隔的参数序列， 通俗一点说就是吧数组拆分为它的每一个内容。

使用展开运算符可以替换某些数组函数。

// 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( )

var a = [1,2,3];
Math.min.apply(null,a);
console.log(a);//1

简写为：

// 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];
var a = [1,2,3];
Math.min(...a);
console.log(a);//1

和 concat( ) 功能不同的是，用户可以使用扩展运算符在任何一个数组中插入另一个数组。

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 }

Array.find

该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined

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];
}

}
}

简写为：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');

console.log(pet); // { type: 'Dog', name: 'Tommy' }

回调函数有三个参数。

• value：当前的数组元素。
• index：当前索引值。
• arr：被查找的数组。