JavaScript开发日记:JavaScript语法糖和性能优化(一)

news2025/2/6 14:59:20

Alt

常用语法总结

  • 声明变量(var、let和const的定义详解)
  • 定义同类型变量
  • 赋值运算符缩写
  • 判断Null 或 Undefined
  • JavaScript Array includes() 方法
  • 三元运算符

声明变量(var、let和const的定义详解)

Alt
var:既可声明全局变量,也可声明局部变量;
可以重新声明变量,也可以理解为对当前变量重新赋值。

var a = 1;
var a = 2;
console.log(a); // 2 --重新赋值定义
 
var b = 2;
var b;
console.log(b); // 2 --为重新赋值保留原值 

声明提升:未声明变量的时候,先使用了,默认将该变量声明的功能提升到使用之前,但是不会提升该变量的赋值。

console.log(a);	// undefined   变量声明会提升不会报错,但赋值不会提升
var a=1;
console.log(a); // 1

let:块级作用域, 声明的变量只能在其声明的块或子块中可用,且在同一作用域内不可改变;
const:声明变量的时候必需初始化,且之后不可改变。

显式声明变量:用关键字声明的变量,如:var a=1; 局部变量
隐式声明变量:不用关键字,直接声明,如:a = 1; 全局变量

关于对局部变量和全局变量的作用域总结:var和let都是依据就近原则
自己有就用自己的,自己没有就用父类的;自己有时,父类也有的,会导致报错。

function demo(){
 let a = 1;
 if(true) {
 	console.log(a) // 报错
 	let a = 1;
 }
}
demo();

定义同类型变量

Alt定义多个类型相同的变量,可以使用缩写:

// 普通
let a;
let b = 1;

// 缩写
let a,b = 1;

赋值运算符缩写

Alt对变量赋值缩写:

// 普通写法
a = a + 1;
a = a - 1;
a = a * 2;

// 简洁写法
a++;
a--;
a *= 2;

判断Null 或 Undefined

Alt检查变量是Null 或 Undefined:

// 普通
if (a !== null || a !== undefined || a !== "") {
  let b = a;
  console.log(b);
}

// 对 Null 值的检查以及默认赋值
let a = null,
  b = a || "";
console.log("null检查:", b); // 输出 ""
// 对 Undefined 值的检查以及默认赋值
let a = undefined,
  b = a || "";
console.log("undefined检查:", b); // 输出 ""
// 对正常值的检查
let a = "a",
  b = a || "";
console.log(b); // 输出: 'a'

变形:使用空值合并操作符(??)只有当左侧为null和undefined时,才会返回右侧的数,否则返回左侧的数。注意!!a为false的情况有三种 null 、undefined 和空字符串 ‘ ’


const a = null ?? 'a';
console.log(a);
// 'a'const a = 0 ?? 1;
console.log(a);
// 0

JavaScript Array includes() 方法

Alt检测数组是否包含某个元素:

let arry = ['onece', 'tooles', 'lubier'];
 
arry.includes('onece'); 
// true 
 
arry.includes('oneces'); 
// false

变形:用来约束多个条件时缩写:

if (dis === "a" || dis === "b" || dis === "c" || dis === "d") {
  // 判断
}

if (["a", "b", "c", "d"].includes(dis)) {
  // 缩写
}

三元运算符

Alt当我们的 if else 条件中的逻辑比较简单时,可以使用三元条件运算符。

let a;
let b = 10;
if (b > 10) {
  a = true;
} else {
  a = false;
}//false

// 简洁写法
let a = b > 10 ? true : false;
console.log(test); // false

let a = b > 10;
console.log(test); // false

//嵌套
let a = 10;
let b = 20;
let c;
if (a == b ){
 c = 'a';
}else if(a > b){
 c = 'b';
}else if (a < b){
 c = 'c';
}else{
 c = 'd';
}
//等价于下面
 c = a == b ? "a" : a > b ? "b" :a < b ? " c" : "d";

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

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

相关文章

2015年第四届数学建模国际赛小美赛C题科学能解决恐怖主义吗解题全过程文档及程序

2015年第四届数学建模国际赛小美赛 C题 科学能解决恐怖主义吗 原题再现&#xff1a; 为什么人们转向恐怖主义&#xff0c;特别是自杀性恐怖主义&#xff1f;主要原因是什么&#xff1f;这通常是大问题和小问题的结合&#xff0c;或者是一些人所说的“推拉”因素。更大的问题包…

20 Redis进阶 - 运维监控

1、理解Redis监控 Redis运维和监控的意义不言而喻&#xff0c;可以以下三个方面入手 1.首先是Redis自身提供了哪些状态信息&#xff0c;以及有哪些常见的命令可以获取Redis的监控信息; 2.一些常见的UI工具可以可视化的监控Redis; 3.理解Redis的监控体系;2、Redis自身状态及命…

Python学习之判断语句,从基础到实践

文章目录 前言为什么学习判断语句布尔类型和比较运算符if语句的基本格式练习案例&#xff1a;成年人判断 if else 语句if elif else语句练习案例&#xff1a;猜猜心里数字 判断语句的嵌套实战案例关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品…

uniapp使用localStorage存储值遇到的问题

1. 数据存储localStorage llocalStorage是本地存储&#xff0c;是将数据存储到浏览器的方法&#xff0c;一般在跨页面时使用。 uniapp提供数据存和取的api。 uni.setStorage({key:runTime,data:this.sumRTtime.toFixed(3),success:function(){console.log(success);})从图中可…

鸿蒙应用开发者认证(基础、高级)

认证地址 认证地址&#xff1a;HarmonyOS认证地址 注意事项 拥有华为云开发者账号要实名认证 认证方式 在线考试形式、判断题、单选题、多选题 &#xff0c;基础认证90分及格&#xff0c;高级认证80分及格&#xff0c;证书两年有效 不建议各位百度答案&#xff0c;最好看完Ha…

众和策略:12月新批国产网游版号数量过百

上星期五&#xff08;22日&#xff09;&#xff0c;A股冲高回落&#xff0c;三大股指挨近午盘拉升走高&#xff0c;午后再度回落走低&#xff0c;沪指尾盘跌幅收窄。到收盘&#xff0c;沪指跌0.13%报2914.78点&#xff0c;深成指跌0.39%报9221.31点&#xff0c;创业板指跌0.37%…

nvm node 安装与配置

nvm Node Version Manager&#xff08;NVM&#xff09; 是一种用于管理多个主动节点.js版本的工具。 nvm官网下载地址 https://github.com/coreybutler/nvm-windows/releases 如果电脑上之前已经单独安装了node&#xff0c;先卸载&#xff08;可以在控制面板里面卸载&#xf…

【JVM】虚拟机栈与本地方法栈

一、虚拟机栈&#xff08;VM Stack&#xff09; 1.1&#xff09;什么是虚拟机栈   虚拟机栈是用于描述java方法执行的内存模型。   每个java方法在执行时&#xff0c;会创建一个“栈帧&#xff08;stack frame&#xff09;”&#xff0c;栈帧的结构分为“局部变量表、操作数…

引用jquery.js的html5基础页面模板

本专栏是汇集了一些HTML常常被遗忘的知识&#xff0c;这里算是温故而知新&#xff0c;往往这些零碎的知识点&#xff0c;在你开发中能起到炸惊效果。我们每个人都没有过目不忘&#xff0c;过久不忘的本事&#xff0c;就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁…

目标追踪:使用ByteTrack进行目标检测和跟踪

BYTE算法是一种简单而有效的关联方法&#xff0c;通过关联几乎每个检测框而不仅仅是高分的检测框来跟踪对象。这篇博客的目标是介绍ByteTrack以及多目标跟踪&#xff08;MOT&#xff09;的技术。我们还将介绍在样本视频上使用ByteTrack跟踪运行YOLOv8目标检测。 多目标跟踪&…

JoySSL证书

很多人喜欢JoySSL证书&#xff0c;主要是因为 JoySSL 提供了许多有吸引力的特性和优势。首先&#xff0c;JoySSL 提供的 SSL 证书价格相对较为实惠&#xff0c;使得小型企业和个人网站也能够轻松承担起加密保护的成本。其次&#xff0c;JoySSL 提供的证书具有很高的安全性&…

华为云Stack 8.X流量模型分析(三)

三、VPC内部二层流量模型分析 1.不同宿主机下虚拟机互访 VM1发送arp请求&#xff0c;arp报文根据流表到达br-tun&#xff0c;br-tun给予VM1到达VM2的MAC信息。此时arp报文不出宿主机&#xff08;Host1&#xff09;&#xff1b; **注意&#xff1a;**br-tun内的信息是由管理平…

Android Termux安装SSH结合内网穿透实现远程SFTP文件传输

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;安全协议的文件传输协议。与FTP协议相比&#xff0c;SFTP使用了…

Windows操作系统:共享文件夹,防火墙的设置

1.共享文件夹 1.1 共享文件夹的优点 1.2 共享文件夹的优缺点 1.3 实例操作 ​编辑 2.防火墙设置 2.1 8080端口设置 3.思维导图 1.共享文件夹 1.1 共享文件夹的优点 优点 协作和团队合作&#xff1a;共享文件夹使多个用户能够在同一文件夹中协作和编辑文件。这促进了团…

【开源】基于JAVA语言的企业项目合同信息系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 合同审批模块2.3 合同签订模块2.4 合同预警模块2.5 数据可视化模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 合同审批表3.2.2 合同签订表3.2.3 合同预警表 四、系统展示五、核心代码5.1 查询合同…

Rancher小白学习之路

官网&#xff1a;http://docs.rancher.cn/docs/rancher1/rancher-service/load-balancer/_indexhttp://docs.rancher.cn/docs/rancher1/rancher-service/load-balancer/_indexRancher2.5集群搭建&K3S生产环境搭建手册 - 知乎 【rancher教程】十年运维大佬两小时带你搞定ran…

centos7.9中离线安装nginx开启ssl,arm架构

一、首先需要去国内相关镜像库下载相关依赖rpm&#xff1a; http://mirrors.bfsu.edu.cn/centos-altarch/7.9.2009/os/aarch64/ http://mirror.nju.edu.cn/centos-altarch/7.9.2009/os/aarch64/ http://mirrors.tuna.tsinghua.edu.cn/centos-altarch/7.9.2009/os/aarch64/ htt…

Flink 输出至 Redis

【1】引入第三方Bahir提供的Flink-redis相关依赖包 <!-- https://mvnrepository.com/artifact/org.apache.bahir/flink-connector-redis --> <dependency><groupId>org.apache.bahir</groupId><artifactId>flink-connector-redis_2.11</arti…

【数学建模美赛M奖速成系列】Matplotlib绘图技巧(一)

Matplotlib图像基础 写在前面1 基本绘图实例&#xff1a;sin、cos函数图2 plot()函数详解**kwargs参数&#xff1a; 3 matplotlib中绘图的默认配置4 设置图的横纵坐标的上下界5 设置横纵坐标上的记号6 调整图像的脊柱7 添加图例8 给一些特殊点加注释9 子图最后 写在前面 前面我…

轻松设置CentOS IP地址的最终指南:详细的分步说明

轻松设置CentOS IP地址的最终指南 一、引言二、准备工作三、手动设置IP地址四、自动分配IP地址(DHCP)五、使用网络管理工具设置IP地址5.1、使用nmtui工具进行图形化设置5.2、使用nmcli命令行工具进行设置 六、常见问题和解决方案七、总结 一、引言 CentOS操作系统是一种基于Li…