Get Started

• 数组对象
• 增删改查

数组对象

一种特殊的对象
JS其实没有真正的数组，只是用对象模拟数组

JS的数组不是典型的数组

• 典型的数组
元素的数据类型相同
使用连续的内存存储
通过数字下标获取元素
• 但JS 的数组不这样
元素的数据类型可以不同
内存不一定连续（对象是随机存储的）
不能通过数字下标，而是通过字符串下标
这意味着数组可以有任何key
比如
let arr = [1, 2, 3]
arr['xxx'] = 1

创建一个数组

• 新建

    let arr = [1, 2, 3]
    let arr = new Array(1, 2, 3)
    let arr = new Array(3)

• 转化

    let arr = '1,2,3'.split(',')
    let arr = '123'.split('')
    Array.form('123')（有下标，有length）

• 伪数组：有着数组格式的对象
let divList = document.querySelector('div')
伪数组的原型链中并没有数组的原型
• 合并两个数组，返回一个新数组
arr1.concat(arr2)
• 截取一个数组的一部分，并返回（原数组不变）

    arr1.slics(1) //从第二个元素开始
    arr1.slice(0) //全部截取

注意：JS只提供浅拷贝
split() 方法用于把一个字符串分割成字符串数组
用法：stringObject.split(separator,howmany)
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
用法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
用法：arr.slice([begin[, end]]) （包前不包后）

增删改查

数组中的元素

删

• 跟对象一样

    let arr = ['a', 'b', 'c']
    delete arr['0']
    arr //['empty', 'b', 'c']

• 注意数组的长度并没有变，叫做稀疏数组。
• 直接改length可以删元素

    let arr = [1, 2, 3, 4, 5];
    arr.length = 1

重要：不要随便改length

推荐

• 删除头部的元素
arr.shift()
shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
• 删除尾部的元素
arr.pop()
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
• 删除中间的元素

    arr.splice(index, 1)//删除index(下标)的一个元素
    arr.splice(index, 1, 'x')//···并在删除位置添加'x'
    arr.splice(index, 1, 'x', 'y')//···并在删除位置添加'x''y'

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

查看所有元素

• 查看所有属性名

    let arr = [1, 2, 3, 4, 5]; arr.x = 'xxx'
    Object.keys(arr)//Object.values(arr)

• 适用于对象，返回由key或者value组成的数组。
for(let keyin arr){console.log(`${key}:${arr[key]}`)}
• 查看数字（字符串）属性名和值

    for ( let i = 0; I < arr.length; i++ ){
      console.log(`${key}:${arr[i]}`)
    }
    要自己让i从0增长到length-1（遍历）
    arr.forEach(function(item, index)){
      console.log(`${index}:${item}`)
    }

也可以用forEach/map等原型上的函数

• forEach() 方法对数组的每个元素执行一次给定的函数。被调用时，不会改变原数组。
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
• arr.forEach(function(item, index, array))
数组中正在处理的当前元素，下标，正在操作的数组（放桃子的筐，顺序，一堆桃子）
thisArg可选参数。当执行回调函数 callback 时，用作 this 的值。
返回值：undefined
注意：forEach不支持break和continue
for循环时块级作用域，forEach是函数作用域
• 例一：将 for 循环转换为 forEach

    const items = ['item1', 'item2', 'item3'];
    const copy = [];
    // before
    for (let i=0; i<items.length; i++) {
      copy.push(items[i]);
    }
    // after
    items.forEach(function(item){
      copy.push(item);
    });

• 例二：打印出数组的内容

    function logArrayElements(element, index, array) {
      console.log('a[' + index + '] = ' + element);
    }
    // 注意索引 2 被跳过了，因为在数组的这个位置没有项
    [2, 5, , 9].forEach(logArrayElements);
    // logs:
    // a[0] = 2
    // a[1] = 5
    // a[3] = 9

• 例三:扁平化数组

    function flatten(arr) {
      const result = [];
      arr.forEach((i) => {
        if (Array.isArray(i)){
          console.log(i);
          result.push(...flatten(i));
        }else{
          result.push(i);
        }
      })
      return result;
    }
    // Usage
    const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
    flatten(problem);
    >>
    (5) [4, 5, Array(2), 8, 9]
    (2) [6, 7]
    (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

查看单个属性
• 跟对象一样

    let arr = [111, 222, 333]
    arr[0]

• 索引越界

    arr[arr.length] === undefined
    arr[-1] === undefined

• 报错
Cannot read property 'toString' of indefined
意思是你读取了undefined的toString属性，x.toString()中x如果是undefined，就报这个错
• 查找某个元素是否在数组里
arr.indexOf(item) //存在返回索引，否则返回-1
• 使用条件查找元素
arr.find(item => item%2===0)
//查找第一个偶数
• 使用条件查找元素的索引
arr.findIndex(item => item%2===0)
//查找第一个偶数的索引

增加数组中的元素

• 在尾部加元素

    arr.push(newItem) //修改arr，返回新长度
    arr.push(item1, item2) //修改arr，返回新长度

• 在头部加元素

    arr.unshift(newItem) //修改arr，返回新长度
    arr.unshift(item1, item2) //修改arr，返回新长度

• 在中间添加元素

    arr.splice(index, 0, 'x') //在index处插入'x'
    arr.splice(index, 0, 'x', 'y')

修改数组中元素的顺序

• 反转顺序
arr.reverse() //修改原数组
• 自定义顺序
arr.sort((a, b) => a - b)

数组变换

map() 方法
创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
• n变n
• 语法
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
• 数组中正在处理的当前元素，下标，正在操作的数组（放桃子的筐，顺序，一堆桃子）
• 例子

    let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
    let arr2 = arr.map((i) => {
      const date = {0:'周日', 1: '周一', 2: '周二',3: '周三', 4: '周四', 5: '周五', 6: '周六'}
      return date[i]
    })
    console.log(arr2) // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周四', '周四', '周四', '周四','周六']

filter() 方法
创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
filter 不会改变原数组，它返回过滤后的新数组。
• n变少
• 语法
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
• 例子

    let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
    let scores2 = scores.filter(item => item/60 >= 1)
    console.log(scores2) //  [95,91,82,72,85,67,66, 91]

reduce() 方法
对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
• n变1
• 语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
• accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
• 例子

    let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
    let sum = scores.reduce((sum, n)=>{
      return n%2===0?sum:sum+n
    },0)
    console.log(sum) // 奇数之和：598 

面试题

• 数据变换

    let arr = [
      {名称: '动物', id: 1, parent: null},
      {名称: '狗', id: 2, parent: null},
      {名称: '猫', id: 3, parent: null}
    ]
    数组变成对象
    {
      id: 1, 名称: '动物', children:[
        {id: 2, 名称: '狗', children: null},
        {id: 3, 名称: '猫', children: null}
      ]
    }

• 代码

    arr.reduce((result, item) => {
    if( item['名称'] === '动物' ) {
        result.id = item.id
        result['名称'] = item['名称']
      } else {
        result.children.push(item)
        delete item.parent
        item.chilred = null
      }
      return result
    },{id:null, children: []})