JS高程-5-1:Object类型和Array类型

文章为《JavaScript高级程序设计》(第三版)笔记。

本小节主要介绍了js中,Array类型的常用操作方法。

一.Object类型

创建Object实例的方式有两种。第一种使用new操作符,第二种使用对象字面量表示法

// 第一种:new操作符
var person = new Object();
person.name = 'Tom';

// 第二种:字面量方式
var person = {
  name: 'Tom'
}

访问对象属性的方式有两种。第一种是点表示法,第二种是方括号表示法。

// 第一种:点表示法
console.log(person.name); // "Tom"

// 第二种:方括号表示法
console.log(person['name']); // "Tom"

二.Array类型

创建数组也有两种方式。第一种使用new操作符。

var  colors = new Array(3); // 创建一个包含3项的数组

第二种使用字面量表示法。

var colors = ['red', 'blue', 'green'];

数组的length属性不是只读的,通过设置这个属性,可以从数组的末尾移除元素。

var colors = ['red', 'blue', 'green'];
colors.length = 2;
console.log(colors); // ['red', 'blue']

1.检测数组

使用instanceof操作符就能实现

if (value instanceof Array) {
  // 对数组执行某些操作
}

但instanceof在某些场景下有缺陷,比如页面中有多个框架(iframe),则就会存在多个不同的全局执行环境,从而就会出现多个不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组在第二个框架中与原生创建的数组分别具有各自不同的构造函数。

为了解决这个问题,ECMAScript5提供了Array.isArray()方法,用来判断值是否是数组。

if (Array.isArray(value)) {
  // 对数组执行操作
}

2.转换方法

所有对象都具有toLocaleString()、toString()和valueOf()方法。其中,调用valueOf()返回的是数组本身,调用toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var colors = ['red', 'blue', 'green'];
console.log(colors.toString());  // red,blue,green
console.log(colors.valueOf());   // ["red", "blue", "green"]
console.log(colors.toLocaleString()); // red,blue,green

这里,我们还可以使用 join() 方法实现toString()方法的输出。

var colors = ['red', 'blue', 'green'];
console.log(colors.join(','));  // red,blue,green

如果不给join()方法传入任何值,或者传入undefined,则使用逗号作为分隔符。

如果数组中的某一项的值是null或者undefined,那么该值在join()、toLocaleString()、toString()和valueOf()方法返回的结果中以空字符表示。

3.栈方法

栈是一种LIFO(先进后出)的数据结构。ECMAScript为数组提供了push()和pop()方法,以便实现类似栈的行为。

var colors = [];
colors.push('red', 'blue');  // 推入两项
console.log(colors.length);  // 2

var item = colors.pop();     // 删除最后一项,并取得最后一项
console.log(item);           // "blue"
console.log(colors.length);  // 1

4.队列方法

队列数据结构的访问规则是FIFO(先进先出)。数组方法shift(),它能够移除数组中的第一个项并返回该项。结合使用shift()和push()方法,可以像使用队列一样使用数组。

var colors = ['red', 'blue'];
var item = colors.shift(); // 取得第一项
console.log(item);         // red

unshift()方法与shift()的用途相反,它能在数组前端添加任意个项并返回新的数组长度。

5.重排序方法

reverse()和sort()。reverse()方法会反转数组项的顺序。

var arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

默认情况下,sort()方法按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,以确定如何排序。即使数组中每一项都是数值,sort()方法比较的也是字符串。

var arr = [0, 1, 5, 10, 15];
arr.sort();  // [0, 1, 10, 15, 5]

sort()方法可以接收一个比较函数作为参数,用来排序。比较函数接收两个参数

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。
function sortNumber(a, b) {
  return a - b // 为升序,b - a 为降序
}

var arr = [0, 1, 5, 10, 15];
arr.sort(sortNumber);  // [0, 1, 5, 10, 15]

6.操作方法

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX,必须。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

var colors = ['red', 'blue'];
var colors2 = colors.concat('yellow');
console.log(colors2);         // ['red', 'blue', 'yellow']

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组。

语法

arrayObject.slice(start,end)

start,必需。规定从何处开始选取。end,可选。规定从何处结束选取。

splice()方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

index,必需。整数,规定添加/删除项目的位置;

howmany,必需。要删除的项目数量;

item1, ..., itemX,可选。向数组添加的新项目。

7.位置方法

indexOf()和lastIndexOf()。其中,indexOf()方法从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。在查找比较过程中,使用的是全等操作符。两个方法都可以接受第二个参数,代表开始检索的位置。

8.迭代方法

ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。

  • every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
  • filter():对数组中的每一项运行给定函数,返回该函数会返回 true的项组成的数组。
  • forEach():对数组中的每一项运行给定函数,这个方法没有返回值。
  • map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  • some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

9.归并方法

reduce()和reduceRight()。reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()则从数组的最后一项开始,向前遍历到每一项。

这两个方法都可以接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。该函数接收4个参数:前一项的值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传递给下一项。

使用reduce()方法可以执行求数组中所有值之和的操作。

var values = [1, 2, 3];
var sum = values.reduce(function(prev, cur, index, array){
  return prev + cur;
});
sum; // 6

reduceRight()的作用类似,只不过方向相反。

猜你喜欢

转载自blog.csdn.net/qq_39025670/article/details/105168064
5-1