【JavaScript】14 - JavaScript内置对象

最新推荐文章于 2023-03-13 17:01:54 发布
最新推荐文章于 2023-03-13 17:01:54 发布
阅读量277 收藏
点赞数
分类专栏： 【JavaScript】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53493562/article/details/118896240
版权

JavaScript内置对象

需要思考以下问题：

  1. 什么是内置对象？
  2. 如何根据文档查询指定API的使用方法？
  3. 如何使用Math对象的常用方法？
  4. 如何使用Date对象的常用方法？
  5. 如何使用Array对象的常用方法？
  6. 如何使用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。

MDN

2.2 - 如何学习对象中的方法
  1. 查阅该方法的功能

在这里插入图片描述

  1. 查看里面参数的意义和类型

在这里插入图片描述

  1. 查看返回值的意义和类型

在这里插入图片描述

  1. 通过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. 如果大于该数字，就提示，数字大了，继续猜；

  2. 如果小于该数字，就提示数字小了，继续猜；

  3. 如果等于该数字，就提示猜对了，结束程序。

案例分析：

  1. 随机生成一个1~ 10的整数我们需要用到Math.random()方法。
  2. 需要一直猜到正确为止，所以一直循环。
  3. 用while循环合适更简单。
  4. 核心算法:使用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()方法的使用
  1. 获取当前时间必须实例化
        var now = new Date();
        console.log(now); //Sun Jul 18 2021 15:58:21 GMT+0800 (中国标准时间)
  • Date()是一个构造函数必须使用new来调用创建我们的日期对象；
  • 如果没有提供参数，那么新创建的Date对象表示实例化时刻的日期和时间（返回当前系统的当前时间）。
  1. 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 - 日期格式化
  1. 我们想要2019-8-8 8:8:8格式的日期，要怎么办?
  2. 需要获取日期指定的部分，所以我们要手动的得到这种格式。
方法名说明代码
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号过了多少亳秒数。
  1. 通过 valueOf()/getTime()获取：
        var date = new Date();
        console.log(date.valueOf()); //现在时间距离1970.1.1总的亳秒数
        console.log(date.getTime());
  1. 简单写法（最常用的写法）：
        var date = +new Date();
        console.log(date);
  1. H5新增的方法：
        console.log(Date.now());
案例：倒计时效果

做一个倒计时效果；

案例分析

  1. 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时, 但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
  2. 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
  3. 把剩余时间总的亳秒数转换为天、时、分、秒（时间戳转换为时分秒）
        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 - 创建数组的两种方式：
  1. 利用数组字面量
        var arr = [2, 3]
        console.log(arr); //[2, 3]
  1. 利用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 - 检测是否为数组
  1. instanceof运算符；它可以用来检测是否为数组：
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array); //true
        console.log(obj instanceof Array); //false
  1. Array.isArray() 用于确定传递的值是否是一个数组。
        var arr = [];
        var obj = {};
        console.log(Array.isArray(arr)); //true
        console.log(Array.isArray(obj)); //false
  • H5新增的方法；IE9以上版本支持
5.3 - 添加删除数组元素的方法
  1. push()在我们数组的末尾添加一个或者多个数组元素：
        var arr = [1, 2, 3]
        arr.push(4);
        console.log(arr.push('豆沙')); //5
        console.log(arr); //[1, 2, 3, 4, "豆沙"]
  • push()是可以给数组追加新的元素；
  • push()参数直接写数组元素就可以；
  • push()完毕之后，返回的结果是新数组的长度。
  • 原数组也会发生变化。
  1. unshift()在我们数组的开头添加一个或者多个数组元素：
        var arr = [1, 2, 3]
        arr.unshift(4);
        console.log(arr.unshift('豆沙')); //5
        console.log(arr); //["豆沙", 4, 1, 2, 3]
  • unshift()是可以给数组追加新的元素；
  • unshift()参数直接写数组元素就可以；
  • unshift()完毕之后，返回的结果是新数组的长度。
  • 原数组也会发生变化。
  1. pop()它可以删除数组的最后一个元素：
        var arr = [0, 1, 2, 3, '豆沙', '番茄', '菠萝']
        arr.pop();
        console.log(arr.pop()); //番茄
        console.log(arr); //[0, 1, 2, 3, "豆沙"]
  • pop()它可以删除数组的最后一个元素，一次只能删除一个；
  • pop()没有参数；
  • pop()完毕之后，返回的结果是删除的元素。
  • 原数组也会发生变化。
  1. 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 - 数组排序
  1. reverse()翻转数组
        var arr = ['豆沙', '菠萝', '番茄', '土豆', '西红柿'];
        arr.reverse();
        console.log(arr); //["西红柿", "土豆", "番茄", "菠萝", "豆沙"]
  1. 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 - 数组索引方法

返回数组元素索引号的方法：

  1. indexOf()（数组元素）作用就是返回该数组元素的索引号；从前面开始查找。
        var arr = ['豆沙', '菠萝', '番茄', '豆沙', '西红柿'];
        console.log(arr.indexOf('豆沙')); //0
        console.log(arr.indexOf('blue')); //-1
  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 - 数组转换为字符串
  1. toString()将我们的数组转换为字符串；
        var arr = [1, 2, 3]
        console.log(arr.toString()); //1,2,3
  1. 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()
  1. concat( value ) 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
  • value
    • 数组和/或值，将被合并到一个新的数组中。
        var arr = [1, 2, 3];
        var arr2 = ['一', '二', '三'];
        console.log(arr.concat(arr2, '豆沙')); //[1, 2, 3, "一", "二", "三", "豆沙"]
        console.log(arr); //[1, 2, 3]
  • 方法不会更改现有数组
  • 返回一个新的数组
  1. 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, "一", "二", "三", "豆沙"]
  1. **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()从后往前找，只找第一个匹配的
  1. str.indexOf('要查找的字符'，[ 起始的位置])
        var str = '番茄炒西红柿,菠萝炒凤梨';
        console.log(str.indexOf('炒')); //2
        console.log(str.indexOf('炒', 3)); //9
案例：返回字符位置

查找字符串"abcoefoxyozopp"中所有o出现的位置以及次数。

思路：

  1. 核心算法：先查找第一个o出现的位置；
  2. 然后只要indexOf返回的结果不是-1就继续往后查找；
  3. 因为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 - 根据位置返回字符(重点)
  1. charAt(index)返回指定位置的字符
        var str = 'dousha';
        console.log(str.charAt(2)); //u
        //遍历字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
  1. charCodeAt(index)获取指定位置处字符的ASCII码
        var str = 'dousha';
        console.log(str.charCodeAt(2)); //117
  • 用于判断用户按下了那个键；
  1. 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'中出现次数最多的字符，并统计其次数。

  1. 核心算法：利用charAt()遍历这 个字符串
  2. 把每个字符都存储给对象，如果对象没有该属性， 就为1，如果存在了就+1；
  3. 遍历对象，得到最大值和该字符。
        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 相同但是不接受负值
  1. concat(str1,str2,str3..)
        var str = 'hello';
        console.log(str.concat("world")); //helloworld
        console.log(str); //hello
  • 不改变原有字符串；
  • 返回新的字符串。
  1. substr(start,length)
  • start截取的起始位置；
  • length截取几个字符。
        var str = 'hello';
        console.log(str.substr(3, 2)); //lo
        console.log(str); //hello
  • 返回截取的字符；
  • 不改变原有字符串。
  1. 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
  • 不改变原有字符串。
  • 返回新的字符串。
  1. 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” ， 问题如下：

  1. 字符串的长度；
  2. 取出指定位置的字符,如: 0,3,5,9等；
  3. 查找指定字符是否在以上字符串中存在，如：i，c ，b等；
  4. 替换指定的字符，如： g替换为22，ss替换为b等操作方法；
  5. 截取指定开始位置到结束位置的字符串，如：取得1-5的字符串；
  6. 找出以上字符串中出现次数最多的字符和出现的次数。
        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);

END

郑SaScha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
javascript内置对象arguments详解
10-23
主要介绍了javascript内置对象arguments,实例讲解arguments是什么怎么用,需要的朋友可以参考下
javascript内置对象操作详解
10-24
主要介绍了javascript内置对象操作详解,需要的朋友可以参考下
JavaScript常见的四种内置对象
qq_44329870的博客
01-08 3457
一.四种内置对象 JS内置对象即为Javascript自带的对象，并且提供了一些常用的的功能。 1.Array对象：提供一个数组的模型来存储大量有序的数据。 2.Math对象：可以处理所有的数学运算 。 3.Date对象：可以处理日期和时间的存储、转化和表达。 4.String对象：可以处理所有的字符串的操作。 数学对象示例代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&gt
JavaScript之常用内置对象
m0_47425649的博客
05-03 314
这一篇主要介绍JS中几个常用的内置对象 1）对象 对象是由属性和方法组成的,使用点语法访问 2）Array 数组 1. 创建 //定义一个数组 数组的内容是 1 2 3 4 var arr = [1,2,3,4]; console.log(arr); // console.log(arr[1:3]) //定义一个长度为3的数组 ...
封装一个自己的Math数学对象【JavaScript】
Zhan_chi_的博客
03-13 387
arguments展现出来的形式是一个伪数组。这样，不知道参数个数的时候，用arguments就可以当作数组来遍历。伪数组满足三个属性：1.具有数组的length属性2.按照索引的方式进行存储3.它没有真正数组的一些方法，例如pop（），push（）等等。
Math 的使用方法
wangyangzxc123的博客
10-11 2268
注释: Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可 1.最大值 console.log(Math.max(1,2,4,3)) //输入结果4 console.log(Math.max(-1, -10)); //输入结果-1 2.最小值 console.log(Math.min(1,2,4,3)) //输入结果1 console.log(Math.min(-1, -10)); //输入结果-10 3.圆周率 console.
JavaScript中Number对象的方法和Math对象的方法
请回答，1988
07-02 725
Number 对象 Number 对象是原始数值的包装对象。 创建 Number 对象的语法： var myNum=new Number(value); var myNum=Number(value); Number对象方法 方法 描述 toString 把数字转换为字符串，使用指定的基数。 toLocaleString 把数字转换为字
JavaScript内置对象-Math对象
qq_46112274的博客
11-24 3170
JavaScript内置对象1、内置对象2、查文档2.1、MDN2.2、如何学习对象中的方法3、Math内置对象3.1、求最大值3.2、封装自己的数学对象3.3、Math概述3.3.1、Math绝对值和三个取整方法3.3.2、Math.Random()随机数方法、随机点名3.3.3、猜数字游戏 1、内置对象 2、查文档 2.1、MDN MDN官网：https://developer.mozilla.org/zh-CN/ MDN官网JavaScript文档：https://developer.mozill
Javascript3-内置对象
11-14
Javascript3- 内置对象
JavaScript 核心参考教程 内置对象
10-29
JavaScript 不是纯面向对象的语言，而是基于对象的，这意味着它允许开发者利用内置对象来实现各种功能，但并不强制使用面向对象的编程范式。 在JavaScript中，内置对象是语言本身提供的基础结构，它们提供了许多...
JavaScript 的常用内置对象
01-08
目录JavaScript 常用内置对象1. 字符串2. 数组3. 日期4. 数学运算5. 全局函数 JavaScript 常用内置对象 1. 字符串 字符串 //1.构造字符串对象可以使用 双引号,单引号,反引号,new关键字 //双引号字符串 let s1...
最近复习完js，来做一个总结记录一下
Three_lifetime的博客
10-09 170
1，this指向问题 一般情况下，this指向调用他们那个对象 在全局作用域下 this指向谁 window 普通函数里面this指向谁 window function fn() { console.log(this); }; fn(); 定时器里面的this指向谁 window window.setTimeout(function() { console.log(this); }, 3000); 对象的方法里面的thi
JS学习笔记（二）
NEXT00的博客
02-01 141
自学js笔记分享
Math对象、日期对象、数组对象、字符串对象
znhyXYG的博客
11-16 272
内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 定义：一个具体的事物 对线是一组无序的相关属性和方法的集合（由属性和方法构成） 保存一个值：变量 保存一组值：数组 保存一个完整信息：对象 avaScript 提供了多个内置对象：Math、 Date 、Array、String等 查文档 查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。 ​ Mozilla 开发者网络（MDN）提供了有关
cryptography-0.9-cp34-none-win32.whl
06-18
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
antdpro Demo
最新发布
06-18
antdpro Demo
m3u8播放器源码 ,ckplayer播放m3u8.zip
06-18
m3u8播放器源码 ,ckplayer播放m3u8
大众点评全国生活服务POI采集420万家-2024年5月底（部分一千家展示）
06-18
（部分一千家展示） 数据说明： 1、基础信息只有店铺id、店铺名称、十分制的子评分、地址、人均消费、评价数量、店铺类型、所在省、市、区、商圈(街道)字段。 2、电话、五分制总评分、经纬度等其他详细字段是没有的，且店铺名超过15个汉字后会省略后面名字。 3、数据完整性：大众点评数据采集原理是按分类把城市拆解为最小单位（商圈/街道），每种请求的返回上限是750家店铺。有两种情况会漏采，一种是最小单位商圈街道的最小分类仍然超过750，超出部分会漏采，这部分极少；另一种是部分店铺只属于区县，不属于下属街道，这时候会有部分漏采；综合来看，漏采率在5%以内，且排在后面被漏采的都是权重最低的店铺。 4、可少量单独采集电话、经纬度、团购信息等丰富字段，但无法批量采集。可采集各市各区的各类销量榜单、回头客榜单、好评榜单、热门榜单。 2024年5月底最新大众点评店铺基础信息采集。含美食、休闲娱乐、结婚、电影演出赛事、丽人、酒店、亲子、周边游、运动健身、学习培训、医疗健康、爱车、宠物、生活服务、购物、家装家居等十几大类近三千万家店铺信息。
pyzmq-17.1.2-cp37-cp37m-win_amd64.whl
06-18
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
javascript内置对象
10-07
JavaScript内置对象是指在JavaScript语言中自带的一些对象，这些对象提供了一些常用的或者是最基本而必要的功能，包括Math、Date、Array、String等。其中，Math对象提供了数学相关的方法和属性，Date对象用于处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值