沉梦手记 沉梦手记
首页
  • 基础篇
  • 集合篇
  • 并发篇
  • JVM
  • 新特性
  • 计算机网络
  • 操作系统
  • 数据结构与算法
  • 数据库基础
  • MySql
  • Redis
  • 达梦数据库
  • Spring
  • SpringBoot
  • Mybatis
  • Shiro
  • 设计须知
  • UML画图
  • 权限校验
  • 设计模式
  • API网关
  • 网络通信
  • 消息队列
  • SpringCloud
  • 分布式事务
  • 云存储
  • 搜索引擎
  • 前端基础
  • Vue
  • React
  • 开发工具篇
  • 工具库篇
  • 开发技巧篇
  • 工具类系列
  • 运维与部署
  • 音视频处理
  • 随笔
  • 博客搭建
  • 网站收藏箱
  • 断墨寻径摘录
  • 费曼学习法
Github (opens new window)

沉梦听雨

时间是最好的浸渍剂,而沉淀是最好的提纯器🚀
首页
  • 基础篇
  • 集合篇
  • 并发篇
  • JVM
  • 新特性
  • 计算机网络
  • 操作系统
  • 数据结构与算法
  • 数据库基础
  • MySql
  • Redis
  • 达梦数据库
  • Spring
  • SpringBoot
  • Mybatis
  • Shiro
  • 设计须知
  • UML画图
  • 权限校验
  • 设计模式
  • API网关
  • 网络通信
  • 消息队列
  • SpringCloud
  • 分布式事务
  • 云存储
  • 搜索引擎
  • 前端基础
  • Vue
  • React
  • 开发工具篇
  • 工具库篇
  • 开发技巧篇
  • 工具类系列
  • 运维与部署
  • 音视频处理
  • 随笔
  • 博客搭建
  • 网站收藏箱
  • 断墨寻径摘录
  • 费曼学习法
Github (opens new window)
  • 前端基础

    • 前端环境搭建
    • HTML与CSS
    • JavaScript知识点整理

      • 什么是ES6?
      • 声明变量(作用域)
      • 基本类型
      • 对象类型
      • 类型
      • 运算符与表达式
        • 流程控制
        • API
      • Axios入门
    • Vue

    • React

    • 前端学习
    • 前端基础
    • JavaScript知识点整理
    沉梦听雨
    2023-07-06
    目录

    运算符与表达式

    # 2、运算符与表达式

    • + - * / % **
    • += -= *= /= %= **=
    • ++ --
    • 位运算、移位运算
    • == != > >= < <=
    • === !== ⭐️
    • && || ! ⭐️
    • ?? ?. ⭐️
    • ... ⭐️
    • 解构赋值 ⭐️

    # 1) ===

    严格相等运算符,用作逻辑判等

    • == 会进行类型转换
    • === 不会转换,类型不等直接返回 false
    1 == 1    	// 返回 true 
    1 == '1'	// 返回 true,会先将右侧的字符串转为数字,再做比较
    1 === '1'	// 返回 false,类型不等,直接返回 false
    
    1
    2
    3

    typeof 查看某个值的类型

    typeof 1	// 返回 'number'
    typeof '1'	// 返回 'string'
    
    1
    2

    # 2) ||

    需求,如果参数 n 没有传递,给它一个【男】

    推荐做法

    function test(n = '男') {
        console.log(n);
    }
    
    1
    2
    3

    你可能的做法

    function test(n) {
        if(n === undefined) {
            n = '男';
        }
        console.log(n);
    }
    
    1
    2
    3
    4
    5
    6

    还可能是这样

    function test(n) {
        n = (n === undefined) ? '男' : n;
        console.log(n);
    }
    
    1
    2
    3
    4

    一些老旧代码中可能的做法(不推荐)

    function test(n) {
        n = n || '男';
        console.log(n);
    }
    
    1
    2
    3
    4

    它的语法是

    值1 || 值2
    
    1

    如果值1 是 Truthy,返回值1,如果值1 是 Falsy 返回值 2

    # 3) ?? 与 ?.

    # ??

    需求,如果参数 n 没有传递或是 null,给它一个【男】

    如果用传统办法

    function test(n) {
        if(n === undefined || n === null) {
            n = '男';
        }
        console.log(n);
    }
    
    1
    2
    3
    4
    5
    6

    用 ??

    function test(n) {
        n = n ?? '男';
        console.log(n);
    }
    
    1
    2
    3
    4

    语法

    值1 ?? 值2
    
    1
    • 值1 是 nullish,返回值2
    • 值1 不是 nullish,返回值1

    # ?.

    需求,函数参数是一个对象,可能包含有子属性

    例如,参数可能是

    let stu1 = {
        name: 沉梦听雨
        address: {
            city: '北京'
        }
    };
    
    let stu2 = {
        name: 沉梦听雨
    }
    
    let stu3 = {
        name: 沉梦听雨
        address: null
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    现在要访问子属性(有问题)

    function test(stu) {
        console.log(stu.address.city)
    }
    
    1
    2
    3

    现在希望当某个属性是 nullish 时,短路并返回 undefined,可以用 ?.

    function test(stu) {
        console.log(stu.address?.city)
    }
    
    1
    2
    3

    用传统办法

    function test(stu) {
        if(stu.address === undefined || stu.address === null) {
            console.log(undefined);
            return;
        }
        console.log(stu.address.city)
    }
    
    1
    2
    3
    4
    5
    6
    7

    # 4) ...

    展开运算符

    作用1:打散数组,把元素传递给多个参数

    let arr = [1,2,3];
    
    function test(a,b,c) {
        console.log(a,b,c);
    }
    
    1
    2
    3
    4
    5

    需求,把数组元素依次传递给函数参数

    传统写法

    test(arr[0],arr[1],arr[2]);		// 输出 1,2,3
    
    1

    展开运算符写法

    test(...arr);					// 输出 1,2,3
    
    1
    • 打散可以理解为【去掉了】数组外侧的中括号,只剩下数组元素

    作用2:复制数组或对象

    数组

    let arr1 = [1,2,3];
    let arr2 = [...arr1];		// 复制数组
    
    1
    2

    对象

    let obj1 = {name:'张三', age: 18};
    
    let obj2 = {...obj1};		// 复制对象
    
    1
    2
    3

    注意:展开运算符复制属于浅拷贝,例如

    let o1 = {name:'张三', address: {city: '北京'} }
    
    let o2 = {...o1};
    
    1
    2
    3

    作用3:合并数组或对象

    合并数组

    let a1 = [1,2];
    let a2 = [3,4];
    
    let b1 = [...a1,...a2];		// 结果 [1,2,3,4]
    let b2 = [...a2,5,...a1]	// 结果 [3,4,5,1,2]
    
    1
    2
    3
    4
    5

    合并对象

    let o1 = {name:'张三'};
    let o2 = {age:18};
    let o3 = {name:'李四'};
    
    let n1 = {...o1, ...o2};	// 结果 {name:'张三',age:18}
    
    let n2 = {...o3, ...o2, ...o1}; // 结果{name:'李四',age:18}
    
    1
    2
    3
    4
    5
    6
    7
    • 复制对象时出现同名属性,后面的会覆盖前面的

    # 5) [] {}

    解构赋值

    # []

    用在声明变量时

    let arr = [1,2,3];
    
    let [a, b, c] = arr;	// 结果 a=1, b=2, c=3
    
    1
    2
    3

    用在声明参数时

    let arr = [1,2,3];
    
    function test([a,b,c]) {
        console.log(a,b,c) 	// 结果 a=1, b=2, c=3
    }
    
    test(arr);				
    
    1
    2
    3
    4
    5
    6
    7

    # {}

    用在声明变量时

    let obj = {name:"张三", age:18};
    
    let {name,age} = obj;	// 结果 name=张三, age=18
    
    1
    2
    3

    用在声明参数时

    let obj = {name:"张三", age:18};
    
    function test({name, age}) {
        console.log(name, age); // 结果 name=张三, age=18
    }
    
    test(obj)
    
    1
    2
    3
    4
    5
    6
    7
    上次更新: 2026/11/5 11:56:09
    类型
    流程控制

    ← 类型 流程控制→

    Theme by Vdoing | Copyright © 2023-2026 沉梦听雨 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式