每个开发人员都应该知道的 10 个 JavaScript 概念

382 阅读6分钟

原文:10 JavaScript Concepts That Every Developer Should Know.

img

Hi,各位工友们,今天我将探讨每个开发人员都应该知道的 10 个 JavaScript 概念。让我们开始吧......

1. 箭头函数

箭头函数表达式是声明传统函数表达式的另一种方式。但是箭头函数和传统函数有一些区别。

  1. 传统函数有"this"关键字,但箭头函数没有"this"关键字。
  2. 传统函数有“argument”关键字,但箭头函数没有“argument”关键字。
  3. 传统函数可以作为构造函数使用,但是箭头函数不能作为构造函数使用。

如果我们使用箭头函数,我们应该移除function关键字并且在参数和函数体之间添加一个箭头 =>。我们将函数作为一个变量进行存储。如果一个箭头韩式写作一行那么我们可以移除函数体的大括号并且直接返回结果。如果这个箭头函数只有一个参数,那么我们可以移除参数括号。

代码示例:

const sum = (a, b)=> {
  return a+b;
}
console.log(sum(5, 7)) // output, 12const multiply = (a, b) => a*b 
console.log(multiply(5, 7)) // output, 35const double = a => a*2
console.log(double(5)) // output, 10

2. 默认参数

ES6之后的版本我们可以在函数里使用默认参数。如果在调用函数时没有传入参数那么参数值就设置为默认值。如果我们使用函数时没有传入参数或者传入参数的值为undefined,那么在函数体中使用的参数值为默认值。

代码示例:

function add(a, b=5){
  return a+b;
}
console.log(add(7)) // output, 12function add(a, b=5){
  return a+b;
}
console.log(add(7, 4)) // output, 11

3. 立即执行函数表达式

IIFE,全称为 - Immediately Invoked Function Expression(立即执行函数表达式)

如果我们定义了一个函数并且我们希望它能够立即执行,那么我们就可以使用IIFE函数。IIFE函数是一个匿名函数并且这个函数在定义之后会被立即调用。并且我们无法在其他时刻再次调用立即执行函数。

代码示例:

(function (){
  console.log(5+7); 
})(); // output, 12

4. Spread operator(展开运算符)

展开运算符(...)或叫做三点运算符是ES6的特性。我们可以使用展开运算符来合并数组、对象和字符串。它主要用于数组或者字符串的展开。你可以使用展开运算符复制数组的所有元素、对象的所有属性和字符串的所有字符。

代码示例:

const numbers = [1, 8, 5, 15, 10];
console.log([...numbers]) // output, [1, 8, 5, 15, 10]
console.log([...numbers, 65]) // output, [1, 8, 5, 15, 10, 65]const user = {name: 'Shuvo'}
console.log({...user}) // output, {name: 'Shuvo'}
console.log({...user, id: '1'}) // output, {name: 'Shuvo', id: '1'}

5. isNaN()方法

如果调用isNaN()方法时传入的参数为NaN,则返回true,否则返回false

代码示例

console.log(isNaN(12)); // output, false
console.log(isNaN("false")); // output, true
console.log(isNaN("12")); // output, false
console.log(isNaN("")); // output, false
console.log(isNaN("12as")); // output, true

JavaScript有两种数据类型:基本数据类型和引用数据类型(对象、函数)

6. 基本数据类型

JavaScript有7种数据类型,他们分别是

  1. Number
  2. String
  3. Boolean
  4. Undefined
  5. Null
  6. Symbol
  7. BigInt

代码示例:

console.log(typeof(5)) //output, "number"
console.log(typeof('Hello')) //output, "string"
console.log(typeof(true)) //output, "boolean"
console.log(typeof(undefined)) //output, "undefined"
console.log(typeof(null)) //output, "object"**In JavaScript, typeof null is "object". We can consider it a bug in JavaScript and we can think it should be "null".

7. 引用或对象和函数

排除基本数据类型之外,JavaScript其他数据的类型都可以归为引用数据类型。他们分别是

  1. Object
  2. Function

数组、正则表达式和日期都是对象类型

代码示例:

console.log(typeof({name: 'Faysal'})) //output, "object"
console.log(typeof([1, 2, 5])) //output, "object"
console.log(typeof(() => 4+4)) //output, "function"
console.log(typeof(/exp/)) //output, "object"

8. 双等(==) vs 三等(===)

在JavaScript中,双等于用于比较两种之间的值。如果两种的值相等则返回true。但是三等处理比较数据的值,还会比较数据的类型。如果值相同并且类型也相同,结果返回true,否则就返回false。我们应该一直使用三等来比较数据。

代码示例:

console.log(5=="5") // output, true
console.log(5==="5") // output, false
console.log(1==true) // output, true
console.log(1===true) // output, false
console.log(0==false) // output, true
console.log(0===false) // output, false

9. 三元运算符

三元运算符,是条件判断的另外一种方式。这个最简单的条件判断。你可以使用三元运算符实现一行完成条件判断。在三元运算符条件判断使用?来标记条件,使用:标记结果。如果条件判断为真,我们就使用:前表达式返回的值,否则我们就使用:后面表达式的值。我们可以在三元运算符使用嵌套条件。三元运算符条件为真和假时都要编写相应的逻辑处理。

代码示例:

const number1 = 5;
const number2 = 8;
const largest = number1 > number2 ? number1: number2;
console.log(largest) // output, 8

10. 解构

这里有两种解构:数组和对象。

对象解构:我们可以通过解构获取对象的属性,并且这个属性名应该是相同的。我们解构对象的任意属性。在对象解构中,属性的解构是没有任何顺序的。在对象解构中,我们需要使用{}包括我们解构后的属性。在大括号里,我们应该写我们想要从对象中获取到的属性。之后,我们使用赋值运算符=在其右边写上对象。

**数组解构:**我们可以使用解构获取数组元素中的成员,元素并不需要相同的名称。在数组结构中,解构的顺序是有要求的。在数组结构中,我们使用[]作为数组结构的标记。在[],我们按顺序去写元素。如果我们想要获取数组的第二个元素,不想要获取数组的第一个元素,只要使用逗号(,)就可以了。之后在等号右边写上要解构的数组。

在数组解构和对象解构中,我们可以使用展开运算符来或三点运算符来获取数组或者对象的剩余元素/属性

代码示例:

// array destructuring
const [num1, num2] = [5, 10];
console.log(num1, num2) // output, 5, 10
const [, num2] = [5, 10];
console.log(num2) // output, 10
const [num1, ...other] = [5, 10, 15];
console.log(num1, other) // output, 5, [10, 15]// object destructuring
cosnt {num1, num2} = {num1:5, num2:10};
console.log(num1, num2) // output, 5, 10
const {num2, num1} = {num1:5, num2:10};
console.log(num2, num1) // output, 10, 5
const {num2} = {num1:5, num2:10};
console.log(num2) // output, 10
const {num1, ...other} = {num1:5, num2:10, num3: 56};
console.log(num1, other) // output, 5, {num2:10, num3: 56}