浅学前端：JavaScript篇(二）

2. 运算符与表达式

- * / % **
= -= *= /= %= **=
--
位运算、移位运算
== != > >= < <=
=== !== ⭐️
&& || ! ⭐️
?? ?. ⭐️
... ⭐️
解构赋值 ⭐️

1) ===

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

代码语言：javascript复制

 1 == 1      // 返回 true 
 1 == '1'    // 返回 true，会先将右侧的字符串转为数字，再做比较
 1 === '1'   // 返回 false，类型不等，直接返回 false

typeof 查看某个值的类型

代码语言：javascript复制

 typeof 1    // 返回 'number'
 typeof '1'  // 返回 'string'

2) ||

需求，如果参数 n 没有传递，给它一个【男】

推荐做法

代码语言：javascript复制

 function test(n = '男') {
     console.log(n);
 }

你可能的做法

代码语言：javascript复制

 function test(n) {
     if(n === undefined) {
         n = '男';
     }
     console.log(n);
 }

还可能是这样

代码语言：javascript复制

 // 三元运算符
 function test(n) {
     n = (n === undefined) ? '男' : n;
     console.log(n);
 }

一些老旧代码中可能的做法（不推荐）

代码语言：javascript复制

 function test(n) {
     n = n || '男';
     console.log(n);
 }

它的语法是

代码语言：javascript复制

 值1 || 值2

如果值1 是 Truthy，返回值1，如果值1 是 Falsy 返回值 2

3) ?? 与 ?.

??

需求，如果参数 n 没有传递或是 null，给它一个【男】

如果用传统办法

代码语言：javascript复制

function test(n) {
    if(n === undefined || n === null) {
        n = '男';
    }
    console.log(n);
}

用 ??

代码语言：javascript复制

function test(n) {
    n = n ?? '男';
    console.log(n);
}

语法

代码语言：javascript复制

值1 ?? 值2

值1 是 nullish，返回值2
值1 不是 nullish，返回值1

?.

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

例如，参数可能是

代码语言：javascript复制

 let stu1 = {
     name:"张三",
     address: {
         city: '北京'
     }
 };
 
 let stu2 = {
     name:"李四"
 }
 
 let stu3 = {
     name:"李四",
     address: null
 }

现在要访问子属性（有问题）

代码语言：javascript复制

 function test(stu) {
     console.log(stu.address.city)
 }

现在希望当某个属性是 nullish 时，短路并返回 undefined，可以用 ?.

代码语言：javascript复制

 function test(stu) {
     console.log(stu.address?.city)
 }

用传统办法

代码语言：javascript复制

 function test(stu) {
     if(stu.address === undefined || stu.address === null) {
         console.log(undefined);
         return;
     }
     console.log(stu.address.city)
 }

4) ...

展开运算符

作用1：打散数组，把元素传递给多个参数

代码语言：javascript复制

let arr = [1,2,3];

function test(a,b,c) {
    console.log(a,b,c);
}

需求，把数组元素依次传递给函数参数

传统写法

代码语言：javascript复制

test(arr[0],arr[1],arr[2]);		// 输出 1,2,3

展开运算符写法

注意：只能用于传参，不可以用来赋值： let a,b,c = ...arr // 报错： Uncaught SyntaxError: Unexpected token '...'

代码语言：javascript复制

test(...arr);					// 输出 1,2,3

打散可以理解为【去掉了】数组外侧的中括号，只剩下数组元素

作用2：复制数组或对象

数组

代码语言：javascript复制

let arr1 = [1,2,3];
let arr2 = [...arr1];		// 复制数组

对象

代码语言：javascript复制

let obj1 = {name:'张三', age: 18};

let obj2 = {...obj1};		// 复制对象

注意：展开运算符复制属于浅拷贝（只能复制一层，如果深了就只是一层引用），例如

代码语言：javascript复制

let o1 = {name:'张三', address: {city: '北京'} }

let o2 = {...o1};

作用3：合并数组或对象

合并数组

代码语言：javascript复制

 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]

合并对象

代码语言：javascript复制

 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}

复制对象时出现同名属性，后面的会覆盖前面的

5) [] {}

解构赋值

[]

用在声明变量时

代码语言：javascript复制

 let arr = [1,2,3];
 
 let [a, b, c] = arr;    // 结果 a=1, b=2, c=3

用在声明参数时

代码语言：javascript复制

 let arr = [1,2,3];
 
 function test([a,b,c]) {
     console.log(a,b,c)  // 结果 a=1, b=2, c=3
 }
 
 test(arr);

{}

用在声明变量时

代码语言：javascript复制

 let obj = {name:"张三", age:18};
 
 let {name,age} = obj;   // 结果 name=张三, age=18

用在声明参数时

代码语言：javascript复制

 let obj = {name:"张三", age:18};
 
 function test({name, age}) {
     console.log(name, age); // 结果 name=张三, age=18
 }
 
 test(obj)

3. 控制语句

if ... else
switch
while
do ... while
for
for ... in ⭐️
for ... of ⭐️
try ... catch ⭐️

1) for in

主要用来遍历对象

代码语言：javascript复制

 let father = {name:'张三', age:18, study:function(){}};
 
 for(const n in father) {
     console.log(n);
 }

其中 const n 代表遍历出来的属性名
注意1：方法名也能被遍历出来（它其实也算一种特殊属性）
注意2：遍历子对象时，父对象的属性会跟着遍历出来

代码语言：javascript复制

 let son = Object.create(father);
 son.sex = "男";
 
 for(const n in son) {
     console.log(n);
 }

注意3：在 for in 内获取属性值，要使用 [] 语法，而不能用 . 语法

代码语言：javascript复制

 for(const n in son) {
     console.log(n, son[n]);
 }

2) for of

主要用来遍历数组，也可以是其它可迭代对象，如 Map，Set 等

注意：这个时候你可能会想这个换个刚才的for in有什么区别呢？ let arr = [1,2,3,4] for (i in arr){ console.log(i); } 0 1 2 3 如果使用for in遍历数组的话，遍历的是下标，需要arr[i]。

代码语言：javascript复制

 let a1 = [1,2,3];
 
 for(const i of a1) {
     console.log(i);
 }
 
 let a2 = [
     {name:'张三', age:18},
     {name:'李四', age:20},
     {name:'王五', age:22}
 ];
 
 for(const obj of a2) {
     console.log(obj.name, obj.age);
 }
 
 for(const {name,age} of a2) {
     console.log(name, age);
 }

3) try catch

代码语言：javascript复制

 let stu1 = {name:'张三', age:18, address: {city:'北京'}};
 let stu2 = {name:'张三', age:18};
 
 function test(stu) {
     try {
         console.log(stu.address.city)   
     } catch(e) {
         console.log('出现了异常', e.message)
     } finally {
         console.log('finally');
     }
 }

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

javascript 2023腾讯·技术创作特训营第三期

0 人点赞