JavaScript高级程序设计Web前端之路

第五章(1):Object和Array

2017-06-12  本文已影响11人  日暮途远_

引用类型实例化成对象。在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)    // ['睡觉']

重排序方法。

// 会改变原数组
let arr = [0, 8, 4, 2]
console.log(arr.reverse())  // [2, 4, 8, 0]
console.log(arr)    // [2, 4, 8, 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

操作方法:

var name = ['人生如棋', '落子无悔']
var copy = name.concat()
console.log('copy: ', copy) // copy:  人生如棋,落子无悔
var append = name.concat('那一天,有个少年,就在梧桐院里,用筷子敲酒碗。', ['送君千里直至峻岭变平川。', '惜别伤离临请饮酒六两三。'])
console.log(append) // 人生如棋,落子无悔那一天,有个少年,就在梧桐院里,用筷子敲酒碗。送君千里直至峻岭变平川。,惜别伤离临请饮酒六两三。
var poetry = ['我在西北', '一关接一关', '与你相隔', '一山又一山']
console.log(poetry.slice(1))  // ['一关接一关', '与你相隔', '一山又一山']
console.log(poetry.slice(1, 3)) // ['一关接一关', '与你相隔']
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从后面开始找

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
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个参数。第一个参数是值,第二个参数是索引。第三个参数是函数本身。

var id = [1,2,3,4,5,6]
var everyResult = id.every(function (item, index, every) {
    return item > 0
  })
console.log(everyResult)  // 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
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]
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]
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高级程序设计第三版

上一篇下一篇

猜你喜欢

热点阅读