红宝书阅读笔记ch5-1

红宝书阅读笔记ch5-1

Object类型和Array类型

引用类型

  • 引用类型的值(对象)是引用类型的实例。可以理解成Java里的对象和类的关系。

  • 引用类型是一种数据结构,用于将数据和功能组织在一起。

Object类型

  • 创建Object的两种方式;

//第一种方式 new 操作符后跟Object构造函数
var person =new Object();
person.name="1n40";
person.age=21;
//第二种方式 对象字面量表示法
var person={
name:"1n40",
age:21
};
//使用对象字面量语法时,属性名也可以使用字符串
var person={
"name":"1n40",
"age":21,
5:true
};
//
var person={}; // 与 new Object()相同
person.name="1n40";
person.age=21;
  • 对象字面量也是向函数传递大量可选参数的首选方式;

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";
}
alert(output);
}
displayInfo({
name: "Nicholas",
age: 29
});
displayInfo({
name: "Greg"
});
  • 访问对象属性的两种方法:

    • 点表示法;

    • 方括号表示法。

    • 一般来说,访问对象属性时使用的都是点表示法,因为点表示法比方括号表示法更加简洁和方便,假如属性名中包含导致语法错误的字符,或者属性名使用了关键字和保留字,这时候使用方括号表示法更佳。

    • 通常我们一般推荐用点表示法。

    • 在通过对象字面量定义对象时,实际上不会调用Object 构造函数。

//功能上两种方法没有任何区别
alert(person["name"]);
alert(person.name);
//方括号表示法的优点是可以通过变量来访问属性,和访问一些有特殊字符的变量名
var propertyName="name";
alert(person[propertyName]); // 值是 “name”
//属性名包含空格,不能点出来
person["first name"]="1n40";

Array类型

  • Array类型的三个特点:

    • 有序列表;

    • 数组的每一项可以保存任何类型的数据;

    • 数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。

  • 创建数组的基本方式有两种

//第一种使用Array构造函数
var colors=new Array();
var colors=new Array(20);
var colors=new Array("red","blue","green");
var colors=Array(); //可以省略new关键字,结果相同
//第二种方式是使用数组字面量表示法
var colors=["red","blue","green"];
var names=[];
var values=[1,2,]; //错误示范!这样会创建一个包含2或3项的数组(视浏览器而定)
var options=[,,,,,];//错误示范!这样会创建一个包含5或6项的数组(视浏览器而定)
  • 给构造函数传递一个值也可以创建数组,如果传递的是数值,则按照数值创建指定项数的数组,而如果传递的是非数值的参数,则创建一个包含那个值的只有一项的数组。

var colors=new Array(3);
var name=new Array("Grey");
  • 读取和设置数组时,要使用方括号并提供相应值基于0的数字索引;

var colors=["red","blue","green"];
alert(colors[0]); //显示第一项 red
colors[2]="black"; //修改第三项
colors[3]="brown"; //新增第四项
  • 数组的项数保存在length属性中,这个属性始终返回0或更大的数字。

  • 数组的length属性不只是只读的,通过设置这个属性可以从数组的末尾移除项或者向数组中添加新项。

//移除最后一项
var colors=["red","blue","green"];
colors.length=2; //移除数组的第三项
alert(colors[2]); //undefined
//在数组的末尾添加一项 undefined
var colors=["red","blue","green"];
colors.length=4;
alert(colors[3]); //undefined
//在数组的末尾添加两项 属性值
var colors=["red","blue","green"];
colors[colors.length]="black"; //(在位置3)添加一种颜色
colors[colors.length]="brown"; //(在位置4)添加一种颜色
  • 检测数组的两个方法;

    • instanceof 操作符,适用用单个网页或单个全局作用域

    • Array.isArray() 方法。适用用网页中包含多个框架,存在着两个及以上不同的全局作用域。

//instanceof
if(value instanceof Array){
//对数组执行某些操作
}
//Array.isArray()
if(Array.isArray(value)){
//对数组执行某些操作
}
  • 转换方法,所有对象都有toLocaleString()、toString()、和valueOf()方法。其中,调用valueOf()返回的是调用这个函数的变量本身,是数组类型的就返回这个数组的副本,是字符串返回的也是这个字符串的副本。toString()返回的是这个变量的字符串表示。而toLocaleString()就比较复杂,locale直译是地区的,通常情况下toLocaleString()返回的和toString()返回的相同,但对于Number、Date、Array而言会根据toLocaleString()的参数来返回不同格式的字符串。

var array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
var localeString = array1.toLocaleString('en', {
timeZone: "UTC"
});//可以cn表示中国的时间格式,en表示英国的时间格式
console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
  • 转换方法,还可以通过Array.join()来替代Array.toString().

var colors=["red","blue","green"];
colors.join(",");
colors.join("||");
  • 转换方法,如果数组中的某一项的值是null或者undefined,那么该值在 join()、toLocaleString()、toString()和valueOf()方法返回的结果中以空字符串表示。

  • 数组的常用方法:

    • push() 方法接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改过后的数组长度。

    • pop() 方法从数组末尾移除最后一项,减少数组的length值,并返回移除的项。

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

    • unshift() 方法在数组的前端添加任意项,并返回新数组的长度。

    • reverse() 方法会反转数组项的顺序,并返回经过排序的数组。

    • sort() 方法按升序列排列数组,并返回经过排序后的数组,sort() 方法比较的是通过数组项的toString()转型方法得到的字符串,所以通常我们让sort() 接受一个比较函数来进行排序。

    • concat() 方法会先创建当前数组的一个副本,然后将接受的参数添加到这个副本的末尾,最后返回新构建的数组。

    • slice() 方法能够基于当前数组的一个或多个项创建一个新数组,一个参数的情况下slice() 方法返回从该参数指定的位置开始到数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项—但不包括结束位置的项。slice() 方法不会影响原始数组。

    • splice() 方法的主要用途是向数组的中部插入项,使用这种方法的方式有三种,删除、插入、替换。splice() 方法始终返回从原始数组中删除的项,如果没有删除任何向则返回一个空数组。

    • indexOf()和lastIndexOf() 方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中indexOf() 方法从前向后找,lastIndexOf() 方法从后往前找。这两个方法返回的是要查找项的在数组中的位置,没有找到则返回 -1 。

  • 栈方法,栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构,通过push()和pop() 方法可以模仿出栈的行为。

var colors=new Array();
var count=colors.push("red","green");
alert(count); // 2
count=colors.push("black");
alert(count); //3
var item=colors.pop();
alert(item); //black
alert(colors.length); //2
  • 队列,通过push() 和shift() 方法来模仿队列(先进先出)的行为。通过unshift()方法还可以从相反的方向来模仿队列。

//push()和shift()
var colors=new Array();
var count=colors.push("red","green");
alert(count);//2
count=colors.push("black");
alert(count);//3
var item=colors.shift();
alert(item); //red
alert(colors.length); //2
//push()和unshift()
var count=colors.unshift("red","green"); //red,green
alert(count); //2
count=colors.unshift("black"); //black,red,green
alert(count); //3
var item=colors.pop(); //green
alert(item)
alert(colors.length); //2
  • 排序,直接用来重新排序数组的方法有两个,reverse()方法是直接将数组反转项的顺序,sort()方法默认是通过每个数组项的toString()方法,然后比较得到的字符串,以确定如何排序,即便数组项是数字也是这样,大多数情况下得到的结果都不理想。通常情况我们会给sort()方法一个比较函数作为参数,来进行排序。

//比较函数
function comare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}
var values=[0,1,5,10,15];
values.sort(comare);
alert(values);
//修改比较函数的返回结果就可以得到降序
function comare(value1,value2){
if(value1 < value2){
return 1; //修改这里
}else if(value1 > value2){
return -1; //还有这里
}else{
return 0;
}
}
var values=[0,1,5,10,15];
values.sort(comare);
alert(values);
//对于数值或者valueOf方法会返回数值类型的对象类型,比较函数会更加简单
function comare(value1,value2){
return value2-value1;//这是降序
//return value1-value2; 这是升序
}
  • Array的迭代方法:
    ECMAScript5 为数组定义了五个迭代方法,每个方法都要接受两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象—影响this的值。传入这些迭代方法的函数都会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。

    • every() :对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

    • filter() :对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

    • forEach() : 对数组中的每一项运行给定函数,这个方法没有返回值。

    • map() :对数组中的每一项运行给定函数,返回每次函数调用结果组成的数组。

    • some() :对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

    • 以上方法都不会修改数组中包含的值。

var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult=numbers.every(function(item,index,array){
return (item>2);
});
alert(everyResult);
  • Array的归并方法:

    • reduce()

    • reduceRight()

    • 以上两个方法都是归并函数,一个从左到右另一个从右到左,这两个方法都接收两个参数:一个在每一项上调用的函数和(可选)作为归并的基础值。传给归并方法的函数接收4个函数:前一个值、当前值、项的索引和数组对象。

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

2019.11.29