01 数组
1. JavaScript 中对数组的定义
2. JavaScript 中对数组的创建
3. 由字符串生成数组（split）
4. 对数组的整体性操作(深浅拷贝)
5.存取数组（查找元素）(indexof()、lastIndexOf()、es6的 find()、findIndex())
6.存取数组（数组的字符串表示）（join()、toString()）
7.存取数组（由已有数组创建新数组）（concat()、splice()、es6数组扩展运算）
8.可变函数 增、删、排序操作
9.不生成新数组的迭代器方法 forEach()、erery()、some()、reduce()、reduceRight()
10.生成新数组的迭代器方法 map()、filter()
11.二维和多维数组(创建二维数组)
12.二维和多维数组(处理二维数组的元素)
13.习题
mdnJavaScript标准内置对象 =》 Array
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
1. JavaScript 中对数组的定义
- 标准定义：一个存储元素的线性集合（有序数据集合），元素通过索引任意存取。
- JavaScript中的数组是一种特殊的对象，索引是该对象的属性，在内部被转换为字符串类型（JavaScript对象属性必须是字符串）
- 数组由于是对象，其长度可以任意增长。length属性表示元素个数。
2. JavaScript 中对数组的创建
- new Array()、new Array(size)、new Array(element0,element1…)
- 字面量形式（推荐）
var array1 = new Array()
//array1 []
var array2 = new Array(5)
//array2 (5)[empty * 5]
var array3 = new Array(1,2,3)
//array3 (3) [1, 2, 3]
3. 由字符串生成数组
let str = 'a,b,c,d'
let arr = str.split(',')
arr // (4) ["a", "b", "c", "d"]
4. 对数组的整体性操作
- 浅拷贝（直接赋值）
- 深拷贝
浅拷贝
let arr = [1,'a',2,'w']
arr // (4) [1, "a", 2, "w"]
let arr1 = arr
arr1 // (4) [1, "a", 2, "w"]
arr1[0] = 100
arr1 // (4) [100, "a", 2, "w"]
arr // (4) [100, "a", 2, "w"]
深拷贝
function copy (arr1,arr2) {
for (var i=0;i<arr1.length;i++) {
arr2[i] = arr1[i]
}
}
let arrA = [1,'a',2,'w']
let arrB = []
copy(arrA,arrB)
console.log(arrB) // [1,'a',2,'w']
arrB[0] = 100
console.log(arrB) // [100,'a',2,'w']
console.log(arrA) // [1,'a',2,'w']
5.存取数组（查找元素）(indexof()、lastIndexOf()、es6的 find()、findIndex())
数组实例对象方法：indexOf() 和 lastIndexOf()
let arr = ['wayliu','abc',123,'abc']
console.log(arr.indexOf(12)) // -1
console.log(arr.indexOf('abc')) // 1
console.log(arr.lastIndexOf('abc')) // 3
indexOf()找给定元素的第一个索引，lastIndexOf()找给定元素的最后一个索引。
find()和findIndex()
let arr = ['wayliu','abc',123,'abc']
const a = arr.find((n) => n == 'wayliu'
)
const b = arr.findIndex((n) => n == 'wayliu'
)
console.log(a) // wayliu
console.log(b) // 0
find()返回的是对应的value，findIndex()返回的是key。
两个方法的参数都是一个回调函数。
6.存取数组（数组的字符串表示）（join()、toString()）
join()
let arr = ['wayliu','abc',123,'abc']
const str = arr.join('*')
console.log(str) // wayliu*abc*123*abc
把数组转为参数分隔的字符串。
toString()
let arr = ['wayliu','abc',123,'abc']
const str = arr.toString()
console.log(str) // wayliu,abc,123,abc
7.存取数组（由已有数组创建新数组）（concat()、splice()、es6数组扩展运算）
- concat()可以合并多个数组创建一个新数组（纯函数）。
- splice()截取一个数组的子集创建数组。
let arr1 = ['wayliu','abc',123,'abc']
let arr2 = [1,2,3]
let arr3 = arr1.concat(arr2)
console.log(arr1,arr2,arr3)
// [ 'wayliu', 'abc', 123, 'abc' ] [ 1, 2, 3 ] [ 'wayliu', 'abc', 123, 'abc', 1, 2, 3 ]
let arr1 = ['wayliu','abc',123,'abc']
let arr2 = arr1.splice(0,2)
console.log(arr1) // [ 123, 'abc' ]
console.log(arr2) // [ 'wayliu', 'abc' ]
原本的数组会发生变化。
splice(index[,size][,替换内容])
index:开始下标
size：截取长度
替换内容：替换内容
let arr1 = ['wayliu','abc',123,'abc']
let arr2 = [...arr1] // ['wayliu','abc',123,'abc']
console.log(arr2)
8.可变函数 增、删、排序操作
- 增 push()、unshift()
- 删 pop、shift()
- 排序：reverse()、sort()
- 增删皆可：splice()
9.不生成新数组的迭代器方法 forEach()、erery()、some()、reduce()、reduceRight()
9-10可结合 JavaScript沉淀专栏《js数组遍历几种方式》学习
forEach
const arr = ['a','b','c','d',124]
arr.forEach( (element,index,array) => {
console.log(element,index,array)
})
//
a 0 [ 'a', 'b', 'c', 'd', 124 ]
b 1 [ 'a', 'b', 'c', 'd', 124 ]
c 2 [ 'a', 'b', 'c', 'd', 124 ]
d 3 [ 'a', 'b', 'c', 'd', 124 ]
124 4 [ 'a', 'b', 'c', 'd', 124 ]
forEach()参数是一个回调函数，回调函数有三个参数，第一个必须，表示数组的value，第二、三可选，分别表示数组的下标（key）和整个数组。
every()
let nums1 = [2,4,6,8]
let nums2 = [1,4,6,8]
let result1 = nums1.every((item) => {
return item%2 == 0
})
console.log(result1) // true
let result2 = nums2.every((item) => {
return item%2 == 0
})
console.log(result2) // false
every()参数是一个回调函数，回调函数的参数是数组的value，回调函数返回一个布尔值，全部元素使得回调函数返回ture时得到true，否则false。
some
let nums1 = [1,3,6,8]
let result = nums1.some((item) => {
return item%2 == 0
})
console.log(result) // true
跟every()差不多，区别就是只要有一个元素使得回调函数返回true时就得到true.
reduce()
function add (item1,item2) {
return item1 + item2
}
var nums = [1,5,9,3,8,6]
let sum = nums.reduce(add)
console.log(sum) // 32
reduce()方法接收一个函数，返回一个值。该方法从一个累加值开始，不断对累加值和数组中的后续元素调用该函数，直到数组中最后一个元素，最后返回累加值。过程如下：
>> add(1,5) ->6
>> add(6,9) ->15
>> add(15,3) ->18
>> add(18,8) ->26
>> add(26,6) ->32
reduceRight()
let arr = ['wayliu','am','i']
let result = arr.reduceRight((item1,item2) => {
return item1+item2
})
console.log(result) // iamwayliu
与reduce类似，唯一不同是从右往左累加。
10. 生成新数组的迭代器方法 map()、filter()
map()
let arr = [1,5,9,10]
let result = arr.map((item) => {
return item += 5
})
console.log(result) // [ 6, 10, 14, 15 ]
map()生成新数组，对每个元素进行操作。
filter()
let arr = [1,5,9,10]
let result = arr.filter((item) => {
return item >5
})
console.log(result) // [9,10]
filter()参数是一个返回布尔值的数组，当数组中元素应用该回调函数返回true时，返回一个包含返回true元素的数组。
11.二维和多维数组(创建二维数组)
JavaScript只有一维数组，但是通过在数组里保存数组的方式，可以轻松创建多维数组。
let twod = []
let rows = 5
for (let i=0;i<rows;i++) {
twod[i] = []
}
console.log(twod) // [ [], [], [], [], [] ]
缺点是：都是undefined。
Array.matrix = function(numrows,numcols,initial) {
let arr = []
for (let i =0; i <numrows; ++i) {
let columns = []
for(let j = 0; j < numcols; ++j) {
columns[j] = initial
}
arr[i] = columns
}
return arr
}
let nums = Array.matrix(5,8,0)
console.log(nums)
//
[ [ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ] ]
通过扩展 JavaScript数组对象新增一个方法，设定数组的行、列、初始值。
let grades =[[89,97,99],[88,89,90],[100,100,100]]
console.log(grades[2][2]) // 100
对于小规模数据，这是创建二维数组最简单的方法。
12.二维和多维数组(处理二维数组的元素)
两种方式，按行访问和按列访问。
按行访问
let grades =[[89,97,99],[88,89,90],[100,100,100]]
let total = 0
let average = 0.0
for (let row=0;row<grades.length;++row) {
for (let col=0;col<grades[row].length;++col) {
total += grades[row][col]
}
average = total / grades[row].length
console.log('student' + parseInt(row+1) + 'average:' + average.toFixed(2))
//
student1average:95.00
student2average:184.00
student3average:284.00
}
13.习题
- 创建一个记录学生成绩的对象，提供一个添加成绩的方法，以及一个显示学生平均成绩 的方法
class Student {
constructor(grade) {
this.grade = grade
}
add (item) {
return this.grade.push(item)
}
showAverage (grade) {
let sum =0
for (let i=0; i<grade.length; i++) {
sum += grade[i]
}
return sum/grade.length
}
}
let wayliu = new Student([100,99,98])
wayliu.add(90)
console.log(wayliu.showAverage(wayliu.grade))