《JavaScript高级程序设计(第3版)》读书笔记4

328 阅读6分钟

第五章 引用类型

一、Object

1、创建:
  • new 操作符后跟 Object 构造函数
var person = new Object();
person.name = "Nicholas";
  • 对象字面量
var person = {
    name : "Nicholas"
};

var person = {}; //与 new Object()相同
person.name = "Nicholas";

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

function displayInfo(args) {
    var output = "";
    if (typeof args.name == "string"){
        output += "Name: " + args.name + "\n";
    }

    if (typeof args.age == "number") {
        output += "Age: " + args.age + "\n";
     }
}

displayInfo({
    name: "Nicholas",
    age: 29
});
2、访问
  • 点表示法
alert(person.name);
  • 方括号表示法: 可以通过变量来访问属性;属性名中是可以包含非字母非数字的,用点表示法会错误;属性名是关键字或保留字,用点表示法会错误,也可以使用方括号表示法。
alert(person["name"]);

var propertyName = "name";
alert(person[propertyName])

alert(person["first name"]);

二、Array

ECMAScript 数组的每一项可以保存任何类型的数据,数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。

1、创建:
  • Array 构造函数
var colors = new Array();
var colors = new Array(20);// 指定length属性
var colors = new Array("Greg"); // 传递包含1项(当一个值为数值时,视为length;否则视为数组项)
var colors = new Array("red", "blue", "green");// 传递包含的项
var colors = Array(3);// 可以省略 new 操作符
  • 数组字面量: 由一对包含数组项的方括号表示,多个数组项之间以逗号隔开
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组
2、访问

方括号并提供相应值的基于 0 的数字索引

var colors = ["red", "blue", "green"]; // 定义一个字符串数组
alert(colors[0]); // 显示第一项
colors[2] = "black"; // 修改第三项
colors[3] = "brown"; // 新增第四项
3、length

通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项

var colors = ["red", "blue", "green"];
// 移除
colors.length = 2;
alert(colors[2]); //undefined
// 添加
colors.length = 4;
alert(colors[3]); //undefined
4、转换方法

所有对象都具有 toLocaleString()、toString()和 valueOf()方法。

  • toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串;
  • valueOf():返回的还是数组;实际上,为了创建这个字符串会调用数组每一项的 toString()方 法。
  • join():使用不同的分隔符来构建这个字符串;
5、栈方法(后进先出)
  • push():接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度;
  • pop():从数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
6、队列方法(后进先出)
  • push()

  • shift():移除数组中的第一个项并返回该项,同时将数组长度减 1。

  • unshift():在数组前端添加任意个项并返回新数组的长度;

  • pop()

7、重排序方法
  • reverse():反转
  • sort():在默认情况下,sort()方法按升序排列数组项。sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串。
var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5

通过转型后,进行字符串对比,并不能满足数值的排序。因此 sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。

function compare(value1, value2) {
    if (value1 < value2) {//如果第一个参数应该位于第二个之前则返回一个负数
        return -1;
    } else if (value1 > value2) {// 如果第一个参数应该位于第二个之后则返回一个正数
        return 1;
    } else {// 如果两个参数相等则返回 0
        return 0;
    }
}

function compare(value1, value2){// 升序
    return value2 - value1;
}

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
8、操作方法
  • concat():先创建当前数组一个副本,然后将接收到的参数一个个添加到这个副本的末尾,最后返回新构建的数组。不会影响原始数组
  • slice():接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该 参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。不会影响原始数组
  • splice():删除(2个参数,要删除的第一项的位置和要删除的项数);插入(3 个参数:起始位置、0要删除的项数、要插入的任意数量的项);替换(3 个参数:起始位置、要删除的项数、要插入的任意数量的项)。返回从原始数组中删除的项(数组)
9、位置方法

接收两个参数:要查找的项、(可选的)表示查找起点位置的索引;返回查找的项在数组中的位置,没找到的情况下返回-1。

  • indexOf():从数组的开头开始向后查找
  • lastIndexOf():从数组的末尾开始向前查找
10、迭代方法

接收两个参数:要在每一项上运行的函数、(可选的)运行该函数的作用域对象——影响 this 的值。参数函数有三个参数:数组项的值、该项在数组中的位置、数组对象本身。不会影响原始数组

  • every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。(布尔值)
  • some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。(布尔值)
  • filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。(数组)
  • forEach():对数组中的每一项运行给定函数。(没有返回)
  • map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。(数组)
    var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    var everyResult = numbers.every(function (item, index, array) {
      return (item > 2);
    });
    alert(everyResult); //false 

    var someResult = numbers.some(function (item, index, array) {
      return (item > 2);
    });
    alert(someResult); //true

    var filterResult = numbers.filter(function (item, index, array) {
      return (item > 2);
    });
    alert(filterResult); //[3,4,5,4,3]

    var mapResult = numbers.map(function (item, index, array) {
      return item * 2;
    });
    alert(mapResult); //[2,4,6,8,10,8,6,4,2]

    numbers.forEach(function (item, index, array) {
      //执行某些操作 
    });
11、归并方法

迭代数组的所有项,然后构建一个最终返回的值。接收两个参数:一个在每一项上调用的函数、(可选的)作为归并基础的初始值。 参数函数接收 4 个参数:前一个值、当前值、项的索引和数组对象;函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

  • reduce():从数组的第一项开始
  • reduceRight():则从数组的最后一项开始
    var values = [1, 2, 3, 4, 5];
    var sum = values.reduce(function (prev, cur, index, array) {
      return prev + cur;
    });
    alert(sum); //15