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

发布时间:2023年12月26日

Alt

声明变量(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";

文章来源:https://blog.csdn.net/loveryunz/article/details/135200893
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。