【JavaScript速成之路】JavaScript内置对象汇总

📃个人主页：「小杨」的csdn博客
🔥系列专栏：【JavaScript速成之路】
🐳希望大家多多支持🥰一起进步呀！

---

---

前言

📜前言：小杨在上一篇带着大家一起学习了JavaScript中的内置对象中的字符串对象，想必大家对这种内置对象已经有所了解了，为了能够更好地阅读，小杨将前面所介绍的Math，Date，数组，字符串这四种常见的内置对象进行了汇总，希望大家通过阅读此文收获多多！

---

1，内置对象

1.1，对象分类

JavaScript中的对象分为3种︰自定义对象、内置对象、浏览器对象。

前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的

内置对象就是指S语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)

内置对象最大的优点就是帮助我们快速开发

JavaScript提供了多个内置对象:Math、Date . Array、string等

---

1.2，内置对象熟悉

为了方便程序开发，JavaScript提供了很多常用的内置对象，包括数学对象Math，日期对象Date，数组对象Array和字符串对象String…

然而如何快速学习对象中的方法并能熟悉掌握？

由于JavaScript提供的内置对象非常多，且还存在版本更新，浏览器兼容性等各方面的原因，因此学习内置对象最好的方法是查阅网上的最新文档。在这里推荐使用[Mozilla开发者网络(MDN)](MDN Web Docs (mozilla.org))进行学习。

通过文档学习某个方法的使用，具体流程如下：

1）查阅该方法的功能

2）查看括号里面参数的意义和类型

3）查看返回值的意义和类型

4）通过demo进行测试

---

1.3，封装对象

当内置对象无法满足需求的时候，我们还可以自己封装一个对象，来完成具体需求。

示例：利用对象封装自己的数学对象，里面有 PI 最大值 和 最小值。

<script>
    //利用对象封装自己的数学对象，里面有 PI 最大值 和 最小值
    var myMath = {
        PI: 3.141592653589793,
        max: function() {
            var max = arguments[0];
            for(var i = 1; i < arguments.length; i++){
                if(arguments[i] > max){
                    max = arguments[i];
                }
            }
            return max;
        },

        min: function() {
            var min = arguments[0];
            for(var i = 1; i < arguments.length; i++){
                if(arguments[i] < min){
                    min = arguments[i];
                }
            }
            return min;
        }
    };

    console.log(myMath.PI);     //调用PI属性
    console.log(myMath.max(10,30,20));    //调用max方法
    console.log(myMath.min(10,30,20));    //调用min方法
</script>

示例结果：

---

2，Math对象

2.1，常用属性方法

方法	作用
PI	获取圆周率，结果：3.141592653589793
abs(x)	获取x的绝对值，可传入普通数值或 是字符串表示的数值
max(value1,value2,…)	获取所有参数中的最大值
min(value1,value2,…)	获取所有参数中的最小值
pow(base,exponent)	获取基数(base)的指数(exponent)次幂，即base[^ exponent]
sqrt(x)	获取x的平方根
ceil(x)	获取大于或等于x的最小整数，即向上取整
floor(x)	获取小于或等于x的最大整数，即向下取整
round(x)	获取x的四舍五入后的整数值
random(x)	获取大于或等于0.0且小于1.0的随机值

---

1）获取x的绝对值

<script>  
    //获取绝对值
    console.log(Math.abs(121));    //获取绝对值，正数直接为正数,故输出121
    console.log(Math.abs(-121));   //获取绝对值，负数转换为正数,故输出121
    console.log(Math.abs('121'));  //获取绝对值，自动转换为数字,故输出121
    console.log(Math.abs('b'));    //获取绝对值，无法转换为数字,故输出NaN
</script>

示例结果：

---

2）次幂平方根

<script>  
    //次幂
    console.log(Math.pow(2,3));    //获取2的3次幂，故输出8
    console.log(Math.pow(2,-3));   //获取2的-3次幂，故输出0.125
    console.log(Math.pow(1.1,2));  //获取1.1的2次幂，故输出1.21
    //平方根
    console.log(Math.sqrt(4));     //获取正整数4的平方根，故输出2
    console.log(Math.sqrt(1.21));  //获取浮点数1.21的平方根，故输出1.1
    console.log(Math.sqrt(-4));    //获取负数-4的平方根，负数无平方根，故输出NaN
</script>

示例结果：

---

3）向上向下取整

<script>  
    //向上取整
    console.log(Math.ceil(1.2));
    console.log(Math.ceil(-1.8));
    //向下取整
    console.log(Math.floor(1.8));
    console.log(Math.floor(-1.2));
</script>

示例结果：

---

4）四舍五入

<script>  
    //四舍五入
    console.log(Math.round(1.2));  
    console.log(Math.round(1.5));
    console.log(Math.round(1.8));
    console.log(Math.round(-1.2));
    console.log(Math.round(-1.5));    //取较大值-1
    console.log(Math.round(-1.8));   
</script>

示例结果：

---

2.2，random()使用

Math.random()用来获取随机值，每次调用返回的结果都不相同，该方法返回的结果是一个浮点数，其范围是0~1（不包括1）。

由于Math.random()返回的这个随机数不太常用，我们可借助数学公式来转换成任意范围内的随机数。

例如：公式Math.random()*(max-min)+min，表示生成的随机数处于[min,max)的范围，且为浮点数。

<script>
    function  getRandom(min,max){
        return Math.random()*(max-min) + min;
    }
    console.log(getRandom(1,10));  //返回值的范围为[1,10)，浮点数
    console.log(getRandom(0,10));  //返回值的范围为[0,10)，浮点数
</script>

示例结果：

如若需要获取整数结果时，可以使用Math.floor()来实现。

例如：公式公式Math.floor(Math.random()*(max-min+ 1)+min)，表示生成的随机数处于[min,max]的范围，且为整数。

<script>
    function  getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1) + min);
    }
    console.log(getRandom(1,10));  //返回值的范围为[1,11)，整数
    console.log(getRandom(0,10));  //返回值的范围为[0,11)，整数
</script>

示例结果：

---

2.3，Math使用案例

经典Math使用示例：猜数字游戏

<script>
    //定义生成指定范围的随机整数的函数,指定范围：[min，max]
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
    //生成一个指定范围的随机整数，整数范围：[1,10]
    var random = getRandom(1,10);
    //规定猜数字游戏的最大机会数
    var count = 3;
    //猜数字游戏的游戏规划
    while(count){
        var num = prompt();
        count --;
        if(num > random){
            if(count != 0){
                alert('你所猜的数猜大了！还剩机会数为' + count);
            }else{
                alert('你所猜的数猜大了！还剩机会数为' + count + ',很遗憾你游戏失败！');
            }
            
        }else if(num < random){
            if(count != 0){
                alert('你所猜的数猜小了！还剩机会数为' + count);
            }else{
                alert('你所猜的数猜小了！还剩机会数为' + count + ',很遗憾你游戏失败！');
            }
        }else{
            alert('恭喜你猜对了！');
            break;
        }
    }
</script>

---

3，日期对象

3.1，日期对象

JavaScript中的日期对象用来处理日期和时间。例如：秒杀活动中日期的实时展示效果，在线日历等。

JavaScript中的日期对象需要实例化对象后才能使用，Date’()是日期的构造函数。

在创建日期对象时，可以为Date()构造函数传入一些参数，来表示具体的日期。

日期对象的创建方式可简单地划分为3种，

• 无参数，使用当前系统的当前时间作为对象保存的时间
• 传入年，月（范围为0~11，即真实月份数-1），日，时，分，秒等参数
• 用字符串表示日期和时间

<script>
    //法1：无参数，使用当前系统的当前时间作为对象保存的时间
    var date1 = new Date();
    console.log(date1);
    //法2：传入年，月（范围为0~11，即真实月份数-1），日，时，分，秒等参数
    var date2 = new Date(2022,10,15,10,15,10);
    console.log(date2);
    //法3：用字符串表示日期和时间
    var date3 = new Date('2022-10-15 10:15:10');
    console.log(date3);
</script>

示例结果：

知识点：

• 在创建日期对象时，必须先用new创建Date对象，否则会报错。

• 如果传入参数数据超过参数的范围，系统会自动转化，不会报错。

• 如果用字符串表示日期和时间，注意该字符串是否合法，若不合法，系统会报错（Invalid Date）。

---

3.2，常用get方法

方法	作用
getFullYear()	获取表示年份的4位数字，如2022
getMonth()	获取月份，范围为0~11（0表示1月，1表示2月，依次类推）
getDate()	获取月份中的某一天，范围为1~31
getDay()	获取星期，范围为0~6（0表示星期天，1表示星期一，依次类推）
getHours()	获取小时数，范围为0~23
getMinutes()	获取分钟数，范围为0~59
getSeconds()	获取秒数，范围为0~59
getMilliseconds()	获取毫秒数，范围为0~999
getTime()	获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数

为了更好地理解上述get方法的使用，示例如下：

<script>
    var date = new Date();                 //通过new基于当前日期创建对象date
    console.log(date);                     //获取当前日期
    console.log(date.getFullYear());       //获取月
    console.log(date.getMonth());          //获取月
    console.log(date.getDate());           //获取日
    console.log(date.getHours());          //获取小时数
    console.log(date.getMinutes());        //获取分钟数
    console.log(date.getSeconds());        //获取秒数
    console.log(date.getMilliseconds());   //获取毫秒数
    console.log(date.getTime());           //获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数
</script>

示例结果：

---

3.3，常用set方法

方法	作用
setFullYear(value)	设置年数
setMonth(value)	设置月数
setDate(value)	设置月份中的某一天
setHours(value)	设置小时数
setMinutes(value)	设置分钟数
setSeconds(value)	设置秒数
setMilliseconds(value)	设置毫秒数
setTime(value)	通过从1970-01-01 00:00:00计时的毫秒数来设置时间

为了更好地理解上述set方法的使用，示例如下：

<script>
    var date = new Date();                //通过new基于当前日期创建对象date
    date.setFullYear(2022);               //设置月
    date.setMonth(10);                    //设置月
    date.setDate(15);                     //设置日
    date.setHours(10);                    //设置小时数
    date.setMinutes(15);                  //设置分钟数
    date.setSeconds(10);                  //设置秒数
    console.log(date);                    //获取当前创建的时间
</script>

示例结果：

知识点：

• 如果没有输入任何参数，则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。
• 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有指定 day 参数）或者 0（如果没有指定 day 以外的参数）。
• JavaScript 的时间由世界标准时间（UTC）1970 年 1 月 1 日开始，用毫秒计时，一天由 86,400,000 毫秒组成。Date 对象的范围是 -100,000,000 天至 100,000,000 天（等效的毫秒值）。
• 以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。
• Date 对象为跨平台提供了统一的行为。时间属性可以在不同的系统中表示相同的时刻，而如果使用了本地时间对象，则反映当地的时间。

---

3.4，日期对象案例

3.4.1，获取时间戳

<script>
    //获取时间戳法1：通过日期对象的valueOf()和getTime()方法
    var date1 = new Date();
    console.log(date1.getTime());
    console.log(date1.valueOf());

    //获取时间戳法2：通过使用+运算符转换为数值型
    var date2 = new Date();
    console.log(+date2);

    //获取时间戳法3：通过使用html5新增的Date.now()方法
    var date3 = new Date();
    console.log(Date.now());
</script>

示例结果：

---

3.4.2，统计代码执行时间

<script>
    var timestamp1 = +new Date();
    for(var i = 0, str = ''; i < 1000 ; i++){
        str += i;
    }
    var timestamp2 = +new Date();
    console.log('代码执行时间为' + (timestamp2 - timestamp1));
</script>

示例结果：

---

3.4.3，案例：倒计时

<script>
    function countDown(time){
        var nowTime = +new Date();                  //获取当前时间的时间戳
        var inputTime = +new Date(time);            //获取未来时间的时间戳
        var times = (inputTime - nowTime) / 1000;   //获取两个时间的时间戳差值
        var d = parseInt(times / 60 / 60 / 24);     //获取天数
        d = d < 10 ? '0'+ d : d;
        var h = parseInt(times / 60 / 60 % 24);     //获取小时数
        h = h < 10 ? '0'+ h : h;
        var m = parseInt(times / 60 % 60);          //获取分钟数
        m = m < 10 ? '0'+ m : m;
        var s = parseInt(times % 60);               //获取秒数
        s = s < 10 ? '0'+ s : s;
        return '距四级英语考试还有' + d + '天'+ h + '小时' + m + '分' + s + '秒';
    }
		console.log(countDown('2022-12-10 9:00:00'));
</script>

示例结果：

---

4，数组对象

JavaScript中的数组对象可以使用new Array或者字面量“[ ]”来创建，在创建之后，就可以调用数组对象提供的一些方法来实现对数组的操作，如添加或删除数组元素，数组排序，数组索引。

4.1，数组类型检测

在开发中，有时需要检测变量的类型是否为数组。例如，在函数中，要求传入的参数必须是一个数组，不能传入其他类型的值，否则会报错，因此在这个时候可以在函数中检测参数类型是否为数组。

数组类型检测的常见方式有2种，分别为使用instanceof运算符和使用Array.isArray()方法。

//数组类型检测法1：使用instanceof运算符
参数 instanof Array
//数组类型检测法2：使用Array.isArray()方法
Array.isArray(参数)

为了更好地理解数组类型的检测方法，示例如下：

<script>
    var arr = [];      //空数组创建
    var obj = {};	   //空对象创建
    //数组类型检测法1：使用instanceof运算符
    console.log(arr instanceof Array);
    console.log(obj instanceof Array);

    //数组类型检测法2：使用Array.isArray()方法
    console.log(Array.isArray(arr));
    console.log(Array.isArray(obj));
</script>

示例结果：

---

4.2，数组元素增删

方法名	功能描述	返回值
push(参数1…)	数组末尾添加一个或多个元素，会修改原数组	返回数组的新长度
unshift(参数1…)	数组开头添加一个或多个元素，会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组返回undefined，会修改原数组	返回删除的元素的值
shift()	删除数组的第一个元素，若是空数组返回undefined，会修改原数组	返回第一个元素的值

---

为了更好地理解关于数组元素的增删方法，示例如下：

<script>
    var arr = ['one','two','three','four'];
    console.log('原数组为：'+ arr);

    //push()方法,数组末尾添加元素，返回新数组长度
    var len1 = arr.push('five','six');
    console.log('新数组为：'+ arr + '，新数组长度为：' + len1);

    //unshift()方法,数组开头添加元素，返回新数组长度
    var len2 = arr.unshift('zero');
    console.log('新数组为：'+ arr + '，新数组长度为：' + len2);

    //pop()方法，数组末尾元素删除，括号里有无参数输出无影响，返回移除的数组元素
    var lastIndex = arr.pop();
    console.log('新数组为：'+ arr + '，删除元素为：' + lastIndex);

    //shift()方法，数组开头元素删除，括号里有无参数输出无影响，返回移除的数组元素
    var firstIndex = arr.shift();
    console.log('新数组为：'+ arr + '，删除元素为：' + firstIndex);
</script>

示例结果：

---

4.3，数组元素筛选

<script>
    //筛选数组法1：未调用方法
    var arr = [18,65,48,32,79,84,94,69];
    var j = 0;
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i] >= 70){
            newArr[j++] = arr[i];
        }
    }
    console.log(newArr);

    //筛选数组法2:调用push方法
    var arr = [18,65,48,32,79,84,94,69];
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i] >= 70){
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);
</script>

示例结果：

---

4.4，数组元素排序

方法名	功能描述
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()	对数组的元素进行排序，该方法会改变原数组，返回新数组

为了更好地理解关于数组元素的排序方法，示例如下：

<script>
    //数组元素排序
    //reverse()方法，颠倒数组元素位置，改变原数组返回新数组
    var arr1 = ['one','two','three','four'];
    arr1.reverse();
    console.log(arr1);

    //sort()方法，对数组元素进行排序，改变原数组返回新数组
    var arr2 = [14,23,2,8,7,16,9,32,18];
    arr2.sort();
    console.log(arr2);
</script>

示例结果：

---

拓展1：如果没有指明 compareFn ，那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。

例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 compareFn），比较的数字会先被转换为字符串，所以在 Unicode 顺序上 “80” 要比 “9” 要靠前。

如果指明了 compareFn ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFn(a, b) 大于 0，b 会被排列到 a 之前。
• 如果 compareFn(a, b) 小于 0，那么 a 会被排列到 b 之前；
• 如果 compareFn(a, b) 等于 0，a 和 b 的相对位置不变。

备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

• compareFn(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

所以，比较函数格式如下：

function compareFn(a, b) {
  if (在某些排序规则中，a 小于 b) {
    return -1;
  }
  if (在这一排序规则下，a 大于 b) {
    return 1;
  }
  // a 一定等于 b
  return 0;
}

比较函数可以用 a 减 b，函数将会将数组升序排列，若用b减a，函数将会对数组降序排列。

<script>
    //对数组进行升序排序
    var arr = [14,23,2,8,7,16,9,32,18];
    arr.sort(function(a,b){            
        return a - b;
    });
    console.log(arr);
</script>

示例结果：

---

4.5，数组索引

方法名	功能描述
indexOf()	返回在数组中找到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在，则返回-1

为了更好地理解关于数组索引的方法，示例如下：

<script>
    var arr = ['yello','red','blue','red','orange'];
    //indexOf()方法，返回指定值在数组里的首个位置的索引，从左至右，如若数组中无该指定值，返回-1
    console.log(arr.indexOf('pink'));      
    console.log(arr.indexOf('red'));

    //lastIndexOf()方法，返回指定值在数组里的首个位置的索引，从右至左，如若数组中无该指定值，返回-1
    console.log(arr.lastIndexOf('pink'));
    console.log(arr.lastIndexOf('red'));
</script>

示例结果：

---

4.6，数组元素去重

<script>
    //数组元素去重处理原理：用旧数组元素去查询新数组，不存在就往新数组里添加数组元素，存在就跳过
    function unique(arr){   
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(newArr.indexOf(arr[i]) == -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var arr = [12,22,23,24,42,22,24];
    console.log(unique(arr));
</script>

示例结果：

---

4.7，数组转字符串

方法	功能描述
toString()	把数组转换为字符串，逗号分隔每一项
join(‘分隔符’)	将数组的所有元素连接到一个字符串中

为了更好地理解关于数组转字符串的方法，示例如下：

<script>
    var arr = [undefined,'a','b','c','d','e',null];
    //使用toString()将数组转换为字符串
    console.log(arr.toString());  
    //使用join()将数组转换为字符串
    console.log(arr.join());
    console.log(arr.join(' '));
    console.log(arr.join('-'));
</script>

示例结果：

---

4.8，其他方法

方法名	功能描述
fill()	用一个固定值填充到数组中指定下标范围内的全部元素
splice()	数组删除，参数为splice(第几个开始，要删除的个数)，返回被删除项目的新数组
slice()	数组截取，参数为slice(begin,end)，返回被截取项目的新数组
concat()	连接两个或者多个数组，不影响原数组，返回一个新数组

4.8.1，fill()方法

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

fill() 方法语法：

fill(value)					//省略start和end，填充范围为[0,arr1.length-1]
fill(value, start)			//省略end,填充范围为[start,arr1.length-1]
fill(value, start, end)		//填充范围为[start,end-1]

• value，用来填充数组元素的值。
• 起始索引，默认值为 0。
• 终止索引，默认值为 arr.length。

<script>
    //fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
    var arr1 = ['one','two','three','four','five'];
    console.log(arr1.fill('zero'));//省略start和end，填充范围为[0,arr1.length-1]

    var arr1 = ['one','two','three','four','five'];
    console.log(arr1.fill('zero',2));//省略end,填充范围为[start,arr1.length-1]

    var arr1 = ['one','two','three','four','five'];
    console.log(arr1.fill('zero',3,5));//填充范围为[start,end-1]
</script>

示例结果：

---

4.8.2，spilce()方法

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

语法：

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

如果添加进数组的元素个数不等于被删除的元素个数，数组的长度会发生相应的改变。

<script>  
    // splice(start)  由start索引开始删除数组元素，删除元素个数为arr.length - start
    var arr1 = ['one','two','three','four','five','six'];
    console.log(arr1.splice(1));     //返回由被删除的元素组成的一个数组
    console.log(arr1);               //返回被删除元素后的数组


    // splice(start, deleteCount)   由start索引开始删除数组元素，删除元素个数为deleteCount
    var arr2 = ['one','two','three','four','five','six'];
    console.log(arr2.splice(2,3));
    console.log(arr2);
    
    // splice(start, deleteCount, item1) 
	// 由start索引开始删除数组元素，删除元素个数为deleteCount,然后在start位置添加元素item1
    var arr3 = ['one','two','three','four','five','six'];
    console.log(arr3.splice(2,3,'zero'));
    console.log(arr3);

    // splice(start, deleteCount, item1, item2, itemN)
	// 由start索引开始删除数组元素，删除元素个数为deleteCount,然后在start位置开始添加元素item1，item2....
    var arr4 = ['one','two','three','four','five','six'];
    console.log(arr4.splice(2,3,'zero','ten'));
    console.log(arr4)
</script>

示例结果：

---

4.8.3，slice()方法

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

slice()
slice(start)
slice(start, end)

slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝：

• 如果该元素是个对象引用（不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
• 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

如果向两个数组任一中添加了新元素，则另一个不会受到影响。

<script>
    //slice() 数组截取，返回被截取元素的新数组，对原数组无影响
    var arr = [1,2,3,4,5];
    console.log(arr.slice());    //无参数，默认截取数组，截取范围：[0,len-1]
    console.log(arr.slice(1));   //有参数start，从start开始截取数组，截取范围：[start,len-1]
    console.log(arr.slice(1,2)); //有参数start和end，从start开始截取数组，截取范围：[start,end-1]
    console.log(arr);            //查看slice()方法对原数组的影响
</script>

示例结果：

---

4.8.4，concat()方法

concat()方法，连接多个数组，返回新数组，对原数组无影响

<script>
    //concat()方法，连接多个数组，返回新数组，对原数组无影响
    //连接合并2个数组
    var arr1 = [1,2,3];
    var arr2 = [6,7,8];
    console.log(arr1.concat(arr2));

    //连接合并3个数组
    var arr1 = [3];
    var arr2 = [4,5];
    var arr3 = [6,7,8];
    console.log(arr1.concat(arr2,arr3));
</script>

示例结果：

5，字符串对象

5.1，初识字符串对象

<script>
    var str = new String('abcdefg');
    console.log(str);
    console.log(str.length);
    var str = 'abcdefg';
    console.log(str);
    console.log(str.length);
</script>

示例结果：

---

拓展1：字符串对象String与字符串变量str的区别

为了更好地了解字符串对象String与字符串变量str的区别，示例如下：

<script>       
	//String字符串对象 与 str 字符串变量区别
    var obj = new String('abcdef');
    console.log(typeof obj);
    console.log(obj instanceof String);
    var str = 'abcdef';
    console.log(typeof str);
    console.log(str instanceof String);
</script>

示例结果：

---

5.2，据字符返回位置

成员	作用
indexOf(searchValue)	获取searchValue在字符串中首次出现的位置
lastIndexOf(searchValue)	获取searchValue在字符串中最后出现的位置

为了更好地理解上述方法的使用，示例如下：

<script>
    //根据字符返回位置
    var str = 'abcdefedc';
    console.log(str.indexOf('d'));
    console.log(str.lastIndexOf('d'));
</script>

示例结果：

---

5.3，据位置返回字符

成员	作用
charAt(index)	获取index位置的字符，位置从0开始计算
charCodeAt(index)	获取index位置的字符的ASCll码
str[index]	获取指定index位置处的字符（HTML5新增）

为了更好理解上述方法的使用，示例如下：

<script>
    //根据位置返回字符
    var str = 'abcdef';
    console.log(str.charAt(2));
    console.log(str.charCodeAt(2));
    console.log(str[2]);
</script>

示例结果：

---

5.4，字符串操作方法

成员	作用
concat(str1,str2,…)	连接多个字符串，等效于+，+更实用
slice(start,end)	截取从start位置到end位置之间的一个子字符串，截取范围为[start,end-1]
substring(start,end)	截取从start位置到end位置之间的一个子字符串，基本和slice相同，但不接收负值
substr(start,end)	截取从start位置开始到length长度的子字符串
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split(separator,limit)	使用separator分隔符将字符串分隔成数组，limit用于限制数量
replace(str1,str2)	使用str2替换字符串中的str1，返回替换结果，只会替换第1个字符

---

为了更好地理解上述方法的使用，现对上述方法逐一介绍：

5.4.1，concat()方法

concat()方法,连接多个字符串

<script>
    var str1 = 'abc';
    console.log(str1.concat('de'));            //连接一个字符串
    console.log(str1.concat('de','fg'));       //连接两个字符串
    console.log(str1.concat('de','fg','h'));   //连接三个字符串
    console.log(str1);                         //查看方法对原字符串的影响
</script>

示例结果：

---

5.4.2，slice()方法

slice()方法,截取从start位置到end位置之间的一个子字符串，截取范围为[start,end-1]

<script>
    var str2 = 'abcdefg';
    console.log(str2.slice());                 //无参数，默认截取字符串，截取范围：[0,len-1]
    console.log(str2.slice(2));                //有参数start，从start开始截取字符串，截取范围：[start,len-1]
    console.log(str2.slice(2,4));              //有参数start和end，从start开始截取字符串，截取范围：[start,end-1]
    console.log(str2);                         //查看方法对原字符串的影响
</script>

---

5.4.3，substr()方法

substr()方法,截取从start位置开始到length长度的子字符串

<script>
    var str3 = 'abcdefg';
    console.log(str3.substr());                //无参数，默认截取字符串，截取范围：[0,len-1]
    console.log(str3.substr(2));               //有参数start，从start开始截取字符串，截取范围：[start,len-1]
    console.log(str3.substr(2,2));             //有参数start和length，从start开始截取字符串，截取长度：length
    console.log(str3.substr(0,2));             //有参数length，从0开始截取字符串，截取长度：length
    console.log(str3);                         //查看方法对原字符串的影响
</script>

示例结果：

---

5.4.4，toLowerCase()方法

5.4.5，toUpperCase()方法

toLowerCase()方法,获取字符串的小写形式

toUpperCase()方法,获取字符串的大写形式

<script>
    var str4 = 'ABCdef';
    console.log(str4.toLowerCase());           //将字符串转为小写形式
    console.log(str4.toUpperCase());           //将字符串转为大写形式
    console.log(str4);                         //查看方法对原字符串的影响
</script>

示例结果：

---

5.4.6，split()方法

split()方法,使用separator分隔符将字符串分隔成数组，limit用于限制数量

<script>
    var str5 = 'ab,cd,efgh';
    console.log(str5.split(','));              //有参数separator，以分隔符将字符串分隔成数组
    console.log(str5.split(',',2));            //有参数separator和limit，以分隔符将字符串分隔成数组，limit限制个数
    console.log(str5);
</script>

示例结果：

---

6）replace()方法

replace()方法,使用str2替换字符串中的str1，返回替换结果，只会替换第1个字符

<script>
    //replace()方法,使用str2替换字符串中的str1，返回替换结果，只会替换第1个字符
    var str6 = 'abcdefg';
    console.log(str6.replace('a','b'));       //将字符串中的str1替换为str2，返回替换结果，只会替换第1个字符
    console.log(str6);
</script>

示例结果：

---

5.5，基本包装类型

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

var str = 'andy' ;
console.log(str. length);

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

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

---

5.6，字符串的不变性

字符串的不变性指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

<script>
    var str = 'abc';
    console.log(str);       
	var str = 'bcd';     //当重新给str赋值的时候，常量"abc'不会被修改，
    console.log(str);	 //依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
</script>

示例结果：

注意：由于字符串的不可变，在大量拼接字符串的时候会有效率问题

---

结语

这就是本期博客的全部内容啦，想必大家已经对JavaScript内置对象的相关内容有了全新地认识和理解吧，如果有什么其他的问题无法自己解决，可以在评论区留言哦！

最后，如果你觉得这篇文章写的还不错的话或者有所收获的话，麻烦小伙伴们动动你们的小手，给个三连呗（点赞👍，评论✍，收藏📖），多多支持一下！各位的支持是我最大的动力，后期不断更新优质的内容来帮助大家，一起进步。那我们下期见！

---