JavaScript基础

最新推荐文章于 2024-11-04 16:17:23 发布

Morii574

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量66

点赞数

文章标签： javascript webview vue.js

本文链接：https://blog.csdn.net/weixin_70024004/article/details/125142741

版权

本文详细讲解了循环（while, do-while, for）、引用类型（基本与复杂）、函数的使用与返回值，以及数组、对象操作（如push、pop、sort等）。深入理解JavaScript中对象和数组的管理，还有Math库的随机数生成和String方法应用。

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

1.循环

循环是重复的去做一件事。

循环的四要素：起使条件，终止条件，循环体，改变起使条件

while

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // while循环的参数结果是一个boolean类型的值
    // 起使条件
    var i = 0;
    // 终止条件
    while (i < 100) {
      // 循环体
      console.log('第' + (i + 1) + '次，hello world');
      // 改变起使条件
      i++;
    }
  </script>
</html>

do-while：与while 循环类似，只是不管条件满足与否都执行一次

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var i = 0;
    do {
      // 循环体
      console.log('第' + (i + 1) + '次，hello world');
      i++;
    } while (i > 100);
  </script>
</html>

for

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // for(起使条件;终止条件;改变起使条件)
    for (var i = 0; i < 100; i++) {
      // 循环体
      console.log('第' + (i + 1) + '次，hello world');
    }
  </script>
</html>

2.引用类型

基本类型：string number boolean null undefined

引用类型：Object、Array、Function、Date、Math...

3. Function的概述和声明

function但是一段代码的集合，具备某一个特殊功能的集合

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 1.声明函数
    function a() {
      // 方法体/函数体
      console.log('hello world');
    }

    // 2.调用函数
    a();
  </script>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 1.声明函数:声明一个匿名函数，将这个函数赋值给变量a
    // 注意：这个函数可以是匿名也可是有名的
    var a = function () {
      console.log('hello world');
    };

    // 2.调用函数
    a();
  </script>
</html>

4.函数的返回值

没有返回值时，接受到的是一个undefined

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 将一段代码执行后的结果返回
    function sum() {
      // return 返回
      return 10 + 20;
    }

    // 将sum函数的返回值赋值给a
    var a = sum();

    console.log(a);
  </script>
</html>

5.函数的参数

实参：在调用函数时传入的数据

形参：在声明函数是用来接受数据的变量

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 声明了一个带参数的函数，要求在调用的时候传入对应的参数
    // 函数上的参数：形参
    function sum(a, b) {
      return a + b;
    }

    // 调用函数
    // 调用函数时，传入的参数：实参
    var a = sum(10, 20);
    var b = sum(30, 40);
    // 拼接字符串
    var c = sum('hello', 'world');

    console.log(a, b, c);
  </script>
</html>

6.Object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 对象的声明
    var person = {
      // 属性：值  key:value
      name: '张三',
      age: 18,
      height: 175,
      sayHi: function () {
        console.log('hi');
      },
    };

    // 新增属性
    person.weight = 80;

    console.log(person.name, person.age, person.height, person.weight);
    person.sayHi();
  </script>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 创建对象
    var person = new Object({
      name: '张三',
      age: 18,
      height: 175,
      sayHi: function () {
        console.log('hi');
      },
    });

    // 新增属性
    person.weight = 80;

    console.log(person);
  </script>
</html>

7.Array

Array: 是数组，数组是由多个元素组成的一个集合。

索引：数组的索引是从0开始，我们可以通过数组的下标【索引】去访问数组中的元素

长度：数组中元素的个数，通过lenght属性就可以获取

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 数组声明（1）
    var a = ['a', 'b', 'c'];
    console.log(a);

    // 数组声明（2）
    var b = new Array(1, 2, 3, 4, 5, 6, 7, 11, 22, 55, 88, 66, 33, 10, 1);
    console.log(b);

    // 访问数组中的元素：数组a的第一个元素
    console.log(a[0]); // 'a'
    // 访问数组中的元素：数组b的第三个元素
    console.log(b[2]); // 3

    // 获取数组的长度（元素个数）
    var length = b.length;
    console.log(length);
  </script>
</html>

8.数组的遍历

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // 循环遍历数组
    var i = 0;
    while (i < arr.length) {
      console.log(arr[i]);
      i++;
    }

    console.log('===========================');

    // for循环遍历数组
    for (var index = 0; index < arr.length; index++) {
      console.log(arr[index]);
    }
  </script>
</html>

9.数组中的方法

可以通过[].__proto__查看数组上所有的方法

9.1 toString

toString：将数组转化成字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // 将数组转化成字符串
    var str = arr.toString();
    console.log(str);
  </script>
</html>

9.2 join

join 将数组转化为以某种方式拼接的字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // join 将数组转化为以某种方式拼接的字符串
    var str = arr.join('-');
    console.log(str);

    console.log(arr.join());
  </script>
</html>

9.3 push和pop

push : 在数组的末尾新增一些元素，不固定个数，返回数组最新的长度

pop: 删除数组最后一个元素，返回被删除的元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // 新增一些元素,返回数组最新的长度
    var length = arr.push(10, 20, 30, 55, 88);

    console.log(arr, length);

    // 删除数组最后一个元素,返回的是被删除的元素
    var a = arr.pop();
    console.log(arr, a);
  </script>
</html>

9.4 sort

sort 排序 a-b 从小到大 b-a从大到小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [5, 10, 5, 8, 22, 1, 9, 0, 88, 78, 23];

    // sort 排序 a-b 从小到大  b-a从大到小
    var newArr = arr.sort(function (a, b) {
      return b - a;
    });

    console.log(newArr);

    var arr2 = ['a', 'x', 'f', 'c', 'b', 'j', 'e', 'g', 'h', 'd', 'i'];

    var newArr2 = arr2.sort();
    console.log(newArr2);
  </script>
</html>

9.5 reverse反转

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [5, 10, 5, 8, 22, 1, 9, 0, 88, 78, 23];
    console.log(arr.reverse());
  </script>
</html>

9.6 shift和unshift删除和新增（首位）

shift:删除数组中第一个元素，返回被删除的元素

unshift: 在数组的首位新增元素，返回数组最新的长度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var arr = [5, 10, 5, 8, 22, 1, 9, 0, 88, 78, 23];
    // 删除数组中第一个元素，返回被删除的元素
    var a = arr.shift();
    console.log(arr, a);

    // 在数组的首位新增元素，返回数组最新的长度
    var lenght = arr.unshift(1, 2, 3);
    console.log(arr, lenght);
  </script>
</html>

9.7 slice

slice:截取数组中的一段元素，组成一个新的数组

有负数时，和数组长度相加（不包括右边的数）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var a = [1, 2, 3, 4, 5];
    // 一个参数 [2,3,4,5]
    console.log(a.slice(1));
    // 二个参数 [2,3,4],不包含第二个参数
    console.log(a.slice(1, 4));
    // 有负数 则和数组的长度相加 -2 -5
    console.log(a.slice(-5, -2)); // [1,2,3]
  </script>
</html>

9.8 splice

（1）删除 a.splice（index，删除的个数）

（2）插入 a.splice（index，删除的个数，“插入的值”）

（3）替换先删除后替换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var a = [1, 2, 3, 4, 5];
    // 1.删除 3  a.splice(index, 【删除的个数】)
    // a.splice(2, 1);

    // 2.插入 a.splice(index, 【删除的个数】, 【插入的值】)
    // a.splice(1, 0, 'a', 'b', 'c');

    // 3.替换  a.splice(index, 【删除的个数】, 【插入的值】)
    a.splice(1, 2, 'a', 'b', 'c');

    console.log(a);
  </script>
</html>

9.9 查找

indexOf查找第一个

lastIndexOf查找最后一个

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var a = ['h', 'e', 'l', 'l', 'o'];

    // 查找第一个 l 出现的位置
    console.log(a.indexOf('l'));
    // 查找最后一次 l 出现的位置
    console.log(a.lastIndexOf('l'));
    // 找不到返回 -1
    console.log(a.indexOf('w'));
  </script>
</html>

9.10 for-in遍历数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 遍历数组
    var arr = [1, 2, 3, 4, 5];
    for (var index in arr) {
      console.log(arr[index]);
    }

    // 遍历对象
    var obj = {
      name: '张三',
      age: 18,
      height: 180,
    };

    for (var key in obj) {
      console.log(key);
      // 对象[key]
      console.log(obj[key]); // obj.name obj.age obj.height
    }
  </script>
</html>

9.11 for-of

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];

    for (var i = 0; i < persons.length; i++) {
      // 取出对象
      var p = persons[i];
      console.log(p.name);
    }

    console.log('----------------------------');

    for (var index in persons) {
      // 取出对象
      var p = persons[index];
      console.log(p.name);
    }

    console.log('----------------------------');
    // 迭代数组
    for (var person of persons) {
      console.log(person.name);
    }
  </script>
</html>

9.12 foreach

循环遍历数组，其参数是一个函数，函数会产生生三个参数

function（item，index，arr） //item当前元素，index索引，arr数组本身

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];

    // 循环遍历数组
    // forEach 的参数是一个函数，函数会产生三个参数，
    // 第一个是当前的元素，第二个是当前的索引，第三个是数组本身
    persons.forEach(function (item, index, arr) {
      console.log(index, item);
    });
  </script>
</html>

9.13 some和every

some：返回值有一个满足条件，则结果为true，全不满足为false

every：所有返回值为true，则返回true，否则返回false

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];
    // 判断这个数组中的所有身高都大于170
    // every的参数是一个函数
    // 第一个参数是数组的每一项,第二个参数是数组的索引,第三个参数是数组本身
    // 如果这个函数的所有返回值都是true，那么返回true，否则返回false
    var flag = persons.every(function (item, index, arr) {
      return item.height > 170;
    });
    console.log(flag); // false

    // 判断这个数组至少有一个身高大于170
    // some 的参数是一个函数
    // 第一个参数是数组的每一项,第二个参数是数组的索引,第三个参数是数组本身
    // some 返回值有一个满足条件，则结果为true,全部不满足条件则结果为false
    var flag2 = persons.some(function (item, index) {
      return item.height > 170;
    });
    console.log(flag2);
  </script>
</html>

9.14 filter

过滤，留下符合条件的元素形成一个新的数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];

    // filter:过滤，留下符合条件的元素组成一个新的数组
    // filter 的参数是一个函数，函数会产生三个参数
    // 第一个是当前的元素，第二个是当前的索引，第三个是数组本身
    // 获取数组中年龄大于20
    var newPersons = persons.filter(function (item, index) {
      return item.age > 20;
    });
    console.log(newPersons);
  </script>
</html>

9.15 map

处理一个数组的每一项，返回的内容组成新数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];

    // map:处理一个数组的每一项，返回的内容组成一个新的数组
    // map 的参数是一个函数，函数会产生三个参数
    // 第一个是当前的元素，第二个是当前的索引，第三个是数组本身
    // 获取数组中的姓名
    var names = persons.map(function (item, index) {
      return item.name;
    });
    console.log(names);

    // 获取年龄大于等于20的姓名  先过滤 在处理
    var names2 = persons
      .filter(function (item) {
        return item.age >= 20;
      })
      .map(function (item) {
        return item.name;
      });
    console.log(names2);
  </script>
</html>

9.16 find

查找第一个符合条件的元素进行返回

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];
    // find:查找第一个符合条件的元素进行返回
    var p = persons.find(function (item, index) {
      return item.name == '张三';
    });
    console.log(p);
  </script>
</html>

9.17 findIndex

查找第一个符合条件的元素下标进行返回，找不到返回-1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: '张三', age: 18, height: 180 },
      { name: '李四', age: 19, height: 170 },
      { name: '王五', age: 20, height: 160 },
      { name: '赵六', age: 21, height: 150 },
      { name: '孙七', age: 22, height: 140 },
    ];
    // findIndex:查找第一个符合条件的元素下标进行返回,找不到返回 -1
    var index = persons.findIndex(function (item, index) {
      return item.name === '张三';
    });
    console.log(index);
  </script>
</html>

9.18 concat

将参数添加到原数组中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var a = [1, 2, 3, 4];
    var b = [4, 5, 6, 7];

    var c = a.concat('a', 'b', 'c', b);
    console.log(c);
  </script>
</html>

9.19 includes

包含

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var roles = ['董事长', 'CEO', '总经理', 'HR'];

    var user = {
      name: 'admin',
      age: 18,
      role: '普通员工', // 角色
    };

    console.log(roles.includes(user.role));
  </script>
</html>

9.20 reduce和reduceRight

reduce迭代 //pre统计 item每一项

reduceRight从后往前遍历会迭代数组中的所有元素，构建一个最终的值返回

这个函数返回的任何值都会作为第一个参数自动传给下一项，都接收四个函数值：前一个值，当前值，索引，数组对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var persons = [
      { name: "张三", age: 18, height: 180 },
      { name: "李四", age: 19, height: 170 },
      { name: "王五", age: 20, height: 160 },
      { name: "赵六", age: 21, height: 150 },
      { name: "孙七", age: 22, height: 140 },
    ];
    // 统计
    // pre
    var total = persons.reduce(function (pre, item, index, arr) {
      console.log(pre);
      return pre + item.age;
    }, 0);
    console.log(total);

    var total2 = persons.reduceRight(function (pre, item, index, arr) {
      console.log(pre);
      return pre + item.age;
    }, 0);
    console.log(total2);
  </script>
</html>

10.时间

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span id="time"></span>
  </body>
  <script>
    // 创建时间对象
    var date = new Date();
    console.log(date);
    // xxxx年xx月xx日 xx:xx:xx
    var year = date.getFullYear(); // 年
    var month = date.getMonth() + 1; // 月
    var day = date.getDate(); // 日
    var h = date.getHours(); // 时
    var m = date.getMinutes(); // 分
    var s = date.getSeconds(); // 秒

    var time = year + "年" + month + "月" + day + "日 " + h + ":" + m + ":" + s;
    console.log(time);

    console.log(date.getDay()); // 周几
    console.log(date.getTime()); // 时间戳
    console.log(Date.now()); // 时间戳

    var timeEl = document.getElementById("time");

    // 计时器setInerval(fn,await)
    setInterval(function () {
      // 创建时间对象，获取当前时间
      var date = new Date();

      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var h = date.getHours(); // 时
      var m = date.getMinutes(); // 分
      var s = date.getSeconds(); // 秒

      // <10 加'0'
      month = month >= 10 ? month : "0" + month;
      day = day >= 10 ? day : "0" + day;
      h = h >= 10 ? h : "0" + h;
      m = m >= 10 ? m : "0" + m;
      s = s >= 10 ? s : "0" + s;

      var time =
        year + "年" + month + "月" + day + "日 " + h + ":" + m + ":" + s;
      // 更新time容器的文本内容
      timeEl.textContent = time;
    }, 1000);
  </script>
</html>

11.Math

var random = Math.random(); //取0-1之间随机数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 随机数 0-1
    var random = Math.random();
    console.log(random);

    // 四舍五入
    var a = Math.round(10.5);
    var b = Math.round(10.4);
    console.log(a, b);

    // 最大值最小值
    var max = Math.max(88, 99, 11111, 20, 18);
    var min = Math.min(88, 99, 11111, 20, 18);
    console.log(max, min);

    // 向下取整
    var c = Math.floor(10.8);
    // 向上取整
    var d = Math.ceil(10.2);
    console.log(c, d);

    // Π 圆周率
    console.log(Math.PI);

    // 2的5次方
    console.log(Math.pow(2, 5));
  </script>
</html>

10.String

（1）length