js数组概念

典型的数组

• 元素的数据类型相同
• 使用连续的内存存储
• 通过数字下标获取元素

JS的数组

• 内存不一定连续
• 不能通过数字下标，而是字符串下标，这意味着数组可以有任何key 比如：

let arr = [1,2,3]
arr['xxx'] = 20

数组的创建

// 创建数组
let arr = [1,2,3]
let arr = new Array(1,2,3) //参数有多个，则表示元素
let arr = new Array(1) //参数有一个，则表示数组个数

// 数组转换
let arr = '1,2,3'.split(',')
let arr = '123'.split('')
Array.from('123')

// 伪数组
let divList = document.querySelectorAll('div')
* 伪数组的原型链中并没有数组的原型，是啥意思内，就是没有__proto__属性，也就没有那些对数组操作的api。

// 数组合并
arr1.concat(arr2)

// 截取一个数组的一部分
arr.slice(1) // 从第二个元素开始截到最后面
arr.slice(0) // 全部截取
* JS只提供浅拷贝

数组元素的删除

// 删除头部元素
arr.shift()

// 删除尾部元素
arr.pop()

// 删除中间元素
arr.splice(index,1) // 删除index的一个元素
arr.splice(index,1,'xxx') // 删除index的一个元素,并且添加'xxx'
arr.splice(index,1,'xxx','yyy') // 删除index的一个元素,并且添加'xxx','yyy'

数组元素的查看

// for循环遍历
for(let i = 0; i < arr.length; i++){
    console.log('${i}: ${arr[i]}')
}

// forEach便利
arr.forEach(function(item, index){
    console.log('${index}: ${item}')
})

// 查看单个属性
arr[index]

// 查找某个元素是否在数组里面
arr.indexOf(item)//存在返回索引，否则返回-1

// 使用条件查找元素
arr.find(item => item % 2 ===0)

// 使用条件朝朝元素的索引
arr.findIndex(item => item % 2 ===0)

数组元素的增加

// 在尾部加元素
arr.push(newItem) // 注意这里返回的是新长度， 长度， 长度， 长度

// 在头部加入蒜素
arr.unshift(newItem) // 注意这里返回的是新长度， 长度， 长度， 长度

// 顺序反转
arr.reverse();

// 自定义顺序
arr.sort((a,b) => a-b) // 类似java的stream和lambda表达式

数组元素的变换

// map
* map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1); // expected output: Array [2, 8, 18, 32]

// filter
* filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result); // expected output: Array ["exuberant", "destruction", "present"]

// reduce
* reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // 这个5就是reducer的初期值
// expected output: 15

作业

// 第一题
let arr = [0,1,2,2,3,3,3,4,4,4,4,6];
let arr2 = arr.map(x => {
  let newItem;
  switch(x){
    case 0 :
       newItem = '周日';
       break;
    case 1 :
       newItem = '周一';
       break;
    case 2 :
       newItem = '周二';
       break;
    case 3 :
       newItem = '周三';
       break;
    case 4 :
       newItem = '周四';
       break;
    case 6 :
       newItem = '周六';
       break;
  }
  x = newItem;
  return x;
})
console.log(arr2)

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

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