【技术积累】JavaScript中的基础语法【二】已关闭评论
123 次浏览

A+

所属分类：Web前端

摘要

JavaScript是一种脚本语言，用于为网页添加交互性和动态功能。它可以直接嵌入到HTML中，并通过浏览器解释执行。下面是一些常见的JavaScript编写方式和相应的代码示例：

JavaScript编写方式

内联方式

在HTML文件中直接嵌入JavaScript代码，使用`<script>`标签将代码包裹起来。这种方式适用于简单的脚本。

<!DOCTYPE html> <html> <head>     <title>内联方式</title> </head> <body>     <h1>JavaScript内联方式</h1>     <script>         // JavaScript代码         alert("Hello, World!");     </script> </body> </html>

内部文件方式

将JavaScript代码保存在一个独立的.js文件中，然后在HTML文件中使用`<script>`标签引入该文件。这种方式适用于较复杂的脚本，可以提高代码的可维护性和重用性。

<!DOCTYPE html> <html> <head>     <title>内部文件方式</title>     <script src="script.js"></script> </head> <body>     <h1>JavaScript内部文件方式</h1> </body> </html>

script.js文件中的代码：

// JavaScript代码 alert("Hello, World!");

外部文件方式

将JavaScript代码保存在一个独立的.js文件中，并通过`<script>`标签的src属性引入该文件。这种方式适用于大型项目，可以提高代码的可维护性和加载速度。

<!DOCTYPE html> <html> <head>     <title>外部文件方式</title>     <script src="script.js"></script> </head> <body>     <h1>JavaScript外部文件方式</h1> </body> </html>

script.js文件中的代码：

// JavaScript代码 alert("Hello, World!");

事件处理方式

通过给HTML元素添加事件处理函数，实现对用户操作的响应。可以使用`<script>`标签内联编写事件处理函数，也可以在外部文件中定义函数并通过`<script>`标签引入。

<!DOCTYPE html> <html> <head>     <title>事件处理方式</title>     <script>         function showMessage() {             alert("Button clicked!");         }     </script> </head> <body>     <h1>JavaScript事件处理方式</h1>     <button onclick="showMessage()">Click me</button> </body> </html>

以上是一些常见的JavaScript编写方式和相应的代码示例。根据具体的需求和项目规模，选择适合的方式来编写JavaScript代码。

JavaScript的变量

变量定义

在JavaScript中，变量是用来存储数据的容器。在使用变量之前，需要先定义它。

JavaScript中的变量定义有三种方式：使用var关键字、使用let关键字和使用const关键字。

使用var关键字

var关键字是JavaScript中最早引入的定义变量的方式。使用var关键字定义的变量是函数作用域的，即只在当前函数内部有效。如果在函数内部使用var关键字定义的变量没有使用var关键字声明，则该变量会成为全局变量。

示例：

   function example() {      var x = 10; // 在函数内部定义变量x      console.log(x); // 输出10    }    example();    console.log(x); // 报错，x未定义

使用let关键字

let关键字是ES6引入的定义变量的方式。使用let关键字定义的变量是块级作用域的，即只在当前代码块内部有效。使用let关键字定义的变量不能被重复定义。

示例：

   function example() {      let x = 10; // 在函数内部定义变量x      console.log(x); // 输出10    }    example();    console.log(x); // 报错，x未定义

使用const关键字

const关键字也是ES6引入的定义变量的方式。使用const关键字定义的变量也是块级作用域的，且必须在定义时进行初始化，并且不能被重新赋值。

示例：

   function example() {      const x = 10; // 在函数内部定义常量x      console.log(x); // 输出10    }    example();    x = 20; // 报错，常量x不能被重新赋值

总结：

JavaScript中的变量定义可以使用var、let和const关键字。var关键字定义的变量是函数作用域的，let和const关键字定义的变量是块级作用域的。const关键字定义的变量是常量，不能被重新赋值。

定义规范

JavaScript变量定义规范主要包括变量命名规则和变量声明方式。下面是详细介绍以及正确和错误的例子：

变量命名规则：

- 变量名只能包含字母、数字、下划线(_)和美元符号($)，不能以数字开头。

- 变量名区分大小写。

- 变量名不能使用JavaScript的保留字（如if、for、while等）。

- 变量名应该具有描述性，能够清晰表达变量的用途。

正确的例子：

   var age;    var firstName;    var _count;    var $price;    var myVariable;

反例：

   var 1age; // 以数字开头    var first-name; // 包含连字符    var if; // 使用了保留字

变量声明方式：

- 使用var关键字声明变量，可以在任何地方声明变量，但最好在函数的顶部声明。

- 变量声明后可以选择初始化变量的值，也可以在之后的代码中赋值。

- 变量声明后，可以通过赋值操作改变变量的值。

- 变量应该尽可能地被赋予初始值，以避免未定义的行为。如果变量不需要初始值，可以将其赋值为null。

正确的例子：

   var age = 25;    var firstName = "John";    var lastName;    lastName = "Doe";

反例：

   age = 25; // 没有使用var关键字声明变量    var firstName; firstName = "John"; // 分开声明和赋值

总结：遵循JavaScript变量定义规范可以提高代码的可读性和可维护性。合理命名变量并正确声明和赋值变量可以避免潜在的错误和混淆。

变量赋值

在JavaScript中，变量赋值是将一个值赋给一个变量的过程。JavaScript中的变量赋值可以使用等号（=）进行。

以下是几个变量赋值的案例：

1. 基本的变量赋值：

let name = "John";

在这个例子中，将字符串"John"赋值给变量name。

2. 数字变量赋值：

let age = 25;

在这个例子中，将数字25赋值给变量age。

3. 对象变量赋值：

let person = {   name: "John",   age: 25 };

在这个例子中，将一个包含name和age属性的对象赋值给变量person。

4. 数组变量赋值：

let numbers = [1, 2, 3, 4, 5];

在这个例子中，将一个包含数字的数组赋值给变量numbers。

5. 函数变量赋值：

function sayHello() {   console.log("Hello!"); }  let greeting = sayHello;

在这个例子中，将一个函数赋值给变量greeting。

6. 变量之间的赋值：

let x = 5; let y = x;

在这个例子中，将变量x的值（5）赋值给变量y。

需要注意的是，JavaScript中的变量赋值是通过值传递的方式进行的。这意味着当将一个变量赋值给另一个变量时，实际上是将原始变量的值复制到新变量中，而不是将它们指向同一个内存地址。因此，对新变量的修改不会影响原始变量。

JavaScript的数据类型

JavaScript具有多种数据类型，包括原始类型和引用类型。以下是对每种类型的详细介绍以及相应的代码示例：

原始类型

- 数字（Number）：表示数值，可以是整数或浮点数。

let num = 10;      console.log(typeof num);  // 输出 "number"

- 字符串（String）：表示文本数据，由字符组成。

let str = "Hello, World!";      console.log(typeof str);  // 输出 "string"

- 布尔值（Boolean）：表示真（true）或假（false）的值。

let isTrue = true;      console.log(typeof isTrue);  // 输出 "boolean"

- 空值（Null）：表示一个空值。

let nullValue = null;      console.log(typeof nullValue);  // 输出 "object"，这是 JavaScript 的一个历史遗留问题

- 未定义（Undefined）：表示一个未赋值的变量。

let undefinedValue;      console.log(typeof undefinedValue);  // 输出 "undefined"

- 符号（Symbol）：表示唯一的标识符。

let sym = Symbol("description");      console.log(typeof sym);  // 输出 "symbol"

引用类型

- 对象（Object）：表示一个复杂的数据结构，可以包含多个键值对。

let person = {        name: "John",        age: 30,        city: "New York"      };      console.log(typeof person);  // 输出 "object"

- 数组（Array）：表示一个有序的集合，可以存储多个值。

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

- 函数（Function）：表示可重复使用的代码块。

function greet(name) {        console.log("Hello, " + name + "!");      }      console.log(typeof greet);  // 输出 "function"

这些是 JavaScript 中常见的数据类型及其相应的代码示例。

typeof操作符

JavaScript的typeof是一个用于判断变量类型的操作符。它返回一个字符串，表示给定变量的数据类型。

typeof的用法如下：

typeof variable

其中，variable是要检查类型的变量。

typeof返回的结果有以下几种可能：

"undefined"：如果变量未定义或未声明。
"boolean"：如果变量是布尔值。
"number"：如果变量是数字。
"string"：如果变量是字符串。
"object"：如果变量是对象（包括数组、函数、null等）。
"function"：如果变量是函数。
"symbol"：如果变量是符号。

类型转换

JavaScript中的类型转换是指将一个数据类型转换为另一个数据类型。JavaScript中有两种类型转换：隐式类型转换和显式类型转换。

隐式类型转换

隐式类型转换是在运行时自动发生的，不需要显式地调用转换函数。以下是一些常见的隐式类型转换案例：

- 字符串和数字之间的转换：

var num = 10; var str = "20"; var result = num + str; // 结果为字符串"1020"

在这个例子中，JavaScript将数字10隐式转换为字符串，然后将字符串"20"与之拼接。

- 布尔值和其他类型之间的转换：

var bool = true; var num = 1; var result = bool + num; // 结果为数字2

在这个例子中，JavaScript将布尔值true隐式转换为数字1，然后将数字1与另一个数字相加。

- 对象和原始值之间的转换：

var obj = {name: "John"}; var str = "My name is " + obj; // 结果为"My name is [object Object]"

在这个例子中，JavaScript将对象obj隐式转换为字符串，使用默认的toString()方法将对象转换为字符串。

显式类型转换

显式类型转换是通过调用转换函数来实现的，可以将一个数据类型转换为另一个数据类型。以下是一些常见的显式类型转换案例：

- 字符串转换为数字：

var str = "10"; var num = parseInt(str); // 结果为数字10

在这个例子中，使用parseInt()函数将字符串转换为数字。

- 数字转换为字符串：

var num = 10; var str = num.toString(); // 结果为字符串"10"

在这个例子中，使用toString()方法将数字转换为字符串。

- 布尔值转换为数字：

var bool = true; var num = Number(bool); // 结果为数字1

在这个例子中，使用Number()函数将布尔值转换为数字。

总结：
JavaScript中的类型转换是非常灵活的，可以根据需要进行隐式或显式转换。隐式类型转换在某些情况下可以简化代码，但也可能导致意外的结果。因此，在进行类型转换时，应该注意数据类型的兼容性和转换的结果。

JavaScript转义字符

JavaScript转义字符是一种特殊的字符序列，用于表示一些特殊字符或者在字符串中插入一些不可见的字符。以下是一些常见的JavaScript转义字符：

1. 反斜杠（）：用于转义下一个字符，使其具有特殊的含义。例如，n表示换行，t表示制表符。

console.log("HellonWorld"); // 输出：Hello                              //        World  console.log("HellotWorld"); // 输出：Hello    World

2. 单引号（'）和双引号（"）：用于在字符串中插入引号。

console.log('He said, "Hello!"'); // 输出：He said, "Hello!" console.log("She said, 'Hi!'");   // 输出：She said, 'Hi!'

3. 反斜杠加引号（'和"）：用于在字符串中插入相同类型的引号。

console.log('He said, 'Hello!''); // 输出：He said, 'Hello!' console.log("She said, "Hi!"");   // 输出：She said, "Hi!"

4. 反斜杠加u和四个十六进制数字（uXXXX）：用于表示Unicode字符。

console.log("u0048u0065u006Cu006Cu006F"); // 输出：Hello

5. 反斜杠加八进制数字（XXX）：用于表示八进制字符。

console.log("101102103"); // 输出：ABC

6. 反斜杠加特殊字符（b、f、r、v）：用于表示退格、换页、回车和垂直制表符。

console.log("HellobWorld"); // 输出：HellWorld console.log("HellofWorld"); // 输出：Hello                               //        World console.log("HellorWorld"); // 输出：World console.log("HellovWorld"); // 输出：Hello                               //        World

这些是一些常见的JavaScript转义字符，可以根据需要在字符串中使用它们来表示特殊字符或者插入不可见的字符。

JavaScript的运算符

JavaScript中的运算符用于执行各种操作，例如算术运算、比较运算、逻辑运算等。下面是一些常见的JavaScript运算符及其用法：

算术运算符

- 加法运算符（+）：用于将两个值相加。

   let a = 5;    let b = 3;    let result = a + b; // 8

- 减法运算符（-）：用于将一个值减去另一个值。

   let a = 5;    let b = 3;    let result = a - b; // 2

- 乘法运算符（*）：用于将两个值相乘。

   let a = 5;    let b = 3;    let result = a * b; // 15

- 除法运算符（/）：用于将一个值除以另一个值。

   let a = 6;    let b = 3;    let result = a / b; // 2

- 取余运算符（%）：用于返回两个数相除的余数。

   let a = 7;    let b = 3;    let result = a % b; // 1

比较运算符

- 相等运算符（==）：用于比较两个值是否相等。

   let a = 5;    let b = 3;    let result = a == b; // false

- 不相等运算符（!=）：用于比较两个值是否不相等。

   let a = 5;    let b = 3;    let result = a != b; // true

- 大于运算符（>）：用于判断一个值是否大于另一个值。

   let a = 5;    let b = 3;    let result = a > b; // true

- 小于运算符（<）：用于判断一个值是否小于另一个值。

   let a = 5;    let b = 3;    let result = a < b; // false

- 大于等于运算符（>=）：用于判断一个值是否大于或等于另一个值。

   let a = 5;    let b = 3;    let result = a >= b; // true

- 小于等于运算符（<=）：用于判断一个值是否小于或等于另一个值。

   let a = 5;    let b = 3;    let result = a <= b; // false

逻辑运算符

- 逻辑与运算符（&&）：用于判断两个条件是否同时为真。

   let a = 5;    let b = 3;    let result = (a > 0) && (b > 0); // true

- 逻辑或运算符（||）：用于判断两个条件是否至少有一个为真。

   let a = 5;    let b = 3;    let result = (a > 0) || (b > 0); // true

- 逻辑非运算符（!）：用于取反一个条件的值。

   let a = 5;    let result = !(a > 0); // false

赋值运算符

- 等号运算符（=）：用于将一个值赋给一个变量。

   let a = 5;

- 加等于运算符（+=）：用于将一个值加到变量上，并将结果赋给该变量。

   let a = 5;    a += 3; // a的值变为8

- 减等于运算符（-=）：用于将一个值从变量中减去，并将结果赋给该变量。

   let a = 5;    a -= 3; // a的值变为2

- 乘等于运算符（*=）：用于将一个值乘以变量，并将结果赋给该变量。

   let a = 5;    a *= 3; // a的值变为15

- 除等于运算符（/=）：用于将变量的值除以一个值，并将结果赋给该变量。

   let a = 6;    a /= 3; // a的值变为2

- 取余等于运算符（%=）：用于将变量的值除以一个值的余数，并将结果赋给该变量。

   let a = 7;    a %= 3; // a的值变为1

位运算符

当涉及到处理二进制数据时，位运算符是非常有用的。下面是一些常见的JavaScript位运算符及其用法：

1. 按位与运算符（&）：对两个操作数的每个位执行逻辑与操作。

let a = 5; // 二进制表示为 0101 let b = 3; // 二进制表示为 0011 let result = a & b; // 二进制结果为 0001，即十进制的 1

2. 按位或运算符（|）：对两个操作数的每个位执行逻辑或操作。

let a = 5; // 二进制表示为 0101 let b = 3; // 二进制表示为 0011 let result = a | b; // 二进制结果为 0111，即十进制的 7

3. 按位异或运算符（^）：对两个操作数的每个位执行逻辑异或操作。

let a = 5; // 二进制表示为 0101 let b = 3; // 二进制表示为 0011 let result = a ^ b; // 二进制结果为 0110，即十进制的 6

4. 按位非运算符（~）：对操作数的每个位执行逻辑非操作，即取反。

let a = 5; // 二进制表示为 0101 let result = ~a; // 二进制结果为 1010，即十进制的 -6

5. 左移运算符（<<）：将操作数的位向左移动指定的位数。

let a = 5; // 二进制表示为 0101 let result = a << 2; // 二进制结果为 010100，即十进制的 20

6. 右移运算符（>>）：将操作数的位向右移动指定的位数，符号位不变。

let a = 5; // 二进制表示为 0101 let result = a >> 1; // 二进制结果为 0010，即十进制的 2

7. 无符号右移运算符（>>>）：将操作数的位向右移动指定的位数，符号位也向右移动。

let a = -5; // 二进制表示为 11111111111111111111111111111011 let result = a >>> 1; // 二进制结果为 01111111111111111111111111111101，即十进制的 2147483645

便宜好用的国外VPS推荐