javascript中有內建物件。內建物件是JS語言自帶的一些對象,常見的有:String物件、Array物件、Date物件、Boolean物件、Number物件、Math物件、RegExp物件、Global物件等等。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
JavaScript中的物件分為3中:自訂物件、內建物件、瀏覽器物件
前面兩種物件是JS基礎內容,屬於ECMAScript;第三個瀏覽器物件屬於我們JS獨有的
內建物件就是指JS語言自帶的一些物件,這些物件是供開發者使用,並提供了一些常用的或是最基本且必要的功能(屬性與方法)
內建物件最大的優點就是幫助我們快速開發
JavaScript提供了多個內建對象,Math、Date、Array、String等
String物件:字串對象,提供了對字串進行操作的屬性和方法。
Array對象:數組對象,提供了數組操作方面的屬性和方法。
Date對象:日期時間對象,可以取得系統的日期時間資訊。
Boolean物件:布林對象,一個布林變數就是一個布林物件。 (沒有可用的屬性和方法)
Number物件:數值物件。一個數值變數就是一個數值物件。
Math對象:數學對象,提供了數學運算方面的屬性和方法。
Object物件
RegExp物件
Global物件
Function物件
.....
#Math物件
#// Math数学对象 不是一个构造函数,所以我们不需要 new来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); //一个属性 圆周率 console.log(Math.max(1, 2, 99)); //99 console.log(Math.max(-1, -12)); //-1 console.log(Math.max(1, 99, '数学对象')); //NaN console.log(Math.max()); //-Infinity
案例:封裝自己的數學物件
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.min(1, 5, 9));
1Math概述
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 转换为数字型 console.log(Math.abs('wode')); //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特殊,它往大了取 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
2隨機數方法random()
//1. Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1 //2.这个方法里面不跟参数 // 3.代码验证 console.log(Math.random()); // 4.我们想要得到两个数之间的随机整数 并且包含这两个数 // return 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)]);
案例:猜數字遊戲
程式隨機產生一個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 random = getRandom(1, 10); while (true) { //死循环 var num = prompt('你来猜,输入1~10之间的一个数字'); if (num > random) { alert('猜大了'); } else if (num < random) { alert('猜小了'); } else { alert('猜对了'); break; } }
// 要求用户猜1~50之间的一个数字 但是只有10次猜的机会 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var random = getRandom(1, 50); var i = 0; while (i < 10) { //死循环 var num = prompt('你来猜,输入1~50之间的一个数字'); if (num > random) { alert('猜大了'); } else if (num < random) { alert('猜小了'); } else { alert('猜对了'); break; //退出整个循环结束程序 } i++; } if (i = 10) { alert('全部猜错了'); }
日期物件
#1Date概述
2Date()方法的使用
1.取得目前時間必須實例化
var now = new Date(); console.log(now);
2.Date()建構函式的參數
如果括號裡面有時間,就回傳參數裡面的時間,例如日期格式字串為'2019-5-1',可以寫成new Date('2019-5-1')或new Date('2019/5/1')
//Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象 var arr = new Date(); //创建一个数组对象 var obj = new Object(); //创建了一个对象实例 // 1.使用Date 如果没有参数 返回当前系统的当前时间 var date = new Date(); console.log(date); // 2.参数常用的写法 数字型 2019,10,01 或者是 字符串型 '2019-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'); console.log(date2);
3日期格式化
我們想要2019-8-8 8:8:8格式的日期,該怎麼辦?
需要取得日期指定的部分,所以我們要手動的得到這種格式
#方法名稱 | #程式碼 | |
getFullYears() | 取得當年 | dObj.getFullYears() |
#getMonth () | 取得當月(0-11) | dObj.getMonth() |
getDate() | 取得當天日期 | dObj.getDate() |
getDay() | 取得星期幾(週日0 到週六6) | dObj.getDay() |
getHours() | #取得目前小時 | dObj.getHours() |
#getMinutes() | 取得目前分鐘 | dObj.getMinutes() |
getSeconds() | #取得目前秒數 | dObj.getSeconds() |
// 格式化日期 年月日 var date = new Date(); console.log(date.getFullYear()); //返回当前日期的年 2020 console.log(date.getMonth() + 1); //月份 返回的月份小1个月 记得月份 +1 console.log(date.getUTCDate()); //返回的是几号 console.log(date.getDay()); //6 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0 // 写一个 2020年 5月 23日 星期六 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]); // 格式化日期 时分秒 var date = new Date(); console.log(date.getHours()); //时 console.log(date.getMinutes()); //分 console.log(date.getSeconds()); //秒 // 要求封装一个函数返回当前的时分秒 格式是 08:08:08 function getTimer() { var time = new Date(); var h = date.getHours(); h = h < 10 ? '0' + h : h; var m = date.getMinutes(); m = m < 10 ? '0' + m : m; var s = date.getSeconds(); s = s < 10 ? '0' + s : s; return h + ':' + m + ':' + s; } console.log(getTimer());
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()); // 2.简单的写法(最常用的写法) var date1 = +new Date(); //+new Date() 返回的就是总的毫秒数 console.log(date1); // 3.H5 新增的 获得总的毫秒数 console.log(Date.now());
案例:倒计时效果
// 倒计时效果 // 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; //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('2020-5-24 00:00:00')); var date = new Date(); console.log(date);
数组对象
1数组对象的创建
创建数组对象的两种方式
// 创建数组的两种方式 // 1.利用数组字面量 var arr = [1, 2, 3]; console.log(arr); // 2.利用new Array() // var arr1 = new Array(); //创建了一个空的数组 // var arr1 = new Array(2); //这个2 表示 数组的长度为 2 里面有两个空的数组元素 var arr1 = new Array(2, 3); //等价于[2,3] 这样写表示 里面有2个数组元素 是2和3 console.log(arr1);
2检测是否为数组
// 翻转数组 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));
3添加删除数组元素的方法
方法名 | 说明 | 返回值 |
push(参数1...) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减 1 无参数,修改原数组 |
返回它删除的元素的值 |
unshift(参数1...) | 向数组的开头添加一个或更多元素,注意修改原数组 | 并返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减1无参数,修改原数组 | 并返回第一个元素值 |
// 添加删除数组元素的方法 // 1.push() 在我们数组的末尾 添加一个或者多个数组元素 push 推 var arr = [1, 2, 3]; // arr.push(4, 'white'); console.log(arr.push(4, 'white')); //5 数组长度 console.log(arr); // (1)push 是可以给数组追加新的元素 // (2)push() 参数直接写 数组元素就可以了 // (3)push完毕之后,返回的结果是 新数组的长度 // (4)原数组也会发生变化 //2.unshift 在我们数组的开头 添加一个或者多个数组元素 console.log(arr.unshift('red', 'green')); //7 console.log(arr); // (1)unshift 是可以给数组前面追加新的元素 // (2)unshift() 参数直接写 数组元素就可以了 // (3)unshift完毕之后,返回的结果是 新数组的长度 // (4)原数组也会发生变化 // 3.pop() 它可以删除数组的最后一个元素 console.log(arr.pop()); //white console.log(arr); // (1)pop 是可以删除数组的最后一个元素 一次只能删除一个元素 // (2)pop() 没有参数 // (3)pop完毕之后,返回的结果是 删除的那个元素 // (4)原数组也会发生变化 // 4.shift() 它可以删除数组的第一个元素 console.log(arr.shift()); //red console.log(arr); // (1)shift 是可以删除数组的第一个元素 一次只能删除一个元素 // (2)shift() 没有参数 // (3)shift完毕之后,返回的结果是 删除的那个元素 // (4)原数组也会发生变化
案例:筛选数组
// 有一个包含工资的数组[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);
4数组排序
方法名 | 说明 | 是否修改原数组 |
reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来数组,返回新数组 |
sort() | 对数组的元素进行排序 | 该方法会改变原来数组,返回新数组 |
// 数组排序 // 1.翻转数组 var arr = ['red', 'white', 'blue']; arr.reverse(); console.log(arr); // 2.数组排序(冒泡排序) var arr1 = [2, 5, 77, 4, 7, 11, 1]; arr1.sort(function(a, b) { // return a - b;//升序的顺序排列 return b - a; //降序的顺序排列 }); console.log(arr1);
5数组索引方法
方法名 | 说明 | 返回值 |
indexOf() | 数组中查找给定元素第一个索引 | 如果存在,返回索引号;如果不存在,则返回-1 |
lastIndexOf() | 在数组中的最后一个的索引 | 如果存在,返回索引号;如果不存在,则返回-1 |
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找 //它只返回第一个满足条件的索引号 // 它如果在该数组里面找不到元素,则返回的是 -1 var arr = ['red', 'green', 'blue', 'white', 'bule']; console.log(arr.indexOf('blue')); //2 console.log(arr.indexOf('black')); //-1 // 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找 var arr = ['red', 'green', 'blue', 'white', 'blue']; console.log(arr.lastIndexOf('blue')); //4
案例:数组去重
// 数组去重['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']) var demo1 = unique(['red', 'blue', 'blue']) console.log(demo); console.log(demo1);
6数组转换为字符串
方法名 | 说明 | 返回值 |
toString() | 把数组转换成字符串,逗号分隔每一项 | 返回一个字符串 |
join(分隔符) | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
// 数组转换为字符串 // 1.toString() 将我们的数组转换为字符串 var arr = [1, 2, 3]; console.log(arr.toString()); //1,2,3 // 2.join(分隔符) var arr1 = ['green', 'blue', 'red']; console.log(arr1.join()); //green,blue,red console.log(arr1.join('-')); //green-blue-red console.log(arr1.join('&')); //green&blue&red
方法名 | 说明 | 返回值 |
concat() | 连接两个或多个数组,不影响原数组 | 返回一个新的数组 |
slice() | 数组截取slice(begin,end) | 返回被截取项目的新数组 |
splice() | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组 注意,这个会影响原数组 |
slice()和 splice()目的基本相同
字符串对象
1基本包装类型
为了方便操作基本数据类型,JavaScript还提供了上特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装称为复杂数据类型,这样基本数据类型就有了属性和方法。
// 基本包装类型 var str = 'andy'; console.log(str.length); // 对象 才有 属性和方法 复杂数据类型才有 属性和方法 // 简单数据类型为什么会有length属性? // 基本包装类型:就是把简单的数据类型 包装称为了 复杂数据类型 // (1)把简单数据类型包装为复杂数据类型 var temp = new String('andy'); // (2)把临时变量的值 给str str = temp; // (3)销毁这个临时变量 temp = null;
2字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
// 字符串的不可变性 var str = 'andy'; console.log(str); str = 'red'; console.log(str); // 当重新给 str 赋值的时候,常量 'andy'不会被修改,依然在内存中 // 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变 // 由于字符串的不可变,在大量拼接字符串的时候会有效率问题 // 因为我们字符串的不可变 所以不要大量的拼接字符串 var str = ''; for (var i = 1; i <= 100000000; i++) { str += i; } console.log(str);//这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间
3根据字符返回位置
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
方法名 | 说明 |
indexOf('要查找的字符',开始的位置) | 返回指定内容在字符串中的位置,如果找不到就返回-1;开始的位置是indlastex索引号 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始的位置]) var str = '改革春风吹满地,春天来了'; console.log(str.indexOf('春')); console.log(str.indexOf('春', 3)); //从索引号是 3 的位置开始往后查找
案例:返回字符位置
// 查找字符串 'abcoefoxyozzopp'中所有o出现的位置以及次数 // 核心算法:先查找第一个o出现的位置 // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找 // 因为 indexOf 只能查找到第一个,所以后面的查找,一定是当前索引加 1,从而继续查找 var str = 'abcoefoxyozzopp'; var index = str.indexOf('o'); var num = 0; // console.log(index); while (index !== -1) { console.log(index); num++; index = str.indexOf('o', index + 1); } console.log('o出现的次数是' + num);
// ['red', 'blue', 'red', 'green', 'pink', 'red'],求red出现的位置和次数 var str = ['red', 'blue', 'red', 'green', 'pink', 'red']; var index = str.indexOf('red'); var num = 0; // console.log(index); while (index !== -1) { console.log(index); num++; index = str.indexOf('red', index + 1); } console.log('red出现的次数是' + num);
4根据位置返回字符
方法名 | 说明 | 使用 |
charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt() |
charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) |
str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML5,IE8+支持和charAt()等效 |
// 根据位置返回字符 // 1.charAt(index) 根据位置返回字符 var str = 'andy'; console.log(str.charAt(3)); //y // 遍历所有的字符 for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)); } // 2.charCodeAt(index) 返回相应索引号的字符ASCII值 目的:判断用户按下了哪个键 console.log(str.charCodeAt(0)); //97(a的ASCII码是97) // 3.str[index] H5 新增的 console.log(str[0]); //a
案例:返回字符位置
// 有一个对象 来判断是否有该属性 对象['属性名'] var o = { age: 18 } if (o['age']) { console.log('里面有该属性'); } else { console.log('没有该属性'); } // 判断一个字符串 'abcoefoxyozzopp'中出现次数最多的字符,并统计其次数 // o.a = 1 // 0.b = 1 // 0.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);
// 2.遍历对象 var max = 0; var ch = ''; for (var k in o) { // k 得到的是 属性名 // o[k] 得到的是属性值 if (o[k] > max) { max = o[k]; ch = k; } } console.log(max); //4 console.log('最多的字符是' + ch); //最多的字符是o
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('字符串1','字符串2'....) var str='andy'; console.log(str.concat('red')); //2. substr('截取的起始位置','截取几个字符'); var str1='改革春风吹满地'; console.log(str1.substr(2,2)); //第一个2 是索引号的 2 从第几个开始 第二个2 是取几个字符
// 1.替换字符 replace('被替换的字符','替换为的字符') 它只会替换第一个字符 var str = 'andyandy'; console.log(str.replace('a', 'b')); // 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 * 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('&'));
【相关推荐:javascript学习教程】
以上是javascript中是否有內建對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!