js 语法和数据类型-CSDN博客

本文链接：https://blog.csdn.net/qq_22064077/article/details/130244811

本文介绍了JavaScript中的变量声明，包括var、let和const的区别，重点讨论了变量提升和块级作用域。此外，还涵盖了函数声明、常见运算符以及数据类型，强调了类型转换和真假值在条件判断中的影响。

摘要由CSDN通过智能技术生成

js 语法和数据类型

JavaScript 是一种动态类型的解释型语言，它是一种基于对象和事件驱动的语言，常用于开发 Web 应用和桌面应用程序。

JavaScript 的语法包括以下几个部分

变量声明和赋值：使用 var `声明一个变量`、let `声明一个块作用域的局部变量` 或 const `声明一个块作用域的只读常量。` 关键字声明变量，用 = 运算符进行赋值

在 JavaScript 中，var、let 和 const 都是用来声明变量的关键字，它们之间有以下区别:

var 声明的变量可以被重复声明，而 let 和 const 声明的变量不能被重复声明。如果在同一作用域内重复声明 let 或 const 变量，将会抛出错误。但是如果在同一作用域内重复声明 var 变量，不会抛出错误，而是会覆盖之前的值。

var 声明的变量的作用域是整个封闭函数，而 let 和 const 声明的变量的作用域是块级作用域。块级作用域意味着只在当前代码块（例如，函数内部或一对花括号内）中可见，而在外部不可见。这意味着在使用 let 和 const 时，需要更小心地考虑变量的作用域。

使用 var 声明的变量会自动提升到函数作用域的顶部，称为变量提升（hoisting）。这意味着可以在声明变量之前使用变量，但是它的值将是 undefined。然而，使用 let 和 const 声明的变量不会自动提升，如果在声明变量之前使用变量，将会抛出错误。

const 声明的变量必须在声明时进行初始化，并且不能再次赋值。这意味着不能改变 const 变量的引用，但是如果 const 变量引用的是一个对象，对象的属性可以被修改。

综上所述，var 逐渐被 let 和 const 所替代，因为它们具有更严格的作用域和更安全的行为。在使用变量时，应该尽可能地使用 const，只有在确实需要更改变量的值时才使用 let。

变量提升来源

JavaScript 变量的另一个不同寻常的地方是，你可以先使用变量稍后再声明变量而不会引发异常。这一概念称为变量提升；JavaScript 变量感觉上是被“提升”或移到了函数或语句的最前面。但是，提升后的变量将返回 undefined 值。因此在使用或引用某个变量之后进行声明和初始化操作，这个被提升的变量仍将返回 undefined 值。

JavaScript 变量的另一个不同寻常的地方是，你可以先使用变量稍后再声明变量而不会引发异常。这一概念称为变量提升；JavaScript 变量感觉上是被“提升”或移到了函数或语句的最前面。但是，提升后的变量将返回 undefined 值。因此在使用或引用某个变量之后进行声明和初始化操作，这个被提升的变量仍将返回 undefined 值。

/**
 * 例子 1
 */
console.log(x === undefined); // true
var x = 3;


/**
 * 例子 2
 */
// will return a value of undefined
var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();
Copy to Clipboard
上面的例子，也可写作：

/**
 * 例子 1
 */
var x;
console.log(x === undefined); // true
x = 3;

/**
 * 例子 2
 */
var myvar = "my value";

(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "local value";
})();
Copy to Clipboard
由于存在变量提升，一个函数中所有的var语句应尽可能地放在接近函数顶部的地方。这个习惯将大大提升代码的清晰度。

在 ECMAScript 6 中，let和const同样会被提升变量到代码块的顶部但是不会被赋予初始值。在变量声明之前引用这个变量，将抛出引用错误（ReferenceError）。这个变量将从代码块一开始的时候就处在一个“暂时性死区”，直到这个变量被声明为止。

console.log(x); // ReferenceError
let x = 3;
Copy to Clipboard
函数提升
对于函数来说，只有函数声明会被提升到顶部，而函数表达式不会被提升。

/* 函数声明 */

foo(); // "bar"

function foo() {
  console.log("bar");
}


/* 函数表达式 */

baz(); // 类型错误：baz 不是一个函数

var baz = function() {
  console.log("bar2");
};

JavaScript 中有多种运算符可以用于执行算术、比较、逻辑和位运算。下面是常见的 JavaScript 运算符

算术运算符：用于执行基本的数学运算，例如加减乘除和取模。常见的算术运算符包括+，-，*，/和%。
比较运算符：用于比较两个值并返回一个布尔值。常见的比较运算符包括<，>，<=，>=，==和!=。
逻辑运算符：用于将两个或多个表达式组合成一个复合表达式，然后返回一个布尔值。常见的逻辑运算符包括&&，||和!。
位运算符：用于在二进制位级别上执行操作。常见的位运算符包括&，|，^，~，<<和>>。
赋值运算符：用于将一个值赋给变量。常见的赋值运算符包括=，+=，-=，*=，/=，%=，&=，|=，^=，<<=和>>=。
条件运算符：也称为三元运算符，用于根据条件选择不同的值。它由一个问题部分，一个真部分和一个假部分组成。常见的条件运算符是? :。

下面是一些示例代码：

// 算术运算符
let a = 10
let b = 5
console.log(a + b) // 15
console.log(a - b) // 5
console.log(a * b) // 50
console.log(a / b) // 2
console.log(a % b) // 0

// 比较运算符
console.log(a < b) // false
console.log(a > b) // true
console.log(a <= b) // false
console.log(a >= b) // true
console.log(a == b) // false
console.log(a != b) // true

// 逻辑运算符
let c = true
let d = false
console.log(c && d) // false
console.log(c || d) // true
console.log(!c) // false

// 位运算符
let e = 5 // 二进制表示为0101
let f = 3 // 二进制表示为0011
console.log(e & f) // 1
console.log(e | f) // 7
console.log(e ^ f) // 6
console.log(~e) // -6
console.log(e << 1) // 10
console.log(e >> 1) // 2

// 赋值运算符
let g = 10
g += 5
console.log(g) // 15

// 条件运算符
let h = 10
let i = 5
let j = h > i ? "h 大于 i" : "h 不大于 i"
console.log(j) // 'h 大于 i'

JavaScript 控制流语句用于根据条件执行不同的代码块，常用的控制流语句有

条件语句：通过判断条件是否成立，执行不同的代码块。常用的条件语句有 if/else 和 switch/case。

if/else 语句：根据条件判断执行不同的代码块。

let num = 10
if (num > 0) {
  console.log("num is positive")
} else if (num < 0) {
  console.log("num is negative")
} else {
  console.log("num is zero")
}

switch/case 语句：根据表达式的值执行不同的代码块。

let fruit = "apple"
switch (fruit) {
  case "banana":
    console.log("It is a banana.")
    break
  case "apple":
    console.log("It is an apple.")
    break
  case "orange":
    console.log("It is an orange.")
    break
  default:
    console.log("Sorry, I do not know what it is.")
}

循环语句：重复执行相同的代码块，直到满足条件结束循环。常用的循环语句有 for、while 和 do/while。

for 循环：用于重复执行固定次数的代码块。

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

while 循环：用于重复执行满足条件的代码块。

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

do/while 循环：与 while 循环类似，但至少会执行一次循环体。

let i = 0
do {
  console.log(i)
  i++
} while (i < 5)

跳转语句：用于在代码块中跳过某些代码或结束循环。常用的跳转语句有 break、continue 和 return。

break 语句：用于跳出循环，直接执行循环体之后的代码。

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break
  }
  console.log(i)
}

continue 语句：用于跳过循环中的某些代码，继续执行下一次循环。

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue
  }
  console.log(i)
}

return 语句：用于在函数中返回结果并结束函数的执行。

function add(a, b) {
  return a + b
}

JavaScript 中函数是一段可重复执行的代码块，可以接受输入（称为参数），并可以返回值。在 JavaScript 中，函数有多种定义方式

一、函数声明方式

函数声明是定义函数的最基本的方式。使用 function 关键字定义函数，后面跟函数名、参数列表以及函数体。函数声明会被 JavaScript 引擎预编译，因此可以在函数声明之前调用。

function functionName(parameter1, parameter2, ...) {
  // 函数体
  return returnValue; // 返回值可选
}

函数声明调用时直接使用函数名即可。

functionName(argument1, argument2, ...);

二、函数表达式方式

函数表达式是将一个函数定义为表达式，可以将函数赋值给一个变量或者作为其他函数的参数传递。函数表达式需要使用赋值运算符将函数赋值给一个变量。

const functionName = function(parameter1, parameter2, ...) {
// 函数体
return returnValue; // 返回值可选
};

函数表达式调用时需要使用变量名来调用函数。

functionName(argument1, argument2, ...);

三、箭头函数

ES6 引入了箭头函数的语法，箭头函数是一种更简洁的函数表达式。箭头函数使用 => 运算符来定义函数。

const functionName = (parameter1, parameter2, ...) => {
// 函数体
return returnValue; // 返回值可选
};

如果函数体只包含一个表达式，可以省略 {} 和 return 关键字。

const functionName = (parameter1, parameter2, ...) => expression;

箭头函数调用方式与函数表达式相同。

functionName(argument1, argument2, ...);

在 JavaScript 中，函数可以具有任意数量的参数，也可以不返回值。函数可以在任何地方声明或定义，并可以在任何地方调用。

JavaScript 的数据类型

在 JavaScript 中，还有一些特殊的数据类型，如 null、undefined、Boolean、Number、String、Symbol 等。这些数据类型都有各自的特点和用法，需要根据实际情况进行选择和使用。同时，JavaScript 还支持复合数据类型，如 Object、Array、Map、Set 等，这些复合数据类型也是开发中经常使用的重要数据类型。

JavaScript 有 7 种数据类型，分别是：