zoukankan      html  css  js  c++  java
  • 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)

     

    ★紧急联系
    邮箱:zhif6688@163.com
    V  X: Zhif999999
  • 相关阅读:
    判断字符中是否包含汉字
    since I lived here; since I have lived here. 的区别? 从语法上看, 为啥会有这样的区别?
    have married; have been married; 到底是结婚了没?还是已经离婚了?
    C#项目依据 x86 x64 配置不同的引用
    现在完成时可以表示过去事件对现在的影响/效果. 过去完成时也可以起相同的作用!!!!
    使用现在完成时的常见错误(转发)
    去除win10下的缺省ctrl加空格功能
    appear + 表语 与 appear to be + "表语" 的区别; get hurt与 get to be hurt的区别
    ssm搭建的一个web应用的工作流程
    return和finally究竟谁先执行,还有return是怎么返回数据的
  • 原文地址:https://www.cnblogs.com/zhif97/p/14450179.html
Copyright © 2011-2022 走看看