首页 > 编程语言 >JavaScript运算符与表达式

JavaScript运算符与表达式

时间:2023-04-16 10:02:35浏览次数:49  
标签:... console name JavaScript 运算符 let test 表达式 log


目录

一、===

二、||

三、??与?.

??

?.

四、...

五、[] {}

[]

{}


一、===

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

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)

标签:...,console,name,JavaScript,运算符,let,test,表达式,log
From: https://blog.51cto.com/u_15815415/6193326

相关文章

  • JavaScript中 处理异步的几种方法
    1.回调函数回调(callback)是一个函数被作为一个参数传递到另一个函数里,在那个函数执行完后再执行。假定有两个函数f1和f2,f2等待f1的执行结果,f1()–>f2();如果f1很耗时,可以改写f1,把f2(箭头函数)写成f1的回调函数:functionf1(callback){setTimeout(()=>{letname='小明'......
  • javascript基础练习
     本练习根据w3cschool:https://www.w3cschool.cn/javascript/javascript-conventions.html 1.javascript简介1.1JavaScript是脚本语言JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后,可由......
  • JavaScript 邮箱 验证正则表达式 ,包看懂
    \w就是[0-9a-zA-Z_]\s是[\t\v\n\r\f]\S是[^\t\v\n\r\f]\W是[^0-9a-zA-Z_]\D就是[^0-9]\d就是[0-9].就是[^\n\r\u2028\u2029]。表示几乎任意字符。varreg=/\w{1,30}(\.\w{1,10}){0,2}@\w{1,10}\.\w{1,10}/g\w{1,30}理解为至少有一个字符,最多30个.\w{1,30}理......
  • 第三周——后缀表达式
    题目描述所谓后缀表达式是指这样的一个表达式:式中不再引用括号,运算符号放在两个运算对象之后,所有计算按运算符号出现的顺序,严格地由左而右新进行(不用考虑运算符的优先级)。如:3*(5-2)+73*(5-2)+7 对应的后缀表达式为:3.5.2.-*[email protected]*7.+@。在该式中,@ 为表达式的结束符号。.......
  • 前端基础之JavaScript
    目录JS简介JS基础变量与常量基本数据类型数值(number)字符串的常用方法对象的常用方法forEach()splice()map()运算符流程控制函数内置对象JS简介全称JavaScript但是与Java一毛钱关系都没有之所以这么叫是为了蹭Java的热度它是一门前端工程师的编程语言但是它本身有很多逻辑错误(......
  • python3正则-表达式
    1、介绍这里整理了表达式,即pattern参数的语法。其本质是一个str类型。2、开始和结尾(1)^^匹配字符串的开头(2)$$匹配字符串的末尾(3)整体匹配同时使用^和$3、匹配次数(1)贪婪匹配和非贪婪匹配模式贪婪匹配,在允许的范围内尽可能多的匹配表达式次数。比如*、+、{n,m}等......
  • R6-2 复数的加减运算(运算符重载)
    声明一个复数类CComplex(类私有数据成员为double型的real和image)定义构造函数,用于指定复数的实部与虚部。重载<<运算符,以格式real+imagei的格式输出当前对象(当虚部为非负数时,实部虚部中间用+号连接,当虚部为负数时,实部虚部用-号连接:如3+4i,3-4i,3+0i)。重载+运算符,实现两个复数对......
  • Python 利用正则表达式和filter函数 筛选序列(列表等)
    在 Python 中,序列类型包括字符串、列表、元组、集合和字典http://c.biancheng.net/view/4312.htmlPython内建的filter()函数用于过滤序列https://www.liaoxuefeng.com/wiki/1016959663602400/1017404530360000序列内逐个元素筛选filter并用list保存结果筛选的判断条件是re.match......
  • 逍遥自在学C语言 | 位运算符<<的高级用法
    前言在上一篇文章中,我们介绍了~运算符的高级用法,本篇文章,我们将介绍<<运算符的一些高级用法。一、人物简介第一位闪亮登场,有请今后会一直教我们C语言的老师——自在。第二位上场的是和我们一起学习的小白程序猿——逍遥。二、计算2的整数次幂代码示例#includ......
  • 数据类型和运算符
    1.整数类型TINYINT、SMALLINT、MEDIUMINT、INT(INTEGER)、BIGINT2.浮点数类型和定点数类型浮点类型:FLOAT、DOUBLE。定点类型:DECIMAL3.日期与时间类型DATETIME、DATE、TIMESTAMP、TIME、YEAR4.字符串类型CHAR、VARCHAR、BINARY、VARBINARY、BLOB、TEXT、ENUM和SET5.二进制类型BI......