什么是语法糖(Syntactic sugar)?

article/2025/9/17 22:18:28

大学时没选修编译原理这门课,不知道什么是语法糖,最近看React的官方文档才接触语法糖的概念,简单查了下资料记录下,以下是来自百度百科的解释:

语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会

简单理解就是在不改变其功能的情况下,通过改变代码的写法,让代码更具有可读性,更容易理解,就相当于汉语里的成语

即,用更简练的言语表达较复杂的含义在得到广泛接受的情况之下,可以提升交流的效率

例如以下在React中的两种写法,这两种代码的作用是完全相同的:

这种是原始JavaScript的写法

const element = React.createElement('span',{className: 'qc'},'Hello, world!');

 下面这种写法是JSX的写法,也就是简化后的代码,下面这种写法是上面那种语法的语法糖。

const element = (<span className="qc">Hello, world!<span/>);

 React官方的文档是这样描述的, JSX 仅仅只是React.createElement(component, props, ...children) 函数的语法糖

JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。

 其他例子还有:在 C 语言里用 a[i] 表示 *(a+i),用 a[i][j] 表示 *(*(a+i)+j),由此可见语法糖不是“现代语言”独有,这种写法简洁明了,易于理解。

对于机器语言,任何比他高级的语言都是语法糖,比如汇编语言,高级语言。

对于汇编语言,任何比他高级的语言都是语法糖,比如高级语言。

对于面向过程的语言,面向对象的语言都是语法糖。

参考文献:

1、语法糖_百度百科

2、什么是语法糖? - 知乎 


http://chatgpt.dhexx.cn/article/FZWfGcvm.shtml

相关文章

el-steps分布展示页面

<template><div class"app-container automation"><el-steps :active"active" finish-status"success"><el-step title"步骤 1"></el-step><el-step title"步骤 2"></el-step>&l…

038_Steps步骤条

1. Steps步骤条 1.1. Steps步骤条引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤, 步骤不得少于2步。 1.2. Steps Attributes 参数 说明 类型 可选值 默认值 space 每个step的间距, 不填写将自适应间距。支持百分比。 number / string 无 无 d…

更改el-steps颜色样式

原样式&#xff1a; 目标样式如下&#xff0c;也不追求完全一致&#xff0c;至少得看得过去。 <style scoped>::v-deep .el-step__head.is-success {color: rgb(52, 158, 250);border-color: rgb(52, 158, 250); } ::v-deep .el-step__title.is-success {font-weight: …

vue使用steps步骤条,自定义内容

效果图 一、引入element ui steps <el-steps :active"caseHistoryData.length" finish-status"success" direction"vertical" ><el-step><template slot"description"></template></el-step> </el-…

steps.js 步骤条、时间轴

GitHub地址&#xff1a;https://github.com/fxss5201/steps 介绍 首先看一下目录&#xff1a; 1.0 文件夹和 2.0 文件夹非升级关系&#xff0c;两者仅是着重点方向不一致&#xff0c;1.0 主打双边显示&#xff0c;2.0 主打内容排序&#xff0c;一般功能的话两者均可满足。 …

CSS3中steps()动画的详解

原文作者&#xff1a;Joni Trythall 增修作者&#xff1a;Fegmaybe 一个是雪碧图的实现动画的steps效果。steps&#xff08;&#xff09;阶跃函数&#xff0c;是transition-timing-function和animation-timing-function两个属性的属性值&#xff0c;他是表示两个关键帧之间的动…

css【详解】steps()函数

steps(number, position)number 整数值&#xff0c;表示把动画分成了多少段。position 可选参数&#xff0c;表示动画跳跃执行是在时间段的开始还是结束。 —— start 在时间段的开头处跳跃 —— end 在时间段的结束处跳跃 动画效果见 https://demo.cssworld.cn/new/5/4-7.php…

steps函数--参数意思和用法

图片解释如下&#xff0c;参数意思和用法在代码的注释中 所引用图片共7帧&#xff0c;如下&#xff1a; 尺寸为200*1400&#xff0c;所以设置div为200*200&#xff0c;分为7帧&#xff0c;除去展示帧&#xff0c;需六次步骤跳转&#xff0c;原图如下&#xff1a; 代码&…

element的步骤条整合表单(steps+form)

先上效果图&#xff1a; element ui 组件库官网 使用步骤&#xff1a; 1、页面组合步骤 > 5步 定义出4个步骤&#xff08;看你自己需要几步&#xff09;定义form表单定义4个盒子对象active属性 > 1 到 4放置表单项设置上一步和下一步的按钮 <template>//第一步…

vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性

vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性 设计规则何时使用 代码演示1.基本用法2.迷你版3.带图标的步骤条4.步骤切换5.竖直方向的步骤条6.竖直方向的小型步骤条7.步骤运行错误8.点状步骤条9.自定义点状步骤条 APIStepsSteps.Step 设…

组件封装 - steps组件

首先, 我先来看看效果 steps 组件的封装和 tabs 组件还是相似的 都会去指定两个组件来完成(仿Element UI), 都会去使用 jsx 的语法 让其中一个组件去规定样式和排版, 另外一个组件去接收父组件传入的动态数据 但和面包屑组件还是有区别的(面包屑组件封装): 相同点都是使用两…

ElementUi Steps 步骤条的使用

效果&#xff1a; 实现&#xff1a; <el-steps :active"active" finish-status"success"><el-step title"步骤 1"></el-step><el-step title"步骤 2"></el-step><el-step title"步骤 3"&…

el-steps(步骤条)的入门学习

el-steps(步骤条)的入门学习 适用场景 在有步骤流程的情况下&#xff0c;可以设置步骤条&#xff0c;引导用户向下操作&#xff0c;如四六级的报考 知识点 el-steps嵌套el-step使用el-steps的active设置Number&#xff0c;从零开始el-steps的space设置Number&#xff0c;为…

Vue2步骤条(Steps)

Vue3步骤条&#xff08;Steps&#xff09; 可自定义设置以下属性&#xff1a; 步骤标题数组&#xff08;stepsLabel&#xff09;步骤描述数组&#xff08;stepsDesc&#xff09;步骤总数&#xff08;totalSteps&#xff09;&#xff0c;默认3当前选中的步骤&#xff08;curren…

Vue3步骤条(Steps)

Vue2步骤条&#xff08;Steps&#xff09; 可自定义设置以下属性&#xff1a; 步骤数组&#xff08;steps&#xff09;&#xff0c;类型&#xff1a;Array<{title?: string, description?: string}>&#xff0c;默认 [] 当前选中的步骤&#xff0c;设置 v-model 后&a…

CSS3动画——steps函数

CSS3动画中应用的定时函数&#xff08;timing function&#xff09;常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end&#xff0c;另外还有两个内置的缓动函数cubic-bezier(), steps() 其中steps()这个函数是将整个动画过程分为指定的步…

css3中animation的steps分步动画

css的animation中&#xff0c;有一种描述动画变化速率的东西&#xff0c;例如常见的linear,ease-in,ease-out等&#xff0c;这些都是连续的变化&#xff0c;还有一种叫做steps的&#xff0c;它用来描述一种不连续的动画&#xff0c;也就是逐帧动画。 基本认识 steps的格式为&…

超几何分布(Hypergeometric distribution)

超几何分布 百度解释 https://baike.baidu.com/item/超几何分布/4782968?fraladdin 通俗解释 超几何分布中的参数是M,N,n&#xff0c;超几何分布记作X~H(N,M,n) 。假如一共有100颗球&#xff0c;20颗为红球&#xff0c;80颗为白球&#xff0c;从中不放回地拿出10个球&#x…

机器学习小组知识点12:超几何分布(Hyper-Geometric Distribution)

超几何分布与二项分布的联系与区别 事实上,超几何分布和二项分布确实有着密切的联系&#xff0c;但也有明显的区别。   课本对于超几何分布的定义是这样的&#xff1a;一般的&#xff0c;若一个随机变量X的分布列为&#xff0c;其中&#xff0c;则称X服从超几何分布&#xf…