数组

数组

JS中有很多关于数组的API，之所以增加关于数组的介绍，是为了方便后面的知识。

创建数组

let arr = new Array() // 通过new的这种方式创建
let arrOne = [] 

这两种是常用的创建数组的方式

访问数组

我们在访问数组时，通常采用遍历的方式去查找数组中的某个值，如果知道该值在数组中的位置，可以直接通过arr[index]下标值的方式获取。

const a = arr[0] // 在知道index坐标的情况下

还可以通过forEach、map 、filter等方式进行访问数组

插入值

数组中有插入值的API，push 和 shift两种，push是从数组尾部推入值，shift 是往数组头部插入值，如果在数组某一位置插入值的话，需要用到遍历的方式。

class Array {
  constructor(){
    this.arr = []
    this.length = this.arr.length
  }
  push(value){
      this.arr[this.length] = value
      this.length += 1
      return this.arr
  }
  shift(value){
     this.arr = [value,...this.arr]
     this.length += 1
     return this.arr
  }
  insertValue(value,index){
      if(this.length == 0){
          this.arr[index] = value
          this.length += 1  
      }
      if(this.length > 0){
          if(index > this.length){
            this.length = index + 1
            this.arr[index] = value
          } else {
             this.length += 1
              for (let i = this.length - 1; i >= index; i--) {
                this.arr[i] = this.arr[i-1]  
                if (i== index) {
                    this.arr[i] = value 
                }
              }
          }
      }
  }
}

// 测试一下
var arr = new Arr()

arr.push(1)

arr.shift(2)

arr.insertValue(3,5)


arr.insertValue(4,0)

arr.insertValue(5,3)

arr.insertValue(6,2)

arr.insertValue(7,4)

arr.insertValue(8,4)

console.log(arr); 
/** Array {
arr: [
    4,         2,
    6,         1,
    8,         7,
    5,         undefined,
    undefined, undefined,
    3
  ],
  length: 11
}
**/

删除值

接下来看数组中删除某个值，数组中常见的删除方法有pop() 、 unshift()两种方法 ，pop()是数组删除最后一个元素，unshift()是数组删除第一个元素,还是在我们创建的Array的类中写一下方法

pop(){
    const lastValue = this.arr[this.length - 1]
    this.arr.splice(this.length-1,1)
    this.length -= 1
    return lastValue
}
unshift(){
    const firstValue = this.arr[0]
    this.arr.splice(0,1)
    this.length -= 1
    return firstValue
}
deleteValue(index){ // 删除某个位置的值
    if(index === 0){
        this.unshift()
    } else if(index == this.length - 1){
        this.pop()
    } else {
        const delVal = this.arr[index]
        this.arr.splice(index,1)
        this.length -= 1
        return delVal
    }
}

测试一下删除的结果

arr.pop() 

/** Array {
  arr: [ 4, 2, 6, 1, 8, 7, 5, undefined, undefined, undefined ],
  length: 10
} **/

arr.unshift()
/**
Array {
  arr: [ 2, 6, 1, 8, 7, 5, undefined, undefined, undefined ],
  length: 9
}
**/

arr.deleteValue(2)

console.log(arr);
/**
Array {
  arr: [ 2, 6, 8, 7, 5, undefined, undefined, undefined ],
  length: 8
}
**/

JS数组方法参考

1. 数组的合并

caoncat() 可以将两个数组合并，也可以使用ES6中的解构方法

const arr = [1,2,3].concat(4,5,6) // [ 1, 2, 3, 4, 5, 6 ]
const arr1 = [7,8,9,...arr] // [7, 8, 9, 1, 2, 3, 4, 5, 6]

2. 迭代器函数

forEach() 、map() 、 every() 、 some() 、filter() 、reduce() 这几种方法都是迭代器函数

var arr = [1,2,3,4,5,6]
arr.forEach((item,index) => {
   arr[index] = 2 * item
})
console.log(arr) // [ 2, 4, 6, 8, 10, 12 ]

// map 返回新的数组
const arr1 = arr.map((item,index) =>{
    return arr[index] = item + index
})
console.log(arr1,'arr1) // [ 1, 3, 5, 7, 9, 11 ]

// every 返回为true的数组

const arr2 = arr.every((item) => {
    return item % 2 == 0
})
// 如果每个值都满足条件，则返回true,否则，返回false

const arr3 = arr.some((item) => {
    return item % 2 == 0
})
// 如果有一个满足，则返回true，这是和every不同的地方

const arr4 = arr.filter((item) => {
    return item % 2 === 0
})
// [ 2, 4, 6 ]

// filter()的方法返回数组中满足条件的数据，返回新的数组

const arr5 = arr.reduce((prev,cur) => {
    return cur = Number(cur) + Number(prev)
})
// 21

// reduce是累加器，返回来的是数组各项的

3. ES6中的常用的新的方法

for...of.. 、for...in... 、Array.from() 、 findIndex() 、 entries() 、keys() 、values()、includes() 等方法，此处不再一一赘述。

4. 数组排序

sort(cb)一般是数组排序常用的API。我们接下来在我们的Array类中封装一个比较的函数

sort(){
    if (this.length == 0) {
        return []
    }
    const arr = this.arr.sort(this.compareFn)
    return arr
}
compareFn(a,b){
    if (a - b == 0) {
        return 0
    } else if (a - b > 0) {
        return 1
    } else {
        return -1
    }
}

但是在业务中，我们常见的都是比较数组对象中某一属性的大小，这种情况下该如何比较呢？如果是比较字符串呢？
在比较自定义的对象属性时，可以针对这一属性，写一个比较函数。但是原理和compareFn是一样的。比较字符串时，比较的是ASCII的值。

5. 搜索方法

findIndex() 和 find() , indexOf() 和 includes 都是搜索数组中某一值的是否存在。

TypeScript中的数组

如果是声明简单的数组，和 const numbers : numbers[] 是一样的

const numbers = [1,2,3,4,5,6]

如果是声明数组对象的话，举个例子

interface Person{
    name:String,
    age:number
}
const friends = [
    {
        name:'Alice',
        age:20
    },
    {
        name:'Alice1',
        age:22
    }
]
// 这种情况下，我们比较friends数组中的数据年龄大小时，可以根据类型判断

function compareAge(a:Person,b:Person){ // 这样确保我们接收的每一个值都满足了Person的类型
    // 函数体
}

总结

前端开发中，最常用最简单的就是数组类型数据的处理。这篇文章主要介绍了数组中常用的方法以及ES6和最新的数组的特性。接下来将会介绍栈的学习