js的一些特别技巧

收集整理关于js的一些常用的技巧和新版带来的更加方便的操作

# js中的==

An image

Edit fiddle - JSFiddle

# 利用js中隐性类型转换将数值与字符串互转

+'2'  // 2
typeof (+'2')  // 'number'
2 + '' // '2'

# 将数组转化为字符串

var arr = [1, 2, 3, 4, 5, 6, 7]
arr + '' // '1,2,3,4,5,6,7'

# 用位运算符来小数取整

~~3.14  // 3
~~-3.14  // -3
3.14 | 0  // 3
3.14 >> 0  // 3
3.14 << 0  // 3

# 用&运算符判断一个数的奇偶

// n & 1 如果值为0,n是偶数;值为1,n为奇数
7 & 1  // 1
8 & 1  // 0

# 数字的toString方法

1..toString()   // '1' (ja中数字不分浮点和整形)
3.14.toString()   // '3.14'
(1).toString()  // '1' (相当于new Number(1).toString())

# 运用 Set 与 扩展运算符 去除数组的重复成员

var arr = [1, 2, 2, 3, 4, 5, 4, 6, 7]
var arr1 = [...new Set(arr)]
arr1  // [1, 2, 3, 4, 5, 6, 7]

# 运用 filter 去除数组中的无效值

var arr = [1, true, , '', 3, 4, 'false', false, undefined, null]
arr.filter(item => item) // [1, true, 3, 4, "false"]

# 运用 Set 与 Array.from 去除数组的重复成员

var arr = [1, 2, 2, 3, 4, 5, 4, 6, 7]
const set = new Set(arr)
const arr1 = Array.from(set)
arr1  // [1, 2, 3, 4, 5, 6, 7]

# 利用三元表达式简写if else

let a = true

if (a) {
  console.log('ok')
} else {
  console.log('error')
}  // ok

// 三元表达式简写
a ? console.log('ok') : console.log('error')  // ok

// 三元表达式调用function
a ? a() : b()

// 三元表达式赋值
let b = a ? 'ok' : 'error'  // b='ok'

// 三元表达式嵌套
let c = a ? 'ok' : false ? 'error' : 'no'  // c='ok' (相当于 let c = a ? 'ok' : (false ? 'error' : 'no'))

// 三元运算运算的优先级比(+)低,如果前面有(+)要注意
let d = 'this ' + a ? 'ok' : 'error'  // d='ok'
// 相当于 let c = ('this ' + a) ? 'ok' : 'error'
//              = 'this true' ? 'ok' : 'error'
// 'this true' 为 true,所以结果变为 'ok'

# "||"的妙用

// "||" 从左往右依次判断,为false则继续,为true则返回此原值(未转换为布尔值时的值)
function test (i) {
  let a
  if (i) {
    a = i
  } else {
    a = 'error'
  }
  return a
}

// 三元表达式简写
function test (i) {
  return i ? i : 'error'  // 不建议这样写
}

//  "||"简写
function test (i) {
  return i || 'error'
}

test('ok')  // 'ok'
test()  // 'error'

let a = a || {}  // 如果a已经定义过了,则还保持值,否则初始化为空对象

# "&&"的妙用

// "&&"从左往右依次判断,为true则继续,为false则返回此原值(未转换为布尔值时的值)
lat a = true
if (a) {
  console.log('ok')
}  // ok

// "&&"简写
a && console.log('ok')  // ok

# "&&"与"||"的组合运用

let a = 2, b
switch (a) {
  case 1:
    b = 'a=1'
    break
  case 2:
    b = 'a=2'
    break
  case 3:
    b = 'a=3'
    break
}  // b='a=2'

//  简写
let a = 2
let b = (a === 1 && 'a=1') || (a === 2 && 'a=2') || (a === 3 && 'a=3')  // b='a=2'

# 运用对象形式改写switch

let a = 2, b
switch (a) {
  case 1:
    b = 'a=1'
    break
  case 2:
    b = 'a=2'
    break
  case 3:
    b = 'a=3'
    break
}  // b='a=2'

// 简写
let a = 2
let b = { 1: 'a=1', 2: 'a=2', 3: 'a=3' }[a]
b  // b='a=2'

# 使用 es6 中的 Object.assign() 来合并对象

Object.assign(obj, obj1, obj2);
// 后面的对象将合并到obj中
// 如果具有相同的键值将被后面覆盖

# 通过 ... 来浅拷贝一个对象

let obj = { a: 1, b:2 }
let obj1 = { ...obj }

obj.a = 'a'
obj1.a = 'b'

console.log(obj) // {a: "a", b: 2}
console.log(obj1) // {a: "b", b: 2}

# 通过 json 来深拷贝一个对象

let newObj = JSON.parse(JSON.stringify(obj))
// 此时修改 newObj 的数据将不会引起 obj 数据的变化

# 多维数组降维

const flattenDeep = arr => Array.isArray(arr)
  ? arr.reduce((a, b) => [...a, ...flattenDeep(b)], [])
  : [arr]

flattenDeep([1, [[2], [3, [4]], 5]]) // [1, 2, 3, 4, 5]

// 或者使用 `flat()` (这样会移除新数组中的空项)

[1, [[2], [3, [4]], 5]].flat(Infinity) // [1, 2, 3, 4, 5]
js中隐性类型转换

js中隐性类型转换

只需要一点点时间学会使用js中隐性类型转换,更加轻松的处理部分类型