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 中对数组的创建

  1. new Array()、new Array(size)、new Array(element0,element1…)
  2. 字面量形式(推荐)
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. 对数组的整体性操作

  1. 浅拷贝(直接赋值)
  2. 深拷贝

浅拷贝

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.可变函数 增、删、排序操作

  1. 增 push()、unshift()
  2. 删 pop、shift()
  3. 排序:reverse()、sort()
  4. 增删皆可: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.习题

  1. 创建一个记录学生成绩的对象,提供一个添加成绩的方法,以及一个显示学生平均成绩 的方法
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))
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值