JavaScript 变量与运算符全面解析:从基础到高级应用

        昨天学长说可以放缓一下学习进度,刚好最近期末复习也不是很紧张,所以来重新复习一下js的一些知识点。


一:变量

(1)变量声明

来简单看一下变量的一些知识点。首先是变量声明:变量声明尽量使用数组字母下划线 来举几个例子:

//声明变量尽量使用 字母数字下划线
const web ='1',name='2';
const qianduan =houduan = quanhzan='money'
console.log(qianduan);
console.log(houduan);
console.log(quanhzan);
//js是弱数据类型语言 
// typeof 可以查看变量的类型
console.log(typeof web);

我们可以连续声明多个变量 也可以使用typeof来检查变量的数据类型,来看看输出结果

 (2)变量提升

变量提升的问题出现在使用var关键词声明的变量,来看个例子

//通过var声明的变量会变量提升
console.log(web)//在运行代码,会执行一个解析,会将var声明的变量做一个提前 但是提前的只是声明
var web='houdunren'

运行之后我们发现结果没有报错 也是undefined 这说明var造成的变量提升 只是提升了声明过程,但是忽略了赋值过程。那么下面我将展示一段错误代码:

function hd(){if(false){var web='111'}console.log(web)
}
hd()

来运行一下看看  

发现结果是undefined 本质上就是变量提升造成的问题,在执行代码之前var就将代码的声明提前到最上方 所以函数直接就将未赋值的web打印出来了。所以现在的前端代码为了避免变量提升造成的困扰,建议使用let或const来声明变量或常数。

(3)let与const声明变量与TDZ时间死区

鉴于var声明所带来的缺陷 现在使用let与const 这类具有临时性死区(tdz)的关键词避免变量提升的问题。(知道就行 不过还是建议了解一下时间死区)时间死区:是指变量从进入作用域到被实际声明的一段时间,在这段时间里面 访问该变量会导致错误从而不被提前使用。简单来说就是变量提升被一个错误(ReferenceError)阻断了。这里我就不举实例了。

(4)全局污染

我们先来看一个例子:

function  show() {web='houdunren'
}
show()
console.log(web);

来看看运行结果:

神奇的发现我们并未实际声明web这个变量 但是web变量确实被输出了 并且输出的作用域是全局作用域 这就是全局污染。那么这就会造成一些问题 比如 我们在编写代码之前已经提前引入了第三方库或者其他js文件 这些文件中如果存在同名的变量就会被污染

所以js中所有的变量一定要先声明后使用。

(5) 变量冻结

继续先看一个例子:


const HOST={url:'https://www.houdunren.com/api',port:443
};
// 对象冻结 冻结之后代码不再可以修改
Object.freeze(HOST);
HOST.port=80; 
console.log(HOST);

声明了一个HOST对象变量 使用了Object.freeze方法之后对象里面的数据就不可被修改了

(6)传值与传址

对于简单的数据类型 在传递值的时候是直接把数值传递过去的;但是对于复杂数据类型(对象,数组等),在传递值的时候是将自身数据的内存地址赋值过去的 问题就是当其中一个值发生变动的时候 同地址的另一个变量的值也会变化

//这里是传值 因为简单数据类型占用空间小 所以会直接开辟一块空间
let a=1;
let b=a;
//这里是传址 因为对象等复杂数据类型占用空间很大 所以会赋值前者的地址给后者 
// 造成的问题是两者之间有一个人出现改动 后者的值也会被改动 
// 解决方法是使用深浅拷贝来避免 
let e={};
let f=e;

解决办法也很好解决 就是使用深浅拷贝。对于深浅拷贝另见我的对象那篇文章(附图)

(7)null与undefined

对于简单数据类型来说 声明未赋值 输出的就是undefined 说明值的没有定义的;对于复杂数据(数组 对象)来说声明之后没有具体值 输出之后就是null 可以理解成复杂数据类型就是一个书包 书包没东西那肯定就是null了

二:运算符与逻辑控制

(1)短路逻辑

短路逻辑常备用来设定默认值 与简单的条件执行语句 我们直接来看看例子吧

let a=0;
let b=1
if(a||b){console.log('nihao');
}

只有a或b同时为0 的时候才不会输出。

let f=a||b;
console.log(f);

当a是0的时候 f 就被赋值成 b

function star(num){return '*'.repeat(num||1)//repaat(重复次数)
}
console.log(star(123));

如果没有输入参数的时候 函数只返回一个 *

(2)do while循环

do while循环是一定会执行一次循环体的 简单来看几个例子

打印三角形

let start=0;
do{let n=0;let line = "";  // 创建一个空字符串来存储当前行的星号do{line += "*";  // 将星号添加到字符串中}while(++n<=start)console.log(line);  // 打印完整的行
}while(++start<=5)
// 但是以我个人主见 使用for循环来完成这个效果是更好的

 

(3)打印正三角型

for(let i=0;i<10;i++){for(let j=10-i;j>0;j--){process.stdout.write(' ')}for(let j=i*2-1;j>0;j--){process.stdout.write('*')}process.stdout.write('\n')}

 这里的 process.stdout.write()是在控制台单行输出不自动换行的一种方法 不过基本被弃用了

(4)label(类似于goto 但不同)

当函数运行到break outerLoop的时候 直接跳出指定的循环 直接看例子吧

// 标签(label)配合break使用的例子
outerLoop: 
for(let i = 0; i < 3; i++) {innerLoop:for(let j = 0; j < 3; j++) {console.log(`i=${i}, j=${j}`);if(i === 1 && j === 1) {break outerLoop; // 直接跳出外层循环}}
}

 因为inner标签来第一层循环里面 所以当运行到breakj outerloop的时候就直接跳出了第一层循环(被标记的循环)  ,来看看输出结果

 (5)for in 与 for of

for in可以遍历数组和对象 同样的for of也可以遍历数组 也可以遍历字符串 如果使用for of来遍历对象 必须先获取键名或者值 可能说的很抽象 那直接来看例子

定义一个数组和对象

let obj={uname:'123',age:12,gender:'女'
}
const arr=[1,2,3,45,5,6]

1.使用for in 遍历对象的属性

// 遍历对象属性
for(let k in obj){console.log(obj[k]);
}

2.使用for in遍历数组的值

// 遍历数组 
for (const key in arr) {console.log(arr[key]); 
}  

3.推荐使用for of遍历数组

for (const value of arr) {console.log(value); // 输出: 1, 2, 3, 45, 5, 6
}

4.使用for of遍历字符串

const str = "hello";
for (const char of str) {console.log(char); // 输出: h, e, l, l, o
}

5.使用for of遍历Map集合(键值对集合)

const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {console.log(key, value); // 输出: a 1, b 2
}

6.for of遍历对象的三种类型


// 6. 如果要遍历对象,可以先获取其键、值或条目
// 方法1: 遍历对象的键
for (const key of Object.keys(obj)) {console.log(key, obj[key]);
}// 方法2: 遍历对象的值
for (const value of Object.values(obj)) {console.log(value);
}// 方法3: 遍历对象的键值对
for (const [key, value] of Object.entries(obj)) {console.log(key, value);
}

o而k之,感谢阅读,拜拜

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

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

相关文章

移动语义对性能优化的具体示例

前言 本文章对比了&#xff1a;小中大字符串在普通传值、传值移动、传左值引用、传右值引用、模板完美转发、内联版本等多种测试&#xff0c;对比各个方式的性能优异&#xff1a; 测试代码1 #include <iostream> #include <string> #include <chrono> #incl…

C/C++ 和 OpenCV 来制作一个能与人对弈的实体棋盘机器人

项目核心架构 整个系统可以分为四个主要模块&#xff1a; 视觉感知模块 (Vision Perception Module): 任务: 使用摄像头“看懂”棋盘。工具: C, OpenCV。功能: 校准摄像头、检测棋盘边界、进行透视变换、分割 64 个棋盘格、识别每个格子上的棋子、检测人类玩家的走法。 决策模…

SpringBoot扩展——日志管理!

Spring Boot扩展 在Spring Boot中可以集成第三方的框架如MyBatis、MyBatis-Plus和RabbitMQ等统称为扩展。每一个扩展会封装成一个集成&#xff0c;即Spring Boot的starter&#xff08;依赖组件&#xff09;。starter是一种非常重要的机制&#xff0c;不需要烦琐的配置&#xf…

【JSON-To-Video】AI智能体开发:为视频图片元素添加动效(滑入、旋转、滑出),附代码

各位朋友们&#xff0c;大家好&#xff01; 今天要教大家如何在 JSON - To - Video 中为视频内图片元素添加滑入、旋转、滑出的动效。 如果您还不会封装制作自己的【视频工具插件】&#xff0c;欢迎查看之前的教程&#xff01; AI智能体平台&#xff0c;如何封装自定义短视频…

Spring Boot(九十二):Spring Boot实现连接不上数据库就重启服务

场景: 在线上部署时,若服务器因断电等原因意外重启,项目及其依赖的数据库服务通常需要配置为自动启动。此时,如果数据库服务启动较慢或失败,Spring Boot 项目会因无法建立数据库连接而启动失败。 需求: 为确保项目启动成功,需要让 Spring Boot 项目等待数据库服务完全就…

Debian配置Redis主从、哨兵

前言 Redis的下载安装可参考Centos安装配置Redis6.x&#xff0c;Centos和Debian的步骤基本类似&#xff0c;或自行在网上搜索相关资料 注意&#xff1a;远程连接需放开相应端口 主从 搭建一个一主二从的主从模式 处理conf文件 #进入redis所在目录 cd /tools/redis/redis6 …

虚实交融:数字孪生如何重塑交通与公路勘察设计的未来

当每一条道路、每一座桥梁、每一盏信号灯都在数字世界获得“永生副本”&#xff0c;交通系统从被动响应迈入主动预演的纪元 一、数字孪生的核心定义&#xff1a;超越镜像的动态认知引擎 数字孪生&#xff08;Digital Twin&#xff09;并非简单的三维可视化模型&#xff0c;而是…

vector模拟实现中的迭代器失效问题

首先来看一组代码&#xff1a; iterator insert(iterator pos, const T& x) {// 扩容if (_finish _end_of_storage){size_t len pos - _stare;reserve(capacity() 0 ? 4 : capacity() * 2);pos _stare len;}iterator end _finish - 1;while (end > pos){*(end…

java 设计模式_行为型_22模板模式

22.模板模式 模板方法&#xff08;Template Method&#xff09;作为Java的设计模式之一&#xff0c;一个词概括其优势特点那就是&#xff1a;抽象步骤 首先我们应该抽出共通的东西做一个父类&#xff08;Base类&#xff09;&#xff0c;其次具体的蛋糕制作由子类进一步实现&…

随记:在springboot中websocket的使用

我现在有两种方法 第一种&#xff1a;使用java封装的这个包下的javax.websocket.* 先配置这个配置类 import com.alibaba.nacos.common.utils.CollectionUtils; import org.springframework.stereotype.Component;import javax.websocket.HandshakeResponse; import javax.w…

技术文章大纲:SpringBoot自动化部署实战

技术文章大纲&#xff1a;SpringBoot自动化部署实战 概述 自动化部署的背景与意义SpringBoot在现代化部署中的优势常见自动化部署工具与方案概览&#xff08;Jenkins、Docker、K8s等&#xff09; 环境准备 基础工具要求&#xff1a;JDK、Maven/Gradle、Git服务器环境配置&a…

FastAdmin按钮类功能全解析 class 属性定义不同的交互行为

在 FastAdmin 中&#xff0c;超链接的 class 属性用于定义不同的交互行为和样式。以下是常见 class 配置的用途和区别&#xff1a; btn-dialog 用于触发弹出对话框行为。点击带有此 class 的链接或按钮时&#xff0c;FastAdmin 会自动加载指定的 URL 内容并在模态框中显示。通…

python3字典对象实现解析

文章目录 前言Raymond的方案字典结构字典创建字典插入插入空字典PyDictKeysObject的创建设置索引存储entry 插入非空字典调整大小字典查找联合字典插入 字典查询字典删除 前言 本来以为python字典的实现就是一个哈希表的普通实现&#xff0c;所以在学习基本类型时没去仔细研究…

Word2Vec介绍

前言 当今的大语言模型非常智能&#xff0c;但是你有没有想过这些事情&#xff1a; 机器是怎么理解“国王”和“王后”之间的关系&#xff1f; “猫”和“狗”是怎么在 AI 中“相似以及区分”的&#xff1f; 文本又是怎么变成模型能读懂的数字&#xff1f; 这一切&#xf…

Rsync+sersync实现数据实时同步(小白的“升级打怪”成长之路)

目录 一、rsync部署 push推数据 1、编写rsync配置文件 2、备份测试 3、检验结果 二、rsyncsersync 实现数据实时同步 1、安装sersync服务 2、检验结果 pull拉取数据 1、编写rsync配置文件 2、检验结果 三、脚本编写 1、客户端脚本编写 2、服务器脚本编写 一、rsy…

用 python 开发一个可调用工具的 AI Agent,实现电脑配置专业评价

在人工智能时代&#xff0c;AI Agent凭借其强大的任务处理能力&#xff0c;逐渐成为开发人员手中的得力工具。今天&#xff0c;我们就来一起动手&#xff0c;用Python打造一个能够调用工具的AI Agent&#xff0c;实现根据电脑信息对电脑配置进行专业评价的功能。 一、项目创建…

WSL 安装使用和常用命令

参考官方使用说明&#xff1a; https://learn.microsoft.com/zh-cn/windows/wsl/ 安装wsl: wsl --install --no-distribution --no-distribution&#xff1a;安装 WSL 时不要安装分发版 更新 wsl: wsl --update 设置wsl 默认版本&#xff1a; wsl --set-default-version <…

720全景VR拍摄制作实战教程

720全景VR拍摄制作实战教程 720全景VR拍摄制作是近年来兴起的一种沉浸式影像制作技术。它通过多角度拍摄&#xff0c;并将画面拼接成一个全景视角&#xff0c;使观众获得身临其境的观看体验。本教程将带你从准备阶段到拍摄阶段&#xff0c;再到后期处理阶段&#xff0c;一步步…

什么真正的云原生开发?如何区别本地开发后部署到云端?

以下是关于云原生开发的深度解析&#xff0c;以及与本地开发后迁移上云的本质区别&#xff1a; 一、真正的云原生开发&#xff1a;从理念到实践的全面革新 1. 定义与核心思想 云原生开发是一种以云计算能力为核心的架构设计和开发方法论&#xff0c;其本质是让应用从诞生之初…

从代码学习深度学习 - 词的相似性和类比任务 PyTorch版

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言加载预训练词向量TokenEmbedding 类详解预训练词向量简介 (GloVe)具体含义总结建议应用预训练词向量词相似度knn 函数get_similar_tokens 函数相似词查找示例词类比get_analogy 函数词类比任务…