JavaScript内置对象
目标：
- 能够说出什么是内置对象
- 能够根据文档查询指定API的使用方法
- 能够使用Math对象的常用方法
- 能够使用Date对象的常用方法
- 能够使用Array对象的常用方法
- 能够使用String对象的常用方法
1 内置对象
内置对象：就是js给我们已经提供的非常常用的功能，直接实现某些效果，我们程序员不需要关心内部怎么实现的，只需要拿来使用
- JavaScript中的对象分为3种: 自定义对象、内置对象、浏览器对象
- 前面两种对象是 JS基础内容,属于ECMAScript;第三个浏览器对象属于我们 JS独有的,我们 JS API讲解
- 内置对象就是指JS语言自带的一些对象,这些对象 供开发者使用, 并提供了一些常用的或是最基本而必要的功能 (属性和方法)
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript提供了多个内置对象: Math、Date 、Array、 string等
2 查文档
2.1 MDN
学习一个内置对象的使用, 只要学会其常用成员的使用即可, 我们可以通过查文档学习,可以通过MDN / W3C
来查询。
Mozilla开发者网络( MDN )提供了有关开放网络技术( Open Web )的信息,包括HTML、CSS和万维网及HTML5应用的API.
MDN: https://developer.mozilla.org/zh-CN/
2.2 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
3 Math 对象
// math 数学对象不是一个构造函数，所以我们不需要new
来调用 而是 直接使用里面的属性和方法即可
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1,99,4)); // 99
console.log(Math.max(1,2,'pink')); // NaN
console.log(MAth.max()); // -Infinity
案例：封装自己的数学对象
利用对象封装自己的数学对象里面有PI最大值和最小值
<!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>
<script>
var myMath = { // 封装对象
PI: 3.1415926, // PI 属性
max: function() { // 方法 要传递很多参数过来
var max = arguments[0]; // 要传递很多参数过来 可以用agruments 可以接收传递过来的所有实参
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);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
</script>
</body>
</html>
3.1 Math 概述
Math对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值
等)可以使用Math中的成员。
Math.PI // 圆周率
Math.floor() //向下取整
Math.ceil () //向上取整
Math.round ( ) //四舍五入版就近取整 注意-3.5结果是-3
Math.abs () //绝对值
Math.max()/ Math.min() // 求最大和最小值
eg
<!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>
<script>
// 1 绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1' )); //隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs( 'pink')); // NaN
// 2 三个取整方法
// (1) Math.floor( ) 地板向下取整 往最小了取值
console.log(Math. floor(1.1)); // 1
console.log(Math. floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
console.log(Math.round( -1.1)); // -1
console.log(Math.round(-1.5)); // -2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是.5特殊它往大了取
console. log(Math. round(1.1)); // 1
console. log (Math. round(1.5)); // 2
console. log(Math. round(1.9)); // 2
console. log(Math. round(-1.1)); // -1
console. log(Math. round(-1.5)); //这个结果是-1
</script>
</body>
</html>
3.2 随机数方法random()
<!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>
<script>
// 1. Math 对象随机数方法 random() 返回一个随机的小数
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log((Math.random()));
// 4. 我们想要得到两个数之间的随机整数 并且 包含2个整数
// Math . floor (Math. random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math. floor (Math.random () * (max - min + 1))+ min;
}
console.log(getRandom(1,10)); // 每次刷新得到的值不同
// 5 随机点名
var arr = ['张三','里斯','王五','赵六','老六'];
// console.log(arr[0]); // 不随机
// console.log(arr[getRandom(0,4)]); // 随机点名
console.log(arr[getRandom(0,arr.length - 1)]); // 随机点名
</script>
</body>
</html>
案例：猜数字游戏
程序随机生成一个1~ 10之间的数字,并让用户输入一个数字,
1.如果大于该数字。就提示，数字大了,继续猜;
2.如果小于该数字。就提示数字小了,继续猜;
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>
<script>
function getRandom(min, max) {
return Math. floor (Math.random () * (max - min + 1))+ min;
}
var a = getRandom(1,10); // 每次刷新得到的值不同
while(true){ // 死循环
var num = prompt("请输入一个0~10的数字");
if(num > a){
alert("数字大了");
}else if(num < a){
alert("数字小了");
}else {
alert("猜对了");
break;
}
}
</script>
</body>
</html>
4 日期对象
eg
<!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>
<script>
// Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建一个对象实例
// 1 使用date 如果没有参数返回系统的 当前时间
var date = new Date();
console.log(date); // Fri Apr 15 2022 19:06:55 GMT+0800 (中国标准时间)
// 2 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2021-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月
var date2 = new Date('2019-10-1 8:8:8'); // Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)
console.log(date2);
</script>
</body>
</html>
4.1 Date概述
-
Date 对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
-
Date 实例用来处理日期和时间
4.2 Date()方法的使用
1 获取当前时间必须实例化
var now = new Date();
console.log(now);
2 Date() 构造函数的参数
如果括号里面有时间 , 就返回参数里面的时间。例如日期格式字符串为’2019-5-1’ , 可以写成new Date(‘2019-5-1’) 或者new Date(‘2019/5/1’)
4.3 日期格式化
我们想要2019-8-8 8:8:8 格式的日期 ，要怎么办？
需要获取日期指定的部分,所以我们要手动的得到这种格式。
| 方法名 | 说明 | 代码 |
|---|---|---|
| getFullYear() | 获取当年 | dObj.getFullYear() |
| getMonth() | 获取当月(0-11) | dObj.getMonth() |
| getDate() | 获取当天日期 | dObj.getDate() |
| getDay() | 获取星期几(周日0 到周六6) | dObj.getDay() |
| getHours() | 获取当前小时 | dObj.getHours() |
| getMinutes() | 获取当前分钟 | dObj.getMinutes() |
| getSeconds() | 获取当前秒钟 | dObj.getSeconds() |
格式化日期 年月日
<!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>
<script>
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2022
console.log(date. getMonth() + 1); //月份 返回的月份小1个月 记得月份 +1
console. log(date. getDate()); // 返回的是 几号
console. log(date. getDay()); // 3 周一返回的是1 周六返回的是6 但是周日返回的是0
//我们写一个 2019年5月1日星期三I
var year = date . getFullYear();
var month = date . getMonth() + 1;
var dates = date . getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log('今天是: ' + year + '年' + month + '月'+ dates + '日' + arr[day]); // 今天是: 2022年4月15日星期五
</script>
</body>
</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>
<script>
//格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
//要求封装一个函数返回当前的时分秒格式 08:08:08
function getTime(){
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':'+ m+ ':'+ s;
}
console.log(getTime());
</script>
</body>
</html>
4.4 获得日期的总的毫秒形式
Date对象是基于1970年1月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>
<script>
//获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数
// 1．通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); //就是我们现在时间距离1970.1.1总的毫秒数
console.log(date.getTime());
// 2．简单的写法(最常用的写法)
var date1 = +new Date(); // +new Date()返回的就是总的毫秒数
console.log(date1);
// 3．H5新增的获得总的毫秒数
console.log(Date.now()); // 不需要new Date 最简单
</script>
</body>
</html>
案例：倒计时效果（重点案例一定要会写）
- 核心算法∶输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
- 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒) 1S = 1000ms
转换公式如下∶
- d = parselnt(总秒 数/ 60/60/24); //计算天数
- h = parseInt(总秒数/60/60%24) //计算小时
- m = parselnt(总秒数/60 %60); //计算分数
- s = parselnt(总秒数%60); //计算当前秒数
<!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>
<script>
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的毫秒数
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-4-15 21:10:00'));
var date = new Date();
console.log(date);
</script>
</body>
</html>
5 数组对象
5.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>
<script>
//创建数组的两种方式
// 1．利用数组字面量
var arr = [1,2,3];
console.log(arr[2]);
// 2．利用new Array()
// var arr1 = new Array(); //创建了一个空的数组
// var arr1 = new Array(2); //这个2表示数组的长度为 2 面有2个空的数组元素
var arr1 = new Array(2,3); //等价于[2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
</script>
</body>
</html>
5.2 检测是否为数组
<!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>
<script>
// 翻转数组
function reverse(arr) {
// if(arr instanceof Array) {
if(Array.isArray(arr)) {
var newArr =[];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}else{
return 'error 这个参数要求必须是数组样式[1,2,3]'
}
}
console.log(reverse([1,2,3]));
console.log(reverse(1,2,3));
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
//(2)Array .isArray(参数); H5 新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
</script>
</body>
</html>
5.3 添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1…) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1无参数、修改原数组 | 返回它删除的元素的值 |
| unshift(参数1…) | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 并返回第一个元素的值 |
eg
<!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>
<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>
</body>
</html>
案例：筛选数组
有一个包含工资的数组[1500,1200,2000,2100,1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
<!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>
<script>
//有一个包含工资的数组[1500，1200，2000，2100，1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr =[1500,1200,2000,2100,1800];
var newArr =[];
for (var i = 0; i < arr.length; i++) {
if (arr[i] <2000){
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</body>
</html>
5.4 数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组 返回新数组 |
| sort() | 对数组的元素进行排序 | 该方法会改变原来的数组 返回新数组 |
eg
<!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>
<script>
//数组排序
// 1．翻转数组
var arr = [ 'pink', 'red ', 'blue' ];
arr.reverse();
console.log(arr);
// 2．数组排序（冒泡排序）
var arr1 =[3,1,2,4,6];
arr1.sort(function(a,b){
// return a - b; //升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
</script>
</body>
</html>
5.5 数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf | 数组中查找给定元素的第一个索引 | 如果存在返回索引号 如果不存在，则返回-1。 |
| lastIndexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号 如果不存在，则返回-1。 |
eg
<!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>
<script>
//返回数组元素索引号方法 indexof(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
//它只返回第一个满足条件的索引号
//它如果在该数组里面找不到元素，则返回的是-1
var arr =['red ', 'green', 'blue', 'pink ' ,'blue'];
console.log(arr.indexOf('blue')); //2
//返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
console.log(arr.lastIndexOf('blue')); //4
</script>
</body>
</html>
案例︰数组去重(重点案例)
有一个数组[ ‘c’,‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’,‘b’ ]，要求去除数组中重复的元素。
- 目标∶把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
- 核心算法∶我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加, 否则不添加。
- 我们怎么知道该元素没有存在? 利用新数组. indexOf(数组元素) 如果返回时 -1 就说明新数组里面没有改元素。
旧数组[ ‘c’, ‘a’ , ‘z’, ‘a’, 'x’, ‘a’, ‘x’, ‘c’, 'b’]
新数组[ ]
eg
<!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>
<script>
//封装一个去重的函数unique独一无二的
function unique(arr) {
var newArr = [];
for (var i = 1; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique([ 'c', 'a', 'z', 'a', 'x', 'a', 'x', 'c','b']);
console.log(demo);
</script>
</body>
</html>
5.6 数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| 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>
<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>
</body>
</html>
5.7 拓展
| 方法名 | 说明 | 返回值 |
|---|---|---|
| concat() | 连接两个或多个数组 不影响原数组 | 返回一个新的数组 |
| slice() | 数组截取slice(begin, end) | 返回被截取项目的新数组 |
| splice() | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组注意，这个会影响原数组 |
slice()和splice()目的基本相同，建议重点看下splice()
6 字符串对象
<!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>
<script>
//基本包装类型
var str = 'andy ';
console.log(str.length);
//对象 才有 属性和方法 复杂数据类型 才有 属性和方法
//简单数据类型为什么会有length属性呢?
//基本包装类型:就是把简单数据类型包装成为了复杂数据类型
// (1）把简单数据类型包装为复杂数据类型
var temp = new String( ' andy ');
//(2）把临时变量的值给str
str = temp;
//(3）销毁这个临时变量
temp = null;
</script>
</body>
</html>
6.1 基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
//下面代码有什么问题?
var str = 'andy' ;
console. log ( str.length);
按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下:
// (1）把简单数据类型包装为复杂数据类型
var temp = new String( ' andy ');
//(2）把临时变量的值给str
str = temp;
//(3）销毁这个临时变量
temp = null;
6.2字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
var str = 'abc ' ;
str = 'hello ' ;
//当重新给str赋值的时候，常量"abc'不会被修改，依然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = o; i < 100000; i++){
str += i;
}
console.log(str); //这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
6.3根据字符返回位置
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
| 方法名 | 说明 |
|---|---|
| indexOf(‘要查找的字符’,开始的位置) | 返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 |
| lastlndexOf() | 从后往前找，只找第一个匹配的 |
<!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>
<script>
//字符串对象瞭根据字符返回位置str.indexof('要查找的字符'，[起始的位置])
var str ='改革春风吹满地,春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春',3)); //从索引号是 3的位置开始往后查找
</script>
</body>
</html>
案例∶返回字符位置
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
- 核心算法∶先查找第一个o出现的位置
- 然后只要indexOf返回的结果不是-1就继续往后查找
- 因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加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>
<script>
var str = "abcoefoxyozzopp";
var index = str.indexOf( 'o');
// console.log(index);
while (index !== -1){
console.log(index);
index = str.indexOf( 'o', index + 1);
}
</script>
</body>
</html>
6.4 根据位置返回字符（重点）
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt()等效 |
<!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>
<script>
//根据位置返回字符
// 1. charAt(index)根据位置返回字符
var str = 'andy ';
console.log(str.charAt(3));//遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
// 2. charCodeAt(index)返回相应索引号的字符ASCII值目的:判断用户按下了那个键
console.log(str.charCodeAt(0));// 97
// 3. str[index]H5 新增的
console.log(str[0]); // a
</script>
</body>
</html>
案例 : 返回字符位置 （妙啊）
判断一个字符串’abcoefoxyozzopp’中出现次数最多的字符，并统计其次数。
- 核心算法∶利用charAt(）遍历这个字符串
- 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就＋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>
<script>
//有一个对象
var o = {
age: 18
}
if (o[ 'age ']){
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); // {a: 1, b: 1, c: 1, o: 4, e: 1, …} 秒啊！！！
</script>
</body>
</html>
6.5 字符串操作方法（重点）
| 方法名 | 说明 |
|---|---|
| concat(str1 ,str2,str3…) | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从start位置开始（索引号) ， length 取的个数重点记住这个 |
| slice(start, end) | 从start位置开始，截取到end位置，end取不到(他们俩都是索引号) |
| substring(start, end) | 从start位置开始，截取到end位置，end取不到基本和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>
<script>
//字符串操作方法
// 1. concat('字符串1','字符串2'....)
var str = 'andy ';
console.log(str.concat( 'red ' ));
// 2. substr('截取的起始位置:,‘截取几个字符');
var str1 ='改革春风吹满地';
console.log(str1.substr(2,2)); //第一个2 是索引号的2 从第几个开始 第二个 2 是取几个字符
</script>
</body>
</html>
6.6 替换字符串以及转换为数组
<!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>
<script>
// 1．替换字符replace('被替换的字符'，'替换为的字符') 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace( 'a', 'b'));
//有一个字符串 'abcoefoxyozzopp’要求把里面所有的 ○ 替换为 *
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>
</body>
</html>
6.7 补充
- toUpperCase() //转换大写
- toLowerCase0 //转换小写
有许多没有举例，可自行查阅，上述所说都是最常见的
作业：
给定一个字符串，如: “abaasdffggghhjjkkgfddsssss3444343”，问题如下:
- 字符串的长度
- 取出指定位置的字符，如∶0,3,5,9等
- 查找指定字符是否在以上字符串中存在，如: i ,c ，b等
- 替换指定的字符，如︰g替换为22,ss替换为b等操作方法
- 截取指定开始位置到结束位置的字符串，如∶取得1-5的字符串
- 找出以上字符串中出现次数最多的字符和出现的次数
代码后面补充
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
