前端 实际开发中超实用方法 优雅风格的代码

直接上代码 作者在本地VS code中编写的js文件 你们可以下载Code Runner插件直接在vscode中跑js脚本 看打印结果

请耐心看下去 很清晰 相信你会有收获

/**ES7(2016)

 * 先记录两个ES7的超好用数组方法

 * includes(value,index) => 返回布尔值

 * indexOf(value,index) => 返回-1或下标

 *

 * 建议 => 查询元素是否存在使用includes

 *         查询元素的下标使用indexOf

 *

 * 注意点 =>

 *         1、使用includes()查询字符串 可以区分大小写

 *         2、使用includes()能识别NaN indexOf做不到

 *         3、include()只能判断简单类型数据 二维数组 对象数组无法判断

 *              可以for循环套进去一层再判断....

 */

let Array = ["Lishen","window","Chany"]

console.log(Array.includes("Lishen")) // true

console.log(Array.includes("Lishen",1)) // false

console.log(Array.indexOf("Lishen")) // 0

console.log(Array.indexOf("LishenTwo")) // -1



/**

 * ES8(2017)

 * Object.values() => 返回一个数组 成员是参数对象自身属性的键值(value) 可以将对象转为数组并返回value值

 * Object.entries() => 返回一个数组 成员是参数对象自身属性的键值对(key:value)

 *       注意点 => 两个方法返回的都不包含继承的

 *

 * padStart(length,String) => 填充字符串 左侧

 * 返回指定长度length,如果这个数值小于当前字符串的长度，则返回当前字符串本身

 * 并且第二个参数 如果返回的长度过长超过了当前字符串 那么返回值的左侧部分就是第二个参数String

 * 填充 处理元素 应用场景:数字替换 => 日期格式化、手机号银行卡号处理

 *

 * padEnd(length,String) => 填充字符串 右侧

 * 和padStart同理 填充对象在右侧生成

 */

let object = {

    name:"huxiaolei9",

    age:"22",

    height:"180",

}

let objectTwo = {

    name:"huxiaolei9",

    age:"22",

    height:"180",

    hobby:{

        recreation:"underwaterDiving"

    }

}

console.log(Object.values(object)) // ['huxiaolei9', '22', '180']

console.log(Object.values(objectTwo)) // [ 'huxiaolei9', '22', '180', { recreation: 'underwaterDiving' } ]

console.log(Object.entries(object)) // [ [ 'name', 'huxiaolei9' ], [ 'age', '22' ], [ 'height', '180' ] ]

console.log(Object.entries(objectTwo)) // [ [ 'name', 'huxiaolei9' ],[ 'age', '22' ],[ 'height', '180' ],[ 'hobby', { recreation: 'underwaterDiving' } ] ] 相当于返回多维数组



let Mobile = "18039344115"

console.log(Mobile.slice(4)) // 9344115

let fn = (num) => Mobile.slice(4).padStart(Mobile.length,'*') // 参数1长度过长，那么左侧则生成*号

console.log(fn(Mobile)) // ****9344115



/**

 * ES9(2018)

 * Promise.prototype.finally() => 此方法必常用 让代码更加优美

 * finally()方法 一个回调函数 无论你的promise是执行resolve或reject 到事件的最后阶段都会执行finally函数

 * 我相信很多前端朋友 在调接口时 都会在then里和catch里做同一件事 或者关闭某个弹窗、关闭某个loading状态 更或者执 行某个回调 或者或者很多事情

 * 其实我们在写一个回调函数 finally()在这里执行

 */

let loading = false

let p = new Promise((resolve,reject)=>{

  loading = true

  resolve("走向成功")

})

p.then(res=>{

    console.log(res);

    loading = false

})

p.catch(err=>{

    console.log(err);

    loading = false

})

// 换种写法

let loadingTwo = false

let k = new Promise((resolove,reject)=>{

    loadingTwo = true

    resolove("走向失败")

})

k.then((res)=>{

    console.log(res);

})

k.catch((err)=>{

    console.log(err);

})

k.finally(()=>{

    loadingTwo = false

})



/**

 * ES10(2019)

 * Object.fromEntries() => 把键值对列表转换为一个对象 这个方法是和 Object.entries() 相对的

 * 来个很清晰的例子

 * flat() => 按照一个可指定嵌套数组的结构深度遍历 返回值就是获取到的所有元素

 */

let course = {

    math:80,

    english:85,

    chinese:90

}

console.log(Object.entries(course)) // [ [ 'math', 80 ], [ 'english', 85 ], [ 'chinese', 90 ] ]

console.log(Object.fromEntries(Object.entries(course))) // { math: 80, english: 85, chinese: 90 }




let arr = [1,2,3,4,[5,6]]

console.log(arr.flat());// [ 1, 2, 3, 4, 5, 6 ]

let arrTwo = [1,2,3,4,[5,[6,7]]]

console.log(arrTwo.flat(2)); // [ 1, 2, 3, 4, 5, 6, 7 ]

console.log(arrTwo.flat(1)); // [ 1, 2, 3, 4, 5, [ 6, 7 ] ]



//参数使用 Infinity 可展开任意深度的嵌套数组

let arrThree = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]

console.log(arrThree.flat(Infinity)); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]



// flat() 会移除数组中的空值

let arrFour = [1,2,"",3, ,]

console.log(arrFour.flat()) // [ 1, 2, '', 3 ]







/**

 * ES11(2020)

 * 空值合并运算符 ?? => 也是逻辑运算符 当左侧为null或undefined时返回右侧数据 否则则返回左侧

 *

 */

let data = {

    name:''

}

let bname =  data.name ?? "huxiaolei9"

let bnameTwo =  data.name || "huxiaolei9"

console.log(bname);// ''

console.log(bnameTwo);// 'huxiaolei9'

// 另外一种场景 获取res数据后 判断id 这时候如果还使用 || 那么如果id = 0 那么||依然会判断为false

// 这时候 ?? 的优点就来了 他只会判断 null和undefined

let list = {

    id:0

}

let id =  list.id ?? 999

let idTwo =  list.id || 999

console.log(id);// 0

console.log(idTwo);// '999'




/**

 * Promise.allSettled()

 * 我们都知道Promise.all()具有并发执行异步的能力 但是如果其中某个任务但凡有一个出现reject异常错误 所有任务都会挂掉 所以Promise.allSettled()将是最棒的处理并发执行异步的方法

 */



 const promise1 = () => {

    return new Promise((resolve, reject) => {

      setTimeout(() => {

        resolve('promise1')

      }, 3000)

    })

  }



  const promise2 = () => {

    return new Promise((resolve, reject) => {

      setTimeout(() => {

        resolve('promise2')

      }, 1000)

    })

  }



  const promise3 = () => {

    return new Promise((resolve, reject) => {

      setTimeout(() => {

        reject('error promise3')

      }, 2000)

    })

  }



  //  Promise.all 会走到catch里面

  Promise.all([promise1(), promise2(), promise3()]).then(res => {

    console.log('成功', res);

  }).catch(err => {

    console.log('失败', err);  // 报错 失败 error promise3  错误信息提示promise3导致的

  })

//   我们看下Promise.allSettled()

//  Promise.allSettled 不管有没有错误，三个的状态都会返回

  Promise.allSettled([promise1(), promise2(), promise3()]).then(res => {

    console.log('成功1', res);

  }).catch(err => {

    console.log('失败1', err);

  })



  /**

   * 上面的方法返回

   * 成功1 [

       { status: 'fulfilled', value: 'promise1' },

       { status: 'fulfilled', value: 'promise2' },

       { status: 'rejected', reason: 'error promise3' }

      ]

   */




/**

 * ES12(2021)

 * 逻辑运算符和赋值表达式的连用

 * &&= , ||= ,??=

 * &&= 左侧为true时 执行赋值

 * ||= 左侧为false时 执行赋值

 * ??= 左侧为null和undefined时 执行赋值

 */

let x = 0 // 此时为false 并不是null和undefined

console.log(x &&= 2) // 0  左侧为true时 执行赋值

console.log(x ||= 2) // 2  左侧为false时 执行赋值

console.log(x ??= 2 ) // 0  // 左侧为null和undefined时 执行赋值

以上方法 难道应用熟练后不是一种代码洁癖者的天选？