【JavaScript】运算符与表达式、控制语句、常用API

1. 运算符与表达式

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

1) ===

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

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

typeof 查看某个值的类型

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

2) ||

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

推荐做法

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

你可能的做法

function test(n) {
    if(n === undefined) {
        n = '男';
    }
    console.log(n);
}
1
2
3
4
5
6

还可能是这样

function test(n) {
    n = (n === undefined) ? '男' : n;
    console.log(n);
}
1
2
3
4

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

function test(n) {
    n = n || '男';
    console.log(n);
}
1
2
3
4

它的语法是

值1 || 值2
1

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

3) ?? 与 ?.

??

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

如果用传统办法

function test(n) {
    if(n === undefined || n === null) {
        n = '男';
    }
    console.log(n);
}
1
2
3
4
5
6

用 ??

function test(n) {
    n = n ?? '男';
    console.log(n);
}
1
2
3
4

语法

值1 ?? 值2
1

• 值1 是 nullish（undefine，null），返回值2
• 值1 不是 nullish，返回值1

?.

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

例如，参数可能是

let stu1 = {
    name:"张三",
    address: {
        city: '北京'
    }
};

let stu2 = {
    name:"李四"
}

let stu3 = {
    name:"李四",
    address: null
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

function test(stu) {
    console.log(stu.address.city)//test(stu2)会报错，因为没有address属性，再去获取city就报错
}
1
2
3

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

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

用传统办法

function test(stu) {
    if(stu.address === undefined || stu.address === null) {
        console.log(undefined);
        return;
    }
    console.log(stu.address.city)
}
1
2
3
4
5
6
7

4) …

展开运算符

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

let arr = [1,2,3];

function test(a,b,c) {
    console.log(a,b,c);
}
1
2
3
4
5

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

传统写法

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

展开运算符写法

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

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

作用2：复制数组或对象

数组

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

对象

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

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

注意：展开运算符复制属于浅拷贝，例如

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

let o2 = {...o1};
1
2
3

作用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]
1
2
3
4
5

合并对象

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}
1
2
3
4
5
6
7

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

5) [] {}

解构赋值

[]

用在声明变量时

let arr = [1,2,3];

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

用在声明参数时

let arr = [1,2,3];

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

test(arr);				
1
2
3
4
5
6
7

{}

用在声明变量时

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

let {name,age} = obj;	// 结果 name=张三, age=18
1
2
3

用在声明参数时

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

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

test(obj)
1
2
3
4
5
6
7

2. 控制语句

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

1) for in

主要用来遍历对象

let father = {name:'张三', age:18, study:function(){}};

for(const n in father) {
    console.log(n);
}
1
2
3
4
5

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

let son = Object.create(father);
son.sex = "男";

for(const n in son) {
    console.log(n);
}
1
2
3
4
5
6

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

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

2) for of

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

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3) try catch

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');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

3. API

环境准备

1) 安装 nvm

nvm 即 (node version manager)，好处是方便切换 node.js 版本

安装注意事项

1. 要卸载掉现有的 nodejs
2. 提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
3. 选用【以管理员身份运行】cmd 程序来执行 nvm 命令
4. 首次运行前设置好国内镜像地址

nvm node_mirror http://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
1
2

首先查看有哪些可用版本

nvm list available
1

输出

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    18.7.0    |   16.16.0    |   0.12.18    |   0.11.16    |
|    18.6.0    |   16.15.1    |   0.12.17    |   0.11.15    |
|    18.5.0    |   16.15.0    |   0.12.16    |   0.11.14    |
|    18.4.0    |   16.14.2    |   0.12.15    |   0.11.13    |
|    18.3.0    |   16.14.1    |   0.12.14    |   0.11.12    |
|    18.2.0    |   16.14.0    |   0.12.13    |   0.11.11    |
|    18.1.0    |   16.13.2    |   0.12.12    |   0.11.10    |
|    18.0.0    |   16.13.1    |   0.12.11    |    0.11.9    |
|    17.9.1    |   16.13.0    |   0.12.10    |    0.11.8    |
|    17.9.0    |   14.20.0    |    0.12.9    |    0.11.7    |
|    17.8.0    |   14.19.3    |    0.12.8    |    0.11.6    |
|    17.7.2    |   14.19.2    |    0.12.7    |    0.11.5    |
|    17.7.1    |   14.19.1    |    0.12.6    |    0.11.4    |
|    17.7.0    |   14.19.0    |    0.12.5    |    0.11.3    |
|    17.6.0    |   14.18.3    |    0.12.4    |    0.11.2    |
|    17.5.0    |   14.18.2    |    0.12.3    |    0.11.1    |
|    17.4.0    |   14.18.1    |    0.12.2    |    0.11.0    |
|    17.3.1    |   14.18.0    |    0.12.1    |    0.9.12    |
|    17.3.0    |   14.17.6    |    0.12.0    |    0.9.11    |
|    17.2.0    |   14.17.5    |   0.10.48    |    0.9.10    |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

建议安装 LTS（长期支持版）

nvm install 16.16.0
nvm install 14.20.0
1
2

执行 nvm list 会列出已安装版本

切换到 16.16.0

nvm use 16.16.0
1

切换到 14.20.0

nvm use 14.20.0
1

安装后 nvm 自己的环境变量会自动添加，但可能需要手工添加 nodejs 的 PATH 环境变量

2) 检查 npm

npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像

检查镜像

npm get registry
1

如果返回的不是 https://registry.npm.taobao.org/，需要做如下设置

npm config set registry https://registry.npm.taobao.org/	//实际测试如果不行，可以尝试下面的镜像地址

npm config set registry https://registry.npmmirror.com/
1
2
3

3) 搭建前端服务器

新建一个保存项目的 client 文件夹，进入文件夹执行

npm install express --save-dev
1

修改 package.json 文件

{
  "type": "module",
  "devDependencies": {
    "express": "^4.18.1"
  }
}
1
2
3
4
5
6

• 其中 devDependencies 是 npm install --save-dev 添加的

编写 main.js 代码

import express from 'express'
const app = express()

app.use(express.static('./'))
app.listen(7070)
1
2
3
4
5

执行 js 代码（运行前端服务器）

node main.js
1

前端案例

初步效果

架构

• 前端只有静态页面，使用 Express 服务器
• 后端使用 Tomcat 服务器，通过 SpringBoot、MyBatis 等框架获取数据库数据

1) 查找元素

• document.getElementById - 根据 id 值查找一个元素
• [document|元素].querySelector - 根据选择器查找第一个匹配元素
• [document|元素].querySelectorAll - 根据选择器查找所有匹配元素

例如，有下面的 html 代码

<div>
    <div class="title">学生列表div>
    <div class="thead">
        <div class="row bold">
            <div class="col">编号div>
            <div class="col">姓名div>
            <div class="col">性别div>
            <div class="col">年龄div>
        div>
    div>
    <div class="tbody">
        <div class="row">
            <div class="col">1div>
            <div class="col">张三div>
            <div class="col">男div>
            <div class="col">18div>
        div>
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

执行

document.querySelector('.title'); // 找到 
学生列表
1

执行

document.querySelector('.col'); // 找到 
编号
1

执行

document.querySelectorAll('.col');

/*
  找到的是一个集合
  
编号
  
姓名
  
性别
  
年龄
  
1
  
张三
  
男
  
18
*/
1
2
3
4
5
6
7
8
9
10
11
12
13

执行

const thead = document.querySelector('.thead');

// 只在 thead 元素范围内找
thead.querySelectorAll('.col');

/*
  找到的是一个集合
  
编号
  
姓名
  
性别
  
年龄
*/
1
2
3
4
5
6
7
8
9
10
11
12

根据 id 属性查找既可以用

document.getElementById("id值")
1

也可以用

document.querySelector("#id值")
1

2) 修改元素内容

• 元素.innerHTML
• 元素.textContent

例如

document.querySelector('.title').innerHTML = '侠客列表'
1

效果

innerHTML 会解析内容中的标签，例如

textContext 不会解析内容中的标签

给 innerHTML 或 textContent 赋值空串，可以实现清空标签内容的效果

3) 利用模板

<div>
    <div class="title">学生列表div>
    <div class="thead">
        <div class="row bold">
            <div class="col">编号div>
            <div class="col">姓名div>
            <div class="col">性别div>
            <div class="col">年龄div>
        div>
    div>
    <div class="tbody">
    div>
div>

<template id="tp">
    <div class="row">
        <div class="col">xxdiv>
        <div class="col">xxdiv>
        <div class="col">xxdiv>
        <div class="col">xxdiv>
    div>
template>

<script>
    // 将来这些数据从 java 端返回
    let array = [
        { id: 1, name: '张三', sex: '男', age: 18 },
        { id: 2, name: '李四', sex: '女', age: 17 }
    ];

    const tp = document.getElementById("tp");
    const row = tp.content;
    const [c1,c2,c3,c4] = row.querySelectorAll(".col");
    const tbody = document.querySelector('.tbody');
    for(const {id,name,sex,age} of array) {
        c1.textContent = id;
        c2.textContent = name;
        c3.textContent = sex;
        c4.textContent = age;
        // 复制元素
        const newRow = document.importNode(row, true);
        // 建立父子关系，左边父，右边子
        tbody.appendChild(newRow);
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

4) Fetch API

Fetch API 可以用来获取远程数据，它有两种方式接收结果，同步方式与异步方式

格式

fetch(url, options) // 返回 Promise
1

同步方式

const 结果 = await Promise
// 后续代码
1
2

• await 关键字必须在一个标记了 async 的 function 内来使用
• 后续代码不会在结果返回前执行

异步方式

Promise
	.then(结果 => { ... })
// 后续代码                 
1
2
3

• 后续代码不必等待结果返回就可以执行

例：

在 express 服务器上有 students.json 文件

[
    { "id": 1, "name": "张三", "sex": "男", "age": 18 },
    { "id": 2, "name": "李四", "sex": "女", "age": 17 }
]
1
2
3
4

现在用 fetch api 获取这些数据，并展示

同步方式

<script>
    async function findStudents() {
        try {
            // 获取响应对象
            const resp = await fetch('students.json')

            // 获取响应体, 按json格式转换为js数组
            const array = await resp.json();

            // 显示数据
            const tp = document.getElementById("tp");
            const row = tp.content;
            const [c1,c2,c3,c4] = row.querySelectorAll(".col");
            const tbody = document.querySelector('.tbody');
            for(const {id,name,sex,age} of array) {
                c1.textContent = id;
                c2.textContent = name;
                c3.textContent = sex;
                c4.textContent = age;
                // 复制元素
                const newRow = document.importNode(row, true);
                // 建立父子关系
                tbody.appendChild(newRow);
            }
        } catch (e) {
            console.log(e);
        }

    }
    findStudents()
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• fetch(‘students.json’) 内部会发送请求，但响应结果不能立刻返回，因此 await 就是等待响应结果返回
• 其中 resp.json() 也不是立刻能返回结果，它返回的也是 Promise 对象，也要配合 await 取结果

异步方式

<script>
    fetch('students.json')
        .then( resp => resp.json() )
        .then( array => {
        	// 显示数据
            const tp = document.getElementById("tp");
            const row = tp.content;
            const [c1,c2,c3,c4] = row.querySelectorAll(".col");
            const tbody = document.querySelector('.tbody');
            for(const {id,name,sex,age} of array) {
                c1.textContent = id;
                c2.textContent = name;
                c3.textContent = sex;
                c4.textContent = age;
                // 复制元素
                const newRow = document.importNode(row, true);
                // 建立父子关系
                tbody.appendChild(newRow);
            }
        })
        .catch( e => console.log(e) )


script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 第一个 then 是在响应返回后，才会调用它里面的箭头函数，箭头函数参数即 resp 响应对象
• 第二个 then 是在 json 解析完成后，才会调用它里面的箭头函数，箭头函数参数即解析结果（本例是 array 数组）
• 上一个 then 返回的是 Promise 对象时，才能链式调用下一个 then

跨域问题

• 只要协议、主机、端口之一不同，就不同源，例如
  • http://localhost:7070/a 和 https://localhost:7070/b 就不同源
• 同源检查是浏览器的行为，而且只针对 fetch、xhr 请求
  • 如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
  • 通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
• 更多相关知识请参考
  • 跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

请求响应头解决

• fetch 请求跨域，会携带一个 Origin 头，代表【发请求的资源源自何处】，目标通过它就能辨别是否发生跨域
  • 我们的例子中：student.html 发送 fetch 请求，告诉 tomcat，我源自 localhost:7070
• 目标资源通过返回 Access-Control-Allow-Origin 头，告诉浏览器【允许哪些源使用此响应】
  • 我们的例子中：tomcat 返回 fetch 响应，告诉浏览器，这个响应允许源自 localhost:7070 的资源使用

代理解决

npm install http-proxy-middleware --save-dev
1

在 express 服务器启动代码中加入

import {createProxyMiddleware} from 'http-proxy-middleware'

// ...

app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));
1
2
3
4
5

fetch 代码改为

const resp = await fetch('http://localhost:7070/api/students')
1

或

const resp = await fetch('/api/students')
1

5) 模块化

单个导出 const、let、function

export const a = 10;
export let b = 20;
export function c() {
    console.log('c');
}
1
2
3
4
5

一齐导出

const a = 10;
let b = 20;
function c() {
    console.log('c')
}

export {a,b,c}
1
2
3
4
5
6
7

导出 default，只能有一个

export const a = 10;
export let b = 20;
export function c() {
    console.log('c')
}

export default b;
1
2
3
4
5
6
7

import 语法

<script type="module">
	import 语句
script>
1
2
3

• import 需要遵循同源策略

整个导入

import * as module from '/1.js'
console.log(module.a)		// 输出10
console.log(module.b)		// 输出20
module.c()					// 输出c
1
2
3
4

单个导入

import {a,c} from '/1.js'
console.log(a)				// 输出10
c()							// 输出c
1
2
3

导入默认

import x from '/1.js'
console.log(x)				// 输出20
1
2