前端常用简写技巧

前端常用简写技巧

变量声明

let a = 1;  // 变量
const b = 2;  // 常量

扩展运算符

1. 合并数组

const sports = ["羽毛球", "棒球", "篮球"];
const sports1 = ["乒乓球", ...sports];
const sports2= [...sports, "网球"];
console.log(sports1);
console.log(sports2);

2. 克隆数组

const sports = ["羽毛球", "棒球", "篮球"];
const clone = [...sports];
clone.push("排球");
console.log(clone);
console.log(sports);

3. 合并对象

let obj = { c: 3 }
let result = { a: 1, b: 2, ...obj}
console.log(result);  

4. 对象解构赋值

let { a, b, ...c } = { a: 1, b: 2, c: 3, d: 4};
console.log(c);

5. 函数扩展运算符

function fn(a, ...arg){
  console.log(arg);
}
fn(1, 2, 3, 4);

解构赋值

1.数组

const sports = ["羽毛球", "棒球", "篮球"];
const [ball1, ball2, ball3] = sports;
console.log(ball1, ball2, ball3)

2.对象

let { a, b } = {a: 1, b: 2}
console.log(a, b);

3.字符串

let [a, b, c, d, e] = "hello";
console.log(a, b, c, d, e);

4.函数参数（+默认值）

function getHello({x, y} = {x: 10, y: 20}) {
  return [x, y]
}
const result = getHello({x: 1, y: 2});
console.log(result);

5. 交换变量的值

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);

类型转换

字符串转数字

let str = "10";
console.log(typeof str);
let num = + str;   // 隐式转换
console.log(typeof num);

数字转字符串

let num = 1;
console.log(typeof num);
num = "" + num; // 隐士转换
console.log(typeof num);

强制转换为布尔类型

let a = 1;
console.log(typeof !!a);
console.log(!!a);

条件判断

短路写法

// ||
let a;  //  true
let b = 2;
let result = a || (b = 3);
console.log(result);
console.log(b);

// &&
let a;   // true/false
let b = 2;
let result = a && (b = 3);
console.log(result);  
console.log(b);

常见对象操作

对象简写

// 对象简写
let x = 1;
let y = 2;
const obj = {
  x,
  y
}
console.log(obj);

属性表达式

// 对象键名可以是变量
let a = "b";
let obj = {
  [a]: 1
}
console.log(obj);

对象取值

let num1 = false;
let num2 = 20;
num1 ??= num2;  // ?? 判断null或者undefined
console.log(num1);
console.log(num1??num2)

let obj = {};
console.log(obj?.a?.b)

常见简写

模版字面量

let name = "Alan"
let score =30;
let str = `${name}的考试结果： 
${score >=60 ? "及格" : "不及格"}`;
console.log(str);

处理异步

function getUserName() {
  return new Promise(function(resolve, reject){
    setTimeout(() => {
      resolve("Alan");
    }, 3000);
  })
}
function getUserSync() {
  const username = getUserName();
  console.log("getUserSync: ", username);
}
getUserSync();
async function getUserAsync() {
  const username = await getUserName();
  console.log("getUserAsync: ", username);
}
getUserAsync();

强制参数

const mandatory = ()=> {
  throw new Error("Missing parameter !");
}
function getUsernameById(id = mandatory()) {
return "Alan";
}
console.log(getUsernameById());

for循环

const sports = ["羽毛球", "棒球", "篮球"];
for (const sport of sports) {
  console.log(sport);
}

对象数组(list)

let sports = [
  {name: "羽毛球", count: 5},
  {name: "棒球", count: 10},
  {name: "篮球", count: 2}
];
function getSports(arr, value) {
  return arr.find(obj=> obj.name === value);
}
const result= getSports(sports, "棒球");
console.log(result);

箭头函数

const sports = ["羽毛球", "棒球", "篮球"];
sports.forEach(sport=>console.log(sport));

隐式返回值

const calc = x=> (x * 2);
console.log(calc(1));