JavaScript|JavaScript内置对象及案例前端|html|javascript

01-内置对象

内置对象 - 锐客网 > // 在javaScript中的对象分为三种：自定义对象，内置对象和浏览器对象 // 前面两种对象是js基础内容，属于ECMAScript; 第三个浏览器对象属于js独有的，在JS API讲解 // 内置对象就是指Js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） // 内置对象最大的优点就是可以帮助我们快速开发 // JavaScript中提供了多个内置对象：Math,Date,Array,String等

02-学会查阅MDN文档

学会查阅MDN文档 - 锐客网 > //学习一个内置对象的使用，要学会其常用成员的使用即可，我们可以通过文档学习，可以通过MDN/W3C来查询 //Mozilla开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括HTML，CSS和万维网及HTML５应用的API//MDN：https://developer.mozilla.org/zh-CN/// 2.2 如何学习对象中的方法 // 1.查阅该方法的功能 // 2.查看里面参数的意义和类型 // 3.查看返回值的意义和类型 // 4.通过demo进行测试

03-数学对象Math最大值方法

数学对象Math最大值方法 - 锐客网 > // Math数学对象不是一个构造函数，所以不需要new来调用而是直接使用里面的属性和方法即可 console.log(Math.PI); //例子一个属性圆周率 console.log(Math.max(1, 2, 34, 55, 99)); //99 console.log(Math.max(-1, -3, -5)); //-1 console.log(Math.max(1, 99, 'pink老师')); //NaN console.log(Math.max()); //-Infinity

04-封装自己的数学对象

封装自己的数学对象 - 锐客网 > var myMath = { PI: 3.141592653, 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); console.log(myMath.max(1, 5, 9)); console.log(myMath.max(1, 5, 9));

05-Math绝对值和三个取整方法

Math绝对值和三个取整方法 - 锐客网 > //Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员 // Math.PI //圆周率 // Math.floor() //向下取整 // Math.ceil() //向上取整 // Math.round() //四舍五入版就近取整注意 -3.5 结果是-3 // Math.abs() //绝对值 // Math.max() //最大值 // Math.min() //最小值//1.绝对值方法 console.log(Math.abs(-1)); //1 console.log(Math.abs(1)); //1 console.log(Math.abs('-1')); //1 隐式转换会把字符串型 -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 // (3)Math.round() 四舍五入版就近取整其他数字都是四舍五入，但是 .5 特殊，往大了取如-1.5 -1比-2大，所以是-1 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

06-Math随机数方法

Math随机数方法 - 锐客网 > // 1.随机数方法 Math.random() 返回一个随机的小数 0 =< x <1 // 2.这个方法里面里面不跟参数 // 3.代码验证 console.log(Math.random()); // 4.想得到一个两数之间的随机整数，包括两个数在内 // 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, arr.length - 1)]);

07-猜数字游戏

猜数字游戏 - 锐客网 > // 程序随机生成一个1~10之间的整数，并让用户输入一个数字 // 1.如果大于该数字，则提示数字大了，继续猜; // 2.如果小于该数字，则提示数字小了，继续猜; // 1.如果等于该数字，则提示猜对了，结束程序; //案例分析： // (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 random = getRandom(1, 10); //调用这个函数 while (true) { var num = prompt('请输入1~10之间的一个数字'); if (num > random) { alert('你猜大了'); } else if (num < random) { alert('你猜小了'); } else { alert('你猜对了!'); break; //退出整个循环，结束不加break程序会一直循环 } }

08-课下案例

课下练习 - 锐客网 > //要求用户输入1~50之间的一个数字，但是只有十次猜的机会 // 案例分析 // 1.利用内置对象getRanbom()随机生成一个1-50之间的整数 // 2.for循环设置循环次数 // 3.用if来判断结果是否正确，答对结束当前循环 // 4.超过10次，结束当前操作 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var random = getRandom(1, 50); for (i = 1; i <= 10; i++) { var num = prompt('请输入1~50之间的一个数字'); if (num > random) { alert('猜大了'); } else if (num < random) { alert('猜小了'); } else { alert('猜对了'); break; } if (i == 10) { alert('抱歉,你的次数已经用完'); } }

09-Date日期对象的使用

Date日期对象的使用 - 锐客网 > // Date()日期对象是一个构造函数必须使用new 来调用创建我们的日期对象 var arr = new Array(); //创建了一个数组对象 var obj = new Object(); //创建了一个对象实例 // 1.使用Date 如果没有参数返回当前系统的当前时间 var date = new Date(); console.log(date); // 2.参数常用的写法数字型 2019，10，01或者是字符串型 '2019-10-01 8:8:8' var date1 = new Date(2019, 10, 1); console.log(date1); //返回的是11月，不是10月 var date2 = new Date('2019-10-01 8:8:8'); console.log(date2);

10-格式化日期年月日星期

格式化日期年月日星期 - 锐客网 > // 4.3 日期格式化 var date = new Date(); console.log(date.getFullYear()); //返回当前日期的年份 2022 console.log(date.getMonth() + 1); //返回当前的月份(0-11) 返回的月份小一个月,所以月份要加一 console.log(date.getDate()); //返回的是几号17号 console.log(date.getDay()); //返回的是星期几周一返回的是1 周六返回的是6 但是周日返回的是0 // 我们写一个格式为 2022年2月17日星期四 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); // 星期几需要创建一个数组这样才能把数字如3 改为大写三 var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] var day = date.getDay(); console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

11-格式化日期时分秒

格式化日期时分秒 - 锐客网 > 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());

12-获取日期的总的毫秒数(时间戳)

获取日期的总的毫秒数(时间戳) - 锐客网 > // 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()); // 2.简单的写法(最常用的方法) var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数 console.log(date1); // 3.H5 新增的获得总的毫秒数需要考虑兼容性问题 console.log(Date.now());

13-倒计时案例

倒计时案例 - 锐客网 > //案例分析 // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿时分秒直接相减，如05分减去25分，结果会是负数 // 2.用时间戳来做。用户输入的时间的总的毫秒数减去现在时间的毫秒数，得到的就是剩余时间的毫秒数 // 3.把剩余时间的总的毫秒数转换为天，时，分，秒（时间戳转换为时分秒） // 转换公式如下 // d = parseInt(总秒数 / 60 / 60 / 24); //计算天数 // h = parseInt(总秒数 / 60 / 60 % 24); //计算小时 // m = parseInt(总秒数 / 60 % 60); // 计算分钟 // s = parseInt(总秒数 % 60); // 计算秒数 function countDown(time) { var nowTime = +new Date(); //返回的当前时间总的毫秒数 var inputTime = +new Date(time) //返回的是用户输入时间总的毫秒数 var times = (inputTime - nowTime) / 1000; //剩余时间总的毫秒数一秒等于1000毫秒 var d = parseInt(times / 60 / 60 / 24); //时间不能是小数，必须是整数，所以要用parseInt 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-2-17 11:25:56')); var date = new Date(); //当前时间是多少 console.log(date);

效果展示 【JavaScript|JavaScript内置对象及案例】

文章图片

14-创建数组的两种方式（复习）

创建数组的两种方式 - 锐客网 > //1.利用字面量创建数组 var arr = [1, 2, 3]; //数组的创建 console.log(arr[0]); //数组的使用//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);

15-检测是否为数组两种方式

检测是否是数组方式 - 锐客网 > //翻转数组 function reverse(arr) { //if (arr instanceof Array) { if (Array.isArray(arr)) { var newArr = []; for (i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } else { return 'error 这个参数要求必须是数组格式' } }console.log(reverse([1, 2, 3])); console.log(reverse(1, 2, 3)); //[] 空的数组// 检测是否是数组 // (1) instanceof 运算符它可以检测是否为数组 var arr = []; var obj = {}; console.log(arr instanceof Array); //true console.log(obj instanceof Array); //false // (2) Array.isArray(参数); // H5新增的方法 IE9以上版本支持 console.log(Array.isArray(arr)); //true console.log(Array.isArray(obj)); //false

16-添加删除数组元素方法

添加删除数组元素方法 - 锐客网 > // 1.添加数组元素// 方法一.push() 在数组的末尾添加一个或者多个数组元素 var arr = [1, 2, 3]; // arr.push(4, 'pink'); console.log(arr.push(4, 'pink')); //5 console.log(arr); //(1) push 可以给数组追加新元素 //(2) push() 参数直接写数组元素就可以了 //(3) push完毕之后，返回的结果是新数组的长度 //(4) 原数组也会发生变化// 方法二.unshift 在数组的开头添加一个或者多个数组元素 console.log(arr.unshift('red', 'purple')); // arr.unshift('red', 'purple'); console.log(arr); //(1) unshift 可以给在数组前面追加新元素 //(2) unshift() 参数直接写数组元素就可以了 //(3) unshift完毕之后，返回的结果是新数组的长度 //(4) 原数组也会发生变化// 2.删除数组元素// 方法一：pop() 它可以删除数组的最后一个元素 //arr.pop(); //不跟参数 console.log(arr); //['red', 'purple', 1, 2, 3, 4] 删除了pink console.log(arr.pop()); //返回值返回的是pink //(1) pop 可以删除数组的最后一个元素，记住一次只能删除一个元素 //(2) pop() 没有参数 //(3) pop完毕之后，返回的结果是被删除的那个元素 pink //(4) 原数组也会发生变化// 方法二：shift() 可以删除数组的第一个元素 //arr.shift(); // ['purple', 1, 2, 3, 4] 删除了第一个元素 red console.log(arr); console.log(arr.shift()); //(1) shift 可以删除数组的第一个元素，记住一次只能删除一个元素 //(2) shift() 没有参数 //(3) shift完毕之后，返回的结果是被删除的那个元素red //(4) 原数组也会发生变化

17-筛选数组

筛选数组 - 锐客网 > //有一个包含工资的数组[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]); //新数组本来是空的，把小于2000的元素一次追加到新数组中 } } console.log(newArr);

18-数组排序

数组排序 - 锐客网 > // 1.翻转数组 var arr = ['pink', 'red', 'blue']; arr.reverse(); //reverse() 颠倒数组中元素的顺序，无参数 console.log(arr); // 2.数组排序(冒泡排序) var arr1 = [3, 4, 7, 1]; //适用于个位数排序 arr1.sort(); //sort() 对数组中的元素进行排序 console.log(arr1); //特殊情况，需要加函数处理 var arr2 = [13, 4, 77, 1, 7]; arr2.sort(function(a, b) { // return a - b; 升序的顺序排序 return b - a; //降序的顺序排序 }); console.log(arr2); //[1, 13, 4, 7, 77] 排序会出错加函数后输出结果为[1, 4, 7, 13, 77]

19-获取数组元素索引号

获取数组元素索引号 - 锐客网 > //1.返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号从前面往后面查找 //它只返回第一个满足条件的索引号 //var arr = ['red', 'green', 'blue', 'pink', 'blue']; //console.log(arr.indexOf('blue')); //2 //如果在数组中找不到该元素，则返回的是-1 //var arr = ['red', 'green', 'pink']; // console.log(arr.indexOf('blue')); //-1//2.返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号从后往前查找 // 如果在数组中找不到该元素，则返回的是-1 //console.log(arr.lastIndexOf('blue')); //-1 var arr = ['red', 'green', 'blue', 'pink', 'blue']; console.log(arr.lastIndexOf('blue')); //4

20-数组去重案例

数组去重案例 - 锐客网 > //数组去重重点案例 (面试常考) // 有一个数组['c','a','z','a','x','a','x','c','b'],要求去除数组中重复的元素 // 案例分析 // (1) 把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重 // (2) 核心算法：遍历旧数组，然后拿着旧数组去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加 // (3) 我们怎么知道该元素没有存在用新数组.indexOf(数组元素) 如果返回-1时，就说明新数组里面没有该元素// 封装一个去重的函数 unique 独一无二的 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 demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']); console.log(demo);

21-数组转换为字符串

数组转换为字符串 - 锐客网 > //方法一 toString() 将数组转换为字符串 var arr = [1, 2, 3]; console.log(arr.toString()); //1,2,3 //方法二 join(分隔符) var arr1 = ['green', 'blue', 'pink']; console.log(arr1.join()); //green,blue,pink console.log(arr1.join('-')); // green-blue-pink join后面的括号可以输入自己想要的分隔符 console.log(arr1.join('&')); //green&blue&pink