【JS语法糖】常见的几种JS语法糖

#【JS语法糖】常见的几种JS语法糖| 来源: 网络整理| 查看: 265

二、JS的语法糖

ES6疯狂给JS,添加语法糖，最常见的ES6语法糖有以下多个（不停更新）

参考链接：javascript:void(0)

总结如下：

###对象字面量的简写属性和计算的属性名不可同时使用，原因是简写属性是一种在编译阶段的就会生效的语法糖，而计算的属性名则在运行时才生效；主要是针对对象的一些简写

　　　　1.K和V，重名时，可以简写，为一个，这个简写的

　　　　2.使用[XXX]来表示动态的属性

###箭头函数本身已经很简洁，但是还可以进一步简写；　　主要是箭头函数的细分和简化。

　　1.按参数的个数，0参，1参，N参等等，可以对小括号进行相应的省略或不省略。

　　2.按语句个数，对大括号，进行省略或者不省略。

###解构也许确实可以理解为变量声明的一种语法糖，当涉及到多层解构时，其使用非常灵活；

　　结构赋值，针对数组和对象，快速赋值。

　　基于快速赋值，还能达到其他的快速目的。

###学会模板字符串的高级用法--标记模板字符串；

　　使用反引号，包裹字符串，加上${XXX}，减少字符串拼接时的混乱

###let,const声明的变量同样存在变量提升，理解TDZ机制

　　这两个是最基础的。

###SET，map，symbol

三：ES6之前，也有一些语法糖

　　1.对数据类型（现在是9种类型了，3+6）进行转化的时候。主要是数字和字符串的互转。

　　　　a-0或者a*1，把a转成数字

　　　　a+""，把a转成字符串

　　2.表达式中使用或且（好些没人使用！）。--叫短路表达式，懒惰表达式等等，我建议叫表达式的语法糖。　

　　　　逻辑赋值。a=b&&c，a=b||c

　　3.三目运算，这个本身，就是挺快的。使用它来代替ifelse，很香

　　4.flag=!flag （交替变化的时候，可以使用这个，让flag的true和flase值，来回切换）

　　5.如何快速清空一个数组或者对象？

　　　　通过重新复制。直接让arry=[], 直接让obj={}

　　6. 【JS语法糖】常见的几种JS语法糖_反引号 vue中，click事件的，三目运算表达。

四、常见的语法糖

1、对象字面量 let sex1 = 'man', sex2 = ‘woman’ let sex = {man,woman} 2、箭头函数 let fun = function(params){} //可以缩写成如下箭头函数会改变this的指向 let fun= params =>{} //当参数有两个及以上时,如下： let fun= (params1,params2,,,)=>{} 3、数组解构 let arr = ['a','b','c']; let {a,b} = arr console.log(a) // a //数组解构也允许你跳过你不想用到的值，在对应地方留白即可，举例如下 let {a,,c} = array console.log(c) //c 4、函数默认参数 function getResponse(a,b=0) { //常用于请求数据时，设置默认值 } 5、拓展运算符 function test() { return [...arguments] } test('a', 'b', 'c') // ['a','b','c'] //扩展符还可以拼合数组 let all = ['1',...['2','3'],...['4','5'],'6'] // ["1", "2", "3", "4", "5", "6"] 6、模板字符串 let id = '奋斗中的编程菜鸟' let blog = '博主id是:${a}' // 博主id是是:奋斗中的编程菜鸟 7、多行字符串 //利用反引号实现多行字符串（虽然回车换行也是同一个字符串） let poem = `A Pledge By heaven, I shall love you To the end of time! Till mountains crumble, Streams run dry, Thunder rumbles in winter, Snow falls in summer, And the earth mingles with the sky — Not till then will I cease to love you!` 8、拆包表达式 const data = { a: 'a', b: 'b', c: 'c' } let {a,c} = data console.log(c); // c 9、ES6中的类 class helloJs{ // 构造方法 constructor(options = {}, data = []) { this.name = '奋斗中的编程菜鸟' this.data = data this.options = options } // 成员方法 getName() { return this.name } } 10、模块化开发 // 新建一个util.js 文件夹 let formatTime = date=>{ .... } let endTime = date=>{ .... } module.exports = { formatTime, endTime, } //可以用import {名称} from '模块' //然后再同级目录创建一个js文件引入 util.js //import {endTime} from 'util' //或者全部引入 //import util from 'util'

【本文地址】

公司简介

联系我们