返回

速成 JavaScript 高手，18 个入门技巧不容错过！

前端

18 个 JavaScript 入门技巧！

  1. 使用箭头函数简化代码
const greet = (name) => "Hello, " + name + "!";

// 等同于
function greet(name) {
  return "Hello, " + name + "!";
}
  1. 利用解构赋值拆分对象和数组
const person = { name: "John", age: 30 };

const { name, age } = person;

console.log(name); // John
console.log(age); // 30
  1. 掌握模板字符串（又名模板字面量）
const name = "John";
const age = 30;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is John and I am 30 years old.
  1. 熟练运用扩展运算符合并对象和数组
const obj1 = { name: "John" };
const obj2 = { age: 30 };

const combinedObj = { ...obj1, ...obj2 };

console.log(combinedObj); // { name: "John", age: 30 }
  1. 善用剩余运算符收集函数参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15
  1. 学习数组解构赋值
const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
  1. 理解箭头函数的 lexical binding（词法作用域）
const person = {
  name: "John",
  greet: function() {
    console.log(this.name); // John
  }
};

person.greet();
  1. 了解箭头函数的箭头函数捕获闭包
const multiplier = (x) => (y) => x * y;

const doubler = multiplier(2);

console.log(doubler(5)); // 10
  1. 掌握高阶函数的应用
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]
  1. 学会使用 filter 方法过滤数组元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]
  1. 熟悉 reduce 方法对数组元素进行累加
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum); // 15
  1. 了解 find 和 findIndex 方法查找数组元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstEvenNumber = numbers.find((num) => num % 2 === 0);

const indexOfFirstEvenNumber = numbers.findIndex((num) => num % 2 === 0);

console.log(firstEvenNumber); // 2
console.log(indexOfFirstEvenNumber); // 1
  1. 掌握 for...of 循环遍历数组
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num); // 1 2 3 4 5
}
  1. 了解 forEach 方法遍历数组
const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => console.log(num)); // 1 2 3 4 5
  1. 熟练运用 includes 方法检查数组是否包含元素
const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false
  1. 学习 splice 方法添加、删除和替换数组元素
const numbers = [1, 2, 3, 4, 5];

numbers.splice(2, 0, 2.5); // 在索引 2 处添加 2.5

console.log(numbers); // [1, 2, 2.5, 3, 4, 5]

numbers.splice(3, 2); // 从索引 3 处删除 2 个元素

console.log(numbers); // [1, 2, 2.5, 5]

numbers.splice(2, 1, 3.5); // 从索引 2 处删除 1 个元素，并替换为 3.5

console.log(numbers); // [1, 2, 3.5, 5]
  1. 掌握 push 和 pop 方法添加和删除数组元素
const numbers = [1, 2, 3, 4, 5];

numbers.push(6); // 在数组末尾添加 6

console.log(numbers); // [1, 2, 3, 4, 5, 6]

numbers.pop(); // 从数组末尾删除最后一个元素

console.log(numbers); // [1, 2, 3, 4, 5]
  1. 了解 shift 和 unshift 方法添加和删除数组元素
const numbers = [1, 2, 3, 4, 5];

numbers.unshift(0); // 在数组开头添加 0

console.log(numbers); // [0, 1, 2, 3, 4, 5]

numbers.shift(); // 从数组开头删除第一个元素

console.log(numbers); // [1, 2, 3, 4, 5]