JavaScript 的花式操作

2024-02-06 03:47:52

骚操作 1：三元运算符

三元运算符是一种非常简洁的条件判断语句。它可以让你在一行代码中完成 if/else 语句的功能。

let age = 18;
let result = age >= 18 ? "成年人" : "未成年人";
console.log(result); // "成年人"

骚操作 2：箭头函数

箭头函数是一种简化的函数写法。它可以让你省略 function 和花括号，从而使代码更加简洁。

// 传统函数写法
function add(a, b) {
  return a + b;
}

// 箭头函数写法
const add = (a, b) => a + b;

console.log(add(1, 2)); // 3

骚操作 3：展开运算符

展开运算符可以让你轻松地将数组或对象合并。

// 将两个数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 将两个对象合并
const obj1 = { name: "John", age: 18 };
const obj2 = { city: "New York" };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'John', age: 18, city: 'New York' }

骚操作 4：解构赋值

解构赋值可以让你轻松地从数组或对象中提取数据。

// 从数组中提取数据
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

// 从对象中提取数据
const obj = { name: "John", age: 18 };
const { name, age } = obj;
console.log(name, age); // John 18

骚操作 5：模板字符串

模板字符串可以让你轻松地拼接字符串。

// 使用模板字符串拼接字符串
const name = "John";
const age = 18;
const str = `My name is ${name} and my age is ${age}.`;
console.log(str); // My name is John and my age is 18.