JavaScript开发日记：JavaScript语法糖和性能优化（一）

声明变量（var、let和const的定义详解）

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

定义同类型变量

定义多个类型相同的变量，可以使用缩写：

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

// 缩写
let a,b = 1;

赋值运算符缩写

对变量赋值缩写：

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

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

判断Null 或 Undefined

检查变量是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() 方法

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

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)) {
  // 缩写
}

三元运算符

当我们的 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";