【JS语法糖】常见的⼏种JS语法糖
⼀、语法糖含义
语法糖（Syntactic sugar），也译为糖⾐语法
指计算机语⾔中添加的某种语法，这种语法对语⾔的功能并没有影响，在不改变其所在位置的语法结构前提下但是更⽅便程序员使⽤。
通常来说使⽤语法糖能够增加程序的可读性，从⽽减少程序代码出错的机会。
“语法糖”这个词绝⾮贬义词，它可以给我们带来⽅便，是⼀种便捷的写法，编译器会帮我们做转换；⽽且可以提⾼开发编码的效率，在性能上也不会带来损失。
⼆、JS的语法糖
ES6疯狂给JS，添加语法糖，最常见的ES6语法糖有以下多个（不停更新）
总结如下：
###对象字⾯量的简写属性和计算的属性名不可同时使⽤，原因是简写属性是⼀种在编译阶段的就会⽣效
的语法糖，⽽计算的属性名则在运⾏时才⽣效；
主要是针对对象的⼀些简写
    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.  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]
}
javascript高级语法
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=>{
....
}
formatTime,
endTime,
}
//可以⽤import {名称} from '模块'
//然后再同级⽬录创建⼀个js⽂件引⼊ util.js //import {endTime} from 'util'
//或者全部引⼊
//import util from 'util'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。