Home >Web Front-end >Front-end Q&A >Is there a built-in object in javascript
There are built-in objects in javascript. Built-in objects are some objects that come with the JS language. Common ones include: String object, Array object, Date object, Boolean object, Number object, Math object, RegExp object, Global object, etc.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
Objects in JavaScript are divided into 3 types: custom objects, built-in objects, and browser objects
The first two objects are the basic content of JS and belong to ECMAScript; the third browser object belongs to Our JS unique
built-in objects refer to some of the objects that come with the JS language. These objects are for developers to use and provide some commonly used or the most basic and necessary functions. (Attributes and methods)
The biggest advantage of built-in objects is that they help us develop quickly
JavaScript provides multiple built-in objects, such as Math, Date, Array, String, etc.
String object: String object, which provides properties and methods for operating on strings.
Array object: Array object provides properties and methods for array operations.
Date object: Date and time object, which can obtain the date and time information of the system.
Boolean object: Boolean object, a Boolean variable is a Boolean object. (No properties and methods available)
Number object: Numeric object. A numeric variable is a numeric object.
Math object: Mathematical object, which provides properties and methods for mathematical operations.
Object object
RegExp object
Global object
Function object
....
##Math object
// 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()); //-InfinityCase: Encapsulate your own mathematical object
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 overview
The Math object is not a constructor, it has properties and methods of mathematical constants and functions . Math-related operations (finding absolute values, rounding, maximum values, etc.) can use members in 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 number method 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)]);Case: Guessing Number GameThe program randomly generates a number between 1 and 10, And let the user enter a number, 1. If it is greater than the number, it will prompt that the number is too big, continue guessing; 2. If it is less than the number, it will prompt that the number is too small, Continue guessing; 3. If it is equal to the number, it will prompt that the guess is correct and the program will end.
// 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('全部猜错了'); }
Date Object
Date Object and The Math object is different. It is a constructor, so we need to instantiate it before we can use the
1. To get the current time, you must instantiate
var now = new Date(); console.log(now);
2. Parameters of the Date() constructor
If there is time in the brackets, return it to the parameters time, for example, the date format string is '2019-5-1', which can be written as new Date('2019-5-1') or 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);3Date formatting
We want the date in the format of 2019-8-8 8:8:8, what should we do?
We need to get the specified part of the date, so we have to get this format manually
Description | Code | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get the current year | dObj.getFullYears() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get the current month (0-11) | dObj.getMonth() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get the date of the day | dObj.getDate() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get the day of the week (Sunday 0 to Saturday 6) | dObj.getDay() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get the current hour | dObj.getHours() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get the current minutes | dObj.getMinutes() | ##getSeconds() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dObj.getSeconds() |
方法名 | 说明 | 返回值 |
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学习教程】
The above is the detailed content of Is there a built-in object in javascript. For more information, please follow other related articles on the PHP Chinese website!