前端之js初级篇

js是什么

JS是JavaScript的缩写，它是一种用于编写网页客户端脚本的脚本语言。JavaScript广泛应用于网页开发和构建动态用户界面(UI)，并可以与HTML（超文本标记语言）和CSS（层叠样式表）一起使用。JavaScript提供了许多内置函数和方法，开发人员可以使用这些功能来实现交互性，使网页更加动态和响应式。同时，JavaScript也可以在服务器端运行，作为一种后端编程语言。

js的引入方式

在 JavaScript 中，有以下几种引入外部 JavaScript 文件的方式：

外部 JavaScript 文件

在 HTML 文档中使用 <script> 标签来链接外部 JavaScript 文件，文件路径可以是相对于 HTML 文件的路径或者是绝对路径。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script src="path/to/myScript.js"></script>
  </head>
  <body>
    <!-- HTML content -->
  </body>
<!-- <script src="./js/index.js"></script> -->
</html>

在这个例子中，<script> 标签会从 "path/to/myScript.js" 文件中加载 JavaScript 代码。此方法适用于需要重复使用的 JavaScript 代码。

将<script>标签放在<head>元素中的区别与将其放在<body>元素末尾的区别，主要涉及到脚本的加载时间和网页显示的方式。

将<script>标签放在<head>元素中，表示脚本将在页面加载时被加载并执行。这意味着在脚本加载和执行完毕之前，网页中的内容将无法显示，容易出现白屏等问题。但是一些需要页面初始化时就执行的JavaScript代码必须在<head>元素中执行。

将<script>标签放在<body>元素末尾，则表示脚本将在网页的其他内容加载完毕后才开始加载和执行。这可以加快网页的显示速度，避免了加载大量JavaScript代码造成的延迟和网页失去响应的情况。

总的来说，在代码量少的时候放在<head>中加载更快，但是在代码量较多的情况下或需要优化页面加载速度时，建议将<script>标签放在<body>元素的末尾，因为这样可以让用户更快地看到页面的内容。

内嵌 JavaScript 代码

可以通过 <script> 标签直接在 HTML 页面中嵌入 JavaScript 代码。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to my web page!</h1>
    <script>
      function sayHello() {
        alert("Hello World!");
      }
    </script>
    <button onclick="sayHello()">Say Hello</button>
  </body>
</html>

在这个例子中，函数 sayHello() 直接内嵌在了 <script> 标签中，可以被<button> 元素调用。

使用 JavaScript 模块

可以使用 ES6 的 JavaScript 模块功能来组织 JavaScript 代码，并在不同模块之间共享代码。例如：

// 在 myModule.js 文件中导出一个函数
export function sayHello() {
  alert("Hello World!");
}

// 在 main.js 文件中导入 myModule.js 中的函数，以及其它模块
import { sayHello } from "./myModule.js";

// 调用函数
sayHello();

在这个例子中，使用 export 关键字来导出一个函数，使用 import 关键字从 myModule.js 文件中导入该函数，并在 main.js 文件中调用它。此方式适用于需要将代码划分为独立的功能模块的复杂 JavaScript 应用程序。

以上是 JavaScript 中常见的三种引入外部 JavaScript 文件的方式，选择哪种具体方式取决于具体场景和需要。

字面量、变量与常量

在JavaScript中，可以使用变量和常量来存储和操作值。变量是一个可变的存储器，其存储的值可以随时更改。常量是也是一个存储器，但其存储的值一旦定义就不能被更改。

以下是定义和使用变量和常量的例子：

字面量

字面量是指直接表示某一特定类型值的语法结构。JavaScript 中常用的字面量包括：

数字字面量：例如 123、3.14；
字符串字面量：例如 "Hello World"、'JavaScript'；
布尔值字面量：例如 true、false；
数组字面量：例如 [1, 2, 3]、['a', 'b', 'c']；
对象字面量：例如 {name: 'Tom', age: 18}。

字面量通常用于表示固定的、静态的值，不能更改。在程序执行过程中，字面量所表示的值是不会改变的。如果需要改变这些值，需要重新编写代码。

定义变量

在 JavaScript 中，变量名的命名规则如下：

只能包含字母、数字、下划线（_）和美元符号（$）。
第一个字符必须是字母、下划线或美元符号。
变量名区分大小写，因此 a 和 A 是两个不同的变量名。
不要使用 JavaScript 中的保留字（关键字）作为变量名。例如，不能将变量命名为 if、else、for 等。
使用有意义的变量名，命名要具有可读性和清晰性。

let a = 10;
let discountRate = 0.1; // 使用驼峰命名法
var b = "Hello World";
const PI = 3.14;

console.log(a); // 输出10
console.log(b); // 输出"Hello World"
console.log(PI); // 输出3.14

在上述代码中，let和var关键字用于声明变量，const关键字用于声明常量。变量和常量的值可以是任何类型的数据，例如数字、字符串、布尔值、对象等。

改变变量的值

let a = 10;
a = 20; // 改变a的值
console.log(a); // 输出20

尝试改变常量的值

const PI = 3.14;
PI = 3.14159; // 这会导致错误，因为无法重新赋值常量
console.log(PI); // 这行代码不会执行

在上述代码中，尝试更改常量的值会导致语法错误并阻止代码的执行。

在JavaScript中，除了var关键字外，还有let和const关键字可以用来声明变量和常量。与var不同，let和const关键字存在块级作用域，并且具有提升（hoisting）的行为。建议优先使用let和const关键字来声明变量和常量。

js的基础数据类型

数字（Number）

let age = 30;
let price = 9.99;

字符串（String）

let name = "Lucy";
let message = 'Hello, how are you?';

布尔值（Boolean）

let isMale = true;
let isStudent = false;

null

let myVar = null;

undefined

let myVar;
console.log(myVar); // 输出 undefined

这些都是 JavaScript 的基础数据类型。值得注意的是，JavaScript 中的数值类型是“number”，不区分整数和浮点数。另外，JavaScript 中的字符串可以用单引号或双引号括起来。除此之外，JavaScript 还有一些复杂数据类型，如对象、数组和函数等。

js的数据类型转换

JavaScript中，数据类型转换可以将不同类型的数据转换为目标类型，以便进行计算、比较、打印等操作。下面举例说明几种常见的数据类型转换：

转换字符串为数值类型

str = "123";
let num = Number(str);  // 字符串"123"转换为数字类型123
console.log(typeof num);  // 输出结果为number

转换数值类型为字符串

num = 123;
let str = String(num);  // 数字123转换为字符串类型"123"
console.log(typeof str);  // 输出结果为string

转换布尔值为数值类型

bool = true;
let num = Number(bool);  // 布尔值true转换为数字类型1
console.log(typeof num);  // 输出结果为number

转换数值类型为布尔值

let num = 0;
let bool = Boolean(num);  // 数字0转换为布尔值false
console.log(typeof bool);  // 输出结果为boolean

转换字符串为布尔值

let str = "hello";
let bool = Boolean(str);  // 非空字符串转换为布尔值true
console.log(typeof bool);  // 输出结果为boolean
console.log(bool);

需要注意的是，在进行数据类型转换时需要考虑数据的边界条件和异常情况，以避免类型错误和程序错误的发生。

当转换的变量值为0、NaN、''、null、undefined时转换的结果为false，其余的都是true

js运算符

当我们使用 JavaScript 编写程序时，会用到各种不同类型的运算符。下面举一些例子来说明 JavaScript 中各种类型的运算符：

算术运算符

var a = 10;
var b = 5;
var c = a + b; // 加法运算
var d = a - b; // 减法运算
var e = a * b; // 乘法运算
var f = a / b; // 除法运算
var g = a % b; // 取模运算

比较运算符

var a = 10;
var b = 5;
var c = "5";
console.log(a > b); // true，大于运算
console.log(a == b); // false，等于运算
console.log(b == c); // true，等于运算（自动类型转换）
console.log(b === c); // false，全等于运算（不自动类型转换）
console.log(a != b); // true，不等于运算

逻辑运算符

var a = 10;
var b = 5;
var c = 3;
console.log(a > b && b > c); // true，逻辑与运算
console.log(a < b || b < c); // false，逻辑或运算
console.log(!(a > b)); // false，逻辑非运算

位运算符

var a = 5;
var b = 3;
console.log(a & b); // 1，按位与运算
console.log(a | b); // 7，按位或运算
console.log(~a); // -6，按位取反运算
console.log(a ^ b); // 6，按位异或运算
console.log(a << 1); // 10，左移位运算
console.log(b >> 1); // 1，右移位运算

& 按位与运算：将两个二进制数的每一位进行逻辑与操作，对应位上的两个数都为 1 时结果为 1，否则为 0。例如，5 的二进制数是 101，3 的二进制数是 011，按位与后得到的结果是 001，对应的十进制数为 1。
| 按位或运算：将两个二进制数的每一位进行逻辑或操作，对应位上的两个数都为 0 时结果为 0，否则为 1。例如，5 的二进制数是 101，3 的二进制数是 011，按位或后得到的结果是 111，对应的十进制数为 7。
~ 按位取反运算：将二进制数的每一位进行逻辑非操作，即 0 变成 1, 1 变成 0。例如，5 的二进制数是 101，按位取反后得到的结果是 010，对应的十进制数为 -6。
^ 按位异或运算：将两个二进制数的每一位进行异或操作，对应位上的两个数相同时结果为 0，不同时结果为 1。例如，5 的二进制数是 101，3 的二进制数是 011，按位异或后得到的结果是 110，对应的十进制数为 6。
<< 左移位运算：将一个二进制数的所有位数向左移动指定的位数，右侧补零。例如，5 的二进制数是 101，左移一位后得到的结果是 1010，对应的十进制数为 10。
>>右移位运算：将一个二进制数的所有位数向右移动指定的位数，左侧补符号位（即正负号）。例如，3 的二进制数是 011，右移一位后得到的结果是 001，对应的十进制数为 1。

赋值运算符

var a = 10;
var b = 5;
a += b; // 15，加法赋值
a -= b; // 10，减法赋值
a *= b; // 50，乘法赋值
a /= b; // 10，除法赋值
a %= b; // 0，取模赋值

条件运算符

var a = 10;
var b = 5;
var c = a > b ? "a 大于 b" : "b 大于等于 a";
console.log(c); // a 大于 b，三元运算符

js的一元计算符

++(--）在前先自增(自减) 在运算
++(--）在后，先运算，在自增(自减)
+（-）：正负号

++ 或 -- 运算符放在变量名前面时，表示先进行自增（自减）操作，然后再进行运算。例如：

let a = 5;
let b = ++a; // 此时 a 的值为 6，b 的值也为 6
let c = --a; // 此时 a 的值为 5，c 的值也为 5

++ 或 -- 运算符放在变量名后面时，表示先进行运算，然后再进行自增（自减）操作。例如：

let a = 5;
let b = a++; // 此时 a 的值为 6，b 的值为 5
let c = a--; // 此时 a 的值为 5，c 的值为 6

- 运算符用于将数值变量转换为正数或负数。当它们用在一个正数变量上时，+ 运算符不会对其进行任何改变，- 运算符会将其转换为负数。当它们用在一个负数变量上时，+ 运算符会将其转换为正数，- 运算符不会进行任何改变。例如：

a = -5;
let b = +a; // b 的值为 -5
let c = -a; // c 的值为 5

这里 +a 的值仍然是 -5，因为 + 运算符不会对负号进行任何更改，而 -a 的值为 5，则是因为 - 运算符会将负数转换为其相反数。

条件分支语句

JavaScript 条件分支语句可用于基于不同的条件执行不同的动作。常见的条件分支语句有以下三种：

if 语句

如果指定的条件为 true，则执行一块代码。

if (a > 10) {
    // 如果 a 大于 10，执行这里的代码块
}

if...else 语句

如果指定的条件为 true，则执行第一块代码；否则执行第二块代码。

if (condition) {
    // condition 为 true 时执行的代码块
} else {
    // condition 为 false 时执行的代码块（可选）
}
 // 其中，condition 为逻辑表达式，如果该表达式的结果为 true，则执行 if 后面的代码块，否则执行 else 后面的代码块。

js三元表达式

在 JavaScript 中，三元表达式也称为条件运算符（Conditional operator）。它可以将简单的 if-else 判断语句写成一行代码，语法如下：

条件 ? 表达式1 : 表达式2;

其中，条件是一个布尔值，如果为 true，则执行表达式1，否则执行表达式2。

下面是一个实例，如果变量 num 大于 10，则返回 true，否则返回 false：

let num = 5;
let result = (num > 10) ? true : false;
console.log(result); // 输出 false

上述代码相当于以下 if-else 语句：

let num = 5;
let result;
if (num > 10) {
  result = true;
} else {
  result = false;
}
console.log(result); // 输出 false

需要注意的是，在使用三元表达式时，不应该过多地嵌套或者使用太长的表达式，以免导致代码难以阅读和维护。

switch 语句

根据不同的表达式值选择要执行的代码块。

switch (expression) {
  case value1:
    // 当 expression 的值等于 value1 时执行这里的代码块
    break;
  case value2:
    // 当 expression 的值等于 value2 时执行这里的代码块
    break;
  default:
    // 当 expression 的值不等于任何一个 case 时执行这里的代码块
}

这些条件分支语句可以帮助程序员根据不同的条件执行不同的代码块，增加了程序的灵活性和实用性。

for 循环

JavaScript 中的 for 循环可以用于循环遍历数组或执行固定次数的代码块。for 循环语句的语法如下：

for (initialization; condition; increment) {
  // 待执行的代码块
}

其中

initialization 用于初始化循环计数器的值；
condition 是循环的条件表达式，只有在该表达式的值为 true 时，才会执行循环体中的代码；
increment 通常是循环计数器的递增或递减操作，更新循环计数器的值。

具体来说，每次循环开始前都会执行 initialization 一次，然后先检查 condition 是否 true，如果为 true，则执行循环体中的代码，然后再执行 increment 操作，直到 condition 为 false 才结束循环。

例如，下面的代码使用 for 循环遍历数组并打印每个元素的值：

var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

在这个例子中，i 是循环计数器，它初始化为 0，每次循环递增 1，直到 i 的值等于数组 arr 的长度时，循环结束。在循环体中，使用 arr[i] 访问数组中的每个元素，并将其打印到控制台上。

while 循环和 do-while 循环

JavaScript 中的 while 循环和 do-while 循环语句都可以用于根据条件重复执行代码。

while 循环

while (condition) {
  // 待执行的代码块
}

其中，condition 是循环的条件表达式，只有在该表达式的值为 true 时，才会执行循环体中的代码。在循环体中，需要自己编写控制循环的代码，即修改循环变量的值或者使用 break 或 continue 语句以及其他的一些条件语句。

例如，下面的代码使用 while 循环计算 1 到 100 的整数之和：

let sum = 0;
let i = 1;
while (i <= 100) {
  sum += i;
  i++;
}
console.log(sum);

do-while 循环的语法与 while 循环略有不同，它先执行一次循环体中的代码，然后再检查循环条件是否为 true，如果是，则继续执行循环体中的代码，否则跳出循环。do-while 循环保证循环体中的代码至少被执行一次。

do-while 循环

do {
  // 待执行的代码块
} while (condition);

例如，下面的代码使用 do-while 循环读取用户输入的数字，直到输入的数字大于 10：

let num;
do {
  num = parseInt(prompt("请输入一个数字："));
} while (num <= 10);
alert("输入的数字大于 10");

在这个例子中，我们先通过 prompt 函数读取用户输入的数字，然后检查该数字是否小于等于 10，如果是，则继续循环；否则跳出循环，并弹出提示信息。因为 do-while 循环保证循环体中的代码至少被执行一次，所以我们不需要在循环外部做任何特殊处理。

`break` 和 `continue`

break 和 continue 都是 JavaScript 循环语句中的关键字，可以帮助我们控制循环的执行。

`break` 关键字

break 关键字可以用于立即终止当前循环的执行，并跳出循环。例如，使用 break 关键字可以像下面这样在循环中查找数组中的某个元素：

const arr = [1, 2, 3, 4, 5];
let target = 3;
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === target) {
    console.log(`找到了 ${target}，在数组中的索引为 ${i}`);
    break; // 找到目标元素后立即跳出循环
  }
}

在这个例子中，当循环变量 i 对应的数组元素等于目标元素时，我们使用 console.log 输出该元素值和对应的索引，并使用 break 立即跳出循环。

`continue` 关键字

continue 关键字可以用于终止当前循环的本次迭代，并开始下一次迭代。例如，使用 continue 关键字可以忽略数组中的某些元素：

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    continue; // 忽略数组中的偶数元素
  }
  console.log(arr[i]);
}

在这个例子中，我们使用 if 语句判断数组元素是否为偶数，如果是，则使用 continue 关键字跳过本次循环，继续进行下一次循环；否则，在控制台上输出该元素的值。因为循环变量 i 会自动递增，所以当 continue 关键字执行时，它会直接跳到下一次循环，而不会再执行循环体的剩余部分。

js数组

在 JavaScript 中，数组 (array) 是一种可以存储一组有序数据的数据结构。数组可以存储不同类型的值，例如数字、字符串、布尔值等。

构造数组

let arr = [element1, element2, ..., elementN];

其中，每个 element 表示数组中的一个元素，每个元素之间用逗号 , 分隔，可以是任意类型的值。例如：

let fruits = ['apple', 'banana', 'orange'];
let numbers = [1, 2, 3, 4, 5];
let mixed = ['apple', 2, true, null];

数组的常见操作

数组的 length方法

使用数组的 length 属性来获取数组的长度，它返回的是一个无符号 32 位整数，表示数组中元素的数量。以下是示例代码：

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 输出 3

注意，length 属性是可写的，所以也可以使用它来更改数组的长度。如果将 length 属性设置为大于当前长度的值，则会在数组末尾添加新的空元素；如果将其设置为小于当前长度的值，则会截断数组，删除多余的元素。例如：

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 输出 3

fruits.length = 5;
console.log(fruits.length); // 输出 5
console.log(fruits); // 输出 ['apple', 'banana', 'orange', undefined, undefined]

fruits.length = 2;
console.log(fruits.length); // 输出 2
console.log(fruits); // 输出 ['apple', 'banana']

需要注意的是，通过改变数组的 length 属性并不能真正地添加或删除数组中的元素，只是改变了数组的长度。如果要添加或删除数组中的元素，需要使用其他数组方法，比如 push、pop、shift、unshift、splice 等。

`push()方法`

假设我们有如下数组 fruits：

let fruits = ['apple', 'banana', 'orange'];

push()：将一个或多个元素添加到数组的末尾，并返回数组的新长度。

fruits.push('watermelon'); // 返回 4
console.log(fruits); // 输出 ['apple', 'banana', 'orange', 'watermelon']
fruits.push('grape', 'mango'); // 返回 6
console.log(fruits); // 输出 ['apple', 'banana', 'orange', 'watermelon', 'grape', 'mango']

`pop()方法`

pop()：删除数组最后一个元素，并返回该元素的值。

let lastFruit = fruits.pop(); // 返回 'mango'
console.log(fruits); // 输出 ['apple', 'banana', 'orange', 'watermelon', 'grape']
console.log(lastFruit); // 输出 'mango'

`shift()方法`

shift()：删除数组第一个元素，并返回该元素的值。

let firstFruit = fruits.shift(); // 返回 'apple'
console.log(fruits); // 输出 ['banana', 'orange', 'watermelon', 'grape']
console.log(firstFruit); // 输出 'apple'

`unshift()方法`

unshift()：将一个或多个元素添加到数组的开头，并返回数组的新长度。

fruits.unshift('kiwi'); // 返回 5
console.log(fruits); // 输出 ['kiwi', 'banana', 'orange', 'watermelon', 'grape']
fruits.unshift('pear', 'peach'); // 返回 7
console.log(fruits); // 输出 ['pear', 'peach', 'kiwi', 'banana', 'orange', 'watermelon', 'grape']

`splice()方法`

splice()：删除或添加数组中的元素，并返回被删除元素的数组。

let removed = fruits.splice(2, 1); // 返回 ['kiwi']
console.log(fruits); // 输出 ['pear', 'peach', 'banana', 'orange', 'watermelon', 'grape']
console.log(removed); // 输出 ['kiwi']

fruits.splice(2, 0, 'cherry', 'lemon'); // 从索引 2 的位置开始插入 'cherry' 和 'lemon'，不删除任何元素，返回 []
console.log(fruits); // 输出 ['pear', 'peach', 'cherry', 'lemon', 'banana', 'orange', 'watermelon', 'grape']

let removed2 = fruits.splice(3, 2, 'melon', 'pineapple'); // 从索引 3 的位置开始删除 2 个元素，并插入 'melon' 和 'pineapple'，返回 ['lemon', 'banana']
console.log(fruits); // 输出 ['pear', 'peach', 'cherry', 'melon', 'pineapple', 'orange', 'watermelon', 'grape']
console.log(removed2); // 输出 ['lemon', 'banana']

`slice()方法`

slice()：提取数组中的一部分元素，并返回一个新的数组。

let newFruits = fruits.slice(1, 5); // 返回 ['peach', 'cherry', 'melon', 'pineapple']
console.log(newFruits); // 输出 ['peach', 'cherry', 'melon', 'pineapple']

`concat()方法`

concat()：将两个或多个数组合并为一个数组，并返回新数组。

let moreFruits = ['fig', 'date'];
let allFruits = fruits.concat(moreFruits); // 返回 ['pear', 'peach', 'cherry', 'melon', 'pineapple', 'orange', 'watermelon', 'grape', 'fig', 'date']
console.log(allFruits); // 输出 ['pear', 'peach', 'cherry', 'melon', 'pineapple', 'orange', 'watermelon', 'grape', 'fig', 'date']

`sort()方法`

sort()：按照指定的顺序排序数组中的元素。

fruits.sort(); // 按字符串排序，返回 ['cherry','grape','melon','orange','pear','peach','pineapple','watermelon']
console.log(fruits); // 输出 ['cherry', 'grape', 'melon', 'orange', 'pear', 'peach', 'pineapple', 'watermelon']

`forEach()方法`

forEach()：对数组中的每个元素执行指定的操作。

fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 输出
// 'cherry'
// 'grape'
// 'melon'
// 'orange'
// 'pear'
// 'peach'
// 'pineapple'
// 'watermelon'

数组元素的查询

在 JavaScript 中，有多种方法可以查询数组中的元素，下面就来介绍几个常用的方法。

`indexOf()方法`

indexOf()：返回数组中指定元素的索引值。如果未找到该元素，则返回 -1。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.indexOf('banana')); // 输出 1
console.log(fruits.indexOf('peach')); // 输出 -1

`lastIndexOf()方法`

lastIndexOf()：从数组末尾开始搜索指定元素，并返回它在数组中的最后一个索引值。如果未找到该元素，则返回 -1。

let fruits = ['apple', 'banana', 'orange', 'banana'];
console.log(fruits.lastIndexOf('banana')); // 输出 3
console.log(fruits.lastIndexOf('peach')); // 输出 -1

`includes()方法`

includes()：判断数组是否包含指定元素，返回一个布尔值。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // 输出 true
console.log(fruits.includes('peach')); // 输出 false

`find()方法`

find()：查找数组中符合条件的第一个元素，并返回该元素。如果未找到符合条件的元素，则返回 undefined。

let nums = [10, 20, 30, 40];
let result = nums.find(function(num) {
  return num > 25;
});
console.log(result); // 输出 30

`filter()方法`

filter()：返回数组中符合条件的所有元素组成的新数组。

let nums = [10, 20, 30, 40];
let result = nums.filter(function(num) {
  return num > 25;
});
console.log(result); // 输出 [30, 40]

`some()方法`

some()：判断数组中是否存在符合条件的元素，返回一个布尔值。

let nums = [10, 20, 30, 40];
let result = nums.some(function(num) {
  return num > 25;
});
console.log(result); // 输出 true

`every()方法`

every()：判断数组中所有元素是否都符合条件，返回一个布尔值。

let nums = [10, 20, 30, 40];
let result = nums.every(function(num) {
  return num > 25;
});
console.log(result); // 输出 false

js 的数组转换

JavaScript 中可以使用一些函数将数组进行转换，这里介绍常用的四种转换方法：toString()、join()、split() 和 concat()。

toString(): 将数组转换为字符串

let arr = [1, 2, 3, 4];
let str = arr.toString(); 
console.log(str); // 输出 "1,2,3,4"

join(): 将数组中的元素以指定分隔符连接成一个字符串

let arr = [1, 2, 3, 4];
let str = arr.join("、"); 
console.log(str); // 输出 "1、2、3、4"

split(): 将字符串以指定分隔符拆分成一个数组

let str = "1、2、3、4";
let arr = str.split("、"); 
console.log(arr); // 输出 [1, 2, 3, 4]

concat(): 连接两个或多个数组，返回新数组

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];
let arr = arr1.concat(arr2, arr3);
console.log(arr); // 输出 [1, 2, 3, 4, 5, 6]

需要注意的是，上述四种方法都不会改变原数组的值，而是返回一个新的数组或字符串。如果要改变原数组的值，可以使用 push()、unshift() 等方法添加新元素，或使用 pop()、shift() 等方法删除指定元素。

js函数

函数的概念

JavaScript 中的函数是一种基本的代码块，可以重复使用，使代码更简洁，易于维护，也可以帮助程序员实现更高效的编程方式。

js 函数的声明与调用

JavaScript 中声明函数的语法格式为：

function 函数名(参数列表) {
  函数体
}

函数名称应该具有描述性，并且遵循驼峰命名规则。

JavaScript 中调用函数的语法格式为：

函数名(参数列表);

调用函数时，需要传递相应数目的参数，参数数量和类型应该与函数定义时的参数数量和类型保持一致。

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

let num1 = 3;
let num2 = 5;
let result = add(num1, num2);
console.log(result); // 输出 8

函数的返回值

JavaScript 中函数可以有返回值，可以使用 return 语句返回任何数据类型的值。如果函数没有返回语句，则返回 undefined。

function multiply(a, b) {
  return a * b;
}

let num1 = 3;
let num2 = 5;
let result = multiply(num1, num2);
console.log(result); // 输出 15

函数表达式

在 JavaScript 中，函数表达式是一种创建函数的方式，它可以将一个函数赋值给一个变量或属性，或作为一个函数参数传递。

函数表达式通常用于创建匿名函数，即没有名称的函数。匿名函数可以在被声明时或稍后使用，也可以传递给其他函数作为参数。以下是一个简单的函数表达式示例：

let add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 输出 5

在上面的代码中，将函数表达式 function(a, b){return a+b;} 赋值给一个变量 add，通过变量名 add 调用该函数，并传递两个参数，返回结果为 5。

另外，函数表达式还支持命名函数表达式，这是一种将函数声明与函数表达式结合起来的方式。命名函数表达式允许我们在内部函数之外使用函数名称，从而提高代码可读性。以下是一个使用命名函数表达式创建函数的示例：

let factorial = function factorial(n) {
  if (n <= 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
};

console.log(factorial(5)); // 输出 120

在这个示例中，创建了一个名为 factorial 的函数，它是一个命名函数表达式。通过将该函数赋值给变量 factorial，我们可以在函数体内部使用函数名称，从而进行递归调用。

函数的数据类型

在 JavaScript 中，函数是一种特殊的对象类型。因此，函数也拥有自己的数据类型，即 "function"。

使用 typeof 运算符检查函数数据类型时，会返回 "function"。例如：

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

console.log(typeof greet); // 输出 "function"

上述代码中，我们定义了一个名为 greet 的函数。通过使用 typeof greet，我们可以检查函数 greet 的数据类型，并得到 "function" 作为结果。

除了函数本身是 "function" 类型之外，函数的返回值也可以是任何数据类型，包括数字、字符串、对象等。因此，函数在 JavaScript 中被广泛应用于数据处理、控制流和以可重用的方式组织代码。

总之，在 JavaScript 中，函数是一种特殊的对象类型，其数据类型为 "function"。

js对象

JavaScript中的对象是一系列键值对的集合，其中每个值都可以是任何JavaScript数据类型，包括数字、字符串、布尔值、函数、甚至是其他对象等

JavaScript中创建对象的方式有多种，下面我举几个例子说明常见的四种方式：

使用对象字面量创建对象

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

__new Object()方法创建对象

在 JavaScript 中，我们可以使用 __new Object() 方法来创建一个对象。这个方法会创建一个空的对象，就像使用对象字面量 {} 一样。

下面是使用 __new Object() 方法创建对象的示例代码：

let person = __new Object();
person.name = "Alice";
person.age = 25;
person.sayHello = function() {
  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
};

person.sayHello(); // 输出 "Hello, my name is Alice and I'm 25 years old."

在上述示例中，我们首先使用 __new Object() 方法创建一个空的对象实例，然后通过点语法设置该对象的属性和方法。最后，我们可以使用该对象的方法来输出相应的信息。

需要注意的是，使用 __new Object() 方法创建对象比较麻烦，因为我们需要手动为对象添加属性和方法。相对而言，使用构造函数或对象字面量来创建对象更为常见和简便。

工厂函数方法创建对象

在 JavaScript 中，我们可以使用工厂函数来创建对象。工厂函数本质上是一个返回对象的函数，它可以通过传入参数来定制化地创建对象。

下面是使用工厂函数创建对象的示例代码：

function createPerson(name, age) {
  let person = {};
  person.name = name;
  person.age = age;
  person.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  };
  return person;
}

let person1 = createPerson("Alice", 25);
person1.sayHello(); // 输出 "Hello, my name is Alice and I'm 25 years old."

let person2 = createPerson("Bob", 30);
person2.sayHello(); // 输出 "Hello, my name is Bob and I'm 30 years old."

在上述示例中，createPerson 函数是一个工厂函数，用于创建对象实例。在函数内部，我们首先创建一个空对象 person，然后为该对象设置属性和方法，并最终将其返回。通过调用 createPerson 函数并传入不同的参数值，我们可以创建多个相似的对象实例。

使用工厂函数创建对象具有一定的灵活性，因为我们可以根据需要定制化地创建对象。同时，它也比较容易理解和维护代码。但需要注意的是，由于每次调用工厂函数都会创建一个新的对象实例，所以这种方式可能会导致内存浪费。

对象数据的调用和更改

对象数据的调用和更改可以使用点语法或方括号语法来实现。

点语法是指通过对象名和属性名之间使用点号.来访问对象的属性，如下例所示：

let person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

console.log(person.name); // 输出 "Alice"
console.log(person.age); // 输出 25
person.sayHello(); // 输出 "Hello, my name is Alice and I'm 25 years old."

person.age = 30; // 修改年龄属性
console.log(person.age); // 输出 30

在上述示例中，我们首先定义了一个对象 person，包含三个属性：name、age 和 sayHello 方法。然后使用点语法访问该对象的属性，并通过该对象的方法输出信息。最后，我们修改了该对象的 age 属性的值。

方括号语法则是使用对象名和属性名之间使用方括号[]来访问对象的属性，如下例所示：

let person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

console.log(person["name"]); // 输出 "Alice"
console.log(person["age"]); // 输出 25
person["sayHello"](); // 输出 "Hello, my name is Alice and I'm 25 years old."

person["age"] = 30; // 修改年龄属性
console.log(person["age"]); // 输出 30

在上述示例中，我们使用方括号语法访问了对象的属性，并通过该对象的方法输出信息。最后，我们也修改了该对象的 age 属性的值。

需要注意的是，无论是点语法还是方括号语法，都可以用来访问和修改对象的属性。但对于属性名中包含特殊字符或数字的情况，方括号语法是更为通用的一种方式。

对象的常见方法

下面是对象的常见方法的示例：

let person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

// Object.keys() 方法：返回对象所有的键名数组
let keys = Object.keys(person);
console.log(keys); // 输出 ["name", "age", "sayHello"]

// Object.values() 方法：返回对象所有的值数组
let values = Object.values(person);
console.log(values); // 输出 ["Alice", 25, function]

// Object.entries() 方法：返回对象所有的键值对数组
let entries = Object.entries(person);
console.log(entries); // 输出 [["name", "Alice"], ["age", 25], ["sayHello", function]]

// Object.assign() 方法：将多个源对象合并到目标对象中
let person2 = {
  age: 30,
  gender: "female"
};
Object.assign(person, person2); // 将 person2 合并到 person 中
console.log(person); // 输出 {name: "Alice", age: 30, sayHello: function, gender: "female"}

// Object.freeze() 方法：冻结对象，使其变为只读状态
Object.freeze(person);
person.age = 35; // 无法修改属性值
console.log(person.age); // 输出 30

// Object.seal() 方法：密封对象，不能添加新属性和方法，但可以修改现有的属性和方法
Object.seal(person);
person.height = 170; // 无法添加新属性
delete person.age; // 无法删除属性
person.name = "Bob"; // 可以修改属性值
console.log(person); // 输出 {name: "Bob", age: 30, sayHello: function, gender: "female"}

在上述示例中，我们创建了一个对象 person，并演示了常见的对象方法，如 Object.keys()、Object.values()、Object.entries()、Object.assign()、Object.freeze() 和 Object.seal()。这些方法可以帮助我们操作对象，实现不同的功能。

对象的遍历

对象的遍历可以使用 for...in 循环、Object.keys() 方法、Object.values() 方法和 Object.entries() 方法来实现。

下面是使用 for...in 循环遍历对象的示例：

let person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

在上述示例中，我们使用 for...in 循环遍历了对象 person，打印了该对象的所有属性名和属性值。

除此之外，我们还可以使用 Object.keys() 方法来获取对象的所有属性名数组，然后通过 forEach() 循环遍历该数组来访问对象的属性。代码示例如下：

let person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

let keys = Object.keys(person);

keys.forEach(function(key) {
  console.log(key + ": " + person[key]);
});

另外，我们还可以使用 Object.entries() 方法来获取对象的所有键值对数组，然后通过 forEach() 循环遍历该数组来访问对象的属性。代码示例如下：

let person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

let entries = Object.entries(person);

entries.forEach(function(entry) {
  console.log(entry[0] + ": " + entry[1]);
});

在上述示例中，我们使用 Object.entries() 方法获取对象 person 的所有键值对数组，然后通过 forEach() 循环遍历该数组，访问并输出每个键值对的属性名和属性值。

前端之js初级篇

前端之js初级篇

js是什么

js的引入方式

外部 JavaScript 文件

内嵌 JavaScript 代码

使用 JavaScript 模块

字面量、变量与常量

字面量

定义变量

改变变量的值

尝试改变常量的值

js的基础数据类型

数字（Number）

字符串（String）

布尔值（Boolean）

null

undefined

js的数据类型转换

转换字符串为数值类型

转换数值类型为字符串

转换布尔值为数值类型

转换数值类型为布尔值

转换字符串为布尔值

js运算符

算术运算符

比较运算符

逻辑运算符

位运算符

赋值运算符

条件运算符

js的一元计算符

条件分支语句

if 语句

if...else 语句

js三元表达式

switch 语句

for 循环

while 循环和 do-while 循环

while 循环

do-while 循环

break 和 continue

break 关键字

continue 关键字

js数组

构造数组

数组的常见操作

数组的 length方法

push()方法

pop()方法

shift()方法

unshift()方法

splice()方法

slice()方法

concat()方法

sort()方法

forEach()方法

数组元素的查询

indexOf()方法

lastIndexOf()方法

includes()方法

find()方法

filter()方法

some()方法

every()方法

js 的数组转换

js函数

js 函数的声明与调用

函数的返回值

函数表达式

函数的数据类型

js对象

使用对象字面量创建对象

__new Object()方法创建对象

工厂函数方法创建对象

对象数据的调用和更改

对象的常见方法

对象的遍历

评论

`break` 和 `continue`

`break` 关键字

`continue` 关键字

`push()方法`

`pop()方法`

`shift()方法`

`unshift()方法`

`splice()方法`

`slice()方法`

`concat()方法`

`sort()方法`

`forEach()方法`

`indexOf()方法`

`lastIndexOf()方法`

`includes()方法`

`find()方法`

`filter()方法`

`some()方法`

`every()方法`