JavaScript （内置对象及方法）
JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...
对象只是带有属性和方法的特殊数据类型。
内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。
一、Math对象
跟数学相关的运算来找Math中的成员（求绝对值，取整）
Math.PI // 圆周率 console.log(Math.PI); Math.E // 常数的底数 console.log(Math.E); Math.random() // 生成随机数 返回一个浮点, 伪随机数在范围[0，1) Math.floor()/Math.ceil() // 向下取整/向上取整 console.log(Math.ceil(12.09)); Math.round() // 取整，四舍五入 console.log(Math.round(12.09)); Math.fround() // 返回数字的最接近的单精度浮点型表示。 console.log(Math.fround(12.09)); Math.abs() // 绝对值 console.log( Math.abs(-2));//2 Math.max()/Math.min() // 求最大和最小值 console.log(Math.max(10,1,9,100,200,45,78)); Math.sin()/Math.cos() // 正弦/余弦 Math.sin(Math.PI / 2); // 1 Math.power()/Math.sqrt() // 求指数次幂/求平方根console.log(Math.sqrt(4,2));
1.1 Math.random()
函数返回一个浮点, 伪随机数在范围[0，1)，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
1.1.1 得到一个大于等于0，小于1之间的随机数
function getRandom() { return Math.random(); }
1.1.2 得到一个两数之间的随机数
这个例子返回了一个在指定值之间的随机整数。这个值比min大（如果min不是整数，可能相等）
function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive }
也许很容易让人想用舍入来完成这个任务，但是这样做会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求
得到一个两数之间的随机整数，包括两个数在内
当getRandomInt() 函数在最小值之上，它将排除最大值. 如果你需要结果包含最小值和最大值，怎么办呢? getRandomIntInclusive() 函数将能完成.
function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive }
1.2 综合实例
//随机产生一个十六进制的颜色值 //封装成一个函数 console.log(parseInt(Math.random() * 5)); function getColor() { var str = "#"; //一个十六进制的值的数组 var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; for (var i = 0; i < 6; i++) { //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起 var num = parseInt(Math.random() * 16); str += arr[num]; } return str; }
二、Date对象
var dt = new Date(); //当前的时间---当前的服务器 console.log(dt); //Wed Jun 13 2018 12:57:17 GMT+0800 (China Standard Time) var dt = new Date("2017-08-12"); //传入的时间 console.log(dt); //Sat Aug 12 2017 08:00:00 GMT+0800 (China Standard Time) var dt = new Date("2017/08/12"); // 传入的时间 console.log(dt); //Sat Aug 12 2017 00:00:00 GMT+0800 (China Standard Time) // 获取时间的对象 var dt = Date.now(); console.log(dt);//毫秒 //1528865837155
总结：
var dt=new Date(); console.log(dt); // var dt=+new Date(); //一种特殊的写法,只适用于这个Date的对象 // console.log(dt); console.log(dt.getFullYear()); //年 console.log(dt.getMonth()); //月---从0开始 console.log(dt.getDate()); //日 console.log(dt.getHours()); //小时 console.log(dt.getMinutes()); //分钟 console.log(dt.getSeconds()); //秒 console.log(dt.getDay()); //星期---从0开始 console.log(dt.toDateString()); //日期 console.log(dt.toLocaleDateString()); //日期 console.log(dt.toTimeString()); //时间 console.log(dt.toLocaleTimeString(); //时间 console.log(dt.valueOf()); //毫秒
console.log(dt.toString()); // 转成字符串 Wed Jun 13 2018 13:08:36 GMT+0800 (China Standard Time)
2.1 兼容性问题
获取日期的毫秒形式
var now = new Date(); // valueOf用于获取对象的原始值 console.log(now.valueOf()) // HTML5中提供的方法，有兼容性问题 var now = Date.now(); // 不支持HTML5的浏览器，可以用下面这种方式 var now = + new Date(); // 调用 Date对象的valueOf()
日期格式化方法
toString() // 转换成字符串 valueOf() // 获取毫秒值 // 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString()
获取日期指定部分
getTime() // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime() getMilliseconds() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期几 0周日 6周6 getDate() // 返回当前月的第几天 getMonth() // 返回月份，***从0开始*** getFullYear() //返回4位的年份 如 2016
2.2 综合案例
写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) { //如果date不是日期对象，返回 if (!date instanceof Date) { return; } var year = d.getFullYear(), month = d.getMonth() + 1, date = d.getDate(), hour = d.getHours(), minute = d.getMinutes(), second = d.getSeconds(); month = month < 10 ? '0' + month : month; date = date < 10 ? '0' + date : date; hour = hour < 10 ? '0' + hour : hour; minute = minute < 10 ? '0' + minute:minute; second = second < 10 ? '0' + second:second; return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second; } console.log(formatDate(new Date())); >>> 2018-06-13 14:00:46
三、String对象
3.1字符串的不可变
var str = 'abc'; str = 'hello'; // 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中 // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变 // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
3.2 创建字符串对象
var str1 = "sda"; console.log(typeof (str1)); //string var str = new String('Hello World'); console.log(typeof (str)); //object var str = "sss"; console.log(str instanceof String); //false var str1 = new String("ef"); console.log(str1 instanceof String); //true var str="hello"; str[1]="W"; 字符串可以通过索引访问字符串中的某个值 但是,是可以访问---读取---只读
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
// 1 字符方法 charAt() //获取指定位置处字符 charCodeAt() //获取指定位置处字符的ASCII码 str[0] //HTML5，IE8+支持 和charAt()等效 // 2 字符串操作方法 concat() //拼接字符串，等效于+，+更常用 slice() //从start位置开始，截取到end位置，end取不到，没有end，则取到最后 substring() //从start位置开始，截取到end位置，end取不到，没有end，则取到最后 substr() //从start位置开始，截取length个字符，没有length，则取到最后 // 3 位置方法 indexOf() //返回指定内容在元字符串中的位置 lastIndexOf() //从后往前找，只找第一个匹配的。但是位置序号还是从前往后排的。 // 4 去除空白 trim() //只能去除字符串前后的空白 // 5 大小写转换方法 to(Locale)UpperCase() //转换大写 to(Locale)LowerCase() //转换小写 // 6 其它 search() //寻找一个字符在字符串中的位置。 replace() //替换 split() //分开字符串 fromCharCode() //输入ASCII数字，返回字符 // String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法。
静态方法---->直接通过大写的构造函数的名字调用的方法(直接通过大写的对象名字调用的)。
var str = "12345"; console.log(str.length); //5 var str = "whatareyounoshalei"; var result = str.charAt(100); // 由于超出索引，结果为"" console.log(result + "1"); var str = String.fromCharCode(107, 108, 109); console.log(str); //klm var str = String.fromCharCode(83, 79, 83); console.log(str); //SOS var str = "what"; console.log(str + "are" + "you" + "no" + "sha" + "lei"); //whatareyounoshalei var str = "小苏"; console.log(str.concat("喜欢", "苹果", "这是", "真的")); //小苏喜欢苹果这是真的 var str = "小苏喜欢苹果这是真的"; var index = str.indexOf("喜", 5); console.log(index); //从5开始找是找不到的，所以返回 -1 var index = str.indexOf("喜欢", 1); console.log(index); //2 var str = "helo amen"; var index = str.lastIndexOf("a"); console.log(index); //5 var str = "小苏好帅哦,真的好勇敢哦"; if (str.indexOf("帅") != -1) { str = str.replace("帅", "猥琐"); } else { console.log("不存在"); //小苏好帅哦,真的好勇敢哦 } console.log(str); var str = "如果有一天我邪恶了,请记住,我曾纯洁过"; //从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串 str = str.slice(5, 10); console.log(str); //我邪恶了, var str = "乔峰|慕容|凤姐|梅超风|小苏|大蛇丸"; var arr = str.split("|"); for (var i = 0; i < arr.length; i++) { console.log(arr[i]); //乔峰 慕容 ...每次都换行 } var str = "哈哈,小苏真的是好帅哦"; str = str.substr(5, 5); console.log(str); //真的是好帅 var str = "哈哈,小苏真的是好帅哦"; str = str.substring(5, 9); console.log(str); //真的是好 var str = "HELLO"; //str=str.toLocaleLowerCase(); str = str.toLowerCase(); console.log(str); //hello var str = "hello"; str = str.toLocaleUpperCase(); //str=str.toUpperCase(); console.log(str); //HELLO var str = " 哦,这 是一个神奇的一天 "; str = str.trim(); console.log("====" + str + "===="); //====哦,这 是一个神奇的一天====
3.4 总结
* 字符串的常用属性: * .length------>字符串的长度 * .charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串 * .fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值 * .concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串 * .indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1 * .lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1 * .replace("原来的字符串","新的字符串");用来替换字符串的 * .slice(开始的索引,结束的索引); 从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串 * .split("要干掉的字符串",切割后留下的个数);切割字符串 * .substr(开始的位置,个数);返回的是截取后的新的字符串 * .substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串 * .toLocaleLowerCase();转小写 * .toLowerCase();转小写 * .toLocaleUpperCase()转大写 * .toUpperCase();转大写 * .trim();干掉字符串两端的空格
// 1 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到，没有end，则取到最后
substring() //从start位置开始，截取到end位置，end取不到，没有end，则取到最后
substr() //从start位置开始，截取length个字符，没有length，则取到最后
// 3 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的。但是位置序号还是从前往后排的。
// 4 去除空白
trim() //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
// 6 其它
search() //寻找一个字符在字符串中的位置。
replace() //替换
split() //分开字符串
fromCharCode() //输入ASCII数字，返回字符
// String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
3.5 案例
3.5.1 案例1：截取字符串"我爱中华人民共和国"，中的"中华"
var str = "我爱中华人民共和国"; //console.log("中华"); var key = "中华"; //先获取要截取的字符串的索引的位置 var index = str.indexOf(key); //从指定的位置开始截取,截取两个即可 str = str.substr(index, 2); console.log(str);
3.5.2 案例2：找到这个字符串中所有的 o 出现的位置
var str2 = "hello wod odd ott fbo nhyo"; var index = 0;//开始的位置 var key = "o";//要找的字符串 while ((index = str2.indexOf(key, index)) != -1) {//如果是-1情况,说明找完了 console.log(index); index += key.length; } //4 7 10 14 20 25 //var index=str2.indexOf("o",0); //console.log(index);
3.5.3 案例3 : 找到这个字符串中每个字符串出现了多少次
var str3 = "whatOareYyouYnoYshaHleiHoHmyHgod"; //第一步:把所有的字母全部变成小写 str3 = str3.toLocaleLowerCase(); //第二步:创建一个空对象,目的:把字母作为键,次数作为值 var obj = {}; //第三步,遍历字符串,获取每个字母 for (var i = 0; i < str3.length; i++) { //判断obj这个对象中有没有这个字母(字母---键) var key = str3[i];//每个字母 if (obj[key]) {//判断obj中有没有这个键 //对象中有这个字母了 obj[key]++; } else { //对象中没有这个字母,那就把字母加到对象中,并且给这个字母一个出现的次数,默认1次 obj[key] = 1; } } //遍历对象,显示每个字母的次数 for(var key in obj){ console.log(key+"这个字母出现了"+obj[key]+"次"); } //创建新的对象---空对象---没有属性,也没有方法
四、Array对象
4.1 数组创建
创建方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; 创建方式2: var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true); 创建方式3: var arrname = new Array(长度); // 初始化数组对象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";
4.1.1 创建二维数组：
var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";
4.1.2 对象是不是数组类型:两种
//1 instanceof var str = "sss"; console.log(str instanceof String); //false var str1 = new String("ef"); console.log(str1 instanceof String); //true var obj = []; console.log(obj instanceof Array);//true var str1 = new Array(); console.log(str1 instanceof Array); //true //2 使用数组的 console.log(Array.isArray(obj));// Array.isArray() HTML5中提供的方法，有兼容性问题
4.2 数组对象的属性和方法
1、join方法： x.join(bystr) －－－－将数组元素拼接成字符串 var arr1=[1, 2, 3, 4, 5, 6, 7]; var str1=arr1.join("-"); alert(str1); //结果为"1-2-3-4-5-6-7" 2、concat方法： x.concat(value,...) －－－－数组拼接 var a = [1,2,3]; var b=a.concat(4,5) ; alert(a.toString()); //返回结果为1,2,3 alert(b.toString()); //返回结果为1,2,3,4,5 3、数组排序-reverse sort： //x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //颠倒数组元素 alert(arr1.toString()); //结果为444,111,12,32 arr1.sort(); //排序数组元素 alert(arr1.toString()); //结果为111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //如果就想按着数字比较呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; } 4、数组切片操作： //x.slice(start, end) // //使用注解 // //x代表数组对象 //start表示开始位置索引 //end是结束位置下一数组元素索引编号 //第一个数组元素索引为0 //start、end可为负数，-1代表最后一个数组元素 //end省略则相当于从start位置截取以后所有数组元素 var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //结果为"c,d" alert(arr3.toString()); //结果为"e,f,g,h" alert(arr4.toString()); //结果为"c,d,e,f,g" 5、删除子数组： //x. splice(start, deleteCount, value, ...) //使用注解 //x代表数组对象 //splice的主要用途是对数组指定位置进行删除和插入 //start表示开始位置索引 //deleteCount删除数组元素的个数 //value表示在删除位置插入的数组元素 //value参数可以省略 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); alert(a.toString());//a变为 [1,4,5,6,7,8] a.splice(1,1); alert(a.toString());//a变为[1,5,6,7,8] a.splice(1,0,2,3); alert(a.toString());//a变为[1,2,3,5,6,7,8] 6、数组的push和pop： //push pop这两个方法模拟的是一个栈操作 //x.push(value, ...) 压栈 //x.pop() 弹栈 //使用注解 // //x代表数组对象 //value可以为字符串、数字、数组等任何值 //push是将value值添加到数组x的结尾 //pop是将数组x的最后一个元素删除 var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //结果为"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //结果为"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //结果为"1,2,3,4,5" 7、数组的shift和unshift： //x.unshift(value,...) //x.shift() //使用注解 //x代表数组对象 //value可以为字符串、数字、数组等任何值 //unshift是将value值插入到数组x的开始 //shift是将数组x的第一个元素删除 var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //结果为"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1); //结果为"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //结果为"4,5,1,2,3"
数组常用方法
// 1 栈操作(先进后出) push() pop() //取出数组中的最后一项，修改length属性 // 2 队列操作(先进先出) push() shift() //取出数组中的第一个元素，修改length属性 unshift() //在数组最前面插入项，返回数组的长度 // 3 排序方法 reverse() //翻转数组 sort(); //即使是数组sort也是根据字符，从小到大排序 // 带参数的sort是如何实现的？ // 4 操作方法 concat() //把参数拼接到当前数组 slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始 splice() //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目) // 5 位置方法 indexOf()、lastIndexOf() //如果没找到返回-1 // 6 迭代方法 不会修改原数组(可选) every()、filter()、forEach()、map()、some() // 7 方法将数组的所有元素连接到一个字符串中。 join()
清空数组
// 方式1 推荐 arr = []; // 方式2 arr.length = 0; // 方式3 arr.splice(0, arr.length);
案例1：将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现
function myJoin(array, seperator) { seperator = seperator || ','; array = array || []; if (array.length == 0){ return ''; } var str = array[0]; for (var i = 1; i < array.length; i++) { str += seperator + array[i]; } return str; } var array = [6, 3, 5, 6, 7, 8, 0]; console.log(myJoin(array, '-')); console.log(array.join('-'))
案例2：将一个字符串数组的元素的顺序进行反转。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用两种种方式实现。提示：第i个和第length-i-1个进行交换
function myReverse(arr) { if (!arr || arr.length == 0) { return []; } for (var i = 0; i < arr.length / 2; i++) { var tmp = arr[i]; arr[i] = arr[this.length - i - 1]; arr[arr.length - i - 1] = tmp; } return arr; } var array = ['a', 'b', 'c']; console.log(myReverse(array)); console.log(array.reverse());
案例3：工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除
// 方式1 var array = [1500,1200,2000,2100,1800]; var tmpArray = []; for (var i = 0; i < array.length; i++) { if(array[i] < 2000) { tmpArray.push(array[i]); } } console.log(tmpArray); // 方式2 var array = [1500, 1200, 2000, 2100, 1800]; array = array.filter(function (item, index) { if (item < 2000) { return true; } return false; }); console.log(array);
案例4：["c", "a", "z", "a", "x", "a"]找到数组中每一个a出现的位置
var array = ['c', 'a', 'z', 'a', 'x', 'a']; do { var index = array.indexOf('a',index + 1); if (index != -1){ console.log(index); } } while (index > 0);
案例5：编写一个方法去掉一个数组的重复元素
var array = ['c', 'a', 'z', 'a', 'x', 'a']; function clear() { var o = {}; for (var i = 0; i < array.length; i++) { var item = array[i]; if (o[item]) { o[item]++; }else{ o[item] = 1; } } var tmpArray = []; for(var key in o) { if (o[key] == 1) { tmpArray.push(key); }else{ if(tmpArray.indexOf(key) == -1){ tmpArray.push(key); } } } returm tmpArray; } console.log(clear(array));
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean
// 下面代码的问题？ // s1是基本类型，基本类型是没有方法的 var s1 = 'zhangsan'; var s2 = s1.substring(5); // 当调用s1.substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象, 相当于： var s1 = new String('zhangsan'); var s2 = s1.substring(5); s1 = null;
-
// 创建基本包装类型的对象 var num = 18; //数值，基本类型 var num = Number('18'); //类型转换 var num = new Number(18); //基本包装类型，对象 // Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如： var b1 = new Boolean(false); //注意：b1是对象 var b2 = b1 && true; // true var b3 = true && b1; //Boolean {false} 后面是什么就是什么
