读javascript高级程序设计07-引用类型、Object、Array

时间：2022-08-10 20:05:18

一、引用类型

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);//

var item=array.pop();

console.log(item);//

console.log(array.length);//

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

  • push()：向末尾添加项，和栈相同；
  • shift()：在列表开头移除项，减少数组length值，并返回移除项的值。
var array=[1,3,5];

var count=array.push(8,9,10);

console.log(count);//

var item=array.shift();

console.log(item);//

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]

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

相关文章