JavaScript对象基础

一、基本对象

1.定义:属性的无序集合,每个属性都是一个名/值对,属性值可以包括基本值,对象,函数。

2.分类

  • 内置对象:JavaScript已经规定好的一些对象
  • 宿主对象:是由JavaScript解释器所嵌入的宿主环境(比如Web浏览器)定义的。
  • 自定义对象:开发者自己定义的一些对象

3.对象定义方法

  • 字面量方法
    var 变量 = {};
    var 变量 = {
        属性名 : 属性值;
        属性名 : 属性值;
        ...
    }
  • new关键字方法
    var obj = new Object({
        属性名 : 属性值;
        属性名 : 属性值;
        ...
    });
  • 构造函数
    function 函数名(){}
    var 变量 = new 函数名();
  • Object.create()
    var 变量 = Object.create({neir9ong})

4.对象的属性

​ 属性名:描述元素某个特征的名称,对应的值我们称之为属性值

​ 属性名和属性值需要对应,常常称之为键值对(key-value),使用‘,’隔开

5.属性的操作

​ 动态属性:属性值可以不断添加和修改

​ 修改:对象.属性名 = 属性值;/对象["属性名"] = 属性值;

​ 添加:对象.属性名 = 属性值;/对象["属性名"] = 属性值;

​ 删除:delete 对象.属性名;

​ 获取:对象.属性/对象[“属性”];

6.属性的遍历

​ for in循环:

    for (var 变量 in 对象名){
        变量             就是每个属性名
        对象[变量]      属性值
    }
二、string

1.构造方法:

var str = new Srting(s)    //构造函数
function String(s)   //转换函数

和其他数据昨晚运算之后会变成基本数据类型

2.属性:length-该字符串中的字符数

3.方法API

function description
charAt() 取出字符串中指定位置的元素
charCodeAt() 返回字符串中指定位置的字符的Unicode编码
concat() 将一个或者多个值连接成一个字符串
indexOf() 查找指定字符在字符串中第一次出现的位置
lastIndexOf() 在指定字符串中从后开始寻找一个字符或者子串
localeCompare() 使用本地定义的顺序比较字符串
match() 使用正则表达式执行模式匹配
replace() 使用正则表达式执行查找与替换操作
search() 在一个字符串中查找匹配某个正则表达式的子串
slice() 返回字符串中的一个切片或子串
split() 将一个字符串分割为由字符串组成的数组
substr() 提取字符串的一个子串
substring() 提取字符串的一个子串
toUpperCase() 将所有字符转化为大写
toLowerCase() 将所有字符转化为小写
trim() 删除空白字符
valueOf 返回原始字符串的值
fromCharCode() 从字符编码创建一个字符串
charCodeAt() 取得字符串中指定字符的编码
includes() 方法用来判断一个数组是否包含一个指定的值
matchAll() 可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配
三、Number
  1. 定义方法
    var 变量名 = new Number();    //引用数据类型,Object,与别人运算之后变为基本数据类型
  1. isNaN()----内置数据类型:true--是NAN类型 false--不是NAN类型

    常用来判断是不是数字类型:false--数字类型 true--不是数字类型

  2. number.tofixed(保留的小数位)----将数字进行四舍五入,保留指定小数位,返回字符串

四、Boolean
    var 变量名 = new Boolean(true);    //引用数据类型,Object
五、Array
  1. 数组定义:数组是值的有序集合

  2. 定义数组的方法

    • 字面量方式
     var 变量名 = [];     
     var 变量名 = [值1,值2,值3...];  
    
    • 关键字new
     var 变量名 = new Array(数字);     //数字就是数组的长度
     var 变量名 = new Array(非数字);   //为数组的元素
     var 变量名 = new Array(值1,值2...);    //数组的元素
     var 变量名 = new Array();        //空数组
    
  3. JavaScript数组是无类型的,数组元素可以是任意类型。

  4. 访问方式

    • 下标:每个元素对应的编号
    • 访问数组元素:数组[下标];
    • 修改/添加:数组[下标] = 值;
  5. 属性:数组.length----返回数组的长度

  6. 遍历数组:

     for(var i = 0, len = arr.length; i < len; i++) {
         console.log(arr[i]);
     }
    
  7. 数组的分类

    • 按照数组的维度:一维数组和多维数组

    • 索引数组---下标是数字,从0开始 关联数组----下标不是数字

      var arr[];
      arr["name"] = "张三";
      arr["age"] =20;
      

      关联数组的length属性不可靠,使用for in遍历

  8. 方法API:

    function description
    concat(值1,值2) 将参数拼接到数组的尾部。返回新数组
    join() 将数组使用连接符变为字符串,没有参数默认使用逗号连接
    toString() 将数组转化为字符串,不能传入连接符。
    slice(start,end) 截取数组的一部分,形成新的数组
    push(值1,值2...) 往数组末尾添加元素,返回数组的新长度,改变原来的数组
    pop() 从数组末未删除元素,返回被删除的那个元素,改变原来的数组
    unshift(值1,值2...) 在数组头添加新元素,返回数组的新长度,改变原来的数组
    shift() 在数组的开头删除一个元素,返回删除的元素的值,改变了原来的数组
    reverse() 将数组进行反转,改变了原数组
    indexOf() 查找指定字符在数组中出现的位置,返回第一次出现的下标
    forEach(function()) 遍历数组,接收一个匿名数组作为参数,函数三个参数,值、下标、数组
    map(function()) 遍历数组,与forEach相同,但是在匿名函数里必须return,将值作为新的数组
    sort() 数组排序。改变原来的数组,返回排序后的数组,用排序函数/比较函数
    splice(start,num,值1,值2...) 会修改原数组,从第一个参数截取,第二个参数删除的个数,第三个之后是添加的元素。
六、Object
方法 描述
对象.hasOwnProperty() 判断对象是有有这个属性,返回布尔值
delete 对象.属性 删除属性
对象.proto 属性 指向的是实例化它的类
七、Math

数学操作相关的:往往和数字类型的数据一起操作,不需要new-------==权威指南p778==

function description
Math.abs() 取绝对值
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入取整
Math.max() 最大值
Math.min() 最小值
Math.random() 返回0-1之间的随机小数,包含0不含1=
八、Date
  1. 创建
var time = new Date();    //时间对象
  1. 计算机的系统时间:1970年 01-01 00:00:00

  2. 获取时间信息:

    • 获取年:time.getFullYear()
    • 获取月:time.getMonth() //月份从0开始
    • 获取日:time.getDate()
    • 获取星期:time.getDay()
    • 获取小时:time.getHours()
    • 获取分钟:time.getMinutes()
    • 获取秒:time.getSeconds()
    • 获取毫秒:time.getMilliseconds()
  3. 获取完整的日期信息

    • time.toLocalString()
    • 只获取时间:time.toLocalTimeString()
    • 只获取日期:time.toLocalDateString()
  4. 封装一个获取日期时间对象

      function getTime(type) {
        var time = new Date();
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var i = time.getMinutes();
        var s = time.getSeconds();
        //进行补位
        y < 10 ? "0" + y : y;
        m < 10 ? "0" + m : m;
        d < 10 ? "0" + d : d;
        h < 10 ? "0" + h : h;
        i < 10 ? "0" + i : i;
        s < 10 ? "0" + s : s;
        if(type) {
          if(!isNaN(type)){
            if(type === 1){
              return y + "/" + m + "/" + d;
            }
            else if(type === 2) { 
              return h + ":" + i + ":"+ s;
            }
            else {
              console.log("0:获取完整的日期时间  1:获取日期  2:获取时间");
            }
          }
          else {
            console.log("0:获取完整的日期时间  1:获取日期  2:获取时间");
          }
        }
        else {
          return y + "/" + m + "/" + d + " " + h + ":" + i + ":"+ s;
        }
      }
    
    
  5. 设置时间

    var timeStr = "2019-12-12T12:00:00";
    var time = new Date(timeStr);
    console.log(time.getFullYear());
    
  6. 时间计算

    //获取从计算机开始到现在的毫秒数
    var curTime = new Date();
    console.log(curTime.getTime());
    //将毫秒数变为时间
    console.log(new Date(1576158669683).toLocaleString());
    
    var time1 = "2019-12-12T19:23:34";
    var time2 = "2019-12-13T21:24:34";
    var his1 = new Date(time1);
    var his2 = new Date(time2);
    var res = his2 - his1;
    var s = res/1000;
    var days = parseInt(s/(24*60*60));
    var hours = parseInt((s - (24 * 60 * 60 * days)) / (60 * 60));
    var minutes = parseInt((s - (24 * 60 * 60 * days) - (60 * 60 * hours)) / 60);
    var ms = s - (24 * 60 * 60 * days) - (60 * 60 * hours) - (60 * minutes);
    
    
  7. 定时器

    • 定义:过一段时间要做某个事情

    • 分类:一次性定时器 周期性定时器

    • 如何定义定时器

      var time = setTimeout(function(){},3000);//一次性定时器,时间3000ms,要做的事在function内
      
      var time1 = setInterval(function(){},3000); //周期性定时器,时间3s,要做的事在function里
      
    • 清除定时器

      清除一次性定时器:

      clearTimeout(一次性定时器的序号);
      

      清除周期性定时器:

      clearInterval(周期性定时器的序号);
      
九、RegExp----正则表达式
  1. 正则的概念:由普通字符和特殊字符组成的文字模式

  2. 定义正则:

    ①new关键字:
    var 变量 = new RegExp("文字模式","修饰符");
    正则.test(字符串内容);

    var str = "sadfbkawebf";
    var par = new RegExp("a");
    var res = par.test(str);   //返回true
    

    ②字面量
    var 变量 = /文字模式/修饰符;

    var str = "shiufhuhefo";
    var par = /a/;
    var res = par.test(str);   //返回true
    
  3. 修饰符

    修饰符 说明
    i 忽略大小写
    g 全文匹配
    m 多行匹配
  4. 正则.exec(字符串)----返回第一次正则匹配到的信息,没有匹配到返回null

    exec方法,同正则匹配同内容多次,后面的一次检索是从上一次检索到的位置开始

  5. 元字符:是拥有特殊含义的字符

元字符 描述
. 查找单个字符,除了换行和行结束符
\w 单词字符(字母+数字)
\W 非单词字符(非数字,非字母)
\d 数字
\D 非数字
\s 空白字符
\S 非空白字符
\b 匹配单词边界
\B 非匹配单词边界
\n 查找换行符
\f 查找换页符
\r 查找回车
\t 查找制表
  1. 字符串.match(正则);使用的时候需要正则开启全局模式g

  2. 方括号:用于查找某个范围内的字符

    表达式 描述
    [abc] 查找方括号之间的任何字符。
    [0-9] 查找任何从 0 至 9 的数字。
    [^0-9] 查找0-9之外的任何字符
    (x|y) 查找由 | 分隔的任何选项。
  3. 量词

    量词 描述
    n+ 匹配任何包含至少一个 n 的字符串。
    n* 匹配任何包含零个或多个 n 的字符串。
    n? 匹配任何包含零个或一个 n 的字符串。
    n{x} 匹配包含x个n的序列的字符串
    n{x,y} 匹配包含x至y个n的序列的字符串
    n{x,} 匹配包含至少x个n的序列的字符串
    n$ 匹配任何结尾为n的字符串
    ^n 匹配任何开头为n的字符串
    ?=n 匹配任何其后缀紧接指定字串n的字符串
    ?!=n 匹配任何其后没有紧接指定字串n的字符串
十、Function
  1. Function是JavaScript内部的一个对象,所有的函数都可以通过Function来进行实例化。
  2. new关键字,会导致代码解析两次
    • 第一次解析:es代码解析
    • 第二次解析:解析这些字符串在内部生成函数

3.this:关键字,当前对象,指的是自己

  • this指向的是当前运行的上下文对象,也就是当前所在函数归属的对象
  • 全局的this就是window对象
  • 声明方式定义的函数是window的方法
  • 在函数内部以字面量或者声明方式定义的函数。this都指向window

4.属性

  函数名.name
  函数名.length             //形参的个数
  arguments.length      //要在函数内部打印,实参的个数
  函数名.prototype       //函数的原型

5.apply()
函数名.apply(使用函数的对象,[参数1,参数2......])
除了参数用[]以外,其余与call一样
6.call()
函数名.call(使用函数的对象,函数参数1,函数参数2......)
将函数里面this指向改变为使用函数的对象
如果使用函数的对象为null,则this指向window
7.bind()
函数名.bind(使用函数的对象) -----拿到此函数
函数名.bind(使用函数的对象)(参数1,参数2......)

你可能感兴趣的:(JavaScript对象基础)