zoukankan      html  css  js  c++  java
  • 读javascript高级程序设计07-引用类型、Object、Array

    一、引用类型

    ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法。

    创建对象实例的方法时是用new 操作符加构造函数:var p=new Person()。

    二、Object类型

    1.创建Object实例两种方式:

    使用new操作符跟Object构造函数。

    var o = new Object();
    o.name = 'dami';
    o.age = 25;

    使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉。

    var o = {
      name: 'dami',
      age: 25
    }

    如果对象字面量声明对象时,大括号中为空,那对象只包含默认的属性和方法。

    var o={};等同于var o=new Object();

    对象字面量还适用于向函数传递大量可选参数。

    function showResult(args){
      var result='the result:';
      if(typeof args.name=="string"){
      result+=" my name is "+args.name;
      }
      if(typeof args.age=="number"){
      result+=" my age is "+args.age;
      }
      console.log(result);
    }
    showResult({});//the result:
    showResult({name:"Peter"});//the result: my name is Peter
    showResult({name:"Kate",age:28});//the result: my name is Kate my age is 28

    对象字面量的属性名可以加引号,也可以不加引号。但是如果属性名是关键字或者包含特殊符号,则必须加引号。

    var o = {
      name: 'dami',
      age: 25,
      "data-id":35
    }

    2.读取属性

    • 点表示法:o.name;
    • 方括号表示法:o["age"];

    但是如果属性名是关键字或者包含特殊符号,则必须使用方括号表示法:o["data-id"];

    二、Array类型

    ECMAScript中的数组元素可以是多种数据类型,而且长度是可以动态调整的。

    1.创建数组对象

    ①使用构造函数Array().

    var array=new Array('a','b','c');//["a", "b", "c"];

    注意当参数是一个值时,如果参数是数值类型,则创建相应长度的数组;如果参数是其他类型,则创建的数组长度是1。

    var array=new Array(5);//[undefined, undefined, undefined, undefined, undefined]
    var array=new Array('5');//["5"]

    2.检测数组对象--Array.isArray()

    var array=[1,3,5];
    Array.isArray(array);//true

    3.转换方法

    • toString():返回由数组中的每个元素用逗号分隔而成的字符串;
    • valueOf():返回的仍然是数组;
    • join():方法有一个参数,将该参数作为分隔符,返回包含所有数组元素的字符串。如果参数为空,则默认用逗号分隔。
    var array=[1,3,5];
    array.toString();//"1,3,5"
    array.valueOf();//[1, 3, 5]
    array.join();//"1,3,5"
    array.join('|');//"1|3|5

    4.栈和队列

    栈是一种LIFO后进先出的数据结构,只在顶部做插入和删除操作。

    • push():将元素压入数组。可以接收多个参数,将他们逐个添加的数组末尾,并返回修改后的数组长度;
    • pop():将元素弹出。弹出数组的末尾项,减少数组长度length,并且返回移除项的值。
    var array=[1,3,5];
    var count=array.push(8,9,10);
    console.log(count);//6
    var item=array.pop();
    console.log(item);//10
    console.log(array.length);//5

    队列是一种FIFO先进先出的数据结构,在列表末尾添加项,在列表开头移除项。

    • push():向末尾添加项,和栈相同;
    • shift():在列表开头移除项,减少数组length值,并返回移除项的值。
    var array=[1,3,5];
    var count=array.push(8,9,10);
    console.log(count);//6
    var item=array.shift();
    console.log(item);//10
    console.log(array);// [3, 5, 8, 9, 10]

    5. 重排序:

    • reverse():反转数组元素的顺序。
    • sort():对数组元素进行排序。sort方法排序方式要注意,是先对数组元素调用toString()方法得到字符串,然后根据字符串进行排序。

    sort()方法还可以接受一个函数名作为参数,以便指定排序的规则。

    var array=[1,5,9,3,10,7];
    array.reverse();//[7, 10, 3, 9, 5, 1]
    array.sort();//[1, 10, 3, 5, 7, 9]
    function compare(a,b){
      if(a==b){
      return 0;
      }else if(a>b){
      return 1;
      }else{
      return -1;
      }
    }
    array.sort(compare);//[1, 3, 5, 7, 9, 10]

    6.操作方法

    concat():连接数组元素。先创建数组的副本,然后将元素追加到数组结尾,最后返回新数组。

    • 如果参数为空,则直接复制数组;
    • 如果参数是一个元素,则直接将其追加到数组末尾;
    • 如果参数也是数组,则将该数组元素追加到副本末尾。
    var array=[1,3,5];
    array.concat();//[1, 3, 5]
    array.concat(88);//[1, 3, 5, 88]
    array.concat('a',[[4,99],'b']);//[1, 3, 5, "a", [4, 99], "b"]

    slice():取得数组分片。

    • 当传入两个参数时,分别表示数组的开头和结尾位置的索引,但是返回的分组包含开始项但不包含结尾项。
    • 当传入一个参数时,该参数标识起始位置索引,返回的分组是从该开始位置一直到数组结尾。
    • 当传入参数为负数时,从数组结尾开始计数,最后一个元素为-1.
    var array=[1,2,3,4,5,6,7,8,9,10];
    array.slice(2);//[3, 4, 5, 6, 7, 8, 9, 10]
    array.slice(5,8);//[6, 7, 8]
    array.slice();//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    array.slice(-3,-1);//[8, 9]

    splice():向数组中插入项。通过传入不同参数可以实现多个操作:

    • 删除:传入两个参数,第一个参数是要删除的起始位置,第二个参数是要删除的长度。
    • 插入:第一个参数是要插入的位置索引,第二个参数是0,从第三个参数起是要插入的元素项。
    • 替换:第一个参数是要替换的起始位置,第二个参数是要被替换的长度,第三个参数起是要替换的新的元素项。
    var array=[1,2,3,4,5,6,7,8,9,10];
    //删除
    var removed=array.splice(1,2);
    removed;//[2,3]
    array;//[1, 4, 5, 6, 7, 8, 9, 10]
    //插入
    array.splice(1,0,88,88,88);
    array;//[1, 88, 88, 88, 4, 5, 6, 7, 8, 9, 10]
    //替换
    array.splice(1,3,2,3);
    array;//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    7.迭代方法

    every(fn):对数组中的每个元素执行方法,如果每一项都返回true,则结果为true。

    var array=[1,2,3,4,5,6,7,8,9,10];
    var result=array.every(function(item,index,array){
    return item>2;
    });//false


    some(fn):对数组中的每个元素执行方法,如果至少有一项返回true,则结果为true。

    result=array.some(function(item,index,array){
    return item>2;
    });//true


    filter(fn):对数组中的每个元素执行方法,返回该函数执行结果为true的元素组成的数组。

    result=array.filter(function(item,index,array){
    return item>2;
    });//[3, 4, 5, 6, 7, 8, 9, 10]


    map(fn):对数组中的每个元素执行方法,返回每一项的执行结果组成的数组。

    result=array.map(function(item,index,array){
    return item*2;
    });//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

    说明:这些迭代方法都不会改变原数组中的元素。

  • 相关阅读:
    Spring +quartz获取ApplicationContext上下文
    开源 java CMS
    js实现页面跳转的几种方式
    hdu-4089-Activation-概率dp
    linux 内核定时器
    linux 短延时
    linux 基于 jiffy 的超时
    linux 让出处理器
    linux 延后执行
    linux获知当前时间
  • 原文地址:https://www.cnblogs.com/janes/p/3868268.html
Copyright © 2011-2022 走看看