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

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"]。

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

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