1.内置对象
在JavaScript中的对象分为三种:自定义对象 内置对象 浏览器对象
前面两种对象是js的基础内容 属于ECMAScript 浏览器对象属于我们js独有的
内置对象就是JS语言自带的一些对象 这些对象供开发者使用 并提供了一些常用的或最基本而必要的功能(属性和方法)
JavaScript提供了多个内置对象:Math Date Array String等
2.查文档
学习一个内置对象的使用 只需要学会其常用成员的使用即可 我们可以通过查文档学习。可以通过MDN/W3C来查询。
MDN官网: https://developer.mozilla.org/zh-CN/
3.Math对象
初体验
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>math对象初体验</title> <script> //Math对象 不是一个构造器 所以我们不需要new来调用 而是直接使用里面的属性和方法 //π 圆周率 一个属性 直接使用 console.log(Math.PI); //返回一组数中的最大值 如果一组数中有一个不是数值 那么返回NaN //那么如果参数为空 那么返回的是-Infinity 无穷小 console.log(Math.max(1, 5, 9, 7)); //9 console.log(Math.max(-1, 10)); // -1 console.log(Math.max(1, 'pink')); //NaN console.log(Math.max()); //-Infinity 无穷小 //返回一组数中的最小值 其他和max() 差不多用法 console.log(Math.min(1, 3, 5, 9)); console.log(Math.min()); //Infinity 无穷大 </script> </head>
案例:封装自己的数学对象
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>封装Math对象</title> <script> //利用对象封装自己的数学对象 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, 2, 3)); console.log(myMath.min(1, 2, 3)); </script> </head>
Math概述
Math对象不是构造函数 它具有数学常数和函数的属性和方法 跟数学相关的运算(求绝对值 取整 最大值等)
可以使用Math中的成员。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>math常用属性和方法</title> <script> //求绝对值 console.log(Math.abs(-1)); //1 console.log(Math.abs(1)); //1 console.log(Math.abs('-1')); //1 隐式转换 会把字符串类型转换成数字型 console.log(Math.abs('pink')); //NaN //三个取整方法 //Math.floor() 向下取整 console.log(Math.floor(3.9)); //3 console.log(Math.floor(3.1)); // 3 //Math.ceil() 向上取整 console.log(Math.ceil(3.1)); // 4 console.log(Math.ceil(3.9)); // 4 //Math.round() 四舍五入 其他数字都正常 但是.5特殊 他往大了取 console.log(Math.round(3.1)); // 3 console.log(Math.round(3.6)); // 4 console.log(Math.round(-1.1)); //-1 console.log(Math.round(-1.5)); //-1 console.log(Math.round(-1.6)); // -2 </script> </head>
Math中的random函数
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // Math.random() 函数返回一个浮点数 伪随伪机数在范围[0,1)，也就是说 从0(包括0)往上 但是不包括1 // 这个方法不跟参数 // 代码验证 console.log(Math.random()); //得到两个数之间的随机数 大于等于最小的 小于最大的 function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } //得到两个数之间的随机整数 //不含最大值，含最小值 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } //得到一个两数之间的随机整数，包括两个数在内 function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 } console.log(getRandomIntInclusive(1, 10)); //随机点名 var arr = ['张三', '张三丰', '张嘻嘻', '李四', '思思']; let index = getRandomIntInclusive(0, arr.length - 1); console.log(arr[index]); </script> </head>
猜数字游戏
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>猜数字游戏</title> <script> function getRandom(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } var num = getRandom(1, 10); while (true) { var inputNum = prompt('请猜一到十之间的数字'); if (inputNum > num) { alert('输入的数字过大'); } else if (inputNum < num) { alert('输入的数字过小'); } else { alert('恭喜你猜对了'); break; } } </script> </head>
日期对象
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Date初体验</title> <script> //Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象 var arr = new Array(); // 创建一个数组对象 var obj = new Object(); //创建一个对象 Object 泛指对象 // 使用Date 如果没有参数 返回系统的当前时间 var date = new Date(); //当前的时间 console.log(date); // 参数常用的写法 数字型的 2020,03,03 或者是字符串类型 '2020-03-03 08:08:08' // 如果输入的数字类型的 月份会比输入的大一 var date1 = new Date(2020, 03, 03); // 2020年4月03 console.log(date1); var date2 = new Date('2020-03-03 08:08:08'); //准确 console.log(date2); </script> </head>
日期的格式化：
我们想要2020-03-03 08:08:08 这样格式的易懂的 应该要怎么办呢
需要获取日期的指定部分 所以我们要手动的得到这种格式。
案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日期的格式化</title> <script> var date = new Date(); console.log(date.getFullYear()); //当前月份是3 但是返回的是2 因为是从0开始的(0 - 11) console.log(date.getMonth()); //所以要想获得正确的月份应该这样 console.log(date.getMonth() + 1); //返回的日 几天是几号 console.log(date.getDate()); // 返回当前日期是星期几 周一到周六返回的是 1 2 3 4 5 6 但是周日返回的是0 console.log(date.getDay); // 2020年 3月3日 星期二 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDay(); var week = date.getDay(); //获取 当前时间的 时 var hour = date.getHours(); //获取 当前时间的 分 var minutes = date.getMinutes(); // 获取当前时间的 秒 var seconds = date.getSeconds(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] console.log('今天是' + year + '年' + month + '月' + dates + '日' + '周 ' + arr[week]); //返回当前时间的时分秒 function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDay(); var hour = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); return year + '-' + getRightNum(month) + '-' + getRightNum(dates) + ' ' + getRightNum(hour) + ':' + getRightNum(minutes) + ':' + getRightNum(seconds); } function getRightNum(num) { var rightNum = num return rightNum >= 10 ? rightNum + '' : '0' + rightNum } console.log(getRightNum(2)); console.log(getTime()); </script> </head>
获取日期的总的毫秒形式
Date对象是基于1970年1月1日(世界标准时间)起的毫秒数
我们经常利用总的毫秒数来计算时间 因为他们更精确
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 获取Date的总毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日的毫秒数 var date = new Date(); //1. 通过valueOf() getTime() 方法获取 //现在时间距离1970年1月1日总的毫秒数 console.log(date.valueOf()); console.log(date.getTime()); //2. +new Date() 返回的就是总的毫秒数 最常用的 var date1 = +new Date(); console.log(date1); //3. H5新增的 获取现在距离1970年1月1日的总毫秒数 console.log(Date.now()); </script> </head>
计算时间间距案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时案例</title> <script> // 毫秒转换为天时分秒 // 天 = 总秒数 / 60 / 60 / 24 // 时 = 总秒数 / 60 / 60 % 24 // 分 = 总秒数 / 60 % 60 // 秒 = 总秒数 % 60 function countDown(time) { //当前时间的总毫秒数 var nowTime = +new Date(); //返回的是用户输入时间总的毫秒数 var inputTime = +new Date(time); //剩余时间总的秒数 var times = (inputTime - nowTime) / 1000; var d = parseInt(times / 60 / 60 / 24); var h = parseInt(times / 60 / 60 % 24); var m = parseInt(times / 60 % 60); var s = parseInt(times % 60); return getRightNum(d) + '天' + getRightNum(h) + '时' + getRightNum(m) + '分' + getRightNum(s) + '秒' } function getRightNum(num) { var rightNum = num return rightNum >= 10 ? rightNum + '' : '0' + rightNum } console.log(countDown('2020-04-28 08:08:08')); </script> </head>
数组对象
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>创建数组的两种方式</title> <script> //1. 利用字面量创建 var arr = []; //利用 new Array()创建 var arr1 = new Array(); //创建指定长度的数组 2表示创建的数组的长度 arr2 长度为2 有两个空的数组元素 var arr2 = new Array(2); console.log(arr2); //虽然长度为2 但是也可以通过索引添加索引大于1的值 中间会插入空值 arr2[3] = 4; console.log(arr2); //数组为 [2,3] 表示里面有两个数组元素 元素为2,3 var arr3 = new Array(2, 3); console.log(arr3); </script> </head>
检测是否为数组:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // function reverse(arr) { // var newArr = []; // for (var i = arr.length; i >= 0; i--) { // newArr[newArr.length] = arr[i]; // } // return newArr; // } //完善版本 function reverse(arr) { if (arr instanceof Array) { var newArr = []; for (var i = arr.length; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } else { return '触底实参错误'; } } console.log(reverse([1, 2, 3])); //如果实参不为数组 console.log(reverse(1, 2, 3)); //就不行 返回[] //完善上面的程序 //1.检测是否为数组 // instanceof 运算符 可以用来检测是否为数组 var arr = []; var obj = new Object(); console.log(arr instanceof Array); console.log(arr instanceof Array); //2. 检测是否为数组第二种方法 Array.isArray() 但是是H5新增的方法 IE9以上才支持 console.log(Array.isArray(arr)); //true console.log(Array.isArray(obj)); //false </script> </head>
添加删除数组元素的方法
添加元素案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>数组添加和删除元素</title> <script> //1. push() 在我们数组的后面添加一个或多个元素 var arr = [1, 2, 3]; arr.push(4); console.log(arr); //1，2，3，4 arr.push(5, 'pink'); // 1 2 3 4 5 pink //1 push 是可以给数组追加新的元素 //2 push() 参数直接写 数组元素就可以了 //3 push() 方法返回的是新数组的长度 //4 push() 后 原来的数组也发生了变化 //2 unshift() 在数组的开头添加一个或多个元素 arr.unshift('red'); //red 1 2 3 4 5 pink arr.unshift('purple', 'blue') //purple blue red 1 2 3 4 5 pink console.log(arr); //1 unshift 是可以给数组追加新的元素 //2 unshift 参数直接写 数组元素就可以了 //3 unshift 方法返回的是新数组的长度 //4 unshift 后 原来的数组也发生了变化 </script> </head>
减少元素案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>删除数组元素</title> <script> //pop 删除数组的最后一个元素 var arr = ['red', 1, 2, 3, 4, 5, 'pink']; arr.pop(); console.log(arr); //red 1 2 3 4 5 // pop() 可以删除数组中的最后一个元素 // pop() 返回被删除的元素 // pop() 不跟参数 // pop() 原数组也会发生变化 //shift //删除数组的第一个元素 arr.shift(); // 1 2 3 4 5 // shift() 可以删除数组中的第一个元素 // shift() 返回被删除的元素 // shift() 不跟参数 // shift() 原数组也会发生变化 </script> </head>
筛选数组案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>筛选数组案例</title> <script> 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); </script> </head>
数组排序:
案例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组排序</title> <script> //reverse() 翻转数组 var arr = [1, 2, 3, 4, 5]; arr.reverse(); console.log(arr); // [5,4,3,2,1] var arr1 = [3, 4, 7, 1]; arr1.sort(); console.log(arr1); //[1,3,4,7] var arr2 = [1, 13, 4, 7, 77]; arr2.sort(); //如果不跟排序方式 出现像上边的双位数 会出现错误 console.log(arr2); //[1, 13, 4, 7, 77] //sort 后面添加排序方式 arr2.sort(function (a, b) { return a - b; //升序排列 }) console.log(arr2); //[1, 4, 7, 13, 77] //降序排列 arr2.sort(function (a, b) { return b - a; //降序排列 }) console.log(arr2); //[77, 13, 7, 4, 1] </script> </head>
数组索引方法
案例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组中元素的索引</title> <script> var arr = ['red', 'blue', 'green', 'blue', 'pink'] //如果数组中有两个满足条件的元素 只返回第一个满足条件元素的饿索引 //如果数组中没有满足条件的 返回 -1 console.log(arr.indexOf('blue')); // 1 //如果数组中有多个元素满足条件 返回最后一个满足条件的索引 //如果数组中只有一个满足条件的元素和indexOf()相同 //如果数组中没有满足条件的元素 返回-1 console.log(arr.lastIndexOf('blue')); //3 </script> </head>
案例 数组去重:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组去重</title> <script> var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 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; } console.log(unique(arr)); </script> </head>
数组转化为字符串
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组转化为字符串</title> <script> //1 toString()方法 把数组转换为字符串 返回一个字符串 var arr = [1, 2, 3]; console.log(arr); //[1,2,3] var arrStr = arr.toString(); console.log(arrStr); // '1,2,3' //2 join('分割符') 方法用于把数组中所有元素转换为一个字符串 var arr2 = ['green', 'blue', 'pink']; var arr2Str = arr2.join('-'); console.log(arr2Str); //'green-blue-pink' var arr3 = ['哈哈哈', '嘻嘻嘻', '嘿嘿嘿']; console.log(arr3.join('&')); // '哈哈哈&嘻嘻嘻&嘿嘿嘿' // concat() //连接两个数组 或多个数组 不影响原数组 返回一个新的数组 var arr3 = arr.concat(arr2); console.log(arr3); // [1, 2, 3, "green", "blue", "pink"] //数组截取函数 slice(begin,end) 返回被截取项目的新数组 //这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end） var arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(arr4.slice(3, 6)); //[4, 5, 6] //splice() 函数 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组 //splice('删除元素的位置','要删除元素的个数','删除元素位置替换的元素') var arr5 = [9, 8, 7, 6, 5]; //从索引为2 开始删除0个元素 并且索引2添加元素为10 arr5.splice(2, 0, 10); console.log(arr5); // [9,8,10,7,6,5] //从索引为2开始包括索引3 删除3个元素 然后索引2变为10 arr5.splice(2, 3, 11); console.log(arr5); // [9,8,11,5] </script> </head>
字符串
基本包装类型
为了方便操作基本数据类型，js提供了三个特殊的引用类型 String Number Boolean
基本包装类型 就是把简单数据类型包装成为复杂的数据类型 这样基本数据类型就有了属性和方法
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串</title> <script> //基本包装类型 var str = 'andy' console.log(str.length); //4 //对象 才有 属性和方法 复杂数据类型才会有属性和方法 //下面就是 基本包装类型的步骤 //基本包装类型 就是把简单的数据类型 包装成为了 复杂数据类型 //(1) 把简单数据类型包装成为复杂数据类型 var temp = new String('andy'); //(2) 把临时变量的值 给Str str = temp; //(3) 销毁这个临时变量 temp = null; </script> </head>
字符串的不可变
指的是里面的值不可变 虽然看上去可以改变内容。但其实是地址改变了 内存中新开辟了一个内存空间.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串的不可变性</title> <script> //开辟了一个str指向的空间 var str = 'andy'; console.log(str); //又开辟了一个空间存放red str 又指向了red的地址 但是原来andy的空间还是存在的 str = 'red'; console.log(str); //因为我们字符串的不可变性 所以不要大量的拼接字符串 var str1 = ''; for (var i = 1; i <= 10000; i++) { str += i; } //会停留一段时间 才会打印 影响性能 console.log(str); </script> </head>
根据字符返回位置
字符串所有的方法 都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>返回字符串中字符的位置</title> <script> //indexOf() 从前向后找 只找第一个匹配的 var str = '改革春风吹满地 春天来了'; console.log(str.indexOf('春')); // 2 //lastIndexOf() 从后往前找 只找第一个匹配的 console.log(str.lastIndexOf('春')) //8 //其实还有一个参数indexOf(‘要找的字符’,[起始位置]) 起始位置是可选的 //从索引号为3的位置开始向后查找 console.log(str.indexOf('春', 3)); // 8 ////lastIndexOf(‘字符’,[起始位置]) //从索引七开始向前查找 console.log(str.lastIndexOf('春', 7));//2 </script> </head>
寻找元素位置次数案例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串位置案例</title> <script> var str = 'abcoefoxyozzopp'; var index = str.indexOf('o'); var num = 0; while (index != -1) { console.log(index); num++; index = str.indexOf('o', index + 1); } console.log(num); </script> </head>
根据位置返回字符
案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>位置返回字符</title> <script> //charAt();//根据位置返回字符 var str = 'andy'; console.log(str.charAt(3)); for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)); } //str[index] 获取指定位置的字符串 HTML5 IE8浏览器以上 for (var i = 0; i < str.length; i++) { console.log(str[i]); } //charCodeAt();//返回字符的ASCII码 //目的 判断用户按的哪个键 for (var i = 0; i < str.length; i++) { console.log(str.charAt(i) + '的ASCII码是' + str.charCodeAt(i)); } </script> </head>
案例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //判断一个字符串abcoefoxyozzopp中出现次数最多的字符 并统计其次数 //1 利用charAt()遍历这个字符串 //2把每个字符都存储给对象 如果对象没有该属性 就为1 如果存在了就+1 //3遍历对象 得到最大值和该字符 var str = 'abcoefoxyozzopp' var obj = {}; for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); if (obj[chars]) { obj[chars]++; } else { obj[chars] = 1; } } console.log(obj); //遍历对象 var max = 0; var ch = '' for (var k in obj) { //k 得到的是属性名 //obj[k]得到的是属性值 if (obj[k] > max) { max = obj[k]; ch = k; } } console.log('出现最多的字符是' + ch + '出现了' + max + '次'); </script> </head>
字符串的操作方法
代码示例 :
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串常用的方法</title> <script> //concat(str1,str2,str3....) 用于连接多个字符串 拼接字符串 等效于+ +更常用 var str = '张'; var str1 = '嘎'; console.log(str.concat(str1), str + str1); //张嘎 张嘎 //截取字符串 //(1) substr(start,length) 从start位置开始(索引号) 截取的长度为length var str2 = 'abcdefghigklmn'; console.log(str2.substr(3, 6)); //defghi //(2) slice(start,end) 从所以呢Start开始到索引end结束 但是不包括end console.log(str2.slice(3, 7)); //defg //(3) substring(start,end) //从索引start开始到索引end结束 end不被包括 console.log(str2.substring(3, 8)); //defgh </script> </head>
替换字符串 把字符串转换为数组
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 替换字符串 replace('被替换的字符','替换为的字符') // 如果替换的字符有两个 那么只会替换第一个字符 var str = '改革春风吹满地'; var str2 = str.replace('春', '秋'); console.log(str2); //改革秋风吹满地 //替换字符串里面的o为*号 var str3 = 'abcdefoogfhjoo'; while (str3.indexOf('o') !== -1) { str3 = str3.replace('o', '*'); } console.log(str3); //abcdef**gfhj** //字符串转换为数组split('分隔符') var str4 = 'red,pink,blue'; console.log(str4.split(',')); //["red", "pink", "blue"] </script> </head>
字符大小写转换
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串转大小写</title> <script> //toUpperCase()大写 var str = 'abcdEFGcvb'; console.log(str.toUpperCase()); //ABCDEFGCVB //toLowerCase() 小写 console.log(str.toLowerCase()); //abcdefgcvb </script> </head>