JavaScript内置对象

mzmm403
146 阅读7分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天

内置对象

其实可以类比我们python中的库

介绍

  • JavaScript中的 对象分为3种：自定义对象、内置对象、浏览器对象
  • 前面的两种对象是js基础内容，属于ECMAScript；第三种浏览器对象属于我们js独有的，我们JS API讲解
  • 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供一些常用的或是最基本而必要的功能（属性和方法）
  • 内置对象最大的优点就是帮助我们快速开发
  • Javascript提供了多个内置对象：Math、Date、Array、String等

如果我们忘记了可以查阅MDN文档

Math对象

Math对象不是构造函数，所以不需要new来调用，直接使用即可

属性

  • 圆周率
Math.PI

方法

  • 最值
Math.max(1,99);
Math.min(1,99);

  1. 这里（）内部没办法转换称数字就会返回NaN

  2. 这里（）内部如果没有参数则max中返回-Infinity，min中返回Infinity

  • 绝对值
Math.abs(1);  //1
Math.abs(-1);  //1
Marh.abs('-1') //1 隐式转换 会把字符串型-1转换为数字型
Math.abs('mzmm403') //NaN
  • 取整
Math.floor(); //往下取整，往小取值
Math.floor(1.9); // 1
Math.ceil();  //往上取整，往大取值
Math.ceil(1.1); // 2
  • 四舍五入
Math.round(); // 注意这里的.5是往大了取
Math.round(1.1); // 1
Math.round(1.5); // 2
Math.round(-1.5); // 结果为-1
  • 随机数
Math.random()
//我们想要得到两个数之间的随机整数
Math.floor(Math.random() * (max - min +1)) + min;
  1. random()返回一个随机0-1的浮点数
  2. 服从左闭右开的规则
  3. 不需要参数

Date日期对象

处理时间和日期的

// 使用Date
var date = new Date();
var date1 = new Date(2022,10,01); //注意这里的结果会大一个月
var date2 = new Date('2022-10-1 8:8:8');

  1. 如果没有输入任何参数，则Date的构造函数会按照当前的系统设置的时间创建一个Date对象

  2. 参数常用写法

  • 数字型： 2022,10,01；因为按数字计算月份是从0-11的
  • 字符串型：'2022-10-1 8:8:8'
  1. 日期对象是一个构造函数

日期格式化

方法名说明代码
getFullYear()获取当年dObj.getFullYear()
fetMonth()获取当月(0-11)dObj.fetMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取当前星期几dObj.getDay()
getHours()获取当前小时数dObj.getHours()
getMinutes()获取当前分钟数dObj.getMinutes()
getSeconds()获取当前秒数dObj.getSeconds()
  • 实例
var date = new Date();
console.log(date.getFullYear());
console.log(date.getDay()); //周一返回1，周六返回6，周日返回0

获取日期的总的毫秒形式

  • Date对象是基于1970年1月1日（世界标准时间）起的毫秒数

  • 通过getTime或者valueOf获取

var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
// 就是我们现在时间距离1970.1.1总的毫秒数
//最常用的方法
var　date1 = +new Date(); // 返回的就是总的毫秒
console.log(date1);
//H5 新增的获取的毫秒数
console.log(Date.now());

倒计时案例

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%24); //分
    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('2022-11-11 24:00:00'));

数组对象

创建数组

var arr = [1,2,3];
var arr1 = new Array(); //创建空数组
var arr1 = new Array(2); //2表示数组长度为2
var arr1 = new Array(2,3); //存了2，3两个元素

检测是否为数组

var arr = [];
console.log(arr instanceof Array); //True
console.log(Array.isArray(arr)); //true
  1. instanceof 它用来检测是否为数组
  2. Array.isArray(参数) H5新增方法，ie9以上版本支持
  3. Array.isArray(参数) 优先于 instanceof

添加和删除数组元素

方法名说明返回值
push(参数1....)末尾添加一个或者多个元素，注意修改原数组返回新的长度
pop()删除数组的最后一个元素，把数组长度减1，无参数、修改原数组返回它删除的元素的值
unshift(参数1...)向数组的开头添加一个或更多元素，注意修改原数组返回新的长度
shift()删除数组第一个元素，数组长度减1，无参数，修改原数组返回第一个元素的值
  • 添加实例
var arr = [1,2,3];
console.log(arr.push(4)); // 4
console.log(arr); // [1,2,3,4]

console.log(arr.unshift('0')) // 5
console.log(arr) //[0,1,2,3,4]

  • push

    1. push是可以给数组结尾追加新元素
    2. push参数直接写数组元素就可以
    3. push完毕后，返回的结果是新数组的长度
    4. 原数组也会发生变化

  • unshift

    1. unshift是可以给数组开头追加新元素
    2. unshift参数直接写数组元素就可以
    3. unshift完毕后，返回的结果是新数组的长度
    4. 原数组也会发生变化

  • 删除实例

var arr = ['pink',2,3,'red'];
console.log(arr.pop()); // red
console.log(arr); //['pink',2,3]

console.log(arr.shift()); //pink
console.log(arr); // [2,3]
  • pop
    1. pop是可以删除数组的最后一个元素，记住一次只能删除一个元素
    2. pop没有参数
    3. pop返回值为删除的那个元素
    4. 原数组也会发生变化
  • shift
    1. shift是可以删除数组的第一个元素，记住一次只能删除一个元素
    2. shift没有参数
    3. shift返回值为删除的那个元素
    4. 原数组也会发生变化

数组排序

方法名说明是否修改原数组
reverse()颠倒数组中元素的顺序，无参数该方法会改变原来的数组，返回新数组
sort()对数组的元素进行排序该方法会改变原来的数组，返回新数组
  • 实例
var arr = [1,2,3];
arr.reverse();
console.log(arr); // [3,2,1]

var arr1 = [3,6,2,1];
arr1.sort();  //这样只能解决个位数的排序
console.log(arr1); //[1,2,3,6]

// 解决升序
var arr2 = [1,23,5,51,6];
arr2.sort(function(a,b){
    return a - b;
});

// 解决降序
var arr2 = [1,23,5,51,6];
arr2.sort(function(a,b){
    return b - a;
});

数组索引方法

方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号，如果不存在，返回-1
lastIndexOf()在数组中的最后一个的索引如果存在返回索引号，如果不存在，返回-1
  • 实例
var arr = [1,2,2,3,4];
console.log(arr.indexOf(2)); // 1 这里只会从左往右检索第一个
console.log(arr.indexOf(5));  // -1

//lastIndexOf 是从右往左的 其他一样

数组转换为字符串

方法名说明返回值
toString把数组装换成字符串，逗号分隔每一项返回一个字符串
join('分隔符')方法用于把数组中所有的元素转换为一个字符串返回一个字符串
  • 实例
var = [1,2,3];
console.log(arr.toString()); //1,2,3
console.log(arr1.join(-)); //1-2-3 若不写分隔符就默认为，

其他常用

方法名说明返回值
concat()连接两个或多个数组，不影响原数组返回一个新数组
slice()数组截取silce(begin,end)返回被截取项目的新数组
splice()数组删除splice(第几个开始,删除的个数)返回被删除项目的新数组，注意这个会影响原数组

字符串对象

js中字符串是不可变的，一旦在一个进程中给变量命名，再次给这个变量命名时只会改变变量的指针，字符串常量池里的东西会越来越多，导致都堆积在内存里，浪费资源

根据字符返回位置

// 和数组里面的索引方法一样
var str = 'mzmm403'
console.log(str.indexOf('m',2)) //3

根据位置返回字符

方法名说明使用
charAt(index)返回指定位置的字符str.charAt(0)
charCodeAt(index)获取指定位置处字符的ASCII码str.charCodeAt(0)
str(index)获取指定位置处字符HTML5，IE8支持和charAt()等效

拼接及截取字符串

方法名说明
concat(str1,str2,str3)concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length)从start位置开始，length取的个数，重点记住这个
slice(start,end)从start位置开始，截取到end位置，end取不到
substring(start,end)从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受赋值
  • 实例
var str = 'mzmm';
console.log(str.concat('403')); //mzmm403

var str1 = 'mzmm403';
console.log(str1.substr(4,3)); //403

替换字符串及转换为数组

  • 实例
// 1.替换字符
var str = 'mzma403';
console.log(str.replacr('a','m')); //若有相同的，则一次替换第一个字符

// 把字符转换为数组 split('分隔符)
var str1 = 'mzmm,403'
console.log(str1.split(',')); //[mzmm,403]

转换大小写

方法说明
toUpperCase()将字符串全部转换为大写
toLowerCase()将字符串全部转换为小写
avatar
文章
阅读
粉丝