本篇内容主要讲解“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); // 输出 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)
版权声明:除特别声明外,本站所有文章皆是本站原创,转载请以超链接形式注明出处!