Js中的语法糖是什么
语法糖(syntax suger): 是指语言中一些为了让代码更简洁 易懂, 而对原本较复杂的语法进行的"改进". 它本质上没有改变语言的能力, 仅仅只是让编写代码的方式变得更方便, 直观(看到代码量锐减, 心里甜甜的-->suger)
Js中有哪些"著名"语法糖
在js中
-
箭头函数(arrow functions) 箭头函数是一个简化版的匿名函数, 语法更简洁. 还绑定了词法作用域中的this, 这使得它在回调函数中使用this更加直观. 谈谈箭头函数的this指向
传统函数中
```jsconst add = function(a, b){return a + b;}```箭头函数中
const add = (a, b)=> a + b; -
模版字符串 和 展开运算符
-
字符串：string，js中的基本的数据类型，使用双引号、单引号、反引号去引用都属于字符串。
-
反引号引用的字符串是ES6中提供的，称为模板字符串。在模板字符串中，可以使用${} 嵌入js的表达式（有结果）
let name = "张三" let age = 20 console.log("name="+name+",age="+age) console.log(`name=${name},age=${age}`)<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><script>/*在ES6中的提供的展开（扩展）运算符： ...它的目的主要是快速的处理字符串、数组和对象展开运算符：得到字符串、数组、对象中的数据(用于拆分数组或对象, 或者将多个元素合并到一个数组或对象中)*/// 获取字符串中的字符let s = "abcde"console.log(s.charAt(0));console.log("a", "b", "c", "d", "e");console.log(...s);// 相当于将字符串中的数据展开（取出）之后，放到数组中let s2 = [...s];// 展开数组let arr = [1, 2, 3]let arr2 = [4, 5, 6]let arr3 = arr.concat(arr2)console.log(arr);console.log(arr2);console.log(arr3);let arr4 = [...arr, ...arr2]console.log(arr4);// 展开对象let obj = {name: "张三",age: 20,sex: '男'}console.log(obj);// 需要将obj这个对象复制一份（备份）复制给obj2let obj2 = obj;obj.name = "李四"console.log(obj);console.log(obj2);// 取出obj对象的所有属性，再次封装成一个新对象（js对象的浅拷贝）let obj3 = { ...obj };console.log(obj3);obj3.name = '王五'console.log(obj3);console.log(obj2);// 对象的拷贝复制问题：深拷贝、浅拷贝// 浅拷贝：只拷贝对象的第一层数据let user = {name: "张三",age: 20,sex: '男',company: {name: "dr",address: "天津东丽"}}console.log(user);// 使用展开运算符，可以完成对象的浅拷贝（是拷贝对象的第一层数据）let user2 = { ...user };console.log(user2);user2.name = "李四";user2.company.name = "dr教育"console.log(user2);console.log(user);// 演示对象的深拷贝let strUser = JSON.stringify(user)console.log(strUser);// 再将字符串转成JS对象let user3 = JSON.parse(strUser);console.log(user3);user.age = 30user.company.name = 'dr国际教育'console.log(user3);console.log(user);</script> </body></html>
-
对象简洁语法: 在定义对象时 对象的键名变量名相同 可以省略键名
传统对象定义：
const name = 'Alice'; const age = 25; const person = {name: name,age: age };对象简洁语法：
const name = 'Alice'; const age = 25; const person = { name, age }; -
解构赋值: 让从数组或对象中提取值变得更加简洁
对象解构:
const person = { name: 'Alice', age: 25}; const { name, age } = person;//name = 'Alice', age = 25数组解构:
const arr = [1, 2, 3]; const [a, b] = arr;// a = 1, b =2 -
默认参数: 如果函数没有传递参数, 可以给参数设置默认值
function greet(name = 'Guest'){console.log(`Hello, ${name}`) }greet();// Hello, Guest greet('Alice');// Hello, Alice
在vue3中
-
组合式API是一种语法糖
它通过setup函数让我们能够更加清晰和灵活的组织和管理组件的逻辑
相比Vue2中的选项式API, setup将各种组件的逻辑(如数据 方法 生命周期钩子等跟着逻辑进行)集中管理,避免了代码的分散