欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript学习笔记——内置对象

程序员文章站 2022-07-03 20:05:49
...

JavaScript的内置对象可以使用MDNW3C来查询,常用的内置对象:Math,Date,Array,String
查找内置对象主要注意的是,内置对象的方法方法的功能参数类型及意义返回值类型及意义,并且进行测试

1.Math对象

Math对象不是构造函数,具有数学常数和函数的属性和方法,都是使用静态成员的方式提供的。
常见的Math方法和属性:
Math.PI:圆周率
Math.random():生成随机数 默认[0,1)
Math.floor()/Math.ceil():小于等于一个数的最大值,向下取整/大于等于一个数的最小值,向上取整
Math.round():取整,四舍五入
Math.abs(): 绝对值
Math.max(value1,value2……)/Math.min(value1,value2……): 求最大值和最小值
Math.sin()/Math.cos(): 正弦/余弦
Math.power()/Math.sqrt(): 求指数次幂/求平方根

//求一个数到另一个数之间的随机数
function getRandom(min,max) {
//比如:10,20:[0,1) -> [0,11) -> [10,21) 向下取整 >- [10,20]
   return Math.floor(Math.random() * (max - min + 1) + min);
}
var random = getRandom(10,20);
console.log(random);

2.Date对象

Date对象时用来处理日期和时间,Date对象基于1970年1月1日 0:0:0起的毫秒数,1970年1月1日之前的日期,毫秒数是负数。
Date对象的属性和方法都是使用实例成员调用,需要有构造函数。

Date对象常用的方法:
 日期格式化方法:
  toString()	// 转换成字符串  直接打印日期对象,默认调用了toString()方法
  valueOf()		// 获取毫秒值
// 下面格式化日期的方法,在不同浏览器可能表现不一致,一般不用
  toDateString()
  toTimeString()
  toLocaleDateString()
  toLocaleTimeString()
获取日期指定部分的方法:
  getTime()  	  // 返回毫秒数和valueOf()结果一样
  getMilliseconds() 
  getSeconds()  // 返回0-59
  getMinutes()  // 返回0-59
  getHours()    // 返回0-23
  getDay()      // 返回星期几 0周日   6周6
  getDate()     // 返回当前月的第几天
  getMonth()    // 返回月份,***从0开始***
  getFullYear() //返回4位的年份  如 2016
//计算时间差,返回相差的天/时/分/秒
function getIterval(end,start) {
    var interval = end - start; //时间差,毫秒
    var day,hour,minute,second;
    //毫秒所对对应的天数
    day = Math.round(interval / 1000 / 60 / 60 / 24);
    //处于一天的第几个小时
    hour = Math.round(interval / 1000 / 60 / 60 % 24);
    //处于一个小时中的第几分钟
    minute = Math.round(interval / 1000 / 60 % 60);
    //一分钟中的第几秒
    second = Math.round(interval / 1000 % 60);
    return {
        day:day,
        hour:hour,
        minute:minute,
        second:second
   };
}
var startDate = new Date();
var endDate = new Date(2022.2,10);
console.log(getInterval(endDate,startDate));

3.Array对象

数组对象的创建方式:字面量 var arr = []; 数组对象 var arr = new Array();
检查一个对象是否是数组的方式:instanceofArray.isArray(), Array.isArray()是HTML5中提供的方法,有兼容性问题。

常用方法:
栈 先进先出 
  push(参数/索引位置) 从数组后面添加一个或者多个元素 改变了数组的长度。
  pop() 取出数组的最后一个元素。
队列 先进后出 
  push()用法与栈相同。
  shift() 取出数组的第一个元素 改变了数组的长度。 
  unshift() 在数组最前面插入一个或者多个元素。
翻转:reverse() ,还可以使用循环 让数组的第i个元素和第length-1-i元素进行互换
排序:sort() 默认采用的是字符编码顺序,而不是数字的从小到大
改变排序的方式 sort(比较函数) 比较函数的返回值>0 升序 <0 降序
清空数组:arr = [];(推荐使用第一种方式) arr.length = 0; arr.splice(0,arr.length);
join(分割字符):将所有的元素连接到字符串上,默认的分隔符采用的是逗号,返回字符串
join('')可以取消分割符,
迭代方法:HTML5提供 every()、filter(过滤函数)、forEach()、map()、some()
位置方法 
indexOf(数组元素,开始寻找的位置):默认第一个位置从前往后找第一个元素。lastIndexOf() 从后往前找第一个元素  如果没找到返回-1。
操作方法
  concat()  	//把参数拼接到当前数组
  slice() 	//从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
  splice()	//删除或替换当前数组的某些项目,参数start, deleteCount, options(要替换的项目)
// 1 栈操作(先进后出) 
// pop() 取出数组中的最后一项,修改length属性
var array = new Array(15,48,78,56);
array.push(4);//push(参数) 在数组后面添加一个或者多个元素,改变的是数组的长度  
console.log(array); 
console.log(array.pop()); 
// 取出数组中的最后一项 修改了length属性 取出数组元素之后,length-1
console.log(array.length);
// 2 队列操作(先进先出)
// push()
// shift()		取出数组中的第一个元素,修改length属性
// unshift() 	在数组最前面插入项,返回数组的长度
var array = [12,59,69,45];
array.push(5);
console.log(array);
var first = array.shift();  //取出数组的第一个元素
console.log(first);
array.unshift(55); //在数组最前面插入一个或者多个元素
console.log(array);
// 3 排序方法
// reverse()	翻转数组
array.reverse();
console.log(array);
// sort(); 	
array.sort();
console.log();
 // sort()自定义函数比较元素大小 
array.sort(function (a,b) {
            return a-b;
});
console.log(array);  
// 分割数组
var array = new Array('张三','李四','王五');
console.log(array.toString());
console.log(array.join('|'));
// ["c", "a", "z", "a", "x", "a"]找到数组中每一个a出现的位置
var array = ["c", "a", "z", "a", "x", "a"];
var index = -1;
do {
//indexOf(查找的数组元素,开始位置);
     index = array.indexOf('a', index + 1);
     if (index != -1) {
         console.log(index);//打印每次出现a的位置
     }
}while(index != -1);

4.基本包装类型

将简单类型包装成复杂类型 String Number Boolean ,Number和Boolean很少用,容易引起歧义。

//使用Boolean容易引起歧义
var b1 = new Boolean(false);
var b2 = true;
var result = b1 && b2; //此时b1并不是false 而是true 
//因为布尔类型为false只有5种情况:0 '' Null NaN undefined,此时的b1是对象不在这5种情况中
console.log(result); //结果是true && true

5.String对象

字符串是不可变的,重新给字符串赋值的时候,原来的值不会被修改,依然在内存中,重新赋值,只是在内存中开辟新的空间。
创建字符串对象 var str = new String(‘字符串内容’);
字符串常用方法:字符串可以直接调用方法,系统会自动将字符串声明为字符串对象。

// 1 字符方法
charAt()    	//获取指定位置处字符
charCodeAt()  	//获取指定位置处字符的ASCII码
str[0]   		//HTML5,IE8+支持 和charAt()等效
// 2 字符串操作方法 拼接截取
concat()   		//拼接字符串,等效于+,+更常用
slice()    		//从start位置开始,截取到end位置,end取不到
substring() 	//从start位置开始,截取到end位置,  end取不到
substr()   		//从start位置开始,截取length个字符
// 3 位置方法
indexOf()   	//返回指定内容在元字符串中的位置
lastIndexOf() 	//从后往前找,只找第一个匹配的
// 4 去除空白   
trim()  		//只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase() 	//转换大写
to(Locale)LowerCase() 	//转换小写
// 6 其它
search():除了具备和indexOf()相同的功能之外,还可以查找正则表达式
replace() 只会替换第一个找到的字符 
如果全部都需要替换使用循环,做法就是使用indexOf()找到的位置,然后开始不断查找。
类似indexOf()查找字符串某个字符的位置,只是把位置的输出,改成replace()替换
split() 分割, 返回的是数组对象
// 获取url中?后面的内容,并转化成对象的形式。
//例如:http://www.itheima.com/login?name=zs&age=18&a=1&b=2
var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
function getParams(url) {
//1.查找到1后面的字符串,然后进行截取
    var index = url.indexOf('?') + 1;
    var newUrl = url.substr(index); //从问号开始截取到最后
//2.以&进行分割 返回的是数组 0: name=zs; 1: age=1; 2: a=1; 3 b=2
    var arr = newUrl.split('&'); 
    var obj = {}; //对象 用于保存数组分割的键和值
    for (var j = 0; j < arr.length; j++) {
        var tmpArray = arr[j].split('='); 
//3.用等号=分割数组 返回的是新的数组 此时每个数组只有0和1两个索引
        var key = tmpArray[0];
        var value = tmpArray[1];
        obj[key] = value;
     }
         return obj;
}
var obj = getParams(url);
console.log(obj);
console.log(obj.name);
console.log(obj.age);