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运算符表达式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js日期对象兼容性的处理方法
本篇文章主要是对js日期对象兼容性的处理方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
基于zepto.js简单实现上传图片
这篇文章主要介绍了基于zepto.js简单实现上传图片的相关资料,需要的朋友可以参考下
2016-06-06
JS实现的相册图片左右滚动完整实例
这篇文章主要介绍了JS实现的相册图片左右滚动效果,结合完整实例形式分析了javascript事件触发与页面元素属性动态变换的相关操作技巧,需要的朋友可以参考下
2016-11-11
详解webpack之scss和postcss-loader的配置
本篇文章主要介绍了详解webpack之scss和postcss-loader的配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
微信小程序判断手机号是否合法的实例代码
我们在微信小程序开发的时候,手机号的验证是经常需要操作的,那么如何验证手机号呢?这篇文章主要给大家介绍了关于微信小程序判断手机号是否合法的相关资料,需要的朋友可以参考下
2021-09-09
如何用JavaScript实现动态修改CSS样式表
如何用JavaScript实现动态修改CSS样式表？下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧
2016-05-05
js面试题之异步问题的深入理解
这篇文章主要给大家介绍了关于js面试题之异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
.net MVC+Bootstrap下使用localResizeIMG上传图片
这篇文章主要为大家详细介绍了.net MVC和Bootstrap下使用 localResizeIMG上传图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
这篇文章主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下
2018-09-09
js仿百度切换皮肤功能（html+css）
这篇文章主要为大家详细介绍了JavaScript仿百度切换皮肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07