JavaScript简写骚操作：用代码秀出你的编程功力

1. 变量赋值简写

let variable1 = variable2 ?? 'foo';

这个简写操作相当于下面的代码：

let variable1;
if (variable2 !== null && variable2 !== undefined) {
  variable1 = variable2;
} else {
  variable1 = 'foo';
}

它可以确保variable1在被赋值之前不是null或undefined，否则会将'foo'赋值给variable1。

2. 对象解构赋值

const { name, age } = person;

这个简写操作相当于下面的代码：

const name = person.name;
const age = person.age;

它可以将对象中的属性解构赋值给变量，使代码更加简洁易读。

3. 数组解构赋值

const [first, second] = array;

这个简写操作相当于下面的代码：

const first = array[0];
const second = array[1];

它可以将数组中的元素解构赋值给变量，使代码更加简洁易读。

4. 函数参数默认值

function greet(name = 'world') {
  console.log(`Hello, ${name}!`);
}

这个简写操作相当于下面的代码：

function greet(name) {
  if (name === undefined) {
    name = 'world';
  }
  console.log(`Hello, ${name}!`);
}

它可以为函数的参数设置默认值，使代码更加简洁易读。

5. 箭头函数

const greet = (name) => `Hello, ${name}!`;

这个简写操作相当于下面的代码：

const greet = function(name) {
  return `Hello, ${name}!`;
};

它可以使用更简洁的语法来定义函数，使代码更加简洁易读。

6. 展开运算符

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];

这个简写操作相当于下面的代码：

const numbers = [1, 2, 3];
const newNumbers = numbers.concat([4, 5, 6]);

它可以将数组中的元素展开成一个新的数组，使代码更加简洁易读。

7. 三元运算符

const result = condition ? 'true' : 'false';

这个简写操作相当于下面的代码：

if (condition) {
  result = 'true';
} else {
  result = 'false';
}

它可以使用更简洁的语法来实现条件判断，使代码更加简洁易读。

8. 模板字符串

const name = 'John';
const age = 30;
const message = `Hello, ${name}! You are ${age} years old.`;

这个简写操作相当于下面的代码：

const name = 'John';
const age = 30;
const message = 'Hello, ' + name + '! You are ' + age + ' years old.';

它可以使用更简洁的语法来拼接字符串，使代码更加简洁易读。

9. Set和Map数据结构

const set = new Set([1, 2, 3]);
const map = new Map([
  ['name', 'John'],
  ['age', 30],
]);

这个简写操作相当于下面的代码：

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

const map = new Map();
map.set('name', 'John');
map.set('age', 30);

它可以使用更简洁的语法来创建Set和Map数据结构，使代码更加简洁易读。

10. for-of循环

const numbers = [1, 2, 3];
for (const number of numbers) {
  console.log(number);
}

这个简写操作相当于下面的代码：

const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
  const number = numbers[i];
  console.log(number);
}

它可以使用更简洁的语法来遍历数组，使代码更加简洁易读。

11. for-in循环

const person = {
  name: 'John',
  age: 30,
};
for (const property in person) {
  console.log(`${property}: ${person[property]}`);
}

这个简写操作相当于下面的代码：

const person = {
  name: 'John',
  age: 30,
};
for (let i = 0; i < Object.keys(person).length; i++) {
  const property = Object.keys(person)[i];
  const value = person[property];
  console.log(`${property}: ${value}`);
}

它可以使用更简洁的语法来遍历对象的属性，使代码更加简洁易读。

12. 函数的扩展运算符

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const newNumbers = [...numbers1, ...numbers2];

这个简写操作相当于下面的代码：

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const newNumbers = numbers1.concat(numbers2);

它可以使用更简洁的语法来连接两个数组，使代码更加简洁易读。

13. 对象的扩展运算符

const person1 = {
  name: 'John',
};
const person2 = {
  age: 30,
};
const newPerson = {...person1, ...person2};

这个简写操作相当于下面的代码：

const person1 = {
  name: 'John',
};
const person2 = {
  age: 30,
};
const newPerson = Object.assign({}, person1, person2);

它可以使用更简洁的语法来合并两个对象，使代码更加简洁易读。

14. 类的扩展运算符

class Animal {
  constructor(name) {
    this.name = name;
  }
}
class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}
const dog = new Dog('Fido', 'Golden Retriever');

这个简写操作相当于下面的代码：

class Animal {
  constructor(name) {
    this.name = name;
  }
}
class Dog extends Animal {
  constructor(name, breed) {
    super({name});
    this.breed = breed;
  }
}
const dog = new Dog({name: 'Fido'}, 'Golden Retriever');

它可以使用更简洁的语法来扩展类，使代码更加简洁易读。

15. import和export

import { Component } from 'react';
export default class MyComponent extends Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

这个简写操作相当于下面的代码：

const Component = require('react').Component;
module.exports = class MyComponent extends Component {
  render() {
    return <div>Hello, world!</div>;
  }
};

它可以使用更简洁的语法来导入和导出模块，使代码更加简洁易读。