javascript中的简写

参考：

//30个常用的JavaScript简写技巧：
https://blog.csdn.net/donglize521521/article/details/113350478

 

声明变量的简写方式

let x;
let y;
let z=3;

简写为：
let x, y, z=3;

短路求值简写???(没搞懂呢)

//当为一个变量分配另一个值时，想确定原始值是不是null、undefined或者""；可以写成if的多重条件语句

if( a!==null || a!==undefined || a!==""){
    let b = a;
}

可以简写为：
const b=a||"new";

 

三元运算符

当想写if/else语句时，使用三元运算符来代替

let answer;
const x=20;
if(x>10){
    answer="is greater";
} else{
    answer="is lesser";
}

简写为：
answer=x>10?"is greater":"is lesser";

if存在条件的简写方法

if(a===true)
简写为：
if(a)

if(a!==true){
　　//do something...
}
简写为：
if(!a){
　　//do something...
}

if (!false){
　　console.log("aa");
}
简写为：
false || console.log("aa");//aa
false || true && console.log("bb");//bb
true || console.log("ccc");//什么都不输出
console.log(true||console.log("ccc"));//true  返回true
//解释：用“||”的情况下，第一个条件为真时，不检测第二个条件直接返回true;如果第一个条件为假,则会执行第二个条件检测。

false && alert('弹框'); //弹框
console.log(false&&alert("弹框"));//false  返回false
true && alert('true'); //弹框输出true
//解释：用"&&"的情况下,第一个条件如果为false，直接返回false退出；第一个条件true，还会检测第二个条件。

 

对象属性简写

//如果属性名与key名相同，则可以采用ES6的方法
const obj={x:x,y:y}
简写为：
const obj={x,y}

obj{
　　sub:function(){//do something...}
}
简写为：
obj{
　　sub(){//do something...}
}

 

箭头函数简写

sayHello=name=>console.log("hello", name);
setTimeout(()=>console.log("loaded"),2000);
arr.forEach(item=>console.log(item));
//用（）把多行返回值包裹起来return出去
let func=()=>({foo:1});

 

双重非运算简写

Math.floor(4.9)===4;//true
简写为：
~~4.9===4;//true

 

解构赋值过程中的简写

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构；尽可能使用var/let/const声明

数组解构

//数组使用
let [name, url] = ['后盾人', 'houdunren.com'];
console.log(name);

//解构赋值数组
function hd() {
    return ['houdunren', 'hdcms'];
}
let [a, b] = hd();
console.log(a); //houdunren

//剩余解构指用一个变量来接收剩余参数
let [a, ...b] = ['后盾人', 'houdunren', 'hdcms'];
console.log(b);

//如果变量已经初始化过，就要使用() 定义赋值表达式，严格模式会报错所以不建议使用。
let web = "后盾人";
[web, url] = ["hdcms.com", "houdunren.com"];
console.log(web);

//字符串解构
"use strict";
const [...a] = "houdunren.com";
console.log(a); //Array(13)

//非严格模式可以不使用声明指令，严格模式下必须使用声明。所以建议使用 let 等声明。
"use strict";

[web, url] = ["hdcms.com", "houdunren.com"];
console.log(web);

//只赋值部分变量
let [,url]=['后盾人','houdunren.com'];
console.log(url);//houdunren.com

//使用展开语法获取多个值
let [name, ...arr] = ['后盾人', 'hdcms', 'houdunren.com'];
console.log(name, arr); //后盾人 (2) ["hdcms", "houdunren.com"]

//为变量设置默认值
let [name, site = 'hdcms'] = ['后盾人'];
console.log(site); //hdcms

//数组参数的使用
function hd([a, b]) {
    console.log(a, b);
}
hd(['后盾人', 'hdcms']);

 

对象解构

 

//下面是基本使用语法
//对象使用
let info={name:'后盾人',url:'houdunren.com'};
let {name:n,url:u}=info;
console.log(n, u);//后盾人  houdunren.com

//简写：如果属性名和变量名相同可以使用简写的形式
let{name，url}={name:'后盾人',url:'houdunren.com'};
console.log(name);//后盾人

//函数返回值直接解构到变量
function hd() {
  return {
    name: '后盾人',
    url: 'houdunren.com'
  };
}
let {name: n,url: u} = hd();
console.log(n);

//函数传参,直接解构出值
"use strict";
function hd({ name, age }) {
  console.log(name, age); //向军大叔 18
}
hd({ name: "向军", age: 18 });

//系统函数解构练习，这没有什么意义只是加深解构印象
const {random} =Math;//random拿到了Math对象的random方法的代码
console.log(random());

//非严格模式可以不使用声明指令，严格模式下必须使用声明。所以建议使用 let 等声明
// "use strict";
({name,url} = {name:'后盾人',url:'houdunren.com'});
console.log(name, url);

//还是建议使用let等赋值声明
"use strict";
let { name, url } = { name: "后盾人", url: "houdunren.com" };
console.log(name, url);

//如果属性名与赋值的变量名相同可以更简洁
let web = { name: "后盾人",url: "houdunren.com" };
let { name, url } = web;
console.log(name); //后盾人

//只赋值部分变量
let [,url]=['后盾人','houdunren.com'];
console.log(url);//houdunren.com

let {name}= {name:'后盾人',url:'houdunren.com'};
console.log(name); //后盾人

//可以直接使用变量赋值对象属性
let name = "后盾人",url = "houdunren.com";
//标准写法如下
let hd = { name: name, url: url };
console.log(hd);  //{name: "后盾人", url: "houdunren.com"}

//如果属性和值变量同名可以写成以下简写形式
let opt = { name, url };
console.log(opt); //{name: "后盾人", url: "houdunren.com"}

//嵌套解构：可以操作多层复杂数据结构
const hd = {
  name:'后盾人',
  lessons:{
    title:'JS'
  }
}
const {name,lessons:{title}}  = hd;
console.log(name,title); //后盾人 JS

//为变量设置默认值
let [name, site = 'hdcms'] = ['后盾人'];
console.log(site); //hdcms

let {name,url,user='向军大叔'}= {name:'后盾人',url:'houdunren.com'};
console.log(name,user);//向军大叔

//使用默认值特性可以方便的对参数预设
function createElement(options) {
  let {
    width = '200px',
    height = '100px',
    backgroundColor = 'red'
  } = options;

  const h2 = document.createElement('h2');
  h2.style.width = width;
  h2.style.height = height;
  h2.style.backgroundColor = backgroundColor;
  document.body.appendChild(h2);
}
createElement({
    backgroundColor: 'green'
});

//对象参数使用方法
function hd({name,url,user='向军大叔'}) {
    console.log(name,url,user);
}
hd({name:'后盾人','url':'houdunren.com'}); //后盾人 houdunren.com 向军大叔

//对象解构传参
function user(name, { sex, age } = {}) {
  console.log(name, sex, age); //向军大叔 男 18
}
user("向军大叔", { sex: "男", age: 18 });

 

跨行

代码过长可以换行，通常选择在运算符处换行；

声明变量可以换行