写点什么

前端 JavaScript 小技巧【收藏起来】

作者:清风无影
  • 2022-10-21
    北京
  • 本文字数:1750 字

    阅读完需:约 1 分钟

前端JavaScript小技巧【收藏起来】

在 JavaScript 世界里,有些操作会让你无法理解,但是却无比优雅!


  1. 有时候读取变量属性时,他可能不是 Ojbect。这个这个你就要判断这个变量是否为对象,如果是在如引用


var obj;if(obj instanceof Object){  console.log(obj.a);}else{  console.log('对象不存在');}
复制代码


ES6 中有简便写法,可以帮我们简短代码,从而更加明确


var obj;console.log(obj?.a || '对象不存在');
复制代码


  1. 1,2,3,4,5,6....10,11,12 小于 10 的前面补 0 其实我们用 slice 函数可以巧妙解决这个问题 slice(start,end);start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。end :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。


var list=[1,2,3,4,5,6,7,8,9,10,11,12,13];list=list.map(ele=>('0' + ele).slice(-2));console.log(list);
复制代码



  1. 打印可视化 console.table()


var obj = { name: 'Jack' };console.table(obj);obj.name= 'Rose';console.table(obj);
复制代码



  1. 获取数组中的最后的元素数组方法 slice()可以接受负整数,如果提供它,它将从数组的末尾开始截取数值,而不是开头。


let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(array.slice(-1)); // Result: [9]console.log(array.slice(-2)); // Result: [8, 9]console.log(array.slice(-3)); // Result: [7, 8, 9]
复制代码


  1. es6 模板字符串


let name = "Charlse"let place = "India";let isPrime = bit =>{  return (bit === 'P'? 'Prime' : 'Nom-Prime')}let messageConcat = `Mr.name' is form ${place} .He is a   ${isPrime('P')} member`;
复制代码


  1. H5 语音合成在网页端实现将指定的文字进行语音合成并进行播报。使用 HTML5 的 Speech Synthesis API 就能实现简单的语音合成效果。


<input id="btn1" type="button" value="点我" onclick="test();" /><script>  function test() {    const sos = `阿尤!不错哦`;    const synth = window.speechSynthesis;    let msg = new SpeechSynthesisUtterance(sos);    synth.speak(msg)  }</script>
复制代码


然后点击按钮,就会触发 test 方法的执行实现语音合成这里推荐使用 Chrome 浏览器,因为 HTML5 的支持度不同


  1. 数字取整


let floatNum = 100.5;let intNum = ~~floatNum;console.log(intNum); // 100
复制代码



  1. 字符串转数字


let str="10000";let num = +str;console.log(num); // 10000
复制代码


  1. 交换对象键值


let obj = {    key1: "value1",    key2: "value2"};let revert = {};Object.entries(obj).forEach(([key, value]) => revert[value] = key);console.log(revert);
复制代码



  1. 数组去重


let arrNum = [    1, 2, 3, 4, 5, 6, 7, 8, 9, 0,    1, 2, 3, 4, 5, 6, 7, 8, 9, 0];let arrString = [    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];let arrMixed = [    1, "1", "2", true, false, false, 1, 2, "2"];arrNum = Array.from(new Set(arrNum));arrString = [...new Set(arrString)];arrMixed = [...new Set(arrMixed)];console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]console.log(arrMixed); // [1, "1", "2", true, false, 2]
复制代码


  1. 数组转化为对象


const arr = [1,2,3]const obj = {...arr}console.log(obj)
复制代码


  1. 合并对象


const obj1 = { a: 1 }const obj2 = { b: 2 }const combinObj = { ...obj1, ...obj2 }console.log(combinObj)
复制代码


也就是通过展开操作符(spread operator)来实现。


  1. 获取数组中的最后一项


let arr = [0, 1, 2, 3, 4, 5];const last = arr.slice(-1)[0];console.log(last);
复制代码


  1. 一次性函数,适用于初始化的一些操作


var sca = function() {    console.log('msg')//永远只会执行一次    sca = function() {        console.log('foo')    }}sca()        // msgsca()        // foosca()
复制代码


提高工作效率,减少代码量,降低键盘磨损程度

我希望你喜欢它并学到了一些新东西

感谢你的阅读,编程快乐!

发布于: 刚刚阅读数: 3
用户头像

清风无影

关注

道法自然 2021-03-09 加入

🌈7年资深前端主管一枚,只分享技术干货,项目实战经验,面试指导

评论

发布
暂无评论
前端JavaScript小技巧【收藏起来】_JavaScript_清风无影_InfoQ写作社区