当谈到JavaScript中的常见语法时，有许多重要的概念和语言结构需要理解。

下面是常见的JavaScript语法以及每种语法的实战案例：

1. 变量声明

使用var、let或const关键字声明变量，并分配值给它们。

let name = "John";
const age = 25;

2. 数据类型

JavaScript具有多种内置数据类型，包括字符串、数字、布尔值、对象等。

let message = "Hello";
let count = 10;
let isTrue = true;
let person = { name: "John", age: 25 };

3. 函数声明

使用function关键字定义函数，并执行其中的代码块。

function sayHello() {
  console.log("Hello!");
}
​
sayHello(); // 输出：Hello!

4. 条件语句

使用if语句根据条件执行特定的代码块。

let age = 20;
​
if (age >= 18) {
  console.log("成年");
} else {
  console.log("未成年");
}

5. 循环语句

使用for或while循环重复执行代码块，直到满足退出条件。

for (let i = 0; i < 5; i++) {
  console.log(i);
}
​
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

6. 数组

使用方括号[]创建和访问数组，存储和操作一组值。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出：1

7. 对象

使用花括号{}创建和访问对象，存储和操作键值对。

let person = { name: "John", age: 25 };
console.log(person.name); // 输出："John"

8. 字符串操作

对字符串进行连接、拆分、截取和替换等操作。

let message = "Hello, world!";
console.log(message.length); // 输出：13
console.log(message.substring(0, 5)); // 输出："Hello"

9. 数组方法

使用数组方法如push、pop、splice等对数组进行操作和转换。

let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // 输出：[1, 2, 3, 4]

10. 对象方法

使用对象方法如keys、values、hasOwnProperty等操作对象。

let person = { name: "John", age: 25 };
console.log(Object.keys(person)); // 输出：["name", "age"]

11. 箭头函数

使用箭头函数语法创建匿名函数，简化函数的定义和使用。

let multiply = (x, y) => x * y;
console.log(multiply(2, 3)); // 输出：6

12. 模板字符串

使用反引号`创建包含变量或表达式的字符串模板。

let name = "John";
let message = `Hello, ${name}!`;
console.log(message); // 输出："Hello, John!"

13. 异常处理

使用try和catch块捕获和处理可能引发的异常。

try {
  // 可能会抛出异常的代码
} catch (error) {
  // 处理异常的代码
}

14. 闭包

通过函数嵌套创建闭包，允许内部函数访问外部函数的变量。

function outer() {
  let message = "Hello";

  function inner() {
    console.log(message);
  }

  return inner;
}

let fn = outer();
fn(); // 输出："Hello"

15. 原型继承

使用原型链来实现对象之间的继承关系。

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);

let dog = new Dog("Buddy");
dog.sayHello(); // 输出："Hello, my name is Buddy"

16. 异步编程

使用回调函数、Promise或async/await处理异步操作。

// 回调函数
function fetchData(callback) {
  // 异步操作
  setTimeout(() => {
    let data = "Hello, world!";
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 输出："Hello, world!"
});

// Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
      let data = "Hello, world!";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // 输出："Hello, world!"
});

// async/await
async function fetchData() {
  return new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
      let data = "Hello, world!";
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  let data = await fetchData();
  console.log(data); // 输出："Hello, world!"
}

getData();

17. 模块化

使用import和export关键字将代码模块化，以便在不同文件之间共享代码。

// math.js
export function add(x, y) {
  return x + y;
}

// app.js
import { add } from './math.js';

console.log(add(2, 3)); // 输出：5

18. 面向对象编程

使用类和对象来组织和管理代码。

class Person {
  constructor(name) {
    this.name = name;
  }
​
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
​
let person = new Person("John");
person.sayHello(); // 输出："Hello, my name is John"

19. 解构赋值

从数组或对象中提取值并赋给变量。

// 数组解构赋值
let numbers = [1, 2, 3];
let [a, b, c] = numbers;
console.log(a, b, c); // 输出：1 2 3
​
// 对象解构赋值
let person = { name: "John", age: 25 };
let { name, age } = person;
console.log(name, age); // 输出："John" 25

20. 操作符

JavaScript提供了各种操作符，如算术、比较、逻辑、赋值等。

let x = 5 + 3;
let y = x > 5 ? "greater" : "smaller";
let z = (x > 0) && (y !== "smaller");