js数组

• API：对象提供的函数

• js其实没有真正的数组，只是用对象模拟数组。属性名没有数字，只有字符串

let array = [1,2,3]
array                 //(3){1,2,3} , length=3
Object.key(array)     //(3)["0","1","2"]
array.xxx = 'xxx'     //"xxx"
array                 //(3){1,2,3,xxx:"xxx"} 添加了一个xxx,length=3

• 数组对象的共用属性：push ， pop ， shift ， unshift ， join

• 创建一个数组

新建

let arr = [1,2,3]
let arr = new Array(1,2,3)      //如果()里只有两个以上参数x,y，则js认为x，y是元素
let arr = new Array(3)          //如果()里只有一个参数x，则js认为x是length

转化

let arr = '1,2,3'.split(',')
let arr = '123'.split('')   //空字符串
Array.from('123')           //条件：有数字下标 + 有length

例：

let str = '1,2,3'   
str.split(',')      // (3)["1","2","3"]

let str2 = '123'   
str2.split('')      // (3)["1","2","3"]

Array.from('123')   // (3)["1","2","3"]
Array.from(123)     // []
Array.from({name:'frank'})  //[]
Array.from({0:'a', 1:'b'})  //[]
Array.from({0:'a', 1:'b', length:2})  //(2)["a","b"]
Array.from({0:'a', 1:'b', 2:'c', 3:'d', length:2})  //(2)["a","b"]

伪数组 【每次遇到伪数组都要先变成数组，那为什么js这个智障要设计它？】

<div>1</div>
<div>2</div>
<div>3</div>
let divList = document.querySelectorAll('div')
//伪数组的原型链中并没有数组的原型（无push等共用属性）

//如何变成真正的数组？
let divArray = Array.from(divList)
console.dir(divArray)

合并两个数组，得到新的数组

arr1.concat(arr2)

截取一个数组的一部分 【那js这个智障为什么不直接提供复制方法？】

arr1.slice(1)    //从第二个元素开始，不改变数组的长度
arr1.slice(0)    //全部截取，用于复制数组
//js原生提供的只有浅拷贝，押题课有深拷贝  

数组元素的增删查改

• 删元素

跟对象一样

let arr = ['a','b','c']
delete arr['0']
arr         //[empty,'b','c']
//稀疏数组：数组的长度不变

改length（不要随便改length）

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

删除头部元素

arr.shift()     //arr被修改，并返回被删元素

删除尾部元素

arr.pop()       //arr被修改，并返回被删元素

删除中间元素

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

• 查所有元素 查看所有属性名（查看对象的方法）

let arr = [1,2,3,4,5]; arr.x = 'xxx'
Object.keys(arr)
for(let key in arr){console.log(`${key}:${arr[key]}`)}  //打印出带xxx的值

查看数字（字符串）属性名和值

1. for循环：要让 i 从 0 增长到 length-1 【支持break】【for是关键字】

for(let i =0; i < arr.length; i++){
    console.log(`${i}:${arr[i]}`)   //${}插入变量
    //if(i===3){break;}             
}
//不打印xxx的值,index到3停止

2. forEach / map ：原型的函数【不支持break】

arr.forEach(function(item, index){
    console.log(`${index}:${item}`)
})

自己写forEach

function forEach(array, fn){
    for(let i = 0; i < array.length; i++){
        fn(array[i], i, array)
    }
}
//为什么要传入array？不为啥，规定如此

查看单个属性

for(let i=0; i <= arr.length; i++){
    console.log(arr[i].toString())
}
//报错：Cannot read property'toString' of undefined
//意思是你读取了undefined的toString属性，不是toString是undefined。 x.toString()其中x如果是undefined就报这个错

1. 查找某个元素是否在数组里

arr.indexOf(item)   //存在返回索引，否则返回-1

2. 使用条件查找元素

arr.find(item => item % 2 === 0)    //找第一个偶数

3. 使用条件查找元素的索引

arr.findindex(item => item % 2 === 0)   //找第一个元素的索引

• 增加数组中的元素

在尾部加元素

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

在头部加元素

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

在中间添加元素

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

• 修改数组中的元素

反转字符串: 先变成数组反转再合并成字符串

var s = 'abcde’
s.split('')
s.split('').reserve()           
s.split('').reserve().join('')

//splice看MDN

• 自定义顺序

arr.sort((a,b) => a-b)  //a-b>0则a大，小的小大的大，小到大排序

【默认小到大】

let arr = [2,3,4,1,5]
arr.sort()      //(5)[1,2,3,4,5]

【自定义逆序】

arr.sort(function(a,b){
    if(a > b){
        return -1
    }else if(a===b){
        return 0
    }else{
        return 1
    }
})              //(5)[5,4,3,2,1]

【简写】

let arr = [
    {name:'小明',score:99}, {name:'小红',score:95}, {name:'大黄',score:100}
]
arr.sort((a,b) => a.score - b.score)    // 0:。。。95
                                        // 1:。。。99
                                        // 2:。。。100
/*完整版
arr.sort(function(a,b){
    if(a.score > b.score){return 1}     //分数大的大
    else if(a.score===b.score){return 0}
    else{return -1}
})
*/

• 数组变换

map：n变n

let arr = [1,2,3,4,5,6]
arr.map(item => item*item)  // (6)[1,4,9,16,25,36]

filter: n变少

let arr = [1,2,3,4,5,6]
arr.filter(item => item %2 ===0? item : false)  //(3)[2,4,6]
// 可简写为(item => item %2 ===0)

reduce: n变1（范伟打劫)

let arr = [1,2,3,4,5,6]
arr.reduce((sum, item)=>{return sum+item},0)    //for循环sum 累加返回21 ，0为sum初始值
//数值累加

arr.reduce((result, item)=> {return result.concat(item*item)} ,[])  //(6)[1,4,9,16,25,36]  
//数组累加

【例】

//完整代码
arr.reduce((result, item))=>{
    if(item % 2 ===1){ 
        return result
    }else{
        return result.concat(item)
    }
},[])

//简写代码
arr.reduce((result, item)) => 
    item %2 ===1 ?
        result
    :
        result.concat(item)
,[])

//再简写
arr.reduce((result, item) =>
    result.concat(item %2 === 1 ? [] : item)
,[])

• 面试题 数据变换

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

详解

let arr = [
    {名称：'动物', id:1, parent:null},
    {名称：'狗', id:2, parent:1},
    {名称：'猫', id:3, parent:1}
]

arr.reduce((result, item)=>　{      // 1:{名称：'动物', id:1, parent:null},
    result[item.id] = item          // 2: {名称：'狗', id:2, parent:1},
    return result                   // 3: {名称：'猫', id:3, parent:1}
}, {})

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

【题】

1. 把数字变成星期

//答案1

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

//答案2

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(item => {
    switch(item) {
    case 0:
      return '周日'
      break
    case 1:
      return '周一'
      break
    case 2:
      return '周二'
      break
    case 3:
      return '周三'
      break
    case 4:
      return '周四'
      break
    case 5:
      return '周五'
      break
    case 6:
      return '周六'
      break
    default:
      break
  }
})
console.log(arr2)

//答案3

let arr = [0, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 6];
let arr2 = arr.map(function (item) {
  let dict={0:'周日',1:'周二',2:'周三',3:'周四',4:'周五',5:'周五',6:'周六'}
  return dict[item]
});
console.log(arr2); 

2. 算出所有奇数之和

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