1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > JS中的内置对象 --- Math Date Array String

JS中的内置对象 --- Math Date Array String

时间:2020-08-09 22:34:41

相关推荐

JS中的内置对象 --- Math Date Array String

1. 基本概念区分

实例对象:通过构造函数创建出来,实例化对象。实例方法必须通过实例对象调用静态对象(内置对象): 不需要创建, 直接就是一个对象,方法(静态方法)直接通过这个对象名调用。静态方法必须通过大写的对象调用。

比如:

var arr=new Array(1,2,3); // 实例化一个数组arr.forEach(); // 通过实例对象arr来调用它的方法, 因为 Array是一个构造函数,因此可以这样使用var mt=new Math(); // 会报错,不可以这样实例化使用,因为 Math是一个对象但不是一个构造函数

2. 内置对象 — Math

常用方法:

绝对值方法

console.log(Math.abs('-1'));// 1console.log(Math.abs(2)); //2console.log(Math.abs(null)); //0console.log(Math.abs("string"));//NaNconsole.log(Math.abs()); //NaN

向上取整

console.log(Math.ceil(12.3)); //13console.log(Math.ceil(12.9));console.log(Math.ceil(12.09));console.log(Math.ceil(12.03));console.log(Math.ceil(12.92));

向下取整

console.log(Math.floor(12.3)); //12console.log(Math.floor(12.9));console.log(Math.floor(12.03));console.log(Math.floor(12.09));console.log(Math.floor(12.92));

找一组数字中的最大值、最小值—之前是使用数组实现的,以后就可以直接用

console.log(Math.max(12,3,56,79,0,78,3,200));console.log(Math.min(12,3,56,79,0,78,3,200));

注意:这两个方法的参数是元素,如果要找一组数中的最大值和最小值的时候,传入的应该是数组的元素值。

5. 求多少次幂

console.log(Math.pow(2,2)); console.log(Math.pow(2,3));console.log(Math.pow(2,4));

开平方

console.log(Math.sqrt(4)); //开平方console.log(Math.sqrt(9));console.log(Math.sqrt(16));console.log(Math.sqrt(25));

伪随机数

Math.random() 返回一个浮点, 伪随机数在范围[0,1),也就是说,从0(包括0)往上,但是不包括1(排除1),然后可以缩放到所需的范围 。

console.log(Math.random()); //范围[0,1)console.log(parseInt(Math.random()));console.log(parseInt(Math.random()*5)); // 产生的随机数0-5之间,包括0但是不包括5, 然后取整:0,1,2,3,4console.log(parseInt(Math.random()*5)+1); //0,1,2,3,4,5console.log(parseInt(Math.random()*99)+1); //0,1,2,3,4,5,...,99console.log(parseInt(Math.random()*100)+1); //0,1,2,3,4,5,...,100

小案例:随机产生一个十六进制的颜色值。

function getColor() {var str = "#";//一个十六进制的值的数组,都看成是字符串var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];// console.log(parseInt(Math.random()*5)); 产生随机数作为索引使用for (var i = 0; i < 6; i++) {//产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起var num = parseInt(Math.random()*16); //十六进制的颜色: #后面是有6个值, 这6个值从arr中随机产生, 索引0-15,根据索引找到具体的值str += arr[num];}return str;}

3. 内置对象 — Date

创建实例化对象

var dt1 = new Date(); //当前时间---当前服务器console.log(dt1); // Fri Mar 13 17:18:29 GMT+0800 (中国标准时间)// 但是用new Date() 参与计算会自动转换为从1970.1.1开始的毫秒数 dt1.getTime() // 返回 1970 年 1 月 1 日至今的毫秒数 var dt2 = new Date('-12-01'); //传入时间console.log(dt2); // Sun Dec 01 08:00:00 GMT+0800 (中国标准时间)var dt3 = new Date('/12/01'); //传入时间console.log(dt3); // Sun Dec 01 00:00:00 GMT+0800 (中国标准时间)var dt4 = Date.now(); // 1970.1.1 至今的毫秒数 毫秒与秒之间是 1000 , 时间戳:做计算console.log(dt4); // 1584091292654

Date常用方法: 时间信息的获取

var dt = new Date(); //获取年份console.log(dt.getFullYear()); // //获取月console.log(dt.getMonth() + 1); // 3 注意: 直接获取月份是比正常的显示月份小1的, 国内外表示方式不同,国外月份从0开始//获取日期console.log(dt.getDate()); // 13//获取星期的第几天console.log(dt.getDay()); // 5 星期天是第0天, 周一是第一天,后面以此类推//获取小时console.log(dt.getHours()); // 17//获取分钟console.log(dt.getMinutes()); // 26//获取秒数console.log(dt.getSeconds()); // 11// 获取毫秒数console.log(dt.getMilliseconds()); // 803

几个其他的方法: 日期的格式化方法

var d = new Date();console.log(d.toString()); // Fri Mar 13 17:28:00 GMT+0800 (中国标准时间)console.log(d.toDateString()); //英文的日期 Fri Mar 13 console.log(d.toLocaleDateString()); //日期格式的 /3/13console.log(d.toTimeString()); // 17:28:00 GMT+0800 (中国标准时间)console.log(d.toLocaleTimeString()); // 下午5:28:00console.log(d.valueOf()); //毫秒数 1584091680620

一种特殊写法,只适用于Date这个对象。

var dd = +new Date();console.log(dd); // 1584092172499 毫秒数

格式化日期和时间:

function getDate(dt) {// var dt=new Date;//创建日期对象//获取年var year=dt.getFullYear();//获取月var month=dt.getMonth()+1;//获取日var day=dt.getDate();//获取小时var hour=dt.getHours();//获取分钟var minute=dt.getMinutes();//获取秒var second=dt.getSeconds();month = month < 10 ? "0" + month : month;day = day < 10 ? "0" + day : day;hour = hour < 10 ? "0" + hour : hour;minute = minute < 10 ? "0" + minute : minute;second = second < 10 ? "0" + second : second;return year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;}console.log(getDate(new Date())); // 03月13日 17:39:49

4. 内置对象 — Array

主要熟悉数组的方法

判断一个对象是不是数组类型: 两种方法: instanceof 和 Array.isArray(对象)。

var obj = {};console.log(obj instanceof Array); //falseconsole.log(Array.isArray(obj)); //false

concat: 合并数组,原来的数组不改变,返回一个新的数组。

var arr1 = [10, 20, 30];var arr2 = [40, 50, 60];var arr3 = [1, 2, 3, 4];var arr4 = arr1.concat(arr2, arr3)console.log(arr1); // [10, 20, 30]console.log(arr2); // [40, 50, 60]console.log(arr3); // [1, 2, 3, 4]console.log(arr4); // [10, 20, 30, 40, 50, 60, 1, 2, 3, 4]

必须要记住的4个方法!!!! arr.push(值)------把值追加到数组中,追加到数组的最后,返回值是追加之后的数组的长度arr.pop()------删除数组中的最后一个元素, 返回值就是删除的这个值arr.shift()------删除数组中的第一个元素,返回值就是删除的这个值arr.unshift()------向数组的第一个元素前面插入一个新的元素,返回值是插入后的数组的长度

注意: 这4个方法都会改变原来的数组,后面一个重要的应用:轮播图的制作。

slice()切片,截取数组中的一部分,不会改变原来的数组。

var arra01 = [10,20,30,40,50,60,70,80,90,100];var newA=arra01.slice(3,5); //包括3,不包括5console.log(arra01); // [10,20,30,40,50,60,70,80,90,100]console.log(newA); // [40,50]

splice(开始的位置,要删除的个数,要插入或替换的元素值)可以完成删除、替换、插入。会改变原来的数组。arr.splice()返回的是删除的元素组成的数组。

var myFish = ["angel", "clown", "mandarin", "sturgeon"];var removed1 = myFish.splice(2, 0, "drum"); //在索引为2的位置插入一个元素console.log(myFish);// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]console.log(removed1);// 被删除的元素: [], 没有元素被删除var removed2 = myFish.splice(2, 0, 'drum', 'guitar'); //在索引为2的位置插入两个元素console.log(myFish);// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "drum", "mandarin", "sturgeon"]console.log(removed2);// 被删除的元素: [], 没有元素被删除var myFish3 = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];var removed3 = myFish3.splice(3, 1); //从第 3 位开始删除 1 个元素console.log(myFish3);// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]console.log(removed3);// 被删除的元素: ["mandarin"]var myFish4 = ['angel', 'clown', 'drum', 'sturgeon'];var removed4 = myFish4.splice(2, 1, "trumpet"); //从第 2 位开始删除 1 个元素,插入“trumpet”console.log(myFish4);// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]console.log(removed4);// 被删除的元素: ["drum"]var myFish5 = ['angel', 'clown', 'trumpet', 'sturgeon'];var removed5 = myFish5.splice(0, 2, 'parrot', 'anemone', 'blue'); //从第 0 位开始删除 2 个元素,插入"parrot"、"anemone"和"blue"console.log(myFish5);// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]console.log(removed5);// 被删除的元素: ["angel", "clown"]var myFish6 = ['angel', 'clown', 'mandarin', 'sturgeon'];var removed6 = myFish6.splice(-2, 1); //从倒数第 2 位开始删除 1 个元素console.log(myFish6);// 运算后的 myFish: ["angel", "clown", "sturgeon"]console.log(removed6);// 被删除的元素: ["mandarin"]var myFish7 = ['angel', 'clown', 'mandarin', 'sturgeon'];var removed7 = myFish7.splice(2); //从第 2 位开始删除所有元素console.log(myFish7);// 运算后的 myFish: ["angel", "clown"]console.log(removed7);// 被删除的元素: ["mandarin", "sturgeon"]

reverse()反转: 之前实现数组的反转的方式是使用循环,以后可以直接使用数组对象的方法来实现了。

var arra=[1,2,3,4,5];arra.reverse();console.log(arra); // [5, 4, 3, 2, 1]

indexOf(元素值): 返回的是这个元素值在数组中第一次出现时的索引, 没有就返回-1。lastIndexOf(元素值): 返回这个元素在数组中从右往左找到的第一个值在数组中的索引,没有就返回-1。

var arra = [1,2,3,4,5,1,2,3,4,5];var index = arra.indexOf(3);console.log(index); // 2var ind = arra.lastIndexOf(3); console.log(ind); // 7

join(’|’)方法,将数组中的元素通过竖线|连接成一个字符串。

var arra = [1,2,3,4,5,1,2,3,4,5];var str = arra.join("|");console.log(str); // '1|2|3|4|5|1|2|3|4|5'

sort()排序, 注意: 直接在数组中使用sort函数不稳定,可能达不到想要的结果, 要写上 固定的格式。

var ar=[1,3,4,9,2,3,5];ar.sort(function (a,b) {if (a > b) {return 1;}else if (a == b) {return 0;}else {return -1;}});console.log(ar); // [1, 2, 3, 3, 4, 5, 9]

forEach(callback) 方法,可以遍历数组中的元素,它的参数是一个回调函数,这个回调函数主要用到的参数有两个:第一个参数是数组中的元素值,第二个参数是元素值对应的索引。

var arra = [1,2,3,4,5];arra.forEach(function (ele, index) {console.log(ele + "-----" + index);});// 结果:1-----02-----13-----24-----35-----4

filter(callback): 返回满足函数测试的新数组,即返回的是数组中每一个符合条件的元素组成的新数组。

var arr00 = [10, 20, 30, 40, 50, 60, 70, 80, 90];var newArray = arr00.filter(function (ele, index) {return ele > 40;});console.log(newArray); // [50, 60, 70, 80, 90]

every(callback): 里面传入的是回调函数, 测试数组的所有元素是否都通过了指定函数的测试。这个函数中可以传入3个参数: 第一个参数表示数组元素的值第二个参数表示数组中元素的索引的值第三个表示的调用every这个方法的数组的名字,一般情况下没用

调用这个方法的返回值是 布尔类型 的。(前面两个方法的callback参数也是一样的含义。)

var arr = [1000, 2000, 3000];var flag = arr.every(function (a, b, c) {return a > 2000; // 只有数组中的所有元素的值都满足大于2000的条件时,才会返回true,否则就会返回false .});console.log(flag); // false

map(函数或者一个方法): 数组中的每个元素都要执行这个函数或者方法,把执行后的结果重新全部放在一个新的数组中返回。

var num=[1,4,9];var roots=num.map(Math.sqrt);console.log(roots); // [1, 2, 3]

5. 内置对象 — String

String---->字符串类型-------引用类型

string---->字符串类型-------基本类型

字符串的特性: 不可变性----字符串的值不能改变

var str0="李易峰是小蓝人";str0="李易峰是小黄人"; //重新赋值console.log(str0); // 输出 李易峰是小黄人 。 指向发生改变var str00="hello";str00[1]='w'; //,字符串可以通过索引访问字符串中的某个值(某个字符),但是!! 只可以访问----只读, 不能更改console.log(str00); // hello

字符类型: 单个的。 JS中没有字符类型。

字符串类型: JS中无论是单引号还是双引号都是字符串, 字符串可以看成是一个字符数组。

var str="hello";for (var i=0;i<str.length;i++){console.log(str[i]);}

字符串常用方法

String.charAt(索引); 返回字符串中某个索引处的字符,超出索引返回空。

var str1 = "asdfghjjklqwertyuiopzxcvbnm,.,x,mn";var result = str1.charAt(2);console.log(result); // d

String.fromCharCode(数字值,…) 静态方法: 返回的是ASCII码对应的值

var str2 = String.fromCharCode(65,108,109); //ASCII码表console.log(str2); // Almvar str3 = String.fromCharCode(83,79,83);console.log(str3); // SOS

str.concat() :字符串拼接

var str4 = "xiaosu";console.log(str4.concat('喜欢','凤姐')); // xiaosu喜欢凤姐console.log(str4); // xiaosu ,拼接产生一个新的字符串,原字符串是不会变的。

str.indexOf() :重要!!!!

var str5 = "李易峰真的是超级帅啊!";var index = str5.indexOf("帅");console.log(index); // 8 返回的是要找的字符在原来的字符串中的索引位置var index2 = str5.indexOf("真的帅");console.log(index2); //-1, 没找到var index3 = str5.indexOf("真的");console.log(index3); // 3 返回第一个字符所在的索引var index4 = str5.indexOf("超级帅",3); //从 index=3 的地方开始寻找console.log(index4); // 6

str.lastIndexOf() 从后往前找,找不到返回-1。

var str6 = "hello amen";var index5 = str6.lastIndexOf("e");console.log(index5); //8, 从后往前找,找到的是第一次找到的那个e, 但是这个e的索引还是从前往后排的

str.replace()替换

var str7 = "小苏好帅哦,真的好勇敢哦";if (str7.indexOf("小苏") != -1){str7 = str7.replace("小苏","小样"); //重新赋值}else{console.log("不存在");}console.log(str7); // 小样好帅哦,真的好勇敢哦

str.split(“用来分隔的字符串”,字符串切割后剩下的个数) 返回的是切割字符串数组

var str9 = "穆柔|乔峰|凤姐|梅超风|小苏|大蛇丸";var arr1 = str9.split("|"); //数组console.log(arr1); // ["穆柔", "乔峰", "凤姐", "梅超风", "小苏", "大蛇丸"] for (var i = 0; i < arr1.length; i++){console.log(arr1[i]);}var arr2 = str9.split("|",4); // 返回4个console.log(arr2); // ["穆柔", "乔峰", "凤姐", "梅超风"]for (var j = 0; j < arr2.length; j++){console.log(arr2[j]);}

str.substr(开始,长度) : 返回一个字符串中从指定位置开始到指定字符数的字符

var str10 = "哈哈,真的是没话说了";str10 = str10.substr(3); //从索引为3的位置开始一直到最后console.log(str10); //真的是没话说str10 = str10.substr(3,3); // 从索引为3的位置开始,返回3个字符console.log(str10); //没话说

str.substring(开始,结束)

var str11 = "李易峰1987了";str11 = str11.substring(2,4); //从2开始到4结束,但是不包括4的位置console.log(str11); // 峰1

str.slice(开始的索引,结束的索引) : 前闭后开的 不包括结束的索引位置处的字符串。

var str8 = "假如生活欺骗了你,不要伤心,不要着急";stri = str8.slice(5,10);console.log(stri); // 骗了你,不

str.toLocaleLowerCase()------英文字母转小写----str.toLowerCase()

var str12 = "HELLO";console.log(str12.toLowerCase()); // helloconsole.log(str12.toLocaleLowerCase()); // hello

str.toLocaleUpperCase()------英文字母转大写----str.toUpperCase()

var str13 = "Hello";console.log(str13.toLocaleUpperCase()); // HELLO

str.trim() : 去掉字符串首尾的空格, 中间的不能去掉, 其他的还有去掉左边的 有右边的等等方法,自己去查。

var str14 = "李易峰真的是绝了 帅爆!";str14 = str14.trim();console.log("------"+str14+"-------"); // ------李易峰真的是绝了 帅爆!-------

注意区分截取字符串的三种方法: substr(开始索引,截取长度)、substring(开始索引,结束索引)、slice(开始索引,结束索引)。

substr()、slice()开始索引若是负的,要先加上字符串的长度然后再截取,如果加上字符串的长度后还是负数,则从0开始截取。若第一个参数大于字符串的长度或者第一个参数的值大于第二个参数的值,返回空字符串。substring()第一个参数为负的,就从0开始。str.substring(1, 10) == str.substring(10, 1)

案例参考:/wangyulue/p/7718532.html

上面的这些内置对象的方法非常重要!!!一定要理解会写!!!公司面试手写代码经常会涉及到!!!

字符串案例:

//案例1:从一个字符串中找到指定的字符并返回var str0 = "我的生物钟很奇怪,只要前一天晚上没喝酒或者过度疲劳,我都会在闹钟响铃前的五分钟自动醒来。";var key0 = "闹钟"; //或者可以使用prompt提醒用户输入需要截取的字符串var index0 = str0.indexOf(key0); // 先找到闹钟在字符串中的位置str0 = str0.substr(index0,2); // 从找到的index位置开始,提取2个字符console.log(str0);

//案例2: 找到这个字符串中所有 o 出现的位置 :// indexOf 只能找到第一个, 应该是不停的找,直到把所有的o都找出来, ,找出来一个,应该从这个位置的下一个位置开始继续寻找下一个,需要用到循环var str1 = "hello wod odd ott fbo nhyo";var key1 = "o"; //要找的字符串var index1 = 0; //开始的位置//要查找的字符串的长度可能是未知的,用while循环while((index1 = str1.indexOf(key1, index1)) != -1){// 得到的这个索引值如果不是-1 就说明找到了。indexarr.push(index1);index1 += key1.length; //这个地方如果要找的字符串是2个的时候,下次查找就应该是从这次找到的后面2个位置开始查找,即: 根据需要找到的字符串的长度的不同来设置}console.log(indexarr); // [4, 7, 10, 14, 20, 25]

//案例3: 找到一个字符串中每个字母出现了多少次,不区分大小写。//思路: 创建空对象-----使用键值对: 字母是键,次数是值----添加到对象中----遍历//补充: 判断一个对象中有没有这个属性的方法: if(obj['属性名']){ 有这个属性 } else{ 没有没有这个属性 }var str2 = "whatOareYyouYnoYshaHleiHoHmyHgod";str2 = str2.toLocaleLowerCase(); // 第一步: 把所有的字母都变成小写var obj = {}; //第二步:创建一个新的空对象, 没有属性也没有方法 目的是:字母为键, 次数为值for (var i = 0; i < str2.length; i++){// 第三步: 遍历字符串, 获取每个字母//判断obj这个对象中有没有这个字母var key=str2[i]; //每个字母if (obj[key]){//obj中有这个键obj[key]++;}else {//obj中没有这个键也就是第一次出现,那就将这个键加到对象中,并且给他赋值为1,obj[key] = 1;}}//第四步:遍历对象,显示每个字母的个数for (var key in obj){console.log(key + "这个字母出现了" + obj[key]+"次");}

最后,说明一下基本包装类型

普通变量不能直接调用属性或者方法,对象可以直接调用属性和方法。基本包装类型: 本身是基本类型,但是执行代码的过程中,如果这个类型的变量调用了属性或者方法,那么这种类型就不再是基本类型, 而是基本包装类型,这个变量也不是普通的变量了,而是基本包装类型对象。string number boolean 基本类型,基本包装类型

比如:

var str = "hello"; //字符串类型str = str.replace('ll', 'hh'); //调用方法了,变成了基本包装类型console.log(str);var num = 10; //数字类型console.log(num.toString()); //调用方法,将数字转换成了字符串, 变成了基本包装类型

再一个就是注意:

对象 && true------true

true && 对象------对象

var flag = new Boolean(false); // false是基本类型, 变成了基本包装类型var result = flag && true; //前面是对象, 对象&&true 最终的结果就是后面的true, 但是实际上 false&&true的结果应该是falseconsole.log(result); //true

区分基本类型与基本包装类型:

var num1 = 10; //基本类型var num2 = Number("10"); // 注意: 这个只是数字类型的转换, 没有new , 所以是基本类型var num3 = new Number("10"); //基本包装类型

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。