让代码更简短、更简洁、更易读的 js 小技巧

一、模板字符串

• 用反引号包裹字符串，并且能使用 ${ variable | expression } 来插入变量或者表达式
• 能按指定格式输出，即不会忽略空格
• 例子：

const word = 'hello'
const str = `
  EQEQEQEQR
  ${word}
  EQRRRRRRR
`
/*
EQEQEQEQR
hello
EQRRRRRRR
*/

二、块级作用域

JavaScript是使用块级作用域的，这就是为什么频繁地使用匿名的立即执行函数表达式来实现整个 JavaScript 文件的封装。这么做是为了把所有的变量隔离在文件内从而避免变量冲突。 现在有了块级作用域和两个声明块级作用域变量的关键字 let 和 const

• 例子：

// 经典面试题
for(var i = 1; i < 5; i++){
  setTimeout(() => {
    console.log(i);
  }, 1000)
} 
// 输出是 5 5 5 5 

// 如果把 var 变为 let ，就能输出我们想要看到的结果
for(let i = 1; i < 5; i++){
  setTimeout(() => {
    console.log(i);
  }, 1000)
} 
// 现在，每次循环都会创建一个全新的块级作用域把 i 限制在当前的循环中，可以理解为这样：
// {let i = 1; setTimeout(() => { console.log(i) }, 1000)} 
// {let i = 2; setTimeout(() => { console.log(i) }, 1000)} 
// {let i = 3; setTimeout(() => { console.log(i) }, 1000)} 
// {let i = 4; setTimeout(() => { console.log(i) }, 1000)} 

var 和 let 的另外一个区别是 let 不会像 var 一样被变量提升：

• 例子：

{ 
  console.log(a); // undefined
  console.log(b); // ReferenceError
  var a = 'car';
  let b = 5;
}

三、扩展运算符

主要用途：

• 将一个数组或者对象放到一个新的数组或者对象中

let a = [3,4,5]
let b = [1,2, ...a, 6]
console.log(b) // [1,2,3,4,5,6]

function foo(a,b,c){
  console.log(`a=${a}, b=${b}, c=${c}`)
}
let data = [5, 15, 2]
foo(...data) // a=5, b=15, c=2

• 将数组中的多个参数合并在一起

四、参数默认值

函数参数值可以给一个默认值。不传参或者未定义值都被初始化为默认值。但是需要注意的是，null 和 false 都会被强转为 0

• 默认值的类型可以不仅仅是值类型，还可以是表达式或者函数

五、解构

解构是拆开等号左边的数组或者对象的过程。这个数组或者对象可以来自一个变量，一个函数，或者一个等式

六、动态属性名称

ES6 添加了使用动态分配的键创建或添加属性的功能

let  city= 'sheffield_';
let a = {
    [ city + 'population' ]: 350000
};
a[ city + 'county' ] = 'South Yorkshire';
console.log(a); // {sheffield_population: 350000, sheffield_county: 'South Yorkshire' }

七、箭头函数

• 不要关键字 function

八、for...of循环

ES6 新添加了一种方式来迭代数组中的每个值，这个方式是与已经存在的 for...in 的通过索引的循环方式不同。

let a = ['a', 'b', 'c', 'd' ];
// ES6 
for ( var val of a ) {
    console.log( val );
} // "a" "b" "c" "d"
// pre-ES6 
for ( var idx in a ) {
    console.log( idx );
}  // 0 1 2 3

九、10句js单行代码

1. 获取一个随机布尔值（ true / false ）

const randomBoolean = () => Math.random() >= 0.5
// 这个函数得到true和false的几率是50%、50%

2. 检查日期是否为工作日

const isWeekday = (date) => date.getDay() % 6 !== 0
// 检查函数参数是工作日还是周末

3. 反转字符串

// 有几种不同的方法来反转一个字符串，以下代码时最简单的一种方式
const reverse = str => str.split('').reverse().join('')

4. 检查当前 Tab 页是否在前台

const isBrowserTabInView = () => document.hidden
// 通过使用 document.hidden 属性来检查当前标签页是否在前台中

5. 检查数字是否为奇数

const isEven = num => num % 2 === 0
console.log(isEven(2)) // true
console.log(isEven(3)) // false

6. 从日期中获取时间

const timeFromDate = date => date.toTimeString().slice(0, 8)

7. 保留小数点（非四舍五入）

// 使用 Math.pow() 方法，可以将一个数字截断到某个小数点
const toKeepPoint = (num, fixed) => ~~(Math.pow(10, fixed) * num) / Math.pow(10, fixed)
toKeepPoint(3.1415926, 1) // 3.1
toKeepPoint(3.1415926, 2) // 3.14
toKeepPoint(3.1415926, 3) // 3.141
toKeepPoint(3.1415926, 4) // 3.1415

8. 检查元素当前是否为聚焦状态

// 使用document.activeElement属性检查一个元素当前是否处于聚焦状态
const elementIsInFocus = (ele) => (ele === document.activeElement)

9. 检查浏览器是否支持触摸事件

const touchSupported = () => {
  ( 'ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch)
}
// 支持触摸事件，返回true

10. 检查当前用户是否为苹果设备

// 使用 navigator.platform 来检查当前用户是否为苹果设备
const isAppleDevice = /Mac | iPod | iPhone | iPad/.test(navigator.platform)