2022-12-13 什么是语法糖?JS中常见的语法糖有哪些?

前端OnTheRun

已于 2022-12-13 14:36:35 修改

阅读量700

点赞数

分类专栏：知识点文章标签：语法糖 js 解构赋值 es6 class

于 2022-12-13 14:31:43 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/128301201

版权

知识点专栏收录该内容

90 篇文章

订阅专栏

本文介绍了JavaScript中的各种语法糖，包括对象字面量、箭头函数、解构赋值等特性，通过这些特性可以使代码更加简洁易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

0.前言

常常听到语法糖这个说法,模模糊糊半懂不懂,借此机会了解一下相关概念,记录如下

1.定义

语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,
使操作变得更加清晰方便,更符合编程习惯
通俗理解就是一种便捷写法,如果去掉不用,也不会影响语言的表达,因为处理程序本身就会把语法糖构件转换成更加基础的构件

2.常见语法糖

2.1.对象字面量

let sex1 = 'man', sex2 = ‘woman’
let sex = {man,woman}

2.2.箭头函数

/*普通函数*/
let fun = function(params){}
/*箭头函数(语法糖)*/
let fun= params =>{}
//当参数有两个及以上时,如下：
let fun= (params1,params2,,,)=>{}

2.3.解构赋值(数组)

/*数组*/
let arr = ['a','b','c'];
let {a,b} = arr;数组解构
let {a,,c} = arr;//数组解构可以跳过不想用到的值，只需在对应地方留白

2.4.函数默认参数

function  getResponse(a,b=0) {}  //常用于请求数据时，设置默认值

2.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"]

2.6.模板字符串

let id = '小狐狸'
let blog = '博主id是:${id}' // 博主id是是:小狐狸

2.7.多行字符串

//利用反引号实现多行字符串（虽然回车换行也是同一个字符串）
let poem = `A Pledge
			By heaven,
			I shall love you`

2.8.拆包表达式

const data = {
      a: 'a',
      b: 'b',
      c: 'c'
}
let {a,c} = data

2.9.ES6的类

class helloJs{
// 构造方法
  constructor(options = {}, data = []) { 
        this.name = '小狐狸';
        this.data = data;
        this.options = options;
    }
 // 成员方法
    getName() { 
        return this.name;
    }
}

2.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'