第五章(1):Object和Array
引用类型实例化成对象。在ECMAScript中,引用类型是一种数据结构,用于将数据和功能结合在一起。
Object
大多数引用类型都是Object的实例。Object的实例有两种创建方式:通过构造函数或者使用字面量的方式。两种方式是等价的。例如:
let obj1 = new Object(); // 通过构造函数实例化
let obj2 = {}; // 通过字面量的方式,工作中通常采用的方式
访问属性的两种方式,例:
let person = {
name: '日暮途远',
age: 18
}
console.log(person.name) // 通过点的方式
console.log(person['age']) // 通过[]
Array
ECMAScript数组中的每一项可以保存任何类型的数据。创建方式也有两种:通过构造函数或者字面量的方式。
let arr1 = new Array(); // 构造函数
let arr2 = []; // 字面量 工作中通常采用的方式
通过length可以获取数组的长度,length的长度是可写的。所以通过修改length的长度来修改数组。例:
let arr = [1,2,3,4]
console.log(arr.length) // 4
arr.length = 1;
console.log(arr) // [1]
数组的检测可以通过instanceof或者Array.isArray来实现。例:
[] instanceof Array // true
Array.isArray([1,23]) // true
转换方法,例:
let arr = [1,2,3,4]
arr.toString() // "1,2,3,4"
arr.valueOf() // [1,2,3,4]
数据的字符串默认情况下是以“,”分割的。可以通过join放入,传入分隔符来修改。例:
let arr = [1,2,3,4]
arr.join('-') // 1-2-3-4
栈方法:
栈是一种后进先出(Last-In-First-Out)的数据结构。(可以这样理解:向一个箱子里面装东西,你先取到的东西永远是最上面的。)数据提供了pop()和push()两个方式可以栈操作。例如:
let name = ['LOL', 'DOTA']
name.push('梦幻西游') // 插入,也叫推入
console.log(name) // ['LOL', 'DOTA', '梦幻西游']
name.pop() // 移除,也叫弹出
console.log(name) // ['LOL', 'DOTA']
队列方法:
队列是一种先进先出的数据解构。可以理解为排队打饭,最前面的人最先买。可以通过push和shift两个方法来实现队列的操作。例:
let arr = ['宫保鸡丁', '木须肉'];
arr.push('满汉全席') // 插入,也叫推入。
console.log(arr) // ['宫保鸡丁', '木须肉', '满汉全席']
let result = arr.shift() // 移除
console.log(result) // '宫保鸡丁'
console.log(arr) // ['木须肉', '满汉全席']
也可以通过unshift和pop两个方法来实现反向队列。例:
let arr = ['吃饭'];
arr.unshift('睡觉')
console.log(arr) // ['睡觉', '吃饭']
let result = arr.pop()
console.log(result) // ['吃饭']
console.log(arr) // ['睡觉']
重排序方法。
- reverse 反序
// 会改变原数组
let arr = [0, 8, 4, 2]
console.log(arr.reverse()) // [2, 4, 8, 0]
console.log(arr) // [2, 4, 8, 0]
- sort 排序
sort方法在排序的时候会调用toString(),所以它比较的是字符串。所以sort方法提供了一个函数。可以定义排序的规则。函数接受两个参数,结果为负数,则第一个参数在前;结果为0,则不变;结果为正数,则二个参数在前。例:
var arr = [1,6,3,'45',5]
arr.sort(function (a, b) {
// return b - a //倒序
return a - b //正序
})
console.log(arr.toString()) //1,3,5,6,45
操作方法:
- concat
基于当前数组的所有值创建一个新的数组。例:
var name = ['人生如棋', '落子无悔']
var copy = name.concat()
console.log('copy: ', copy) // copy: 人生如棋,落子无悔
var append = name.concat('那一天,有个少年,就在梧桐院里,用筷子敲酒碗。', ['送君千里直至峻岭变平川。', '惜别伤离临请饮酒六两三。'])
console.log(append) // 人生如棋,落子无悔那一天,有个少年,就在梧桐院里,用筷子敲酒碗。送君千里直至峻岭变平川。,惜别伤离临请饮酒六两三。
- slice
基于当前的N个项创建一个新的数组。可以接受两个2个参数,第一个参数是起始的位置(索引位置,包括该值),第二个参数是终止位置(索引位置,不包括该值)。例:
var poetry = ['我在西北', '一关接一关', '与你相隔', '一山又一山']
console.log(poetry.slice(1)) // ['一关接一关', '与你相隔', '一山又一山']
console.log(poetry.slice(1, 3)) // ['一关接一关', '与你相隔']
- splice
可以插入,删除,和替换。接受N个参数。第一个参数是起始位置,第二个参数是长度。第三个参数及之后是要插入或者替换的数据。例:
var poetry1 = ['青草明年生', '大雁去又归', '春风今年吹'];
poetry1.splice(0, 1); // 删除
console.log(poetry1); // ['大雁去又归', '春风今年吹']
poetry1.splice(0, 0, '青草明年生'); // 插入
console.log(poetry1) // 插入 ['青草明年生', '大雁去又归', '春风今年吹']
poetry1.splice(2, 1, '春风今年吹--', '公子归不归') // 替换
console.log(poetry1) // 替换 ['青草明年生', '大雁去又归', '春风今年吹--', '公子归不归']
位置方法:
在数组中查找相应的值,找到则返回其值所在的索引位置,否则则返回-1.第一个参数是要找的值,第一个参数是起始位置。indexOf从前面开始找,lastIndexOf从后面开始找
- indexOf
var number = [1,2,3,4,5,1,2,3,4,5]
console.log(number.indexOf(2)) // 1
console.log(number.indexOf(2, 3)) // 6
- lastIndexOf
var number = [1,2,3,4,5,1,2,3,4,5]
console.log(number.lastIndexOf(2)) // 6
console.log(number.lastIndexOf(2, 4)) // 1
迭代方法:
ECMAScript 5新增了5个迭代方法。every,some,filter,map,forEach.每个方法都接受3个参数。第一个参数是值,第二个参数是索引。第三个参数是函数本身。
- every
每个值都返回true,则返回true.
var id = [1,2,3,4,5,6]
var everyResult = id.every(function (item, index, every) {
return item > 0
})
console.log(everyResult) // true
- some
有一个值返回true,则结果为true
var id = [1,2,3,4,5,6]
var someResult = id.some(function (item, index, every) { // some
return item > 5
})
console.log(someResult) // true
- map
每个值都执行相同的操作。
var id = [1,2,3,4,5,6]
var mapResult = id.map(function (item, index, arr) { // map
return item * 2
})
console.log(mapResult) // [2, 4, 6, 8, 10, 12]
- filter
返回过滤之后的数据
var id = [1,2,3,4,5,6]
var filterResult = id.filter(function (item, index, arr) { // filter
return item > 3
})
console.log(filterResult) // [4, 5, 6]
- forEach
和for循环差不多
var id = [1,2,3,4,5,6]
id.forEach(function (item, index, arr) { // forEach
console.log(item)
})
// 结果
// 1
// 2
// 3
// 4
// 5
// 6
归并方法
reduce从左向右归并。reduceRight从右向左归并。方法可以接受4个参数。第一个参数代表前一个数值,第二个代表当前数值。第三个代表索引位置,第四个代表数组本身。
var money = [1, 5, 10, 50, 100]
var reduce = money.reduce(function (pre, cur, index, arr) { // reduce
console.log('reduce: ', pre)
return pre + cur
})
console.log(reduce)
// 结果:
// reduce: 1
// reduce: 6
// reduce: 16
// reduce: 66
// 166
var reduceRight = money.reduceRight(function (pre, cur, index, arr) { // reduceRight
console.log('reduceRight: ', pre)
return pre + cur
})
console.log(reduceRight)
// 结果:
// reduceRight: 100
// reduceRight: 150
// reduceRight: 160
// reduceRight: 165
// 166
引用
javascript高级程序设计第三版