JavaScript基础之运算符与表达式详解

更新时间：2023年04月17日 08:47:38 作者：夏志121

这篇文章主要为大家详细介绍了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); // 输出 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)

以上就是JavaScript基础之运算符与表达式详解的详细内容，更多关于JavaScript运算符表达式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript实现一个输入框组件
这篇文章主要为大家详细介绍了JavaScript实现一个输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
js判断是否是手机页面
本文主要介绍了js判断是否是手机页面的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
iscroll.js的上拉下拉刷新时无法回弹的解决方法
本文给大家分享的是在IOS浏览器中使用iscroll.js的上拉下拉刷新时当手指划出屏幕后无法回弹的解决方法，希望对大家能够有所帮助。
2016-02-02
Webpack打包字体font-awesome的方法示例
本篇文章主要介绍了Webpack打包字体font-awesome的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
JavaScript实现动态表格效果
这篇文章主要为大家详细介绍了JavaScript实现动态表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
漫谈JS引擎的运行机制你应该知道什么
javascript 从定义到执行，你应该知道的那些事，本文为大家一一列举，希望对大家的学习有所帮助
2016-06-06
postMessage及webSocket跨域方案详解
这篇文章主要为大家介绍了postMessage及webSocket跨域方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
javascript中mouseover、mouseout使用详解
这篇文章主要介绍了javascript中mouseover、mouseout使用详解的相关资料,需要的朋友可以参考下
2015-07-07
微信小程序实现可长按移动控件
这篇文章主要为大家详细介绍了微信小程序实现可长按移动控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
JS取request值以及自动执行使用示例
在网页中JS函数自动执行常用三种方法，下面为大家详细介绍下JS取request值以及自动执行使用,需要的朋友可以参考下
2014-02-02