javascript 工作中实用代码段

解构数组进行变量值的替换

/ bad
let a = 1,
    b = 2
let temp = a
a = b
b = temp

// good
let a = 1,
    b = 2
[b, a] = [a, b]

.解构对象

// bad
setForm (person) {
    this.name = person.name
    this.age = person.age 
}

// good
setForm ({name, age}) {
    this.name = name
    this.age = age 
}

解构时重命名简化命名 有的后端返回的键名特别长，你可以这样干

// bad
setForm (data) {
    this.one = data.aaa_bbb_ccc_ddd
    this.two = data.eee_fff_ggg
}
// good
setForm ({aaa_bbb_ccc_ddd, eee_fff_ggg}) {
    this.one = aaa_bbb_ccc_ddd
    this.two = eee_fff_ggg
}

// best
setForm ({aaa_bbb_ccc_ddd: one, eee_fff_ggg: two}) {
    this.one = one
    this.two = two
}

解构时设置默认值

// bad
setForm ({name, age}) {
    if (!age) age = 16
    this.name = name
    this.age = age 
}

// good
setForm ({name, age = 16}) {
    this.name = name
    this.age = age 
}

||短路符设置默认值

let person = {
    name: '张三',
    age: 38
}

let name = person.name || '佚名'

&&短路符判断依赖的键是否存在防止报错'xxx of undfined'

et person = {
    name: '张三',
    age: 38,
    children: {
        name: '张小三'
    }
}

let childrenName = person.children && person.childre.name

字符串拼接使用${}

let person = {
    name: 'LiMing',
    age: 18
}
// bad
function sayHi (obj) {
    console.log('大家好，我叫' + person.name = '，我今年' + person.age + '了')
}

// good
function sayHi (person) {
    console.log(`大家好，我叫${person.name}，我今年${person.age}了`)
}

// best
function sayHi ({name, age}) {
    console.log(`大家好，我叫${name}，我今年${age}了`)
}

.函数使用箭头函数

let arr [18, 19, 20, 21, 22]
// bad
function findStudentByAge (arr, age) {
    return arr.filter(function (num) {
        return num === age
    })
}

// good
let findStudentByAge = (arr, age)=> arr.filter(num => num === age)

函数参数校验

// bad
let findStudentByAge = (arr, age) => {
    if (!age) throw new Error('参数不能为空')
    return arr.filter(num => num === age)
}

// good
let checkoutType = () => {
    throw new Error('参数不能为空')
}
let findStudentByAge = (arr, age = checkoutType()) =>
    arr.filter(num => num === age)

 

if 判断的优化

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机',
}

function price(name) {
  if (name === commodity.phone) {
    console.log(1999)
  } else if (name === commodity.computer) {
    console.log(9999)
  } else if (name === commodity.television) {
    console.log(2999)
  } else if (name === commodity.gameBoy) {
    console.log(3999)
  }
}
price('手机') // 9999

缺点：代码太长了,维护和阅读都很不友好

好一点的方法：Switch

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机',
}
const price = (name) => {
  switch (name) {
    case commodity.phone:
      console.log(1999)
      break
    case commodity.computer:
      console.log(9999)
      break
    case commodity.television:
      console.log(2999)
      break
    case commodity.gameBoy:
      console.log(3999)
      break
  }
}
price('手机') // 9999

更优的方法: 策略模式

策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。它提供了对开放—封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它们易于切换，易于理解，易于扩展。

const commodity = new Map([
  ['phone', 1999],
  ['computer', 9999],
  ['television', 2999],
  ['gameBoy', 3999],
])

const price = (name) => {
  return commodity.get(name)
}
price('phone') // 1999

includes 的优化

includes 是 ES7 新增的 API，与 indexOf 不同的是 includes 直接返回的是 Boolean 值，indexOf 则 返回的索引值, 数组和字符串都有 includes 方法。

需求：我们来实现一个身份认证方法，通过传入身份 Id 返回对应的验证结果

function verifyIdentity(identityId) {
  if (identityId == 1 || identityId == 2 || identityId == 3 || identityId == 4) {
    return '你的身份合法，请通行！'
  } else {
    return '你的身份不合法'
  }
}

function verifyIdentity(identityId) {
  if ([1, 2, 3, 4].includes(identityId)) {
    return '你的身份合法，请通行！'
  } else {
    return '你的身份不合法'
  }
}

for 循环

在 JavaScript 中，我们可以使用 for()， while()， for(in)，for(of)几种循环，事实上，这三种循环中 for(in) 的效率极差，因为他需要查询散列键，所以应该尽量少用。

for 循环是最传统的语句，它以变量 i 作为索引，以跟踪访问的位置，对数组进行操作。

var arr = ['a', 'b', 'c']
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]) //结果依次a,b,c
}

以上的方法有一个问题：就是当数组的长度到达百万级时，arr.length 就要计算一百万次，这是相当耗性能的。所以可以采用以下方法就行改良。

var arr = ['a', 'b', 'c']
for (var i = 0, length = arr.length; i < length; i++) {
  console.log(arr[i]) //结果依次a,b,c
}

此时 arr.length 只需要计算一次，优化了性能。

数组去重

最传统的方法：利用数组的 indexOf 下标属性来查询。

function unique4(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

2、优化：利用 ES6 的 Set 方法。

Set 本身是一个构造函数，用来生成 Set 数据结构。Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。Set 对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的值都是唯一的，没有重复的值。

function unique4(arr) {
  return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

箭头函数

箭头函数表达式的语法比函数表达式更简洁。所以在开发中更推荐使用箭头函数。特别是在 vue 项目中，使用箭头函数不需要在更 this 重新赋一个变量。

// 使用functions
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map(function (x) {
  return x * x
})
console.log(arrFunc)

// 使用箭头函数
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map((x) => x * x)

要注意的是，箭头函数不绑定 arguments，取而代之用 rest 参数…解决。

// 不能使用 arguments
let fun1 = (b) => {
  console.log(arguments)
}
fun1(2, 92, 32, 32) // Uncaught ReferenceError: arguments is not defined

// 使用rest 参数
let fun2 = (...c) => {
  console.log(c)
}
fun2(3, 82, 32, 11323) // [3, 82, 32, 11323]

Dom 的创建

创建多个 dom 元素时，先将元素 append 到 DocumentFragment 中，最后统一将 DocumentFragment 添加到页面。

常规方法；

for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerHTML = i
  document.body.appendChild(el)
}

使用 DocumentFragment 优化多次 append

var frag = document.createDocumentFragment()
for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerHTML = i
  frag.appendChild(el)
}
document.body.appendChild(frag)

更优的方法:使用一次 innerHTML 赋值代替构建 dom 元素

ar html = []
for (var i = 0; i < 1000; i++) {
  html.push('<p>' + i + '</p>')
}
document.body.innerHTML = html.join('')

内存泄漏

系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

引起内存泄漏的原因

全局变量

1、未声明变量或者使用 this 创建的变量(this 的指向是 window)都会引起内存泄漏

function fn() {
  a = "Actually, I'm a global variable"
}
fn()

function fn() {
  this.a = "Actually, I'm a global variable"
}
fn()

解决方法：

• 避免创建全局变量
• 使用严格模式,在 JavaScript 文件头部或者函数的顶部加上 use strict。

2、在 vue 单页面应用，声明的全局变量在切换页面的时候没有清空

<div id="home">
    这里是首页
  </div>
  export default {
    mounted() {
      window.test = {
        // 此处在全局window对象中引用了本页面的dom对象
        name: 'home',
        node: document.getElementById('home')
      }
    }
  }

解决方案: 在页面卸载的时候顺便处理掉该引用。

destroyed () {
  window.test = null // 页面卸载的时候解除引用
}

闭包

闭包引起的内存泄漏原因：闭包可以维持函数内局部变量，使其得不到释放。

function fn() {
  var a = "I'm a"
  return function () {
    console.log(a)
  }
}

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对 dom 的引用。

定时器或事件监听

由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候，定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器事件监听，即在页面卸载（关闭）的生命周期函数里，清除定时器。

methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {//清除定时器
  clearInterval(this.timer)
    this.timer = null
 }
},
mounted() {
  this.setTimer()
  window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeFun)
  this.clearTimer()
}

防抖与节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这时候就用到防抖与节流。

案例 1：远程搜索时需要通过接口动态的获取数据，若是每次用户输入都接口请求，是浪费带宽和性能的。

<Select :remote-method="remoteMethod">
    <Option v-for="item in temoteList" :value="item.value" :key="item.id">{{item.label}}</Option>
</Select>

<script>
function debounce(fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}

export default {
  methods：{
    remoteMethod：debounce(function (query) {
        // to do ...
    }, 200),
  }
}
<script>

案例 2：持续触发 scroll 事件时，并不立即执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发一次 handle 函数。

function debounce(fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}
function handle() {
  console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

异步加载 js

默认情况下，浏览器是同步加载 js 脚本，解析 html 过程中，遇到 <script> 标签就会停下来，等脚本下载、解析、执行完后，再继续向下解析渲染。

如果 js 文件体积比较大，下载时间就会很长，容易造成浏览器堵塞，浏览器页面会呈现出“白屏”效果，用户会感觉浏览器“卡死了”，没有响应。此时，我们可以让 js 脚本异步加载、执行。

<script src="path/to/home.js" defer></script>
<script src="path/to/home.js" async></script>

上面代码中，<script> 标签分别有 defer 和 async 属性，浏览器识别到这 2 个属性时 js 就会异步加载。也就是说，浏览器不会等待这个脚本下载、执行完毕后再向后执行，而是直接继续向后执行

defer 与 async 区别:

• defer：DOM 结构完全生成，以及其他脚本执行完成，才会执行（渲染完再执行）。有多个 defer 脚本时，会按照页面出现的顺序依次加载、执行。
• async：一旦下载完成，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染（下载完就执行）。有多个 async 脚本时，不能保证按照页面出现顺序加载、执行