至今头条

【技术积累】HTML+CSS+JavaScript中的基础知识【二】

2023-07-16 11:31 由 程序员天佑 发表于 #前端开发

Math对象

JavaScript中的Math对象是一个内置的数学对象，表示对数字进行数学运算的方法和属性的集合。

Math对象不是一个构造函数，所以不能使用new关键字来创建一个Math对象的实例。它包含了一些常见的数学运算函数和常量，可以直接通过Math对象来调用。

以下是Math对象的一些常用方法：

  1. Math.abs(x) 返回x的绝对值。

  2. Math.ceil(x) 返回大于或等于给定数字x的最小整数，且为整数。

  3. Math.floor(x) 返回小于或等于给定数字x的最大整数，且为整数。

  4. Math.round(x) 返回给定数字x的四舍五入值为最接近的整数。

  5. Math.max(x1, x2, ..., xn) 返回给定一组数字中的最大值。

  6. Math.min(x1, x2, ..., xn) 返回给定一组数字中的最小值。

  7. Math.sqrt(x) 返回给定数字x的平方根。

  8. Math.pow(x, y) 返回x的y次幂的结果。

  9. Math.random() 返回一个大于等于0且小于1的随机数。

  10. Math.sin(x), Math.cos(x), Math.tan(x) 返回给定角度x的正弦值、余弦值和正切值。

  11. Math.log(x) 返回给定数字x的自然对数。

  12. Math.exp(x) 返回给定数的指数值。

  13. Math.PI 表示圆周率π的常量。

  14. Math.E 表示自然对数的底e的常量。

注意：Math对象的所有方法和属性都是静态的，即可以直接通过Math对象进行调用，而不需要创建Math对象的实例。

Math.abs(x)

方法解释：返回x的绝对值。

示例代码：

   const x = -5;
   const absX = Math.abs(x);
   console.log(absX); // 输出 5

代码解释：该示例中，通过Math.abs方法获取变量x的绝对值。传入负数-5时，返回其绝对值5。最后将结果打印到控制台。

Math.ceil(x)

方法解释：返回大于或等于给定数字x的最小整数，且为整数。

示例代码：

   const x = 4.2;
   const ceilX = Math.ceil(x);
   console.log(ceilX); // 输出 5

代码解释：该示例中，通过Math.ceil方法对变量x进行向上取整操作。传入小数4.2时，返回最小的整数5。最后将结果打印到控制台。

Math.floor(x)

方法解释：返回小于或等于给定数字x的最大整数，且为整数。

示例代码：

   const x = 4.8;
   const floorX = Math.floor(x);
   console.log(floorX); // 输出 4

代码解释：该示例中，通过Math.floor方法对变量x进行向下取整操作。传入小数4.8时，返回最大的整数4。最后将结果打印到控制台。

Math.round(x)

方法解释：返回给定数字x的四舍五入值为最接近的整数。

示例代码：

   const x = 4.4;
   const roundX = Math.round(x);
   console.log(roundX); // 输出 4

代码解释：该示例中，通过Math.round方法对变量x进行四舍五入操作。传入小数4.4时，返回最接近的整数4。最后将结果打印到控制台。

Math.max(x1, x2, ..., xn)

方法解释：返回给定一组数字中的最大值。

示例代码：

   const maxNum = Math.max(3, 9, 5, 2, 7);
   console.log(maxNum); // 输出 9

代码解释：该示例中，通过Math.max方法找出一组数字中的最大值。传入数字3, 9, 5, 2, 7时，返回最大值9。最后将结果打印到控制台。

Math.min(x1, x2, ..., xn)

方法解释：返回给定一组数字中的最小值。

示例代码：

   const minNum = Math.min(3, 9, 5, 2, 7);
   console.log(minNum); // 输出 2

代码解释：该示例中，通过Math.min方法找出一组数字中的最小值。传入数字3, 9, 5, 2, 7时，返回最小值2。最后将结果打印到控制台。

Math.sqrt(x)

方法解释：返回给定数字x的平方根。

示例代码：

   const x = 16;
   const sqrtX = Math.sqrt(x);
   console.log(sqrtX); // 输出 4

代码解释：该示例中，通过Math.sqrt方法计算变量x的平方根。传入数字16时，返回其平方根4。最后将结果打印到控制台。

Math.pow(x, y)

方法解释：返回x的y次幂的结果。

示例代码：

   const x = 2;
   const y = 3;
   const powResult = Math.pow(x, y);
   console.log(powResult); // 输出 8

代码解释：该示例中，通过Math.pow方法计算变量x的y次幂。传入x=2, y=3时，返回2的3次幂结果为8。最后将结果打印到控制台。

Math.random()

方法解释：返回一个大于等于0且小于1的随机数。

   const randomNum = Math.random();
   console.log(randomNum);

代码解释：该示例中，通过Math.random方法生成一个大于等于0且小于1的随机数。最后将结果打印到控制台。由于每次运行结果都不确定，所以可以得到不同的随机数。

Math.sin(x), Math.cos(x), Math.tan(x)

方法解释：分别返回给定角度x的正弦值、余弦值和正切值。

    const angle = 45;
    const sinValue = Math.sin(angle * (Math.PI / 180));
    const cosValue = Math.cos(angle * (Math.PI / 180));
    const tanValue = Math.tan(angle * (Math.PI / 180));
    console.log(sinValue, cosValue, tanValue);

代码解释：该示例中，通过Math.sin、Math.cos、Math.tan方法计算给定角度的正弦、余弦和正切值。由于这些三角函数的参数需要弧度而非角度，所以需要将角度转换为弧度。最后将结果打印到控制台。

Math.log(x)

方法解释：返回给定数字x的自然对数。

示例代码：

    const x = 10;
    const logValue = Math.log(x);
    console.log(logValue); // 输出 2.302585092994046

代码解释：该示例中，通过Math.log方法计算给定数字x的自然对数。传入数字10时，返回其自然对数结果约为2.3026。最后将结果打印到控制台。

Math.exp(x)

方法解释：返回给定数的指数值。

示例代码：

    const x = 2;
    const expValue = Math.exp(x);
    console.log(expValue); // 输出 7.3890560989306495

代码解释：该示例中，通过Math.exp方法计算给定数字x的指数值。传入数字2时，返回e的2次幂结果约为7.3891。最后将结果打印到控制台。

Math.PI

属性解释：表示圆周率π的常量。

示例代码：

    console.log(Math.PI); // 输出 3.141592653589793

代码解释：该示例中，直接输出Math.PI属性的值，即圆周率π的近似值3.141592653589793。

Math.E    

属性解释：表示自然对数的底e的常量。

示例代码：

    console.log(Math.E); // 输出 2.718281828459045

代码解释：该示例中，直接输出Math.E属性的值，即自然对数的底e的近似值2.718281828459045。

Math对象的这些方法和属性可以在数学计算和处理中发挥重要的作用。

Date对象

在JavaScript中，Date对象用于处理日期和时间。

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

Date对象基于UNIX时间戳，它表示自1970年1月1日午夜（格林尼治标准时间）以来经过的毫秒数。可以使用Date对象来创建特定日期和时间的实例。

以下是Date对象的几个常见方法：

1. Date()
   - 用法：new Date()。
   - 描述：创建一个新的Date对象，表示当前的日期和时间。

2. Date(year, month, day, hours, minutes, seconds, milliseconds)
   - 用法：new Date(year, month, day, hours, minutes, seconds, milliseconds)。
   - 描述：根据给定的参数创建一个新的Date对象。

3. getDate()
   - 用法：dateObj.getDate()。
   - 描述：获取Date对象的日期（1-31）。

4. getMonth()
   - 用法：dateObj.getMonth()。
   - 描述：获取Date对象的月份（0-11）。

5. getFullYear()
   - 用法：dateObj.getFullYear()。
   - 描述：获取Date对象的四位数年份。

6. getHours()
   - 用法：dateObj.getHours()。
   - 描述：获取Date对象的小时（0-23）。

7. getMinutes()
   - 用法：dateObj.getMinutes()。
   - 描述：获取Date对象的分钟（0-59）。

8. getSeconds()
   - 用法：dateObj.getSeconds()。
   - 描述：获取Date对象的秒数（0-59）。

9. getMilliseconds()
   - 用法：dateObj.getMilliseconds()。
   - 描述：获取Date对象的毫秒数（0-999）。

10. getTime()
    - 用法：dateObj.getTime()。
    - 描述：获取Date对象的UNIX时间戳（自1970年1月1日午夜以来的毫秒数）。

11. setDate(dayValue)
    - 用法：dateObj.setDate(dayValue)。
    - 描述：设置Date对象的日期（1-31）。

12. setMonth(monthValue)
    - 用法：dateObj.setMonth(monthValue)。
    - 描述：设置Date对象的月份（0-11）。

13. setFullYear(yearValue)
    - 用法：dateObj.setFullYear(yearValue)。
    - 描述：设置Date对象的四位数年份。

14. setHours(hourValue)
    - 用法：dateObj.setHours(hourValue)。
    - 描述：设置Date对象的小时（0-23）。

15. setMinutes(minuteValue)
    - 用法：dateObj.setMinutes(minuteValue)。
    - 描述：设置Date对象的分钟（0-59）。

16. setSeconds(secondValue)
    - 用法：dateObj.setSeconds(secondValue)。
    - 描述：设置Date对象的秒数（0-59）。

17. setMilliseconds(millisecondValue)
    - 用法：dateObj.setMilliseconds(millisecondValue)。
    - 描述：设置Date对象的毫秒数（0-999）。

这些只是Date对象的一些方法，还有其他方法可以用于操作和处理日期和时间。使用这些方法可以构建自己的日期和时间功能，例如计算时间差、格式化日期和时间等。

Date()

- 方法介绍：创建一个新的Date对象，表示当前的日期和时间。

- 案例：

  const currentDate = new Date();
  console.log(currentDate);

- 代码解释：这段代码创建了一个新的Date对象，并将其赋值给currentDate变量。然后通过console.log()打印出当前的日期和时间。输出的结果类似于 "Thu Dec 09 2021 15:34:52 GMT+0800 (China Standard Time)"。

Date(year, month, day, hours, minutes, seconds, milliseconds)

- 方法介绍：根据给定的参数创建一个新的Date对象。

- 案例：

  const specificDate = new Date(2022, 0, 1);
  console.log(specificDate);

- 代码解释：这段代码根据给定的参数创建一个新的Date对象，表示2022年1月1日。通过console.log()打印出specificDate的值。输出的结果类似于 "Sat Jan 01 2022 00:00:00 GMT+0800 (China Standard Time)"。

getDate()

- 方法介绍：获取Date对象的日期（1-31）。

- 案例：

  const currentDate = new Date();
  const day = currentDate.getDate();
  console.log(day);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期，并将其赋值给currentDate变量。然后使用getDate()方法获取当前日期，并将其值赋给day变量。最后通过console.log()打印出当前日期的天数。

getMonth()

- 方法介绍：获取Date对象的月份（0-11）。

- 案例：

  const currentDate = new Date();
  const month = currentDate.getMonth();
  console.log(month);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期，并将其赋值给currentDate变量。然后使用getMonth()方法获取当前日期的月份，并将其值赋给month变量。最后通过console.log()打印出当前日期的月份。注意，月份从0开始计数，所以对应的值是0-11。

getFullYear()

- 方法介绍：获取Date对象的四位数年份。

- 案例：

  const currentDate = new Date();
  const year = currentDate.getFullYear();
  console.log(year);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期，并将其赋值给currentDate变量。然后使用getFullYear()方法获取当前日期的年份，并将其值赋给year变量。最后通过console.log()打印出当前日期的年份。

getHours()

- 方法介绍：获取Date对象的小时（0-23）。

- 案例：

  const currentDate = new Date();
  const hours = currentDate.getHours();
  console.log(hours);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用getHours()方法获取当前时间的小时数，并将其值赋给hours变量。最后通过console.log()打印出当前时间的小时数。

getMinutes()

- 方法介绍：获取Date对象的分钟（0-59）。

- 案例：

  const currentDate = new Date();
  const minutes = currentDate.getMinutes();
  console.log(minutes);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用getMinutes()方法获取当前时间的分钟数，并将其值赋给minutes变量。最后通过console.log()打印出当前时间的分钟数。

getSeconds()

- 方法介绍：获取Date对象的秒数（0-59）。

- 案例：

  const currentDate = new Date();
  const seconds = currentDate.getSeconds();
  console.log(seconds);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用getSeconds()方法获取当前时间的秒数，并将其值赋给seconds变量。最后通过console.log()打印出当前时间的秒数。

getMilliseconds()

- 方法介绍：获取Date对象的毫秒数（0-999）。

- 案例：

  const currentDate = new Date();
  const milliseconds = currentDate.getMilliseconds();
  console.log(milliseconds);


  - 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用getMilliseconds()方法获取当前时间的毫秒数，并将其值赋给milliseconds变量。最后通过console.log()打印出当前时间的毫秒数。

getTime()

- 方法介绍：获取Date对象的UNIX时间戳（自1970年1月1日午夜以来的毫秒数）。

- 案例：

  const currentDate = new Date();
  const timestamp = currentDate.getTime();
  console.log(timestamp);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用getTime()方法获取当前日期和时间的UNIX时间戳，并将其值赋给timestamp变量。最后通过console.log()打印出当前日期和时间的UNIX时间戳。

setDate(dayValue)

- 方法介绍：设置Date对象的日期（1-31）。

- 案例：

  const currentDate = new Date();
  currentDate.setDate(15);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setDate()方法将日期设置为15。最后通过console.log()打印出修改后的Date对象。

setMonth(monthValue)

- 方法介绍：设置Date对象的月份（0-11）。

- 案例：

  const currentDate = new Date();
  currentDate.setMonth(2);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setMonth()方法将月份设置为2（表示3月）。最后通过console.log()打印出修改后的Date对象。

setFullYear(yearValue)

- 方法介绍：设置Date对象的四位数年份。

- 案例：

  const currentDate = new Date();
  currentDate.setFullYear(2023);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setFullYear()方法将年份设置为2023。最后通过console.log()打印出修改后的Date对象。

setHours(hourValue)

- 方法介绍：设置Date对象的小时（0-23）。

- 案例：

  const currentDate = new Date();
  currentDate.setHours(12);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setHours()方法将小时设置为12。最后通过console.log()打印出修改后的Date对象。

setMinutes(minuteValue)

- 方法介绍：设置Date对象的分钟（0-59）。

- 案例：

  const currentDate = new Date();
  currentDate.setMinutes(30);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setMinutes()方法将分钟设置为30。最后通过console.log()打印出修改后的Date对象。

setSeconds(secondValue)

- 方法介绍：设置Date对象的秒数（0-59）。

- 案例：

  const currentDate = new Date();
  currentDate.setSeconds(45);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setSeconds()方法将秒数设置为45。最后通过console.log()打印出修改后的Date对象。

setMilliseconds(millisecondValue)

- 方法介绍：设置Date对象的毫秒数（0-999）。

- 案例：

  const currentDate = new Date();
  currentDate.setMilliseconds(500);
  console.log(currentDate);

- 代码解释：这段代码首先创建一个新的Date对象表示当前日期和时间，并将其赋值给currentDate变量。然后使用setMilliseconds()方法将毫秒数设置为500。最后通过console.log()打印出修改后的Date对象。

这些方法可以帮助您在JavaScript中处理日期和时间。通过使用这些方法，您可以获取特定的日期和时间信息、设置日期和时间，以及执行其他与日期和时间相关的操作。

数组对象

JavaScript中的数组对象是一种特殊的对象，用于存储和操作多个值。它是一种有序的集合，可以包含任意类型的数据，包括数字、字符串、对象、函数等。

以下是JavaScript数组对象常用的方法：

1. push(): 向数组末尾添加一个或多个元素，并返回新的长度。
2. pop(): 删除并返回数组的最后一个元素。
3. shift(): 删除并返回数组的第一个元素。
4. unshift(): 向数组的开头添加一个或多个元素，并返回新的长度。
5. concat(): 连接两个或多个数组，并返回新的数组。
6. slice(): 返回一个新的数组，包含从开始到结束（不包括结束）的部分数组。
7. splice(): 从指定位置删除或替换元素，并返回被删除的元素。
8. indexOf(): 返回指定元素在数组中的第一个匹配位置的索引，如果不存在则返回-1。
9. lastIndexOf(): 返回指定元素在数组中的最后一个匹配位置的索引，如果不存在则返回-1。
10. join(): 将数组的所有元素连接成一个字符串，并返回该字符串。
11. reverse(): 颠倒数组中元素的顺序。
12. sort(): 对数组元素进行排序，默认按照Unicode编码排序。
13. filter(): 创建一个新数组，包含满足条件的所有元素。
14. map(): 创建一个新数组，包含对原数组中的每个元素进行操作后的结果。
15. forEach(): 对数组中的每个元素执行指定的函数。
16. reduce(): 从左到右对数组中的元素进行累积操作，返回一个最终值。
17. reduceRight(): 从右到左对数组中的元素进行累积操作，返回一个最终值。

除了上述方法，数组对象还有一些其他的属性和方法，如length属性用于获取数组的长度，toString()方法用于将数组转换为字符串，等等。

push()

方法介绍：push() 方法向数组的末尾添加一个或多个元素，并返回新的长度。

案例代码：

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

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用push()方法向数组末尾添加了两个元素'orange'和'kiwi'。最后，我们通过console.log()打印出了修改后的数组和新的长度。

pop()

方法介绍：pop() 方法删除并返回数组的最后一个元素。
案例代码：

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(fruits); // 输出：['apple', 'banana']
console.log(lastFruit); // 输出：'orange'

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用pop()方法删除了数组的最后一个元素'orange'。最后，我们通过console.log()打印出了修改后的数组和被删除的元素。

shift()

方法介绍：shift() 方法删除并返回数组的第一个元素。

案例代码：

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

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用shift()方法删除了数组的第一个元素'apple'。最后，我们通过console.log()打印出了修改后的数组和被删除的元素。

unshift()

方法介绍：unshift() 方法向数组的开头添加一个或多个元素，并返回新的长度。
案例代码：

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

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用unshift()方法向数组开头添加了两个元素'apple'和'kiwi'。最后，我们通过console.log()打印出了修改后的数组和新的长度。

concat()

方法介绍：concat() 方法用于连接两个或多个数组，并返回一个新的数组。
案例代码：

let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'kiwi'];
let combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); // 输出：['apple', 'banana', 'orange', 'kiwi']

解释：在上述代码中，我们定义了两个数组fruits1和fruits2，然后使用concat()方法将它们连接起来，形成一个新的数组combinedFruits。最后，我们通过console.log()打印出了新的数组。

slice()

方法介绍：slice() 方法返回一个新的数组，包含从开始到结束（不包括结束）的部分数组。

案例代码：

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 输出：['banana', 'orange']

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用slice()方法从索引1开始（包括索引1）到索引3结束（不包括索引3）获取了一个新的数组slicedFruits。最后，我们通过console.log()打印出了新的数组。

splice()

方法介绍：splice() 方法从指定位置删除或替换元素，并返回被删除的元素。

案例代码：

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let removedFruits = fruits.splice(1, 2, 'grape', 'melon');
console.log(fruits); // 输出：['apple', 'grape', 'melon', 'kiwi']
console.log(removedFruits); // 输出：['banana', 'orange']

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用splice()方法从索引1开始删除了2个元素，并在该位置插入了'grape'和'melon'。最后，我们通过console.log()打印出了修改后的数组和被删除的元素。

indexOf()

方法介绍：indexOf() 方法返回指定元素在数组中的第一个匹配位置的索引，如果不存在则返回-1。

案例代码：

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let index = fruits.indexOf('orange');
console.log(index); // 输出：2

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用indexOf()方法查找'orange'在数组中的索引位置。最后，我们通过console.log()打印出了索引值。

lastIndexOf()

方法介绍：lastIndexOf() 方法返回指定元素在数组中的最后一个匹配位置的索引，如果不存在则返回-1。

案例代码：

let fruits = ['apple', 'banana', 'orange', 'kiwi', 'orange'];
let index = fruits.lastIndexOf('orange');
console.log(index); // 输出：4

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用lastIndexOf()方法查找'orange'在数组中的最后一个匹配位置的索引。最后，我们通过console.log()打印出了索引值。

join()

方法介绍：join() 方法将数组的所有元素连接成一个字符串，并返回该字符串。
案例代码：

let fruits = ['apple', 'banana', 'orange'];
let joinedString = fruits.join(', ');
console.log(joinedString); // 输出：'apple, banana, orange'

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用join()方法将数组的所有元素连接成一个字符串，每个元素之间用', '分隔。最后，我们通过console.log()打印出了连接后的字符串。

reverse()

方法介绍：reverse() 方法颠倒数组中元素的顺序。

案例代码：

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

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用reverse()方法颠倒了数组中元素的顺序。最后，我们通过console.log()打印出了修改后的数组。

sort()

方法介绍：sort() 方法对数组元素进行排序，默认按照Unicode编码排序。

案例代码：

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

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用sort()方法对数组元素进行排序。由于默认按照Unicode编码排序，所以'apple'排在了最前面。最后，我们通过console.log()打印出了排序后的数组。

filter()

方法介绍：filter() 方法创建一个新数组，包含满足条件的所有元素。

案例代码：

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // 输出：[2, 4]

解释：在上述代码中，我们定义了一个名为numbers的数组，然后使用filter()方法创建了一个新数组evenNumbers，其中包含了满足条件（偶数）的所有元素。最后，我们通过console.log()打印出了新数组。

map()

方法介绍：map() 方法创建一个新数组，包含对原数组中的每个元素进行操作后的结果。

案例代码：

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

解释：在上述代码中，我们定义了一个名为numbers的数组，然后使用map()方法创建了一个新数组doubledNumbers，其中包含了对原数组中每个元素进行操作后的结果（乘以2）。最后，我们通过console.log()打印出了新数组。

forEach()

方法介绍：forEach() 方法对数组中的每个元素执行指定的函数。

案例代码：

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

解释：在上述代码中，我们定义了一个名为fruits的数组，然后使用forEach()方法对数组中的每个元素执行了一个匿名函数，该函数打印出了每个水果的名称。

reduce()

方法介绍：reduce() 方法从左到右对数组中的元素进行累积操作，返回一个最终值。

案例代码：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 输出：15

解释：在上述代码中，我们定义了一个名为numbers的数组，然后使用reduce()方法对数组中的元素进行累积操作，最终返回它们的和。初始值为0，然后每次迭代时将当前元素与累积值相加。最后，我们通过console.log()打印出了最终值。

reduceRight()

方法介绍：reduceRight() 方法从右到左对数组中的元素进行累积操作，返回一个最终值。

案例代码：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduceRight(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 输出：15


解释：在上述代码中，我们定义了一个名为numbers的数组，然后使用reduceRight()方法从右到左对数组中的元素进行累积操作，最终返回它们的和。初始值为0，然后每次迭代时将当前元素与累积值相加。最后，我们通过console.log()打印出了最终值。

除了上述方法，数组对象还有一些其他的属性和方法，如length属性用于获取数组的长度，toString()方法用于将数组转换为字符串，等等。

字符串对象

JavaScript中的字符串对象是一种特殊的对象，用于表示和操作字符串。字符串对象具有许多内置的方法，用于处理和操作字符串数据。

以下是一些常用的字符串对象方法：

1. length：返回字符串的长度。
2. charAt(index)：返回指定索引位置的字符。
3. charCodeAt(index)：返回指定索引位置的字符的Unicode值。
4. concat(str1, str2, ...)：连接两个或多个字符串，并返回新的字符串。
5. indexOf(searchValue, startIndex)：返回指定字符串在原字符串中第一次出现的索引位置，如果没有找到则返回-1。
6. lastIndexOf(searchValue, startIndex)：返回指定字符串在原字符串中最后一次出现的索引位置，如果没有找到则返回-1。
7. slice(startIndex, endIndex)：提取原字符串中指定索引范围的子字符串，并返回新的字符串。
8. substring(startIndex, endIndex)：提取原字符串中指定索引范围的子字符串，并返回新的字符串。与slice方法类似，但不支持负数索引。
9. substr(startIndex, length)：提取原字符串中从指定索引开始的指定长度的子字符串，并返回新的字符串。
10. replace(searchValue, replaceValue)：将原字符串中的指定字符串或正则表达式替换为新的字符串，并返回新的字符串。
11. toLowerCase()：将原字符串中的所有字符转换为小写，并返回新的字符串。
12. toUpperCase()：将原字符串中的所有字符转换为大写，并返回新的字符串。
13. trim()：去除原字符串中的首尾空格，并返回新的字符串。
14. split(separator, limit)：将原字符串按照指定的分隔符分割成数组，并返回数组。

除了上述方法，字符串对象还可以通过索引访问和修改字符串中的字符。例如，可以使用str[0]或str.charAt(0)来访问字符串中的第一个字符，也可以使用str[0] = 'a'或str.charAt(0) = 'a'来修改字符串中的第一个字符。

需要注意的是，字符串对象是不可变的，即一旦创建就无法修改。每次对字符串进行操作时，都会返回一个新的字符串对象。因此，对字符串进行频繁的修改操作可能会导致性能问题。

length方法

返回字符串的长度。

案例：

const str = "Hello World";
console.log(str.length); // 输出：11

解释：length方法返回字符串的长度，即字符串中字符的个数。在上述案例中，字符串"Hello World"的长度为11。

charAt方法

返回指定索引位置的字符。

案例：

const str = "Hello World";
console.log(str.charAt(4)); // 输出：o

解释：charAt方法接受一个索引参数，返回该索引位置上的字符。在上述案例中，字符串"Hello World"的第4个字符是"o"。

charCodeAt方法

返回指定索引位置的字符的Unicode值。

案例：

const str = "Hello World";
console.log(str.charCodeAt(1)); // 输出：101


解释：charCodeAt方法接受一个索引参数，返回该索引位置上字符的Unicode值。在上述案例中，字符串"Hello World"的第1个字符是"e"，其Unicode值为101。

concat方法

连接两个或多个字符串，并返回新的字符串。

案例：

const str1 = "Hello";
const str2 = "World";
const result = str1.concat(" ", str2);
console.log(result); // 输出：Hello World

解释：concat方法可以接受多个参数，将它们连接成一个新的字符串。在上述案例中，将字符串"Hello"和"World"连接起来，并在它们之间添加一个空格，得到新的字符串"Hello World"。

indexOf方法

返回指定字符串在原字符串中第一次出现的索引位置，如果没有找到则返回-1。

案例：

const str = "Hello World";
console.log(str.indexOf("o")); // 输出：4
console.log(str.indexOf("z")); // 输出：-1

解释：indexOf方法接受一个参数，表示要查找的字符串。它返回该字符串在原字符串中第一次出现的索引位置。如果没有找到，则返回-1。在上述案例中，字符串"Hello World"中第一次出现字符"o"的索引位置是4，而字符"z"在字符串中不存在，所以返回-1。

lastIndexOf方法

返回指定字符串在原字符串中最后一次出现的索引位置，如果没有找到则返回-1。

案例：

const str = "Hello World";
console.log(str.lastIndexOf("o")); // 输出：7
console.log(str.lastIndexOf("z")); // 输出：-1

解释：lastIndexOf方法与indexOf方法类似，但是它从字符串的末尾开始查找指定字符串，并返回最后一次出现的索引位置。在上述案例中，字符串"Hello World"中最后一次出现字符"o"的索引位置是7，而字符"z"在字符串中不存在，所以返回-1。

slice方法

提取原字符串中指定索引范围的子字符串，并返回新的字符串。

案例：

const str = "Hello World";
console.log(str.slice(6, 11)); // 输出：World

解释：slice方法接受两个参数，表示要提取的子字符串的起始索引和结束索引（不包括结束索引位置的字符）。它返回一个新的字符串，包含原字符串中指定索引范围的字符。在上述案例中，提取了字符串"Hello World"中从索引6到索引11之间的字符，得到新的字符串"World"。

substring方法

提取原字符串中指定索引范围的子字符串，并返回新的字符串。

案例：

const str = "Hello World";
console.log(str.substring(6, 11)); // 输出：World

解释：substring方法与slice方法类似，也接受两个参数，表示要提取的子字符串的起始索引和结束索引（不包括结束索引位置的字符）。它返回一个新的字符串，包含原字符串中指定索引范围的字符。与slice方法不同的是，substring方法不支持负数索引。在上述案例中，提取了字符串"Hello World"中从索引6到索引11之间的字符，得到新的字符串"World"。

substr方法

提取原字符串中从指定索引开始的指定长度的子字符串，并返回新的字符串。

案例：

const str = "Hello World";
console.log(str.substr(6, 5)); // 输出：World

解释：substr方法接受两个参数，表示要提取的子字符串的起始索引和长度。它返回一个新的字符串，包含原字符串中从指定索引开始的指定长度的字符。在上述案例中，从字符串"Hello World"的索引6开始提取长度为5的字符，得到新的字符串"World"。

replace方法

将原字符串中的指定字符串或正则表达式替换为新的字符串，并返回新的字符串。

案例：

const str = "Hello World";
const result = str.replace("World", "JavaScript");
console.log(result); // 输出：Hello JavaScript


解释：replace方法接受两个参数，第一个参数表示要替换的字符串或正则表达式，第二个参数表示替换后的新字符串。它返回一个新的字符串，其中原字符串中的指定部分被替换为新的字符串。在上述案例中，将字符串"Hello World"中的"World"替换为"JavaScript"，得到新的字符串"Hello JavaScript"。

toLowerCase方法

将原字符串中的所有字符转换为小写，并返回新的字符串。

案例：

const str = "Hello World";
console.log(str.toLowerCase()); // 输出：hello world

解释：toLowerCase方法将原字符串中的所有字符转换为小写，并返回新的字符串。在上述案例中，将字符串"Hello World"中的所有字符转换为小写，得到新的字符串"hello world"。

toUpperCase方法

将原字符串中的所有字符转换为大写，并返回新的字符串。

案例：

const str = "Hello World";
console.log(str.toUpperCase()); // 输出：HELLO WORLD

解释：toUpperCase方法将原字符串中的所有字符转换为大写，并返回新的字符串。在上述案例中，将字符串"Hello World"中的所有字符转换为大写，得到新的字符串"HELLO WORLD"。

trim方法

去除原字符串中的首尾空格，并返回新的字符串。

案例：

const str = "   Hello World   ";
console.log(str.trim()); // 输出：Hello World

解释：trim方法去除原字符串中的首尾空格，并返回新的字符串。在上述案例中，将字符串"   Hello World   "的首尾空格去除，得到新的字符串"Hello World"。

split方法

将原字符串按照指定的分隔符分割成数组，并返回数组。

案例：

const str = "Hello,World";
const result = str.split(",");
console.log(result); // 输出：["Hello", "World"]

解释：split方法接受一个参数，表示要使用的分隔符。它将原字符串按照指定的分隔符分割成一个数组，并返回该数组。在上述案例中，将字符串"Hello,World"按照逗号分隔成两个字符串，得到数组["Hello", "World"]。

以上是对字符串对象的常用方法的介绍和示例代码。这些方法可以帮助我们对字符串进行各种操作，如查找、替换、截取等。在实际开发中，根据具体需求选择合适的方法来处理字符串数据。

热门相关：我的治愈系游戏   戏精老公今天作死没   修真界败类   富贵不能吟   裙上之臣