谈谈Js中的语法糖

Takklin
96 阅读1分钟

Js中的语法糖是什么

语法糖(syntax suger): 是指语言中一些为了让代码更简洁 易懂, 而对原本较复杂的语法进行的"改进". 它本质上没有改变语言的能力, 仅仅只是让编写代码的方式变得更方便, 直观(看到代码量锐减, 心里甜甜的-->suger)

Js中有哪些"著名"语法糖

在js中

  1. 箭头函数(arrow functions) 箭头函数是一个简化版的匿名函数, 语法更简洁. 还绑定了词法作用域中的this, 这使得它在回调函数中使用this更加直观. 谈谈箭头函数的this指向

    传统函数中
     ```js
 const add = function(a, b){
     return a + b;
 }
 ```
    箭头函数中
       const add = (a, b)=> a + b;

  2. 模版字符串 和 展开运算符

  • 字符串：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这个对象复制一份（备份）复制给obj2
        let 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 = 30
        user.company.name = 'dr国际教育'
        console.log(user3);
        console.log(user);

    </script>
</body>

</html>

  1. 对象简洁语法: 在定义对象时 对象的键名变量名相同 可以省略键名

    传统对象定义：
    const name = 'Alice';
const age = 25;
const person = {
  name: name,
  age: age
};
    对象简洁语法：
    const name = 'Alice';
const age = 25;
const person = { name, age };

  2. 解构赋值: 让从数组或对象中提取值变得更加简洁

    对象解构:
    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

  3. 默认参数: 如果函数没有传递参数, 可以给参数设置默认值

    function greet(name = 'Guest'){
    console.log(`Hello, ${name}`)
}

greet();// Hello, Guest
greet('Alice');// Hello, Alice

在vue3中

  • 组合式API是一种语法糖

    它通过setup函数让我们能够更加清晰和灵活的组织和管理组件的逻辑
    相比Vue2中的选项式API, setup将各种组件的逻辑(如数据 方法 生命周期钩子等跟着逻辑进行)集中管理,避免了代码的分散
avatar
文章
阅读
粉丝