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)
目录
相关文章
|
1月前
|
JavaScript
js运算符
js运算符
21 5
|
1月前
|
JavaScript 前端开发
JavaScript 运算符全知道
JavaScript 运算符全知道
50 0
|
1月前
|
JavaScript
js---三元表达式详解
js---三元表达式详解
59 0
|
2月前
|
JavaScript 前端开发
JavaScript 运算符
JavaScript 运算符
21 3
|
3月前
|
JavaScript 前端开发
JavaScript 中的 typeof 运算符
【8月更文挑战第29天】
25 1
|
3月前
|
JavaScript 前端开发 安全
深入理解JavaScript中的比较运算符
深入理解JavaScript中的比较运算符
|
3月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
3月前
|
JavaScript 前端开发
JS常见的运算符有哪些?
JS常见的运算符有哪些?
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
这篇文章详细介绍了JavaScript中的强制类型转换、运算符(包括算术、逻辑、条件、赋值和关系运算符)的使用方法和优先级规则。
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符