JS 开发日常的小技巧

﹏ヽ暗。殇╰゛Y 2021-12-15 06:17 316阅读 0赞

### 文章目录 ###

*   *   *  类型强制转换
         *   *  String强制转换为Number
             *  Object强制转化为String
             *  用Boolean过滤数组中的所有假值
             *  双位运算符 \`~~\`
             *  短路运算符 \`&&\` / \`||\`
             *  取整 \`| 0\`
             *  判断奇偶数 \`& 1\`
         *  函数
         *   *  函数默认值
             *  强制参数
             *  隐式返回值
             *  惰性载入函数
             *  一次性函数
         *  代码复用
         *   *  Object \[key\]
         *  数字字面量
         *   *  不同进制表示法
             *  精确到指定位数的小数
         *  数组
         *   *  reduce方法同时实现map和filter
             *  统计数组中相同项的个数
             *  使用解构来交换参数数值
             *  接收函数返回的多个结果
             *  将数组平铺到指定深度
             *  数组的对象解构
         *  对象
         *   *  使用解构删除不必要属性
             *  在函数参数中解构嵌套对象

### 类型强制转换 ###

#### String强制转换为Number ####

可以用 `*1` 来转化为数字（实际上是调用 `.valueOf`方法）  
然后使用 `Number.isNaN` 来判断是否为 `NaN`  
或者使用 `a !== a` 来判断是否为 `NaN`  
`注:`(`NaN !== NaN`)

'11' * 1       // 11
    	'aa' * 1       // NaN
    	null * 1       // 0
    	undefined * 1  // NaN
    	1 * {  valueOf: ()=>'2' }  // 2

也可以使用 `+` 来转化字符串为数字

+ '123'        // 123
    	+ 'aa'		   // NaN
    	+ ''           // 0
    	+ null         // 0
    	+ undefined    // NaN
    	+ {  valueOf: ()=>'2' }  // 2

#### Object强制转化为String ####

可以使用 `String + Object` 的方式来转化对象为字符串（实际上是调用 `.toString()` 方法）

'str' + Math	// 'str'[object Math]
    	'str' + JSON	// 'str'[object JSON]

当然也可以覆盖对象的 `toString` 和 `valueOf`方法来自定义对象的类型转换

2 * {  valueOf:()=>'3' }   // 6
    	'a' + {  toString:()=>'b' }  // ab

> 《Effective JavaScript》P11：当 +用在连接字符串时，当一个对象既有 toString方法又有 valueOf方法时候，JS通过盲目使用 valueOf方法来解决这种含糊。对象通过 valueOf方法强制转换为数字，通过 toString方法强制转换为字符串

'' + {  toString:()=>'S',valueOf:()=>'J' }   // J

#### 用Boolean过滤数组中的所有假值 ####

我们知道JS中有一些假值：`false`， `null`，`0`，`""`， `undefined`，`NaN`，可以使用Boolean构造函数来进行一次转换把数组中的假值快速过滤

let val = arr => arr.filter(Boolean)
    	val([0,1,false,2,'',3,'a4',NaN,'a'*10])
    	// [1,2,3,'a4']

#### 双位运算符 `~~` ####

可以使用双位操作符来替代 `Math.floor()`,双否定位操作符的优势在于它执行相同的操作运行速度更快。

Math.floor(5.9) === 5       // true
    	// 简写为：
    	~~5.9 === 5         // true

不过要注意，对整数来说 `~~` 运算结果与 `Math.floor()` 运算结果相同，而对于`负数`来说`不相同`：

~~4.5 === Math.floor(4.5)   // true
    	~~-5.5 === Math.floor(-5.5)   // -5 === -6 false

#### 短路运算符 `&&` / `||` ####

js逻辑运算符有三个：逻辑非!、逻辑与&&、逻辑或||。所谓短路操作就是:

*  当`&&`的第一个操作数的值是false时，直接返回第一个操作数的值，不再对第二个操作数进行计算

*  当`||`的第一个操作数的值是true时，直接返回返回第一个操作数的值，不再对第二个操作数进行计算

// &&
    	let bar1 = 0 && c;
        console.log(bar1) 	// 0
    
        let foo1 = 5 && c;
        console.log(foo1)	// 报c is not defined错误。
    	
    	// ||
    	let foo2 = 5 || c;
    	console.log(foo2)	// 5 
    
    	let bar2 = 0 || c;
    	console.log(bar2)	// 报c is not defined错误。

因此我们可以用来做很多事情，

*  给变量赋`初始值`

let str1;
    	let str2 = str1 || 'abc'

如果 `str1` 是真值就直接返回了，后面短路就不会被返回了，如果为假值，则会返回后面的 abc。

*  还可以进行简单的判断，取代冗长的`if`语句

let val = data && data.prop

如果 `data` 如果为真值则返回 `data.prop属性`，否则返回 data 这个假值，这样在某些地方防止 data 为 undefined 的时候还取其属性造成报错。

#### 取整 `| 0` ####

对一个数字`|0`可以取整，负数也同样适用， `num | 0`

1.5 | 0		// 1
    	-1.5 | 0	// -1

#### 判断奇偶数 `& 1` ####

对一个数字`& 1`可以判断奇偶数，附属也同样适用， `num & 1`

### 函数 ###

#### 函数默认值 ####

fn = (num,a = 2,b = 3) => (num+a+b)
    	fn(5)	// 10
    
    	fn(1,2,3)	// 6

`注:` 传入参数为 `undefined` 或者不传入的时候会使用默认参数，但是传入 `null`还是会覆盖默认参数。

#### 强制参数 ####

默认情况下，如果不向函数参数传值，那么JS 会将函数参数设置为 undefined。其它一些语言则会发出警告或错误。要执行参数分配，可以使用 `if`语句抛出未定义的错误，或者可以利用 `强制参数`

fnn = () => { 
    		throw new Error('Error 111')
    	}
    	foo = (bar = fnn()) => {   //这里如果不传入参数，就会执行fnn函数报出错误
    		return bar
    	}

#### 隐式返回值 ####

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

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

function val (diameter){ 
    	  return Math.PI*diameter
    	}
    	
    	// 简写为：
    	val = diameter => (
    	  Math.PI*diameter;
    	)

#### 惰性载入函数 ####

在某个场景下我们的函数中有判断语句，这个判断依据在整个项目运行期间一般不会变化，所以判断分支在整个项目运行期间只会运行某个特定分支，那么就可以考虑惰性载入函数

function fn() { 
    		if(a !== b){ 
    			console.log('aa')
    		}else{ 
    			console.log('bb')
    		}
    	}
    
    	//优化后
    	function fn() { 
    		if(a != b){ 
    			fn = function() { 
    				console.log('aaa')
    			}
    		}else{ 
    			fn = function() { 
    				console.log('bbb')
    			}
    		}
    		return fn()
    	}

第一次运行之后就会覆写这个方法，下一次再运行的时候就不会执行判断了。当然现在只有一个判断，如果判断很多，分支比较复杂，那么节约的资源还是可观的。

#### 一次性函数 ####

跟上面的惰性载入函数同理，可以在`函数体里覆写当前函数`，那么可以创建一个一次性的函数，重新赋值之前的代码相当于只运行了一次，适用于运行一些只需要执行一次的初始化代码

let fn = function (){ 
    		console.log('111')
    		fn = function (){ 
    			console.log('222')
    		}
    	}
    	
    	fn()	//111
    	fn()	//222
    	fn()	//222

### 代码复用 ###

#### Object \[key\] ####

将 foo.bar 写成 foo\[‘bar’\] 是一种常见的做法，但是这种做法构成了编写可重用代码的基础。许多框架使用了这种方法，比如element的表单验证。

请考虑下面这个验证函数的简化示例：

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 valiqdation 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

现在有了这个验证函数，我们就可以在所有窗体中重用，而无需为每个窗体编写自定义验证函数。

### 数字字面量 ###

#### 不同进制表示法 ####

ES6中新增了不同进制的书写格式，在后台传参的时候要注意这一点。

29	  // 10进制
    	035	  // 8进制29 原来的方式
    	0o35	// 8进制29 ES6的方式
    	0x1d	// 16进制29
    	0b11101		// 2进制29

#### 精确到指定位数的小数 ####

将数字四舍五入到指定的小数位数。使用 `Math.round()` 和`模板字面量`将数字四舍五入为指定的小数位数。省略第二个参数 decimals ，数字将被四舍五入到一个整数

const round = (n, decimals = 0) => Number(`${ Math.round(`${ n}e${ decimals}`)}e-${ decimals}`)
    	round(1.345,2)	// 1.35
    	round(1.345,1)	// 1.3

### 数组 ###

#### reduce方法同时实现map和filter ####

假设现在有一个数列，你希望更新它的每一项（map的功能）然后筛选出一部分（filter的功能）。如果是先使用map然后filter的话，你需要遍历这个数组两次。在下面的代码中，我们将数列中的值翻倍，然后挑选出那些大于50的数。

let arr = [10,20,30,40]
    	let val = arr.reduce((list,num)=>{ 
    		num = num*2
    		if(num>50){ 
    			list.push(num)
    		}
    		return list
    	},[])
    	console.log(val);    // [60,80]

#### 统计数组中相同项的个数 ####

很多时候，你希望统计数组中重复出现项的个数然后用一个对象表示。那么你可以使用`reduce`方法处理这个数组。

下面的代码将统计每一种车的数目然后把总数用一个对象表示。

let arr = [1,1,2,3,5,6,4,8,8,9,6,5,4,1]
    	let obj = arr.reduce((o,n)=>{ 
    	  o[n] = o[n] ? ++o[n] : 1;
    	  return o
    	},{ })
    	console.log(obj)	//{1: 3, 2: 1, 3: 1, 4: 2, 5: 2, 6: 2, 8: 2, 9: 1}

#### 使用解构来交换参数数值 ####

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

let a = 1,b=2;
    	[a,b] = [b,a]
    	console.log(a)  //2
    	console.log(b)  //1

当然我们关于交换数值有不少其他办法：

var temp = a;a = b;b = temp 
    	b = [a, a = b][0] 
    	a = a + b;
    	b = a - b;
    	a = a - b

#### 接收函数返回的多个结果 ####

在下面的代码中，我们从/post中获取一个帖子，然后在/comments中获取相关评论。由于我们使用的是async/await，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost() { 
    	    return await Promise.all([
    		    fetch('/post'),
    		    fetch('/comments')
    	    ]);
    	}
    	const [post, comments] = getFullPost()

#### 将数组平铺到指定深度 ####

使用递归，为每个深度级别 depth 递减 1 。使用 Array.reduce() 和 Array.concat() 来合并元素或数组。基本情况下， depth 等于 1 停止递归。省略第二个参数， depth 只能平铺到 1 (单层平铺) 的深度。

const flatten = (arr, depth = 1) => 
    	depth !=1
    		? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), []) 			       
    		: arr.reduce((a, v) => a.concat(v), []);
    	flatten([1, [2], 3, 4]);
    	
    	// [1, 2, 3, 4]
    	flatten([1, [2, [3, [4, 5], 6], 7], 8], 2);
    	
    	// [1, 2, 3, [4, 5], 6, 7, 8]

#### 数组的对象解构 ####

数组也可以对象解构，可以方便的获取数组的第n个值

const csvFileLine = '1997,John Doe,US,john@doe.com,New York'
    
    	const {  2: country,4: state } = csvFileLine.split(',');
    
    	country // US
    	state	// New York

### 对象 ###

#### 使用解构删除不必要属性 ####

有时候你不希望保留某些对象属性，也许是因为它们包含敏感信息或仅仅是太大了（just too big）。你可能会枚举整个对象然后删除它们，但实际上只需要简单的将这些无用属性赋值给变量，然后把想要保留的有用部分作为剩余参数就可以了。

下面的代码里，我们希望删除\_internal和tooBig参数。我们可以把它们赋值给internal和tooBig变量，然后在cleanObject中存储剩下的属性以备后用。

let { 
    	    _internal,
    	    tooBig,
    	    ...cleanObject
    	} = { 
    	    el1: '1',
    	    _internal: "secret",
    	    tooBig: { },
    	    el2: '2',
    	    el3: '3'
    	};
    	console.log(cleanObject)	//{ el1:'1',el2:'2',el3:'3' }

#### 在函数参数中解构嵌套对象 ####

在下面的代码中，engine是对象car中嵌套的一个对象。如果我们对engine的vin属性感兴趣，使用解构赋值可以很轻松地得到它。

var car = { 
    	    model: 'bmw 2018',
    	    engine: { 
    	        v6: true,
    	        turbo: true,
    	        vin: 12345
    	    }
    	}
    	const modelAndVIN = ({ 
    	    model,
    	    engine: { 
    	        vin
    	    }
    	}) => { 
    	    console.log(`model: ${ model} vin: ${ vin}`);
    	}
    	modelAndVIN(car)	// => model : bmw 2018 vin : 12345