Javascript（运算符与表达式、控制语句）

一、运算符与表达式

  • + - * / % **

  • += -= *= /= %= **=

  • ++ --

  • 位运算、移位运算

  • == != > >= < <=

  • === !== ⭐️

  • && || ! ⭐️

  • ?? ?. ⭐️

  • ... ⭐️

  • 解构赋值 ⭐️

1) ===

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

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

typeof 查看某个值的类型

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

2) ||

需求，如果参数 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

3) ?? 与 ?.

??

需求，如果参数 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)
}

4) ...

展开运算符

作用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}

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

5) [] {}

解构赋值

[]

用在声明变量时

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)

二、控制语句

  • 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);
}

  • 其中 const n 代表遍历出来的属性名

  • 注意1：方法名也能被遍历出来（它其实也算一种特殊属性）

  • 注意2：遍历子对象时，父对象的属性会跟着遍历出来

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

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

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

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);
}

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');}
}

三、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/

首先查看有哪些可用版本

nvm list available

输出


|   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    |

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

nvm install 16.16.0
nvm install 14.20.0

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

切换到 16.16.0

nvm use 16.16.0

切换到 14.20.0

nvm use 14.20.0

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

2) 检查 npm

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

检查镜像

npm get registry

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

npm config set registry https://registry.npm.taobao.org/

3) 搭建前端服务器

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

npm install express --save-dev

修改 package.json 文件

{"type": "module","devDependencies": {"express": "^4.18.1"}
}

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

编写 main.js 代码

import express from 'express'
const app = express()app.use(express.static('./'))
app.listen(7070)

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

node main.js

二、前端案例

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">1</div><div class="col">张三</div><div class="col">男</div><div class="col">18</div></div></div>
</div>

执行

document.querySelector('.title'); // 找到 <div class="title">学生列表</div>

执行

document.querySelector('.col'); // 找到 <div class="col">编号</div>

执行

document.querySelectorAll('.col');/*找到的是一个集合<div class="col">编号</div><div class="col">姓名</div><div class="col">性别</div><div class="col">年龄</div><div class="col">1</div><div class="col">张三</div><div class="col">男</div><div class="col">18</div>
*/

执行

const thead = document.querySelector('.thead');// 只在 thead 元素范围内找
thead.querySelectorAll('.col');/*找到的是一个集合<div class="col">编号</div><div class="col">姓名</div><div class="col">性别</div><div class="col">年龄</div>
*/

根据 id 属性查找既可以用

document.getElementById("id值")

也可以用

document.querySelector("#id值")

2) 修改元素内容

  • 元素.innerHTML

  • 元素.textContent

例如

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

给 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">xx</div><div class="col">xx</div><div class="col">xx</div><div class="col">xx</div></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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/658468.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法训练 day32 | 122.买卖股票的最佳时机II 55.跳跃游戏 45.跳跃游戏II

算法训练 day32 | 122.买卖股票的最佳时机II 55.跳跃游戏 45.跳跃游戏II

122.买卖股票的最佳时机II 题目链接:买卖股票的最佳时机 II 如果想到其实最终利润是可以分解的&#xff0c;那么本题就很容易了&#xff01;其实就是把利润分解为以每天为一个维度&#xff0c;我们可以只收集正利润的区间&#xff0c;获取正利润的区间就是股票买卖的区间&…
阅读更多...
python 防止sql注入

python 防止sql注入

python 防止sql注入 在Python中防止SQL注入有以下几种实现方法&#xff1a; 1、使用参数化查询&#xff08;Prepared Statements&#xff09;&#xff1a;这是最常用和推荐的方法。使用参数化查询可以将用户输入的数据与SQL语句进行分离&#xff0c;从而避免将用户输入内容作…
阅读更多...
关于我用AI编写了一个聊天机器人……（8）

关于我用AI编写了一个聊天机器人……（8）

本次更新为1.3.4版本&#xff0c;增加了关机&#xff0c;重启&#xff0c;取消关机/重启的功能。 代码如下&#xff1a; #include <bits/stdc.h> #include <ctime> using namespace std; string userInput; class VirtualRobot { public:void chat() {cout <…
阅读更多...
java安装与入门，MySQL安装与入门，Linux安装与入门，git安装与入门

java安装与入门，MySQL安装与入门，Linux安装与入门，git安装与入门

一.java安装与入门 1,安装idea 2.快捷方式 3.Java入门基础 4.常见的API&#xff08;非常全面&#xff09; 链接&#xff1a;java后端__阿伟_的博客-CSDN博客 二.MySQL安装与入门 1.MySQL安装 2.MySQL入门 链接&#xff1a;数据库入门(MySQL&#xff0c;Redis )__阿伟_的…
阅读更多...
python爬虫之豆瓣首页图片爬取

python爬虫之豆瓣首页图片爬取

网址&#xff1a;https://movie.douban.com/ import requests from lxml import etree import re url https://movie.douban.com headers {User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.289 Safari/5…
阅读更多...
Spring Cloud使用笔记

Spring Cloud使用笔记

1.无需下载nacos&#xff0c;直接在项目中启动即可 git clone https://gitee.com/a594281060/base-nacos.git
阅读更多...
如何快速知道app当前页面是哪一个Activity（2.0升级版)

如何快速知道app当前页面是哪一个Activity（2.0升级版)

点我跳转 如何快速知道app当前页面是哪一个Activity 1.0版本 这个版本是用adb 命令实现的&#xff0c;想看的可以看看&#xff0c;学习一下adb 命令。 今天做了一个非常简易的app来直接监控当前页面Activity&#xff0c;效果直接炸裂&#xff0c;效果图如下&#xff1a; 有需要…
阅读更多...
【Spring连载】使用Spring Data访问Redis（四）----RedisTemplate

【Spring连载】使用Spring Data访问Redis（四）----RedisTemplate

【Spring连载】使用Spring Data访问Redis&#xff08;四&#xff09;----RedisTemplate通过RedisTemplate处理对象Working with Objects through RedisTemplate 一、专注String的便利类二、Serializers 大多数用户可能使用RedisTemplate及其相应的包org.springframework.data.r…
阅读更多...
详解SpringCloud微服务技术栈：深入ElasticSearch（2）——自动补全、拼音搜索

详解SpringCloud微服务技术栈：深入ElasticSearch（2）——自动补全、拼音搜索

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;详解SpringCloud微服务技术栈&#xff1a;深入ElasticSearch&#xff08;1&#xff09;——数据聚合 &#x1f4da;订阅专栏&…
阅读更多...
Windows断开映射磁盘提示“此网络连接不存在”，并且该磁盘直在资源管理器中

Windows断开映射磁盘提示“此网络连接不存在”，并且该磁盘直在资源管理器中

1、打开注册表编辑器 快捷键winR 打开“运行”&#xff0c; 输入 regedit 2、 删除下列注册表中和无法移除的磁盘相关的选项 \HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\MountPoints2\ 3、打开“任务管理器”&#xff0c;重新启动“Windows资源…
阅读更多...
java如何判断空值

java如何判断空值

1 前言 2 List的判空 3 String的判空 4 Optional 4.1 Optional对象的创建 4.2 使用场景 5 总结 1 前言 实际项目中我们会有很多地方需要判空校验&#xff0c;如果不做判空校验则可能产生NullPointerException异常。 针对异常的处理我们在上一篇有提及&#xff1a; 先来看一下…
阅读更多...
网络安全运营专家的职业发展路径

网络安全运营专家的职业发展路径

网络安全运营分析师/专家是企业组织在网络威胁环境中建立强大防御能力的关键因素&#xff0c;承担着监控安全警报、分析潜在威胁以及响应突发性安全事件等职责。一名成功的网络安全运营分析师需要同时具备专业安全能力和软性职场技能&#xff0c;并且不断地学习提升&#xff0c…
阅读更多...
Spring Boot第一天

Spring Boot第一天

SpringBoot概述 Spring Boot是Spring提供的一个子项目&#xff0c;用于快速构建Spring应用程序 传统方式构建Spring应用程序 导入依赖繁琐 项目配置繁琐 为了简化如此繁琐的配置流程&#xff0c;SpringBoot这一子项目提供了如下特性 SpringBoot特性 起步依赖 本质上就是一个…
阅读更多...
代码随想录算法训练营第十六天 | 完全二叉树

代码随想录算法训练营第十六天 | 完全二叉树

目录 完全二叉树 LeetCode 222. 完全二叉树的节点个数 完全二叉树 作者&#xff1a;labuladong 如何求一棵完全二叉树的节点个数呢&#xff1f; // 输入一棵完全二叉树&#xff0c;返回节点总数 int countNodes(TreeNode root);如果是一个普通二叉树&#xff0c;显然只要向…
阅读更多...
Camunda中强大的监听服务

Camunda中强大的监听服务

文章目录 简介创建工程JavaDelegateTaskListenerExecutionListener部署发起流程CustomExecutionListener开始节点CustomExecutionListenerCustomJavaDelegateCustomExecutionListenerCustomTaskListener用户节点 ExpressionDelegate Expression流程图 简介 Camunda预览了很多接…
阅读更多...
MTK8365安卓核心板_联发科MT8365(Genio 350)核心板规格参数

MTK8365安卓核心板_联发科MT8365(Genio 350)核心板规格参数

MTK8365安卓核心板是一款高性能的嵌入式处理器产品&#xff0c;基于联发科领先的SoC架构和先进的12纳米工艺。它集成了四核ARM Cortex-A53处理器&#xff0c;每个核心频率高达2.0 GHz&#xff0c;搭载强大的多标准视频加速器&#xff0c;支持高达1080p 60fps的视频解码。此外&a…
阅读更多...
数据库（SQL）

数据库（SQL）

目录 1 触发器 1.1 触发器简介 1.2 触发器的创建 语法 说明 1.3 示例 2 存储过程 2.1 什么是存储过程&#xff08;函数&#xff09; 2.1.1 存储过程和存储函数的区别 2.2 优势 2.3 应用场景 2.4 存储过程的创建和使用 说明 各参数类型所实现的存储过程 无参数无返…
阅读更多...
[cmake]CMake Error: Could not create named generator Visual Studio 16 2019解决方法

[cmake]CMake Error: Could not create named generator Visual Studio 16 2019解决方法

配置flycv时&#xff0c;cmake以下代码会报错第二行的错误&#xff0c;网上解决方法为第三行代码 cmake .. -G "Visual Studio 16 2019 Win64" CMake Error: Could not create named generator Visual Studio 16 2019 cmake .. -G "Visual Studio 16 2019"…
阅读更多...
【MBtiles数据格式说明】GeoServer改造Springboot番外系列一

【MBtiles数据格式说明】GeoServer改造Springboot番外系列一

一、MBTiles数据格式 MBTiles格式是指由MapBox制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用、管理和分享的规范&#xff0c;是一种用于即时使用和高效传输的规范。MBTiles既可以用作栅格输入数据存储&#xff0c;也可以用作WMSGetMap输出格式。规范有1.0&#xf…
阅读更多...
C++类和对象：多态应用实例

C++类和对象：多态应用实例

利用多态实现计算机组转流程&#xff1a; polymorphic -> 多态 基础零件&#xff08;抽象类&#xff09;&#xff1a; class CPU { public:virtual void calculate() 0; }; class VideoCard { public:virtual void display() 0; }; class Memory { public:virtual void…
阅读更多...
最新文章

Copyright @ 2022~2023