文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript运算符与表达式实例代码分析

2023-07-06 04:43

关注

本篇内容主要讲解“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

?.

需求,函数参数是一个对象,可能包含有子属性

例如,参数可能是:

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运算符与表达式实例代码分析”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯