JavaScript运算符与表达式

简介: JavaScript运算符与表达式

一、===


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


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[0],arr[1],arr[2]);   // 输出 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)
目录
相关文章
|
2月前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
11天前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
|
19天前
|
JavaScript 前端开发
JavaScript基础-运算符与条件语句
【6月更文挑战第11天】本文探讨了JavaScript中的运算符和条件语句,包括算术、比较、逻辑、赋值及三元运算符。强调了使用严格等于`===`避免类型转换错误,理解逻辑运算符短路特性和优化条件结构以提高代码可读性。通过示例展示了正确使用这些概念,以提升代码质量和维护性。
|
9天前
|
JavaScript 前端开发
JS常见的运算符有哪些?
JS常见的运算符有哪些?
7 0
|
2月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
17 1
|
2月前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
19 1
|
2月前
|
JavaScript 前端开发
js的运算符
js的运算符
30 2
|
2月前
|
JavaScript
js的一些运算符规则
js的一些运算符规则
17 1
|
2月前
|
JavaScript
js的比较运算符
js的比较运算符
20 1
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别,本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较,而`===`不转换类型,要求完全相等。在比较对象时,`==`只比较引用,`===`比较内容。推荐使用`===`以确保准确性,但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中,应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。