发布于 2026-01-06 5 阅读
0

我为什么喜欢 Javascript

我为什么喜欢 Javascript

法语版本 -> Pourquoi j'adore Javascript

我知道,我知道。那些唱反调的人会告诉你,如果你喜欢JavaScript,那你品味很差,而且你根本算不上真正的程序员

你不过是又一个参加了三个月左右的训练营就以为自己能成为软件开发人员的普通人罢了——唱衰者

但我真的很喜欢这门语言。JavaScript 里有一些很酷的功能和技巧,我觉得非常有趣也很有用。也许,我的品味有点差。也许吧。但这不是现在的重点。

在本文中,我将尝试为您介绍或回顾一些 JavaScript 相对于其他编程语言的优秀特性。那么,让我们开始吧。

解构

这是我最喜欢的。我每天都用,一直都在用。

解构语法允许你轻松访问对象或数组内部的数据,并将其赋值给变量。

假设你有一个 Person 对象,它有一些属性,并且内部还有一个嵌套对象。

const person = {
  fName: "Thomas",
  lName: "Durand",
  age: 25,
  job: {
    title: "Software Developer",
    company: "Renault",
  }
}
Enter fullscreen mode Exit fullscreen mode

通常情况下,如果您想从对象中单独访问一个或多个属性,您可以这样做:

const firstName = person.fName,
const lastName = person.lName,
const job = person.job.title,
// ...
Enter fullscreen mode Exit fullscreen mode

对于大型且嵌套复杂的对象来说,这种方法并不方便。因此,解构语法就派上了用场。

很简单,就像声明变量一样。只不过你要把它们放在花括号里,然后把对象本身赋值给它们。好了,少说废话,直接上代码…​​…

// with the same object person
const {fName, lName, job} = person;
Enter fullscreen mode Exit fullscreen mode

如您所见,变量名称必须与人物属性名称相同。不过别担心,您可以根据需要重命名它们。

const {fName: firstName, lName: lastName, job: profession} = person;
Enter fullscreen mode Exit fullscreen mode

瞧!

但它的功能远不止于此。如果要访问嵌套对象,只需用另一个花括号扩展相同的逻辑即可。

const {job: {title, company}} = person;
Enter fullscreen mode Exit fullscreen mode

现在您可以直接使用变量“title”和“company”。如果您想重命名它们,逻辑也一样,只需在变量名后加上冒号即可。

const {job: {title: jobTitle, company: companyName}} = person;
Enter fullscreen mode Exit fullscreen mode

解构语法在编写函数时尤其有用。它在 React 或 Angular 等 JavaScript 框架中被广泛使用。

而不是这样做:

const myFunction = (person) => {
  const {fName, lName, job: {title, company}} = person;
  // ...
}
Enter fullscreen mode Exit fullscreen mode

你可以直接这样写:

const myFunction = ({fName, lName, job: {title, company}}) => {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

解构语法也适用于数组。下面是一个使用数组解构交换变量的简单示例:

const myArray = [1,2];
let [a,b] = myArray;
console.log(a); // 1
console.log(b); // 2

[b,a] = [a,b]; // re-assigns a in b and b in a

console.log(a); // 2
console.log(b); // 1
Enter fullscreen mode Exit fullscreen mode

价差运营商

这是对象和数组的另一个很棒的功能。顾名思义(或者说显而易见),它可以将对象或数组内部的数据展开。例如,它在复制对象或数组时非常有用。

好的,以下是代码:

const personA = {
  name: "Doe",
  firstName: "John", 
  age: 25,
}

let personB = {}, personC = {};

// Say we have another person named John Doe but is 50 years old
// To copy some attributes from the already declared personA
// Normally, we write
Object.assign(personB, personA);
personB.age = 50;

// But with the spread operator, we can write something like this
personC = {...personA, age: 50};
Enter fullscreen mode Exit fullscreen mode

对于数组:

const todos = ["cooking","laundry"];
const tomorrowTodos = ["grocery shopping",...todos, "homework"];
console.log(tomorrowTodos); // ["grocery shopping", "cooking","laundry", "homework"]
Enter fullscreen mode Exit fullscreen mode

将其与解构语法结合起来,我们可以得到像这样的优雅语法:

const myArray = [1,2,3,4,5];
const [a, ...rest] = myArray;
console.log(a); // 1
console.log(rest); // [2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

映射、过滤和简化

好的,这三点并非JavaScript独有。但它们非常有用,所以你必须学会​​如何使用它们。

Map、Filter 和 Reduce 都是数组方法,分别允许您执行以下操作:

  • 对数组中的每个元素执行计算,并返回一个新数组。
  • 筛选出符合某个条件的数组元素,并返回筛选后的新数组。
  • 对数组中的每个元素执行 reducer 函数,并根据对数组元素的计算结果返回一个输出。

每个方法都接受一个回调函数作为其参数之一,该回调函数将应用于数组中的元素。

使用这些特性是一种实现所谓声明式编程的方法。

它是一种专注于解决当前问题的编程风格,通过声明“做什么”而不是“怎么做”来进行编程(与命令式编程相反)。

// Map
// Pluralize words inside an array
const singular = ["pizza", "baggel", "hat"];
const plural = singular.map(word => word + "s");
console.log(plural); // ["pizzas", "baggels", "hats"]

// Filter
// Returns all the even number inside an array
const numbers = [14, 5, 23, 28, 105];
const evenNumbers = numbers.filter(number => number%2 === 0); // returns all the numbers that returns true for the condition number%2===0
console.log(evenNumbers); // [14, 28]

// Reduce
// 1. Simple sum of all the elements in an array
const myArray = [2,3,4,1];
console.log(myArray.reduce((acc, num) => acc + num, 0)) // 10
// acc is the accumulator value and num the current value of the element beign tested
// the second parameter 0 of the reduce is the initial value we want for the accumulator

// 2. Find the common elements accross multiple arrays
function intersection(arrays, ) {
  return [...arguments].reduce((acc,array,i)=>{
    if(i===0){
      acc = [...array];
    } else {
      acc = acc.filter(x=>array.includes(x));
    }
    return acc;
  },[])
}
console.log(intersection([5, 10, 15, 20], [15, 88, 1, 5, 7], [1, 10, 15, 5, 20]));
// [5, 15]
Enter fullscreen mode Exit fullscreen mode

结论

Javascript 还有许多其他很棒的功能,但正确理解和使用这三个概念会让你在众多开发者中脱颖而出。

好了,朋友。希望你喜欢这篇文章(我的第一篇文章)。以后我会写更多关于 JavaScript 的文章,也会写得更深入一些。现在,请告诉我你对这篇文章的看法。

PS:如果我的英语有错误,请见谅。英语既不是我的母语也不是我的第二语言 :)

文章来源:https://dev.to/itsnotaro/why-i-love-javascript-1mb4