JavaScript高级程序设计(第3版) 笔记
2018-06-28 本文已影响9人
Jay_Chen
第五章 引用类型
- 引用类型的值(对象)是引用类型的一个实例。常被称作类，但不是类。引用类型也被称为对象定义，描述的是一类对象所具有的属性和方法。
- 新对象是使用new操作符后跟一个构造函数创建的。
var person = new object() ;
创建了Object引用类型的一个新实例，然后把该实例保存在了变量person中.
5.1 Object 类型
-
Object是ECMAScript中使用最多的一个类型。对于应用程序中存储和传输数据时理想的选择。 - 创建的方法。
- 使用
new操作符后跟Object构造函数var person = new Object(); person.name = "Jay"; // 分号 person.age = 20 - 使用对象字面量表示法--(大部分会选择对象字面量的表示方法)
也可以使用字符串表示：var person = { name: "Jay", // 逗号 age: 20 }var person = { "name": "Jay", // 逗号 "age": 20 }
- 使用
- 一般访问对象属性的时候选择使用点表示法，这是面向对象语言中的通用语法。在JavaScript中也可以使用方括号。在使用方括号语法的时候，应该要使用属性的字符串形式放在方括号中。例：
console.log(person.name); console.log(person["name"]);- 方括号的优点在于可以使用变量来访问。例：
var propertyName = "name"; console.log(person[propertyName]) - 建议使用点表示法
- 方括号的优点在于可以使用变量来访问。例：
5.2 Array 类型
- 创建数组的方法有两种。
- 使用
Array构造函数var colors = new Array();- 给定已知长度的数组
var colors = new Array(20); - 使用数组字面量表示法。例：
var colors = ["red","blue","pink"]; // 创建了一个包含3项的数组 console.log(colors[0]); // 打印第一项 colors[2] = "black"; // 修给第三项 colors[3] = "green"; // 新增第四项 var name = [ ]; // 创建了一个空数组-
length属性的特点：不是只读。可以从数组的末尾移除项或添加新 项。例：
var colors = ["red","blue","pink"]; colors.length = 2; // 设置的长度小于数组的长度值 console.log(colors[2]); // undefined （不存在）var colors = ["red","blue","pink"]; colors.length = 6; // 设置的长度大于数组的长度值 console.log(colors[5]); // undefined// 代码结果可知道.length 只能设置一次。 var colors = ["red","blue","pink"]; colors.length = 2; // 设置的长度小于数组的长度值 //console.log(colors[2]); // undefined colors.length = 6; // 设置的长度大于数组的长度值 console.log(colors[2]); // undefined// 代码结果可知道.length 只能设置一次。 var colors = ["red","blue","pink"]； colors.length = 6; // 设置的长度大于数组的长度值 console.log(colors[2]); // pink ``` -
通过length在数组尾部添加新项目
var colors = ["red","blue","pink"]; colors[colors.length] = "black"; // 在位置3上添加第四项 colors[colors.length] = "green"; // 在位置4上添加第五项 // ["red", "blue", "pink", "black", "green"]
-
- 使用
5.2.1 检测数组
-
instanceof操作符只适用于在一个全局环境下进行判断，当有多个框架，就是用Array.isArray()方法。这个方法的目的就是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境下创建的。 用法：if(value instanceof Array) { // 对数组执行某些操作 }if(Array.isArray(value) ) { // 对数组执行某些操作 }var colors = ["red","blue","pink"]; if(Array.isArray(colors)){ console.log("是数组") }
5.2.2 转换方法
- 所有的对象都具有
toLocaleString()、toString()、valueOf()方法。
调用toString()方法会返回由数组中每个值的字符串像是拼接而成的一个以逗号分隔的字符串。valueOf()返回的是数组。var colors = ["red","blue","pink"]; console.log(colors.toLocaleString()); // red,blue,pink console.log(colors.toString()); // red,blue,pink console.log(colors ); // Array(3)0: "red"1: "blue"2: "pink"length: 3__proto__: Array(0) console.log(colors.valueOf()); // Array(3)0: "red"1: "blue"2: "pink"length: 3__proto__: Array(0) -
join()方法。只接收一个参数，用作分隔符的字符串，不传参数默认是逗号。var colors = ["red","blue","pink"]; console.log(colors.join("|")); // red|blue|pink console.log(colors.join(":")); // red:blue:pink
5.2.3 栈方法
- 栈是一种LIFO(Last-In-First-Out，后进先出)的数据结构。最新添加的项最早被被移除。栈发生插入与移除只发生在栈的顶部。数组方法
push()、pop() -
push()方法接收任意数量的参数，把它们依次添加到数组的末尾，并返回数组的长度。
pop()方法从数组末尾移除最后一项，减少数组length值，然后返回移除的项。var colors = new Array(); var count = colors.push("red","blue"); console.log(count); // 2 count = colors.push("pink"); console.log(count); // 3 var item = colors.pop(); console.log(item); // pink console.log(colors.length); // 2
5.2.4 队列方法
- 队列数据结构的访问规则是FIFO(First-In-First-Out,先进先出)。在列表的末端添加项，前端移除项。
-
shift()方法可以移除数组中的第一项并返回该值，同时数组长度值减1。push()和shift()结合使用var colors = new Array(); var count = colors.push("red","blue"); console.log(count); // 2 count = colors.shift(); console.log(count); // red -
unshift()方法能在数组前端添加任意个项并返回新数组的长度。unshift()与pop()结合使用，前者在数组前端添加，后者在数组后端移除。var colors = ["blue"] var count = colors.unshift("red","pink"); console.log(count); // 3 console.log(colors); // (3) ["red", "pink", "blue"] var item = colors.pop(); console.log(item); // blue console.log(colors.length); // 2
5.2.5 重排序方法
-
reverse()、sort()-
reverse()会反转数组的排序var arr = [1,2,4,3,5,6]; console.log(arr); // [1, 2, 4, 3, 5, 6] console.log(arr.reverse()); // [6, 5, 3, 4, 2, 1] -
sort()方法从小到大排列。原理：调用每个数组项的toString()方法，比较得到后的字符串。它比较的是字符串
```
var arr = [10,2,24,3,5,6];
console.log(arr); // [10, 2, 24, 3, 5, 6]
console.log(arr.reverse()); // [6, 5, 3, 24, 2, 10]function a(a,b) { if(a>b){ return 1; }else if (a<b){ return -1; }else { return 0; } } console.log(arr.sort(a)); // [2, 3, 5, 6, 10, 24] function b(a,b){ return a-b; } console.log(arr.sort(b)); // [2, 3, 5, 6, 10, 24] function c(a,b){ return b-a; } console.log(arr.sort(c)); // [24, 10, 6, 5, 3, 2] ```
-
5.2.6 操作方法
-
concat()方法就是复制数组副本并返回数组副本，参数是在原数组基础上的末尾处添加。不会修改原数组。var arr = ["hello","world"]; console.log(arr.concat()); // ["hello", "world"] console.log(arr.concat("你好",["hi","world"])); // ["hello", "world", "你好", "hi", "world"] console.log(arr); // ["hello", "world"] -
slice()方法，复制，接受一个或者两个参数，参数表示的是：例：slice(a,b)，返回a-b之间的值，包括a，不包括b。slice(a)只有一个参数的情况下，返回从a开始到数组的末尾的所有项的值，包括a。不会修改原数组。``` var colors = ["red","pink","green","black"]; console.log(colors.slice()); // ["red", "pink", "green", "black"] console.log(colors.slice(1)); // ["pink", "green", "black"] console.log(colors.slice(1,3)); // ["pink", "green"] console.log(colors); // ["red", "pink", "green", "black"] ``` -
splice()方法。用法：splice(a,b,c,d,e,f...)
a: 要删除项的位置；b：要删除项的个数；c、d...：要插入的项（任意个数）
该方法返回的是一个数组，包含从原数组删除的项。原数组会改变。
5.2.7 位置方法
-
indexOf(a,b)接受两个参数，a：要查找的项；b: 查找位置起点的索引（可选），从数组的开头开始向后查找。 -
lastIndexOf(a,b)接受两个参数，a：要查找的项；b: 查找位置起点的索引（可选），从数组的末尾开始向前查找。
5.2.8 迭代方法
- 数组的5个迭代方法，对迭代方法来讲接受两个参数： a：function，要在每一项上运行的函数；b: 可选参数，运行该函数的作用域对象---影响this的值。
- 对于a这个函数来讲，函数接受三个参数：a1：数组项的值；a2：该项在数组中的位置；a3：数组对象本身。
-
every()：对数组中的每一项运行给定的函数，如果每一项都返回true，则返回true。 -
some()：对数组中的每一项运行给定的函数，如果任意一项返回true，则返回true。 -
filter()： 对数组中的每一项运行给定的函数，返回 函数返回true的项组合成新数组。（每一项调用该函数后是true的，重新组合成数组返回出来） -
forEach()：对数组中的每一项运行给定的函数，没有返回值。 -
map()：对数组中的每一项运行给定的函数，返回 每次函数调用结果组成的数组（每一项调用该函数后得到的新值，重新组合成数组返回出来）。
5.2.9 归并方法
-
reduce(): 迭代数组的所有项，然后构建一个最终返回的值。从数组的第一项开始，逐个遍历到最后。 -
reduceRight()：迭代数组的所有项，然后构建一个最终返回的值。从数组的最后一项开始到第一项。 - 都接受两个参数：a：一个在每一项上调用的函数；b:可选。作为归并基础的初始值。
- 参数a是调用的函数，这个函数传入4个参数：前一个值、当前值、项的索引和数组对象
// 求和，reduce从前向后；reduceRight是从后向前 var num = [1,2,3,4,5,6]; var sum= num.reduce(function(pre,cur,index,arr){ return pre + cur; }); var sum2 = num.reduceRight(function(a,b,c,d){ return a + b; }) console.log(sum); // 21 console.log(sum2); // 21
5.3 Date 类型
-
Data.parse()方法：var someDate = new Date(Date.parse("May 28,2018")); console.log(someDate); // Mon May 28 2018 00:00:00 GMT+0800 (中国标准时间) var someDate2 = new Date("May 28, 2018"); // 后台自动调用Data.parse()方法 console.log(someDate2); // Mon May 28 2018 00:00:00 GMT+0800 (中国标准时间) -
Date.UTC()方法：var someDate = new Date(Date.UTC(2018,5,28)); // 年、月(0-11)、日(1-31) console.log(someDate); // Thu Jun 28 2018 08:00:00 GMT+0800 (中国标准时间) var someDate2 = new Date(2018,5,28); // console.log(someDate2);// Thu Jun 28 2018 00:00:00 GMT+0800 (中国标准时间) -
Date.now()方法：var start = Date.now(); console.log(start); // 1530201685282
var time = new Date();
console.log(time.getTime()); // 1530203031852
console.log(time.getFullYear()); //年 2018
console.log(time.getMonth()); //月 5 (月份 0-11)
console.log(time.getDate()); // 日 29
console.log(time.getDay()); // 星期几 5 (0-6 0：星期日 6：星期六)
console.log(time.getHours()); // 小时数 0 (0-23)
console.log(time.getMinutes()); // 分钟数 29 (0-59)
console.log(time.getSeconds()); // 秒数 11 (0-59)
console.log(time.getMilliseconds()); //毫秒数 936
5.4 RegExp 类型
- 正则表达式的匹配模式支持g ( global 全局模式)、i ( case-insensitive 不区分大小写模式)、 m ( multiline 模式)
