JavaScript运算符与表达式

news2024/9/23 5:26:46

目录

一、===

二、||

三、??与?.

??

?.

四、...

五、[] {}

[]

{}


一、===

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

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

typeof查看某个值的类型

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

二、||

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

推荐做法:

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

你可能的做法:

function test(n) {
    if(n === undefined) {
        n = '男';
    }
    console.log(n);
}

还可能是这样:

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

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

function test(n) {
    n = n || '男';
    console.log(n);
}

它的语法是:

值1 || 值2

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

三、??与?.

??

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

如果用传统办法:

function test(n) {
    if(n === undefined || n === null) {
        n = '男';
    }
    console.log(n);
}

用??

function test(n) {
    n = n ?? '男';
    console.log(n);
}

语法:

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

  • 值1 不是 nullish,返回值1

?.

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

例如,参数可能是:

let stu1 = {
    name:"张三",
    address: {
        city: '北京'
    }
};

let stu2 = {
    name:"李四"
}

let stu3 = {
    name:"李四",
    address: null
}

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

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

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

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

用传统方法:

function test(stu) {
    if(stu.address === undefined || stu.address === null) {
        console.log(undefined);
        return;
    }
    console.log(stu.address.city)
}

四、...

展开运算符

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

let arr = [1,2,3];

function test(a,b,c) {
    console.log(a,b,c);
}

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

传统写法:

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

展开运算符写法:

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

作用2:复制数组或对象

数组:

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

对象:

let obj1 = {name:'张三', age: 18};

let obj2 = {...obj1};		// 复制对象

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

let o1 = {name:'张三', address: {city: '北京'} }

let o2 = {...o1};

作用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]

合并对象:

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}
  • 复制对象时出现同名属性,后面的会覆盖前面的

五、[] {}

[]

解构赋值

用在声明变量时:

let arr = [1,2,3];

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

用在声明参数时:

let arr = [1,2,3];

function test([a,b,c]) {
    console.log(a,b,c) 	// 结果 a=1, b=2, c=3
}

test(arr);	

{}

用在声明变量时:

let obj = {name:"张三", age:18};

let {name,age} = obj;	// 结果 name=张三, age=18

用在声明参数时:

let obj = {name:"张三", age:18};

function test({name, age}) {
    console.log(name, age); // 结果 name=张三, age=18
}

test(obj)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/447270.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日学术速递4.22

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Reference-based Image Composition with Sketch via Structure-aware Diffusion Model 标题:通过结构感知扩散模型与草图进行基于参考的图像合成 作者:Kang…

PDF转PPT:省时省力的高效方式

PDF和PPT是日常工作和学习中常见的文件格式,但是它们的使用场景不同,很多时候需要将PDF文件转换为PPT文件才能更好地展示内容。本文将介绍如何使用PDF转PPT工具来实现快速转换,省时省力。 一、为什么需要将PDF文件转换为PPT文件 1.PPT文件更…

English Learning - L2-15 英音地道语音语调 语调四步法 2023.04.17 周一

English Learning - L2-15 英音地道语音语调 语调 2023.04.17 周一 语调概念和汉语拼音对比 语音语调四步法语调练习意群划分重音重中之重语调的选择 语调的含义 语调概念 广义:语音技巧,连读,失去爆破,音同化,还有平…

如何利用AI技术实现高品质的文字转语音效果

人们越来越依赖语音技术进行交流和获取信息。语音技术可以提高工作效率和舒适度,减轻眼睛疲劳和阅读负担。在数字化时代,AI技术已经能够帮助我们实现高品质的文字转语音效果。下面我们将介绍一些方法,以帮助您更好地利用AI技术实现高品质的文…

Vue.js过滤器filters

目录 一、局部过滤器 二、全局过滤器 三、过滤器串联 四、过滤器接收多个参数 Vue.js允许自定义过滤器,过滤器的作用可被用于一些常见的文本格式化(也就是修饰文本,但是文本内容不会改变) 过滤器可以用在两个地方&#xff1a…

微信小程序开发详细步骤是什么?

微信小程序开发只需要三步,分别是注册小程序,编辑设计小程序内容和一键发布小程序zlzwgz0127。 这篇回答不介绍写代码开发小程序,因为更多人是不懂代码的,所以推荐用第三方平台开发小程序zlzwgz0127。 在开始制作小程序之前&#…

Linux基础—深入理解Linux文件系统

Linux基础—深入理解Linux文件系统与日志分析 一、inode 与 block详解1.inode 和 block 概述2.inode的内容3.inode的大小4.inode的特殊作用5.inode 的号码6.查看文件的inode 号码7.inode 耗尽故障处理 二、恢复误删除的文件1.案例:恢复EXT类型的文件2.案例&#xff…

qt中信号和槽机制

文章目录 信号与槽机制实现 点击按钮 关闭窗口的案例 自定义信号槽自定义信号自定义槽函数触发自定义的信号案例:请老师吃饭 断开信号当槽函数遇到重载的时候拓展 信号与槽机制 connect(信号的发送者, 发送的具体信号,信号的接受者&#xff0…

SpringAop详解汇总

文章目录 近期想法什么是AOPSpringAOP与AspectjSpringAOP体系概述概念详解连接点- Jointpoint切入点- Pointcut通知- Advice切面- Aspect织入- Weaving 实现原理—动态代理JDK动态代理描述原理代码示例注意执行结果 优点缺点 CGLib动态代理描述原理代码示例注意执行结果 优点缺…

【UITableViewCell单元格重用补充 Objective-C语言】

一、咱们再把刚才说的UITableViewCell单元格重用的思路再给大家捋一下 1.咱们刚才说的这个单元格重用就是,当我们滚动的时候,这里给大家简单画一下, 2.就是滚动的时候,当把这个最上面的单元格滚完毕以后,把这个单元格放到缓存池里面, 3.给这个单元格要起一个ID,给它做一…

阿里云部署Stable Diffusion

系列文章目录 本地部署Stable Diffusion教程,亲测可以安装成功 Stable Diffusion界面参数及模型使用 谷歌Colab云端部署Stable Diffusion 进行绘图 文章目录 系列文章目录前言一、AIGC是什么?二、操作步骤1.资源准备-零元开通试用套餐2.创建应用3.输入…

使用matlab基于神经网络进行光束选择

一、前言 此示例说明如何使用神经网络来减少光束选择任务中的开销。在此示例中,您仅使用接收方的位置,而不是通信信道的知识。您可以通过在选定的波束对中进行搜索来减少波束扫掠开销,而不是对所有波束对进行详尽的波束搜索K光束对。考虑到一…

R语言ggplot2 | 修改ggplot主题

📋文章目录 图形设置(settings)面板设置和背景(Panel&Background)坐标轴设置(Axis)标题和标签(Title&label)图例(Legend)副标题和图注&am…

静态和动态NAT,NAPT配置简介

一.类型介绍 二.功能 1.将大量的私有地址转换为公有地址(节约IP地址) 2.将一个IP地址转换为另一个IP地址(增加内部网络设备的安全性) 三.缺陷: 1.很消耗网络设备资源 2.破坏数据端到端传输,安全策略实施受限 四.配置命令 1.静态模式(…

押注零知识证明赛道,Conflux与ACCSEAL达成战略合作

Conflux与新兴零知识证明加速芯片制造公司ACCSEAL宣布达成战略合作,携手共同布局零知识证明(Zero-Knowledge Proof,简称ZKP)赛道,探索可应用于Conflux生态系统的最先进零知识证明技术和解决方案。早在2022年3月&#x…

白话文讲计算机视觉-第九讲-霍夫变换之直线检测

霍夫变换是1962年由霍夫发明的一种检测图像中直线、圆等形状的方法。后来1972年经过Richard O. Duda和Peter E. Hart改进,形成了今天的霍夫变换算法。 今天我就带大家了解了解霍夫变换之直线检测是怎么特么的一回事。 1.霍夫变换 说到霍夫变换,首先就得…

C++——类和对象

作者:几冬雪来 时间:2023年4月21日 内容:C类和对象 目录 前言: 1.inline函数: 2.auto(补充): 3.类: 4.类的访问限定符及封装: 5.封装:…

从零开始下载torch+cu(无痛版)

从零开始下载torchcu(无痛版) 文章目录 从零开始下载torchcu(无痛版)一,前言二,配置torch的GPU版具体步骤1,查看电脑安装的Cuda版本2,在pytoch官网检索待下载whl包名以及版本3,下载指…

playwright实战篇(tx、ali225)

人人都笑金角,人人都是金角推荐文章: 1、https://playwright.dev/python/docs/api/class-playwright //官方文档 2、https://cuiqingcai.com/36045.html //崔庆才教程 3、https://github.com/qqq732004709/ //实战参考 4、https://www.cnblogs.com/ca…

asp.net mvc网上书店购物系统(带项目文档)

c#_asp.net mvc网上书店购物系统(带项目文档) mvc网上书店购物系统 主要技术: 基于asp.net mvc架构和sql server数据库,并采用EF实体模型开发。 功能模块: 系统包括前台和后台两个部分,用户可在前台浏览…