Javascript-引用类型详解

2018-07-01 本文已影响13人这个超人不会飞阿

引用类型

在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,它也常被称为类.

虽然引用类型与类看起来相似,但它们并不是相同概念.

对象是某个特定引用类型的实例. 新对象是使用new操作符跟一个构造函数来创建的.

var person = new Object();
// 这行代码创建了Object()引用类型的一个新的实例

object类型

创建Object实例的方式有2种.

1.第一种是使用new操作符后跟一个构造函数.

var person = new Object();
person.name = "supermanBin";
person.age = 29;

2.第二种是使用对象字面量表示法.

var person = {
      name  :  "supermanBin",
      age : 29
};
// 上面代码等价与下面代码(属性名也可以使用字符串)
var person = {
      "name"  :  "supermanBin",
      "age" : 29
};
var person = {}  ===  var person = new Object()     //True

对象字面量也是向函数传递大量参数可选参数的首选方式

1.这种传递参数的模式最适合需要向函数传递大量可选参数的情形

function superman(obj) {
      var out = "";
      if(typeof obj.name == "string") {
      ...
      }
      if(typeof obj.age == "number") {
      ...
      } 
}
//调用superman传递对象字面量
      superman({
      name : "supermanBIn",
      age : 30
      });

访问属性使用的"点"和"[]"

      alert(person.name);  //点 访问
      alert(person["name"]); // [] 访问

2.[]的优点-[]可以通过变量来访问属性

var Name = "Saint";
alert(person[Name]);

//也可以访问带有空格的属性
alert(person["superman Bin"]);

结束语: 能用点访问尽量不要使用[]访问.

Array()类型

引言:

ECMAscript中的数组与其他语言的数组存在相当大的区别.
不同之处:
1.ECMAscript数组的每一项可以保存任何类型的数据(也就是说第一个位置可以保存字符串,第二位置可以保存数值,第三位置可以保存对象....)
2.ECMAScript数组的大小是可以动态调整的

创建数组基本方式有2种

1.使用new加Array()操作符

var colors = new Array();
var colors = new Array(20);
var colors = new Attay("a", "b", "c");
var colors = new Array(3);      //创建一个包含3项的数组
var colors = new Array("Supermanbin");    //创建包含一项的数组

另外在使用Array构造函数时候也可以省略new操作符.

var colors = new Array(3);     
var colors = new Array("Supermanbin");   
//上面 代码等价于下面代码
var colors = Array(3);     
var colors = Array("Supermanbin");

2.使用数组字面量表示法

      var colors = ["a", "b", "c"];
      var name = [];
      var error1 = [,,];     //不要这样 会创建包含2或3项的数组
      var errpr2 = [1,2,]  //不要这样 会创建包含2或3项的数组

数组特性

数组的length属性很有特点----它不是只读的.

     var colors = ['a', 'b', 'c'];
     colors.length = 2; //colors原来的length是3  现在改为2
     alert(colors[2]); //undefined
// 这个例子的数组colors一开始有3个值,将其属性设置为2会移除最后一项,结果就显示undefined.如
// 如果将其设置大于数组项数的值,则新增的每一项都会取得undefined的值
     var colors = ['a', 'b', 'c'];
     colors.length = 4;
     alert(colors[3]); //undefined

增加数组新项.

      var colors = ['a', 'b', 'c'];
      colors[colors.length] = 'd';
      colors[colors.length] = 'e'; // colors === a b c d e

检测数组

第一种是 if (value instanceof Array) {} //有缺点,从A框架传入B框架的数组不行iframe 一个页面/一个框架可以使用
第二种if (Array.isArray( values )) {} // ES5新增的Array.isArray(value)方法 推荐使用

转换方法 toLocaleString() toString() valueOf()

1.调用valuesOf()返回的是数组的本身
2.调用toString()返回由数组每一项的字符串形式拼接而成以逗号分隔的字符串.(实际上创建这个字符串,会调用数组每一项的toString方法)
3.调用toLocaleString()返回由数组每一项的字符串形式拼接而成以逗号分隔的字符串.(实际上创建这个字符串,会调用数组每一项的toLocaleString方法) toString()与toLocaleString()返回的结果一样

var person1 = {
      toLocaleString : function () {
             return "a";
      },
      toString : function ()  {
            return "b";
      }
 };

var person2 = {
      toLocaleString : function () {
      return "c";
      },
      toString : function () {
      reutrn "d";
      }
};
var person = [person1, person2];
alert(person); // b d
alert(person.toString()); // b d
alert(person.toLocaleString());  // a c

join()
toLocaleString() toString() valueOf()方法默认情况下都会以逗号分隔的字符串形式返回数项组,而使用join()方法,则可以用不同的分隔符来构建这个字符串.

      var colors = ["a", "b", "c"];
      alert(colors.join(",")); // a,b,c
      alert(colors.join("#")); // a#b#c

栈方法
栈是一种LIFO(后进先出)的数据结构,也就是最新添加的最早被移除.而栈的插入(叫做推入)和移除(叫做弹出),值发生在一个位置--栈的顶部.ECMAScript为数组专门提供了push()和pop()方法,以便实现类似栈的行为.

push() 参数: 接受任意数量参数功能:逐个添加到数组末尾返回: 修改后数组长度
pop() 参数:无功能:从数组移除最后一项返回:返回时移除的项

队列方法
队列是FIFO(先进先出)的数据结构.

shift( )返回:移除的项
unshift() 返回:修改后数组长度

重排序方法

reverse() //反转数组这个方法相当直观明了,但是不够灵活所以才有了sort()方法
sort() //sort比较的是每一项的字符串,这种排序很多情况都不是最佳选择,因为sort()可以接收一个比较函数作为参数(比较函数接收2个参数)
比较函数-比较函数有2个参数,如果第一个参数应该位于第二个参数的之前则返回一个负数,如果2个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数,以下就是一个比较函数

      function compare(value1, value2) {
            if (value < value2) {
            return -1;
            } if (value == value2) {
            return 0;
            } else {
             reutrn 1;
            }
      }

      var values = [0,1458,45,2,56,4];
      values.sort(compare);
      alert(values); // 0 2 4 56 1458

      简易写法:
      function compare(value1, value2) {
            return value1 - value2;
      }

Javascript-引用类型详解

引用类型

object类型

Array()类型

猜你喜欢

热点阅读