JavaScript内置对象
需要思考以下问题:
- 什么是内置对象?
- 如何根据文档查询指定
API
的使用方法? - 如何使用
Math
对象的常用方法? - 如何使用
Date
对象的常用方法? - 如何使用
Array
对象的常用方法? - 如何使用
String
对象的常用方法?
1、内置对象
- 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。
2.2 - 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
3、Math对象
3.1 - Math概述
Math
数学对象不是一个构造函数,所以我们不需要new
来调用而是直接使用里面的属性和方法即可。
Math.PI
表示一个圆的周长与直径的比例(圆周率)
console.log(Math.PI); //3.141592653589793
Math.PI
是Math
的静态属性。
Math.max()
函数返回一组数中的最大值。
console.log(Math.max(1, 3, 9)); //9
console.log(Math.max(1, 3, '豆沙')); //NaN
console.log(Math.max()); //-Infinity
- 如果给定的参数中至少有一个参数无法被转换成数字,则会返回
NaN
- 如果没有参数,则结果为 -
Infinity
。 Math.max
是Math
的静态方法。
Math.min()
返回零个或更多个数值的最小值。
console.log(Math.min(1, 3, 9)); //1
console.log(Math.min(1, 3, '豆沙')); //NaN
console.log(Math.min()); //Infinity
- 如果给定的参数中至少有一个参数无法被转换成数字,则会返回
NaN
- 如果没有参数,则结果为
Infinity
。 Math.min
是Math
的静态方法。
案例:封装自己的数学对象
利用对象封装自己的数学对象;里面有 PI最大值和最小值;
var myMath = {
PI: 3.1415926,
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); //3.1415926
console.log(myMath.max(1, 3, 9)); //9
console.log(myMath.min(1, 3, 9)); //1
Math.abs()
函数返回指定数字 “x“ 的绝对值。
console.log(Math.abs(1)); //1
console.log(Math.abs('-1')); //1
console.log(Math.abs('豆沙')); //NaN
console.log(Math.abs()); //NaN
console.log(Math.abs(null)); //0
Math.abs()
是
Math
中的一个静态方法- 传入一个非数字形式的字符串或者
undefined/empty
变量,将返回NaN
。传入 null 将返回 0。
3.2 - 三种取整的方法
Math.floor()
返回小于或等于一个给定数字的最大整数。
console.log(Math.floor(1.1)); //1
console.log(Math.floor(1.9)); //1
console.log(Math.floor(-1.9)); //-2
console.log(Math.floor(-1.1)); //-2
- 可以理解
Math.floor()
为向下取整 - 一个表示小于或等于指定数字的最大整数的数字。
Math.ceil()
函数返回大于或等于一个给定数字的最小整数。
console.log(Math.ceil(1.1)); //2
console.log(Math.ceil(1.9)); //2
console.log(Math.ceil(-1.9)); //-1
console.log(Math.ceil(-1.1)); //-1
- 可以理解
Math.ceil()
为向上取整 - 大于或等于给定数字的最小整数。
**Math. round()
**函数返回一个数字四舍五入后最接近的整数。
console.log(Math.round(1.1)); //1
console.log(Math.round(1.5)); //2
console.log(Math.round(-1.5)); //-1
console.log(Math.round(-1.6)); //-2
console.log(Math.round(-1.1)); //-1
- 如果参数的小数部分恰好等于0.5,则舍入到相邻的在正无穷(+∞) 向上的整数。
- 给定数字的值四五入到最接近的整数。
3.2 - 随机数方法random()
Math.random()
函数返回一个浮点数, 伪随机数在范围在0
(包括0)和1
(不包括)之间。
console.log(Math.random());
- 这个方法里面不跟参数;
得到一个两数之间的随机整数,包括两个数在内:
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
随机点名
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var arr = ['豆沙', '菠萝', '番茄', '土豆', '西红柿', '凤梨', '沙拉', '菠菜', '茄子', '胡萝卜', '椰子', '红豆'];
console.log(arr[getRandom(0, arr.length - 1)]);
案例:猜数字游戏
程序随机生成一个1~ 10之间的数字,并让用户输入一个数字,
-
如果大于该数字,就提示,数字大了,继续猜;
-
如果小于该数字,就提示数字小了,继续猜;
-
如果等于该数字,就提示猜对了,结束程序。
案例分析:
- 随机生成一个1~ 10的整数我们需要用到
Math.random()
方法。 - 需要一直猜到正确为止,所以一直循环。
- 用
while
循环合适更简单。 - 核心算法:使用
if else if
多分支语句来判断大于、小于、等于。
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randNum = getRandom(1, 10);
while (true) { //构建一个死循环
var num = prompt("你来猜猜,这个数是1~10之间的哪个整数?");
if (num > randNum) {
alert("你猜大了");
} else if (num < randNum) {
alert("你猜小了")
} else {
alert("恭喜你!猜中了");
break; //退出整个循环
}
}
要求:用户猜1~50之 间的一个数字但是只有10次猜的机会
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randNum = getRandom(1, 50);
var i = 1;
var num = prompt("你来猜猜,这个数是1~50之间的哪个整数?");
while (true) { //构建一个死循环
if (num > randNum) {
alert("你猜大了");
var num = prompt("你还剩余" + (10 - i) + "次机会");
} else if (num < randNum) {
alert("你猜小了");
var num = prompt("你还剩余" + (10 - i) + "次机会");
} else {
alert("恭喜你!猜中了");
break; //退出整个循环
};
i++;
if (i == 10) {
break;
}
}
4、日期对象
4.1 - Date概述
Date
对象和Math
对象不一样,他是一个构造函数,所以我们需要实例化后才能使用。
Date实例用来处理日期和时间。
4.2 - Date()方法的使用
- 获取当前时间必须实例化
var now = new Date();
console.log(now); //Sun Jul 18 2021 15:58:21 GMT+0800 (中国标准时间)
Date()
是一个构造函数必须使用new
来调用创建我们的日期对象;- 如果没有提供参数,那么新创建的Date对象表示实例化时刻的日期和时间(返回当前系统的当前时间)。
Date()
构造函数的参数
如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为'2019-5-1'
’, 可以写成new Date('2019-5-1')
或者new Date('2019/5/1')
。
var data1 = new Date(2021, 02, 02);
console.log(data1); //Tue Mar 02 2021 00:00:00 GMT+0800 (中国标准时间)
/*返回的是3月不是2月*/
var data2 = new Date('2021-2-1 8: 8: 8')
console.log(data2); //Mon Feb 01 2021 08:08:08 GMT+0800 (中国标准时间)
var data3 = new Date('2021/2/1')
console.log(data3); //Mon Feb 01 2021 00:00:00 GMT+0800 (中国标准时间)
4.3 - 日期格式化
- 我们想要
2019-8-8 8:8:8
格式的日期,要怎么办? - 需要获取日期指定的部分,所以我们要手动的得到这种格式。
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获取当年 | date.getFullYear() |
getMonth() | 获取当月(0-11) | date.getMonth() |
getDate() | 获取当天日期 | date.getDate() |
getDay() | 获取星期几(周日0 到周六6) | date.getDay() |
getHours() | 获取当前小时 | date.getHours() |
getMinutes() | 获取当前分钟 | date.getMinutes() |
getSeconds() | 获取当前秒钟 | date.getSeconds() |
获取年月日
var date = new Date();
console.log(date.getFullYear()); //返回当前日期的年
console.log(date.getMonth() + 1); //月份返回的月份小1个月,所以要+1哦
console.log(date.getDate()); // 返回的是几号;
console.log(date.getDay()); // 周一返回的是1;周六返回的是6;但是周日返回的是0;
写一个2021年10月1日 星期五
var date = new Date();
var year = date.getFullYear(),
month = date.getMonth() + 1,
dates = date.getDate(),
day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);//今天是2021年10月1日星期五
获取时分秒
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
要求封装一个函数返回当前的时分秒
function getTime() {
var date = new Date();
var h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds();
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
4.4 – 获取日期的总的毫秒形式
Date对象是基于1970年1月1日(世界标准时间)起的亳秒数;
- 获得Date总的亳秒数(时间戳);不是当前时间的亳秒数而是距离1970年1月1号过了多少亳秒数。
- 通过
valueOf()
/getTime()
获取:
var date = new Date();
console.log(date.valueOf()); //现在时间距离1970.1.1总的亳秒数
console.log(date.getTime());
- 简单写法(最常用的写法):
var date = +new Date();
console.log(date);
- H5新增的方法:
console.log(Date.now());
案例:倒计时效果
做一个倒计时效果;
案例分析
- 核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时, 但是不能拿着时分秒相减,比如05分减去25分,结果会是负数的。
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
- 把剩余时间总的亳秒数转换为天、时、分、秒(时间戳转换为时分秒)
function countDown(time) {
var nowTime = +new Date(),
inputTime = +new Date(time),
times = (inputTime - nowTime) / 1000,
d = parseInt(times / 60 / 60 / 24), //计算天数
h = parseInt(times / 60 / 60 % 24), //计算小时
m = parseInt(times / 60 % 60), //计算分钟
s = parseInt(times % 60); //计算秒数
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒'
}
console.log(countDown('2021/10/1'));//74天06时11分34秒
5、数组对象
5.1 - 创建数组的两种方式:
- 利用数组字面量
var arr = [2, 3]
console.log(arr); //[2, 3]
- 利用new Array()
var arr = new Array(); //创建了一个空数组
var arr1 = new Array(2); //创建了一个数组长度为2的空数组
var arr2 = new Array(2, 3); // 等同于[2,3]
console.log(arr); //[]
console.log(arr1); //[空 ×2]
console.log(arr2); //[2, 3]
5.2 - 检测是否为数组
instanceof
运算符;它可以用来检测是否为数组:
var arr = [];
var obj = {};
console.log(arr instanceof Array); //true
console.log(obj instanceof Array); //false
Array.isArray()
用于确定传递的值是否是一个数组。
var arr = [];
var obj = {};
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
- H5新增的方法;IE9以上版本支持
5.3 - 添加删除数组元素的方法
push()
在我们数组的末尾添加一个或者多个数组元素:
var arr = [1, 2, 3]
arr.push(4);
console.log(arr.push('豆沙')); //5
console.log(arr); //[1, 2, 3, 4, "豆沙"]
push()
是可以给数组追加新的元素;push()
参数直接写数组元素就可以;push()
完毕之后,返回的结果是新数组的长度。- 原数组也会发生变化。
unshift()
在我们数组的开头添加一个或者多个数组元素:
var arr = [1, 2, 3]
arr.unshift(4);
console.log(arr.unshift('豆沙')); //5
console.log(arr); //["豆沙", 4, 1, 2, 3]
unshift()
是可以给数组追加新的元素;unshift()
参数直接写数组元素就可以;unshift()
完毕之后,返回的结果是新数组的长度。- 原数组也会发生变化。
pop()
它可以删除数组的最后一个元素:
var arr = [0, 1, 2, 3, '豆沙', '番茄', '菠萝']
arr.pop();
console.log(arr.pop()); //番茄
console.log(arr); //[0, 1, 2, 3, "豆沙"]
pop()
它可以删除数组的最后一个元素,一次只能删除一个;pop()
没有参数;pop()
完毕之后,返回的结果是删除的元素。- 原数组也会发生变化。
shift()
它可以删除数组的第一个元素:
var arr = [0, 1, 2, 3, '豆沙', '番茄', '菠萝']
arr.shift();
console.log(arr.shift()); //1
console.log(arr); // [2, 3, "豆沙", "番茄", "菠萝"]
shift()
它可以删除数组的最后一个元素,一次只能删除一个;shift()
没有参数;shift()
完毕之后,返回的结果是删除的元素。- 原数组也会发生变化。
小结:
方法名 | 说明 | 返回值 |
---|---|---|
push(参数...) | 在数组的末尾添加一个或者多个数组元素,修改了原数组。 | 新数组的长度 |
unshift(参数...) | 在数组的开头添加一个或者多个数组元素,修改了原数组。 | 新数组的长度 |
pop() | 删除数组的最后一个元素,修改了原数组。 | 删除的元素 |
shift() | 删除数组的最后一个元素,修改了原数组。 | 删除的元素 |
案例:筛选数组
有一个包含工资的数组[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.push(arr[i]);
}
}
console.log(newArr); //[1500, 1200, 1800]
5.4 - 数组排序
reverse()
翻转数组
var arr = ['豆沙', '菠萝', '番茄', '土豆', '西红柿'];
arr.reverse();
console.log(arr); //["西红柿", "土豆", "番茄", "菠萝", "豆沙"]
sort()
数组排序
var arr = [2, 5, 8, 6, 11, 23, 45];
arr.sort(function(a, b) {
return a - b;//升序
});
console.log(arr); //[2, 5, 6, 8, 11, 23, 45]
arr.sort(function(a, b) {
return b - a;//降序
});
console.log(arr); //[45, 23, 11, 8, 6, 5, 2]
小结
方法名 | 说明 | 返回值 |
---|---|---|
reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组返回新数组 |
sort() | 对数组的元素进行排序 | 该方法会改变原来的数组返回新数组 |
5.5 - 数组索引方法
返回数组元素索引号的方法:
indexOf()
(数组元素)作用就是返回该数组元素的索引号;从前面开始查找。
var arr = ['豆沙', '菠萝', '番茄', '豆沙', '西红柿'];
console.log(arr.indexOf('豆沙')); //0
console.log(arr.indexOf('blue')); //-1
lastIndexOf
作用就是返回该数组元素的索引号;从后面开始查找。
var arr = ['豆沙', '菠萝', '番茄', '豆沙', '西红柿'];
console.log(arr.lastIndexOf('豆沙')); //3
console.log(arr.lastIndexOf('blue')); //-1
小结
方法名 | 说明 | 返回值 |
---|---|---|
indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号如果不存在,则返回-1。 |
lastIndexOf() | 在数组中的最后一个的索引, | 如果存在返回索引号如果不存在,则返回-1。 |
案例:数组去重(重点案例)
有一个数组['c','a' ,'z', 'a','x', 'a','x','c','b']
,要求去除数组中重复的元素。
案例分析:
目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。
核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。
我们怎么知道该元素没有存在?利用新数组.indexOf(数组元素)
如果返回时-1;就说明新数组里面没有此元素。
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 arr1 = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']
console.log(unique(arr1)); //["c", "a", "z", "x", "b"]
5.6 - 数组转换为字符串
toString()
将我们的数组转换为字符串;
var arr = [1, 2, 3]
console.log(arr.toString()); //1,2,3
join( 分隔符)
var arr = ['豆沙', '番茄', '西红柿']
console.log(arr.join()); //豆沙,番茄,西红柿
console.log(arr.join('/')); //豆沙/番茄/西红柿
console.log(arr.join('&')); //豆沙&番茄&西红柿
小结
方法名 | 说明 | 返回值 |
---|---|---|
toString() | 把数组转换成字符串,逗号分隔每一项 | 返回一个字符串 |
join('分隔符') | 方法用于把数组中的所有元素转换为一个字符串。 | 返回一个字符串 |
5.7 - 课下查询
方法名 | 说明 | 返回值 |
---|---|---|
concat() | 连接两个或多个数组不影响原数组 | 返回一个新的数组 |
slice() | 数组截取slice(begin, end) | 返回被截取项目的新数组 |
splice() | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组注意,这个会影响原数组 |
slice()
和splice()
目的基本相同,建议同学们重点看下splice()
concat( value )
方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
value
-
- 数组和/或值,将被合并到一个新的数组中。
var arr = [1, 2, 3];
var arr2 = ['一', '二', '三'];
console.log(arr.concat(arr2, '豆沙')); //[1, 2, 3, "一", "二", "三", "豆沙"]
console.log(arr); //[1, 2, 3]
- 方法不会更改现有数组
- 返回一个新的数组
slice(begin,end)
方法返回一个新的数组对象
begin
(可选)-
- 提取起始处的索引(从
0
开始),从该索引开始提取原数组元素。 - 如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取。
- 如果省略
begin
,则slice
从索引0
开始。 - 如果
begin
超出原数组的索引范围,则会返回空数组。
- 提取起始处的索引(从
end
(可选)-
- 提取终止处的索引(从
0
开始),在该索引处结束提取原数组元素。 slice
会提取原数组中索引从begin
到end
的所有元素(包含begin
,但不包含end
)。- 如果
end
被省略或者end
大于数组的长度;slice
会一直提取到原数组末尾。
- 提取终止处的索引(从
var arr = [1, 2, 3, '一', '二', '三', '豆沙'];
console.log(arr.slice()); //[1, 2, 3, "一", "二", "三", "豆沙"]
console.log(arr.slice(3)); //["一", "二", "三", "豆沙"]
console.log(arr.slice(3, 6)); //["一", "二", "三"]
console.log(arr); //[1, 2, 3, "一", "二", "三", "豆沙"]
- **
splice(start,count,items...)
**通过删除或替换现有元素或者原地添加新的元素来修改数组
-
start
(可选) -
- 指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;
- 如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于
array.length-n
); - 如果负数的绝对值大于数组的长度,则表示开始位置为第0位。
-
count
(可选) -
- 整数,表示要移除的数组元素的个数。
-
items
(可选) -
- 要添加进数组的元素,从
start
位置开始。 - 如果不指定,则
splice()
将只删除数组元素。
- 要添加进数组的元素,从
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.splice()); //[]
/*从索引1开始删除添加元素*/
console.log(arr.splice(1, 2, '豆沙', '土豆'));//[2, 3]
console.log(arr);//[1, "豆沙", "土豆", 4, 5, 6, 7, 8, 9, 10]
- 此方法会改变原数组。
- 如果没有删除元素,则返回空数组。
- 删除的元素组成的一个数组作为返回值。
6、字符串对象
6.1 - 基本包装类型
为了方便操作基本数据类型, JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
//下面代码有什么问题?
var str = 'dousha';
console.log(str.length); //6
按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 JavaScript会把基本数据类型包装为复杂数据类型,其执行过程如下:
/*1.生成临时变量,把简单类型包装为复杂数据类型*/
var temp = new String('dousha');
/* 2.赋值给我们声明的字符变量*/
str = temp;
/*3.销毁临时变量*/
temp = null;
6.2 - 字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
因为我们字符串的不可变所以不要大量的拼接字符串;
var str = 'red';
str = 'blue';
6.3 - 根据字符返回位置
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
方法名 | 说明 |
---|---|
indexOf('要查找的字符',['开始的位置']) | 返回指定内容在元字符串中的位置,如果找不到就返回 -1,开始的位置是index索引号 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
str.indexOf('要查找的字符',[ 起始的位置])
var str = '番茄炒西红柿,菠萝炒凤梨';
console.log(str.indexOf('炒')); //2
console.log(str.indexOf('炒', 3)); //9
案例:返回字符位置
查找字符串"abcoefoxyozopp"
中所有o
出现的位置以及次数。
思路:
- 核心算法:先查找第一个
o
出现的位置; - 然后只要
indexOf
返回的结果不是-1就继续往后查找; - 因为
indexOf
只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找。
var str = "abcoefoxyozopp";
var index = str.indexOf('o');
var j = 0;
while (index !== -1) {
console.log(index);
j++;
index = str.indexOf('o', index + 1)
}
console.log('o出现的次数是:' + j + '次');
课后作业:[‘red’, ‘blue’, ‘red’, ‘green’, ‘pink’, ‘red’],求red出现的位置和次数
var arr = ['red', 'blue', 'red', 'green', 'pink', 'red'];
var index = arr.indexOf('red');
var j = 0;
while (index !== -1) {
console.log(index);
j++;
index = arr.indexOf('red', index + 1)
}
console.log('red出现的次数是:' + j + '次');
6.4 - 根据位置返回字符(重点)
charAt(index)
返回指定位置的字符
var str = 'dousha';
console.log(str.charAt(2)); //u
//遍历字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
charCodeAt(index)
获取指定位置处字符的ASCII码
var str = 'dousha';
console.log(str.charCodeAt(2)); //117
- 用于判断用户按下了那个键;
str[index]
获取指定位置处字符
var str = 'dousha';
console.log(str[0]); //d
小结:
方法名 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(index) |
charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(index) |
str[index] | 获取指定位置处字符 | HTML5,IE8+支持和charAt() 等效| |
来判断是否有该属性对象['键']
var o = {
age: 18,
}
if (o['sex']) {
console.log('里面有该对象');
} else {
console.log('没有该对象');//没有该对象
}
判断一个字符串'abcoefoxyozzopp'
中出现次数最多的字符,并统计其次数。
- 核心算法:利用
charAt()
遍历这 个字符串 - 把每个字符都存储给对象,如果对象没有该属性, 就为1,如果存在了就+1;
- 遍历对象,得到最大值和该字符。
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var char = str.charAt(i);
if (o[char]) {
o[char]++;
} else {
o[char] = 1;
}
}
var max = 0;
var count = 0;
for (var k in o) {
if (o[k] > max) {
max = o[k];
count = k;
}
}
console.log('出现次数最多的字符是:' + count, '出现的次数:' + max);//出现次数最多的字符是:o 出现的次数:4
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 相同但是不接受负值 |
concat(str1,str2,str3..)
var str = 'hello';
console.log(str.concat("world")); //helloworld
console.log(str); //hello
- 不改变原有字符串;
- 返回新的字符串。
substr(start,length)
start
截取的起始位置;length
截取几个字符。
var str = 'hello';
console.log(str.substr(3, 2)); //lo
console.log(str); //hello
- 返回截取的字符;
- 不改变原有字符串。
replace(value1,value2)
替换字符,只会替换第一个字符;
value1
:被替换的字符;value2
:替换后的字符。
var str = 'hello';
console.log(str.replace('l', 'w')); //hewlo
console.log(str); //hello
/*替换所有l的字符*/
var str1 = str.replace('l', 'w');
while (str1.indexOf('l') !== -1) {
str1 = str1.replace('l', 'w');
}
console.log(str1); //hewwo
- 不改变原有字符串。
- 返回新的字符串。
split('分隔符')
字符转换为数组(join('分隔符')
把数组转换为字符串)
var str2 = 'red,pink,blue'
console.log(str2.split(',')); // ["red", "pink", "blue"]
console.log(str2); //red,pink,blue
6.8 - 课下查阅
toUpperCase()
–转换大写
toUpperCase()
方法将调用该方法的字符串转为大写形式并返回(如果调用该方法的值不是字符串类型会被强制转换)
var str = 'i can fiy'
console.log(str.toUpperCase()); //I CAN FIY
console.log(str); //i can fiy
toLowerCase()
–转换小写
toLowerCase()
会将调用该方法的字符串值转为小写形式,并返回。
var str = 'I LIKE CANDY'
console.log(str.toLowerCase()); //i like candy
console.log(str); //I LIKE CANDY
作业:
给定一个字符串, 如: "abaasdffggghhjjkkgfddsssss3444343” , 问题如下:
- 字符串的长度;
- 取出指定位置的字符,如:
0,3,5,9
等; - 查找指定字符是否在以上字符串中存在,如:i,c ,b等;
- 替换指定的字符,如: g替换为22,ss替换为b等操作方法;
- 截取指定开始位置到结束位置的字符串,如:取得1-5的字符串;
- 找出以上字符串中出现次数最多的字符和出现的次数。
var str = 'abaasdffggghhjjkkgfddsssss3444343';
/* 1.输出字符串的长度 */
console.log(str.length);
/* 2.返回指定位置的字符 */
console.log(str.charAt(0));
console.log(str.charAt(3));
console.log(str.charAt(5));
console.log(str.charAt(9));
/*3.把查找字符的过程封装成函数*/
function checkUp(a) {
var result = '';
for (var i = 0; i < str.length; i++) {
var char = str.charAt(i);
if (char == a) {
result = "该字符串中存在此元素。";
break;
} else {
result = "该字符串中不存在此元素。";
}
}
return result;
}
/*调用函数*/
console.log(checkUp('i'));
console.log(checkUp('c'));
console.log(checkUp('b'));
/*4.把替换字符的过程封装成函数*/
function newStr(a, b) {
var newStr = str.replace(a, b)
while (newStr.indexOf(a) !== -1) {
newStr = newStr.replace(a, b)
}
return newStr;
}
/*带入实参输出结果*/
console.log(newStr('g', '22'));
console.log(newStr('ss', 'b'));
/*5.截取字符串*/
console.log(str.substr(5, 5));
/*6.查找出现次数最多的字符以及次数*/
var obj1 = {};
var max = 0;
var count = 0;
for (var i = 0; i < str.length; i++) {
var char = str.charAt(i);
if (obj1[char] > 0) {
obj1[char]++;
} else {
obj1[char] = 1;
}
}
for (var k in obj1) {
if (obj1[k] > max) {
max = obj1[k];
count = k;
}
}
console.log('出现最多次数的字符是:' + count + ' ,出现的次数:' + max);