9.JavaScript内置对象

1.内置对象

  • JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象

  • 前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们S独有的,我们JS API讲解

  • 内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)

  • 内置对象最大的优点就是帮助我们快速开发

  • JavaScript提供了多个内置对象:Math、 Date . Array、string等

//去除两边空格
trim()
//切割字符串
slice()
let str='index.js'; console.log(str.slice(-3)))==>'.js'

2. 查文档

2.1 MDN

学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C 来查询。

Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。

MDN: https://developer.mozilla.org/zh-CN/

2.2 如何学习对象中的方法

  1. 查阅该方法的功能

  2. 查看里面参数的意义和类型

  3. 查看返回值的意义和类型

  4. 通过 demo 进行测试

3. Math 对象

3.1 Math 概述

Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值 等)可以使用 Math 中的成员。

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值

注意:上面的方法必须带括号

3.2 随机数方法 random()

random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1 得到一个两数之间的随机整数,包括两个数在内

function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

生成length个0~9的随机数:

function random(length) {
   let result = ''
   for (let i = 0; i < length; i++) {
       let index = Math.floor(Math.random() * 10)
       result += index
  }
   return result
}

4. 日期对象

4.1 Date 概述

  • Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用

  • Date 实例用来处理日期和时间

4.2 Date()方法的使用

1.获取当前时间必须实例化

var now = new Date ();
console.log (now) ;

2.Date(构造函数的参数 如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date(2019-5-1")或者new Date(2019/5/1)

4.3 日期格式化

方法名说明代码
getFullYear() 获取当年 dObj.getFullYear()
getMonth() 获取当月(0-11) dObj.getMonth()
getDate() 获取当天日期 dObj.getDate()
getDay() 获取星期几(周日0到周六6) dobj.getDay()
getHours() 获取当前小时 dobj.getHours()
getMinutes() 获取当前分钟 dObj.getMinutes()
getSeconds() 获取当前秒钟 dObj.getSeconds()

4.4 获取日期的总的毫秒形式 (时间戳)

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

为什么计算机起始时间从1970年开始? 我们经常利用总的毫秒数来计算时间,因为它更精确

// 实例化Date对象 
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();

小结代码:

/* 生成系统当前时间 */
function createTime() {
   const date = new Date()//创建时间对象
   const yy = date.getFullYear()//年
   const MM = (date.getMonth() + 1 + '').padStart(2, '0')//月(padStart:字符串不满2位数,开头补全'0')
   const dd = (date.getDate() + '').padStart(2, '0')//日

   const hh = (date.getHours() + '').padStart(2, '0')//小时
   const mm = (date.getMinutes() + '').padStart(2, '0')//分钟
   const ss = (date.getSeconds() + '').padStart(2, '0')//秒钟

   return `${yy}-${MM}-${dd} ${hh}:${mm}:${ss}`//返回时间
}
/* 转换时间戳 */
function getTimes(time) {
   const date = +new Date(time)
   // const date1 = Date.now()//H5当前时间戳
   // console.log(date1)
   return date
}
/* 格式化时间 */
function formatTime(time) {
   /* 格式化的时间戳必须是Number型*/
   const date = new Date(time)//创建时间对象
   const yy = date.getFullYear()//年
   const MM = (date.getMonth() + 1 + '').padStart(2, '0')//月
   const dd = (date.getDate() + '').padStart(2, '0')//日

   const hh = (date.getHours() + '').padStart(2, '0')//小时
   const mm = (date.getMinutes() + '').padStart(2, '0')//分钟
   const ss = (date.getSeconds() + '').padStart(2, '0')//秒钟

   return `${yy}-${MM}-${dd} ${hh}:${mm}:${ss}`//返回时间
}
/* 倒计时 */
function countDown(time) {
   var nowTime = +new Date(); // 当前时间戳
   var endTime = +new Date(time); // 结束时间戳
   var times = (endTime - nowTime) / 1000; // 剩余时间总的秒数
   var dd = parseInt(times / 60 / 60 / 24).toString().padStart(2, '0'); // 天
   var hh = parseInt(times / 60 / 60 % 24 + '').toString().padStart(2, '0'); //时
   var mm = parseInt(times / 60 % 60 + '').toString().padStart(2, '0'); // 分
   var ss = parseInt(times % 60 + '').toString().padStart(2, '0'); // 当前的秒
   return `${dd}天${hh}时${mm}分${ss}秒`//返回时间
}
console.log('系统当前时间:', createTime())
console.log('时间戳:', getTimes(createTime()))
console.log('转换时间戳:', getTimes('2021-03-01 08:00:00'))
console.log('格式化指定时间:', formatTime(getTimes('2021-03-01 08:00:00')))
console.log('格式化当前时间:', formatTime(getTimes(createTime())))
console.log('倒计时:', countDown('2021-02-13 08:00:00'))

5. 数组对象

5.1 数组对象的创建

创建数组对象的两种方式

  • 字面量方式

  • new Array()

5.2 检测是否为数组

  • instanceof 运算符,可以判断一个对象是否属于某种类型

  • Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

5.3 添加删除数组元素的方法

方法名说明返回值
push(参数1....) 末尾添加一个或多个元素,注意修改原数组 并返回新的长度
pop() 删除数组最后一个元素,把数组长度减1无参数、修改原数组 返回它删除的元素的值
unshift(参数1...) 向数组的开头添加一个或更多元素,注意修改原数组 并返回新的长度
shift() 删除数组的第一个元素,数组长度减1无参数、修改原数组 返回它删除的元素的值
splice(index,num) 删除指定元素:index第几个开始,num为删除个数 返回它删除的元素的值

5.4 数组排序

方法名说明是否修改原数组
reverse() 颠倒数组中元素的顺序,无参数 该方法会改变原来的数组返回新数组
sort() 对数组的元素进行排序 该方法会改变原来的数组返回新数组
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
return b - a; // 降a序
// return a - b; // 升序
});
console.log(arr);

5.5 数组索引方法

方法名说明返回值
indexOf() 数组中查找给定元素的第一个索引 如果存在返回索引号如果不存在,则返回-1。
lastIndexOf() 在数组中的最后一个的索引, 如果存在返回索引号如果不存在,则返回-1。

封装数组去重复

// 封装一个 去重的函数 unique 独一无二的 
function unique(arr) {
   let newArr = [];
   for (let i = 0; i < arr.length; i++) {
       if (newArr.indexOf(arr[i]) === -1) {
           newArr.push(arr[i]);
      }
  }
   return newArr;
}

5.6 数组转换为字符串

方法名说明返回值
toString() 把数组转换成字符串,逗号分隔每一项 返回一个字符串
join("分隔符') 方法用于把数组中的所有元素转换为一个字符串。 返回一个字符串

5.7 其他方法

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

slice() 和 splice() 目的基本相同,建议同学们重点看下 splice()

6.字符串对象

6.1基本包装类型

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。 基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

// 下面代码有什么问题?
var str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 js 会把 基本数据类型包装为复杂数据类型,其执行过程如下 :

// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

6.2字符串的不可变

指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候,常量'abc'不会被修改,依然在内存中
// 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
// 由于字符串的不可变,在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间

6.3根据字符返回位

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

方法名说明
indexOf('要查找的字符,[开始的位置]) 返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号
lastIndexOf() 从后往前找,只找第一个匹配的

6.4根据位置返回字符(重点)

方法名说明使用
charAt(index) 返回指定位置的字符(index字符串的索引号) str.charAt(O)
charCodeAt(index) 获取指定位置处字符的ASCII码(index索引号) str.charCodeAt(O)
str[index] 获取指定位置处字符 HTML5,IE8+支持和charAt()等效

6.5字符串操作方法(重点)

方法名说明返回值
concat(str1,str2,str3...) 用于连接两个或多个字符串。拼接字符串,等效于+,+更常用 返回新字符串
substr(start,length) 从start位置开始, length 取的个数重点记住这个 返回截取部分,不影响原字符串
slice(start, end) 从start位置开始,截取到end位置,end取不到(他们俩都是索引号) 返回截取部分,不影响原字符串
substring(start, end) 基本和slice相同,但是不接受负值 返回截取部分,不影响原字符串

6.6replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符。 其使用格式如下:

 replace(被替换的字符串, 要替换为的字符串);//只替换第一个相同的字符

6.7split()方法

split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。 例如下面代码:

var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

6.8其他方法

  • toUpperCase() //转换大写

  • toLowerCase() //转换小写

示例:

let str8 = 'chenzhifeng'
let str9 = str8.toUpperCase()//转换为大写
let str10 = str9.toLowerCase()//转换为小写
console.log(str8, str9, str10)

 

posted @ 2021-02-26 00:30  琴时  阅读(63)  评论(0编辑  收藏  举报