iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript基础之运算符与表达式详解
  • 627
分享到

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

JavaScript运算符 表达式JavaScript运算符JavaScript 表达式 2023-05-16 14:05:05 627人浏览 八月长安
摘要

目录一、===二、||三、??与?.???.四、...五、[] {}[]{}一、=== 严格相等运算符,用作逻辑判断 1 == 1 // 返回 true 1 == '

一、===

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

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运算符 表达式的资料请关注编程网其它相关文章!

--结束END--

本文标题: JavaScript基础之运算符与表达式详解

本文链接: https://www.lsjlt.com/news/209969.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作