JavaScript内置对象与数据类型

悠然予夏

已于 2023-02-08 17:18:53 修改

阅读量278

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-12-18 14:36:59 首次发布

本文链接：https://blog.csdn.net/weixin_52851967/article/details/128355691

版权

JavaScript 专栏收录该内容

49 篇文章 3 订阅

订阅专栏

1、包装类

1.1、原始类型的包装类

JavaScript的原始类型并非对象类型，所以从理论上来说，它们是没有办法获取属性或者调用方法的。
但是，在开发中会看到，我们会经常这样操作：

那么，为什么会出现这样奇怪的现象呢？（悖论）
- 原始类型是简单的值，默认并不能调用属性和方法；
- 这是因为JavaScript为了可以使其可以获取属性和调用方法，对其封装了对应的包装类型；
常见的包装类型有：String、Number、Boolean、Symbol、BigInt类型

1.2、包装类型的使用过程

默认情况，当我们调用一个原始类型的属性或者方法时，会进行如下操作：

根据原始值，创建一个原始类型对应的包装类型对象；
调用对应的属性或者方法，返回一个新的值；
创建的包装类对象被销毁；
通常JavaScript引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用。

我们也可以自己来创建一个包装类的对象：

name1是字面量（literal）的创建方式，name2是new创建对象的方式；

注意事项：null、undefined没有任何的方法，也没有对应的“对象包装类”；

2、Number类的补充

前面我们已经学习了Number类型，它有一个对应的数字包装类型Number，我们来对它的方法做一些补充。
Number属性补充：
- Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)；
- Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 -(2^53 - 1)
Number实例方法补充：
- 方法一：toString(base)，将数字转成字符串，并且按照base进制进行转化
  - base 的范围可以从 2 到 36，默认情况下是 10；
  - 注意：如果是直接对一个数字操作，需要使用..运算符；
- 方法二：toFixed(digits)，格式化一个数字，保留digits位的小数；
  - digits的范围是0到20（包含）之间；
Number类方法补充：
- 方法一：Number.parseInt(string[, radix])，将字符串解析成整数，也有对应的全局方法parseInt；
- 方法二：Number. parseFloat(string)，将字符串解析成浮点数，也有对应的全局方法parseFloat；
更多Number的知识，可以查看MDN文档：Number - JavaScript | MDN

3、内置对象

3.1 内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象 前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发

JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

3.2 查文档

查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN:MDN Web Docs

3.3 Math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

注意：上面的方法使用时必须带括号

Math - JavaScript | MDN

获取指定范围内的随机整数：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

3.4 日期对象

（1）创建Date对象

在JavaScript中我们使用Date来表示和处理时间。

Date的构造函数有如下用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>


    <script>
        // 创建Date对象的方式
        // 1.没有传入任何的参数, 获取到当前时间
        var date1 = new Date()
        console.log(date1)

        // 2.传入参数: 时间字符串
        var date2 = new Date("2022-08-08")
        console.log(date2)

        // 3.传入具体的年月日时分秒毫秒
        var date3 = new Date(2033, 10, 10, 0
        9, 0
        8, 07, 333
        )
        console.log(date3)

        // 4.传入一个Unix时间戳
        // 1s -> 1000ms
        var date4 = new Date(10004343433)
        console.log(date4)

    </script>

</body>
</html>

（2）dateString时间的表示方式

日期的表示方式有两种：RFC 2822 标准或者 ISO 8601 标准。
默认打印的时间格式是RFC 2822标准的：

我们也可以将其转化成ISO 8601标准的：

YYYY：年份，0000 ~ 9999
MM：月份，01 ~ 12
DD：日，01 ~ 31
T：分隔日期和时间，没有特殊含义，可以省略
HH：小时，00 ~ 24
mm：分钟，00 ~ 59
ss：秒，00 ~ 59
.sss：毫秒
Z：时区

（3）Date获取信息的方法

方法名	说明
getFullYear()	获取年份（4 位数）；
getMonth()	获取月份，从 0 到 11
getDate()	获取当月的具体日期，从 1 到 31（方法名字有点迷）
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒钟
getMilliseconds()	获取毫秒
getDay()	获取一周中的第几天，从 0（星期日）到 6（星期六）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>

    <script>

        var date = new Date()

        console.log(date)
        console.log(date.toISOString())

        // 1.获取想要的时间信息
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var second = date.getSeconds()
        console.log(year, month, day, hour, minute, second)
        console.log(`${year}/${month}/${day} ${hour}:${minute}:${second}`)

        var weekday = date.getDay() // 一周中的第几天
        console.log(weekday)


        // 2.也可以给date设置时间(了解)
        date.setFullYear(2033)
        // 自动校验
        date.setDate(32)
        console.log(date)

    </script>

</body>
</html>

（4）Date设置信息的方法（了解）

setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds)

（5）Date获取Unix时间戳

Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数。
在JavaScript中，我们有多种方法可以获取这个时间戳：
- 方式一：new Date().getTime()
- 方式二：new Date().valueOf()
- 方式三：+new Date()
- 方式四：Date.now()
获取到Unix时间戳之后，我们可以利用它来测试代码的性能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>

    <script>

        // var date = new Date(1132324234242)
        // console.log(date)

        // Date对象, 转成时间戳
        var date = new Date()
        var date2 = new Date("2033-03-03")

        // 方法一: 当前时间的时间戳
        var timestamp1 = Date.now()
        console.log(timestamp1)

        // 方法二/三将一个date对象转成时间戳
        var timestamp2 = date.getTime()
        var timestamp3 = date2.valueOf()
        console.log(timestamp2, timestamp3)

        // 方法四: 了解
        console.log(+date)


        // 计算这个操作所花费的时间
        var startTime = Date.now()
        for (var i = 0; i < 100000; i++) {
            console.log(i)
        }
        var endTime = Date.now()
        console.log("执行100000次for循环的打印所消耗的时间:", endTime - startTime)


        // 封装一个简单函数
        function testPerformance(fn) {
            var startTime = Date.now()
            fn()
            var endTime = Date.now()
        }

    </script>

</body>
</html>

（6）Date.parse方法

Date.parse(str) 方法可以从一个字符串中读取日期，并且输出对应的Unix时间戳。
Date.parse(str) ：
- 作用等同于 new Date(dateString).getTime() 操作；
- 需要符合 RFC2822 或 ISO 8601 日期格式的字符串；
比如 YYYY-MM-DDTHH:mm:ss.sssZ
- 其他格式也许也支持，但结果不能保证一定正常；
- 如果输入的格式不能被解析，那么会返回NaN；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>

    <script>

        var timeString = "03/23/2033"

        // 1.方式一:
        // var date = new Date(timeString)
        // var timestamp = date.getTime()

        // 2.方式二:
        var timestamp = Date.parse(timeString)
        console.log(timestamp)

    </script>

</body>
</html>

3.5 数组对象

（1）创建数组的两种方式

方式一：字面量方式

var arr = [1,"test",true];

方式二：new Array()

var arr = new Array();

注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

参数传递规则如下：

如果只传入一个参数，则参数规定了数组的长度
如果传入了多个参数，则参数称为数组的元素

（2）访问数组：

访问数组中的元素：

通过中括号[]访问
arr.at(i)：
- 如果 i >= 0，则与 arr[i] 完全相同。
- 对于 i 为负数的情况，它则从数组的尾部向前数。
修改数组中的元素
删除和添加元素虽然也可以通过索引来直接操作，但是开发中很少这样操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>

    <script>

        // 对于某一个结构的操作: 增删改查(数据库)

        var names = ["abc", "cba", "nba"]

        // 1.访问数组中的元素
        console.log(names[0])
        console.log(names.at(0))

        console.log(names[-1])
        console.log(names.at(-1))

        // 2.修改数组中的元素
        // names[0] = "why"
        // console.log(names)

        // 3.新增数组中的元素(了解)
        // names[3] = "kobe"
        // names[10] = "james"
        // console.log(names)

        // 4.删除数组中的元素(了解)
        // delete names[1]
        // console.log(names)
        // console.log(names[1])


    </script>

</body>
</html>

（3）检测是否为数组

方式一：instanceof 运算符，instanceof 可以判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

方式二：Array.isArray()：Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

（4）添加删除数组元素的方法

数组中有进行增加、删除元素的方法，部分方法如下表

方法名	说明	返回值
push(参数1...)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1 无参数、修改原数组	返回它删除的元素的值
unshift(参数1...)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1无参数、修改原数组	并返回第一个元素的值

注意：push、unshift为增加元素方法；pop、shift为删除元素的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 添加删除数组元素方法
        // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
        var arr = [1, 2, 3];
        // arr.push(4, 'pink');
        console.log(arr.push(4, 'pink'));

        console.log(arr);
        // (1) push 是可以给数组追加新的元素
        // (2) push() 参数直接写 数组元素就可以了
        // (3) push完毕之后，返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化
        // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
        console.log(arr.unshift('red', 'purple'));

        console.log(arr);
        // (1) unshift是可以给数组前面追加新的元素
        // (2) unshift() 参数直接写 数组元素就可以了
        // (3) unshift完毕之后，返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化

        // 3. pop() 它可以删除数组的最后一个元素  
        console.log(arr.pop());
        console.log(arr);
        // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
        // (2) pop() 没有参数
        // (3) pop完毕之后，返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化
        // 4. shift() 它可以删除数组的第一个元素  
        console.log(arr.shift());
        console.log(arr);
        // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
        // (2) shift() 没有参数
        // (3) shift完毕之后，返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化
    </script>
</head>

<body>

</body>

</html>

（5）数组排序：

数组中有对数组本身排序的方法，部分方法如下表

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新的数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新的数组

注意：sort方法需要传入参数来设置升序、降序排序

如果传入“function(a,b){ return a-b;}”，则为升序
如果传入“function(a,b){ return b-a;}”，则为降序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 数组排序
        // 1. 翻转数组
        var arr = ['pink', 'red', 'blue'];
        arr.reverse();
        console.log(arr);

        // 2. 数组排序（冒泡排序）
        var arr1 = [13, 4, 77, 1, 7];
        arr1.sort(function(a, b) {
            //  return a - b; 升序的顺序排列
            return b - a; // 降序的顺序排列
        });
        console.log(arr1);
    </script>
</head>

<body>

</body>

</html>

（6）数组索引方法

数组中有获取数组指定元素索引值的方法，部分方法如下表

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在则返回索引号，不存在则返回-1
lastIndexOf()	在数组中查找给定元素，最后一个的索引	如果存在则返回索引号，不存在则返回-1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
        // 它只返回第一个满足条件的索引号 
        // 它如果在该数组里面找不到元素，则返回的是 -1  
        // var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        var arr = ['red', 'green', 'pink'];
        console.log(arr.indexOf('blue'));
        // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
        var arr = ['red', 'green', 'blue', 'pink', 'blue'];

        console.log(arr.lastIndexOf('blue')); // 4
    </script>
</head>

<body>

</body>

</html>

（7）数组转换为字符串

数组中有把数组转化为字符串的方法，部分方法如下表

方法名	说明	返回值
toString()	把数组转化成字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	方法用于把数组中的所有元素转换成一个字符串	返回一个字符串

注意：join方法如果不传入参数，则按照 “ , ”拼接元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 数组转换为字符串 
        // 1. toString() 将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3
        // 2. join(分隔符) 
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join()); // green,blue,pink
        console.log(arr1.join('-')); // green-blue-pink
        console.log(arr1.join('&')); // green&blue&pink
    </script>
</head>

<body>

</body>

</html>

（8）其他方法

方法名	说明	返回值
concat()	连接两个或多个数组，不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)，包含bigin元素，但是不包含end元素	返回被截取项目的新数组
splice()	添加，删除和替换元素从 start 位置开始，处理数组中的元素； deleteCount ：要删除元素的个数，如果为 0 或者负数表示不删除； item1, item2, ... 在添加元素时，需要添加的元素；	返回被删除项目的新数组，注意：这个会影响原数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>

    <script>

        // var names = ["abc", "cba", "nba", "mba", "abcd"]

        // 1.在数组的尾部添加和删除元素
        // // push方法
        // names.push("why", "kobe")
        // console.log(names)
        // // pop方法
        // names.pop()
        // names.pop()
        // console.log(names)

        // // 2.在数组的头部添加和删除元素
        // // unshift方法
        // names.unshift("why", "kobe")
        // console.log(names)
        // // shift方法
        // names.shift()
        // console.log(names)

        // 3. 在任意位置添加/删除/替换元素
        var names = ["abc", "cba", "nba", "mba", "abcd"]
        // 参数一: start, 从什么位置开始操作元素
        // 参数二: deleteCount, 删除元素的个数

        // 3.1.删除元素
        // names.splice(1, 2)
        // console.log(names)

        // 3.2.新增元素
        // deleteCount: 0, 后面可以添加新的元素
        // names.splice(1, 0, "why", "kobe")
        // console.log(names)

        // 3.3.替换元素
        names.splice(1, 2, "why", "kobe", "james")
        console.log(names)

    </script>

</body>
</html>

（9）length属性

length属性用于获取数组的长度：
- 当我们修改数组的时候，length 属性会自动更新。
length 属性的另一个有意思的点是它是可写的。
- 如果我们手动增加一个大于默认length的数值，那么会增加数组的长度。
- 但是如果我们减少它，数组就会被截断。
所以，清空数组最简单的方法就是：arr.length = 0;。

        var names = ["abc", "cba", "nba", "mba"]

        // 属性length
        // 获取数组的长度length
        console.log(names.length) // 4

        // length属性可写的(扩容)
        names.length = 10
        console.log(names)

        // // 设置的length小于原来的元素个数
        names.length = 0
        console.log(names)

（10）数组的遍历

普通for循环遍历：
for..in 遍历，获取到索引值：
for..of 遍历，获取到每一个元素：

// 数组的遍历
        // 1. 普通的for循环
        for (var i = 0; i < names.length; i++) {
            console.log(names[i])
        }

        // 2. for..in
        for (var index in names) {
            console.log(index, names[index])
        }

        // 3. for..of
        for (var item of names) {
            console.log(item)
        }

（11）查找元素

arr.indexOf方法：查找某个元素的索引

从fromIndex开始查找，如果找到返回对应的索引，没有找到返回-1；
也有对应的从最后位置开始查找的 lastIndexOf 方法

arr.includes方法：判断数组是否包含某个元素

从索引 from 开始搜索 item，如果找到则返回 true（如果没找到，则返回 false）。

find 和 findIndex 直接查找元素或者元素的索引（ES6之后新增的语法）

        var students = [
            {id: 100, name: "why", age: 18},
            {id: 101, name: "kobe", age: 30},
            {id: 102, name: "james", age: 25},
            {id: 103, name: "why", age: 22}
        ]

        var stu = students.find(function (item) {
            if (item.id === 101) return true
        })
        console.log(stu)

（12）数组的其他高阶方法

arr.forEach

遍历数组，并且让数组中每一个元素都执行一次对应的方法；

arr.map

map() 方法创建一个新数组；
这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；

arr.filter

filter() 方法创建一个新数组；
新数组中只包含每个元素调用函数返回为true的元素；

arr.reduce

用于计算数组中所有元素的总和；
对数组中的每个元素按序执行一个由您提供的 reducer 函数；
每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>

    <script>

        // 1.forEach函数
        var names = ["abc", "cba", "nba", "mba"]

        // 三种方式, 新增一种方式
        names.forEach(function (item) {
            console.log(item, this)
        }, {name: "why"})

        // 2.filter函数: 过滤
        // var nums = [11, 20, 55, 100, 88, 32]
        // 2.1. for循环实现
        // var newNums = []
        // for (var item of nums) {
        //   if (item % 2 === 0) {
        //     newNums.push(item)
        //   }
        // }
        // 2.2. filter实现
        // var newNums = nums.filter(function(item) {
        //   return item % 2 === 0
        // })
        // console.log(newNums)


        // 3.map函数: 映射
        // var nums = [11, 20, 55, 100, 88, 32]
        // var newNums = nums.map(function(item) {
        //   return item * item
        // })
        // console.log(newNums)

        // 4.reduce
        // var nums = [11, 20, 55, 100, 88, 32]
        // var result = 0
        // for (var item of nums) {
        //   result += item
        // }
        // console.log(result)
        // 第一次执行: preValue->0 item->11
        // 第二次执行: preValue->11 item->20
        // 第三次执行: preValue->31 item->55
        // 第四次执行: preValue->86 item->100
        // 第五次执行: preValue->186 item->88
        // 第六次执行: preValue->274 item->32
        // 最后一次执行的时候 preValue + item, 它会作为reduce的返回值

        // initialValue: 初始化值, 第一次执行的时候, 对应的preValue
        // 如果initialValue没有传呢?
        // var result = nums.reduce(function(preValue, item) {
        //   console.log(`preValue:${preValue} item:${item}`)
        //   return preValue + item
        // }, 0)
        // console.log(result)

        // reduce练习
        // var products = [
        //   { name: "鼠标", price: 88, count: 3 },
        //   { name: "键盘", price: 200, count: 2 },
        //   { name: "耳机", price: 9.9, count: 10 },
        // ]
        // var totalPrice = products.reduce(function(preValue, item) {
        //   return preValue + item.price * item.count
        // }, 0)
        // console.log(totalPrice)


        // 综合练习:
        var nums = [11, 20, 55, 100, 88, 32]

        // 过滤所有的偶数, 映射所有偶数的平方, 并且计算他们的和
        // var total = nums.filter(function(item) {
        //   return item % 2 === 0
        // }).map(function(item) {
        //   return item * item
        // }).reduce(function(preValue, item) {
        //   return preValue + item
        // }, 0)
        // console.log(total)

        // var total = nums.filter(item => item % 2 === 0)
        //                 .map(item => item * item)
        //                 .reduce((preValue, item) => preValue + item, 0)
        // console.log(total)

    </script>

</body>
</html>

3.6 字符串对象

String - JavaScript | MDN

（1）基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

（2）字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
由于字符串的不可变，在大量拼接字符串的时候会有效率问题

（3）根据字符返回位置

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：

方法名	说明
indexOf('要查找的字符', 开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是 index 索引号
lastIndexOf()	从后往前找，只找第一个匹配的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
        // 核心算法：先查找第一个o出现的位置
        // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
        // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
        var str = "oabcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0;
        // console.log(index);
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log('o出现的次数是: ' + num);
    </script>
</head>

<body>

</body>

</html>

（4）根据位置返回字符

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

方法名	说明	使用
charAt(index)	返回指定位置的字符（index字符串的索引号）	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码（index索引号）	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5, IE8+支持和charAt()等效

在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

案例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }
        if (o['sex']) {
            console.log('里面有该属性');

        } else {
            console.log('没有该属性');

        }

        //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心算法：利用 charAt(） 遍历这个字符串
        // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        // 遍历对象，得到最大值和该字符
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>
</head>

<body>

</body>

</html>

（5）字符串操作方法

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

方法名	说明
concat(str1, str2, str3...)	concat()方法用于连接两个或多个字符串。拼接字符串，等效与 +, +更常用
substr(start, length)	从start位置开始（索引号），length 取的个数。重点记住这个
slice(start, end)	从start位置开始，截取到end位置，end取不到（他们两个都是索引号）
substring(start, end)	从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值

（6）其他方法

方法名	说明
replace(被替换的字符串，要替换为的字符串)	用于在字符串中用一些字符替换另一些字符
split("分割字符")	用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
toLowerCase()	将英文字符串转换为小写
toUpperCase()	将英文字符串转换为大写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));
        // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);

        // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));
        var str3 = 'red&pink&blue';
        console.log(str3.split('&'));
    </script>
</head>

<body>

</body>

</html>

4、简单数据类型和复杂数据类型

简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

4.1、堆栈

堆栈空间分配区别：

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；（简单数据类型存放到栈里面）
堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

简单数据类型的存储方式（值类型变量的数据直接存放在变量（栈空间）中）：

复杂数据类型的存储方式（引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中）：

4.2、简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

运行结果如下：

4.3、复杂数据类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?

运行结果如下：