web学习笔记7 - 数组 - 咔斯の小窝

数组学习总结
封面画师：唏嘘的星辰 p站ID：13312138

基础概念

js：弱类型的编程语言，定义变量不清楚变量具体类型，赋值的时候才知道数据的类型，
数组：用来存储数据元素的，可以存储的类型是任意的，访问数组元素通过索引值进行访问的，最大的索引值的和数组的长度相差1
var arr = ["张三",10] js推荐使用此种方式进行定义数组，

定义数组方式

构造函数定义参数是元素列表
var p2 = new Array("hello",2,3)

定义指定长度的数组

参数是数字类型
(arrayLength?: number) 参数列表
arrayLength 参数名
? 可传可不传
number 是数字类型

数组对象定义

new Array

var p3 = new Array(10)

new Array参数是数组结构

相当于数组元素就是数组
var p4 = new Array(["1",2,3])
二维数组调用方式
console.log(p4[0][1]) // 2

访问数组元素

var arr = ["张三",18]
console.log(arr[0]) //“张三”
console.log(arr[3]) // undefined

遍历数组

遍历

for(var i = 0;i<arr.length;i++){
  console.log(arr[i])
}

倒序遍历

for(var i = arr.length-1;i>=0;i--){
  console.log(arr[i],"----------")
}

倒序遍历

for(var i = 0;i<arr.length;i++){
  console.log(arr[arr.length-1-i],"++++++++++")
}

数组遍历的API

Array.forEach(callbackfn)
参数名callbackfn：回调函数，必须是一个函数
回调函数的参数就是分别是
元素，索引值，数组本身

arr.forEach(function(v,i,a){
  console.log(v,"元素")
  console.log(i,"索引值")
  console.log(a,"数组本身")
})

数组的增删改查操作

有些操作会影响数组内容本身：数组内方法
有些操作不会影响数组内容本身:数组外方法

var numArray = [1,2,3,4,5,6]

添加的操作

numArray.push("hello") 向数组最后一个添加元素
numArray.unshift("hanmeimei") 向数组最前面一个添加元素

通过索引值进行添加

numArray[8]="lilei"

删除

numArray.pop() 删除最后一位的和push一对
numArray.shift() 删除最前一位的和unshift一对

修改

numArray[0] = "10"

查询

通过索引值访问，遍历可以访问所有的元素
console.log(numArray[index])
numArray.forEach(v,i,a){}

获取元素索引值

如果元素存在获取的是元素的索引值，如果元素不存在获取的是-1
console.log(numArray.indexOf("lilei"))

findIndex()
参数是一个函数，函数的参数：元素，索引，数组本身

var i1 =  numArray.findIndex(function(v,i,a){
  // v == "hello"   比较，把v和"hello"相等的元素索引值获取
  return v == "hello"
})      
console.log(i1)   //查找到返回坐标，未查找到返回-1

其他API

字符串

字符串可以理解成一个特殊数组,能够用一些数组的方法

var str = "hello"
console.log(str.length) // 获取字符串长度 5
console.log(str[2])  //获取单个字符 l
console.log(str.indexOf("o")) //某个字符索引

Array.from() - 1

把数据转成数组结构, 参数字符串

var arr =  Array.from(str)
console.log(arr)

Array.from() - 2

参数1 也可以数组
参数2 是回调函数,可以对参数1数组元素进行操作

总体方法用来返回值变化数组结构

var arr2 = Array.from([1,2,3],function(v){
  return v *3 // 对数组元素都乘以3返回新数组
})
console.log(arr2)

concat()

数组进行合并

var arr3 = [4,5,6]
var arr4 = [7,8,9]
var arr5 = arr4.concat(arr3)

every()

参数是回调函数
回调函数每个参数分别为元素 索引 数组

// 数组每一个元素都满足这个条件时候,整体结果就为true
// return 后面添加一个条件
var arr6 = [7,4,4,6,8,8]
var t1 =  arr6.every(function(v,i,a){
  return v % 2==0
})
console.log(t1)

some()

只要数组当中有一个满足条件的,结果为true

var t2 = arr6.some((v,i,a)=>{
  return v%2==0
})
console.log(t2)

lastIndexOf()

返回最后一个元素的索引值

var lastIndex = arr.lastIndexOf(3) 
console.log(lastIndex)

filter() 过滤函数

函数里面写过滤条件,把满足过滤条件的元素放进一个新数组里面

var a1 = arr.filter(function(v,i,a){
  return v % 2 != 0
})
console.log(a1)

map() 映射函数

把元素按照映射条件进行放入新数组里面

var a2 = arr.map(function(v,i,a){
  return v*3
})
console.log(a2)

join()

把数组转成字符串

var s1 = arr.join(",")
console.log(s1)

reverse()

把数组的元素倒过来放进数组

var s2 = arr.reverse()
console.log(s2)

splice() 删除数组

//  参数1 要操作元素的索引值
//  参数2 0添加的意思，不为0删除的个数
//  参数3 添加的时候，为添加的元素
var arr1 =["zs","ls","wc",'mh']
// arr1.splice(0,2) //删除
arr1.splice(2,0,"wangwu") //在索引值为2地方添加了wangwu
console.log(arr1)

slice() 截取子数组

// "111dds.jpg"
var arr2 = [1,2,3,4,5]
// 截取子数组，从索引值开始截取，截取到最后
// 参数有俩个时候 从第一个开始截取（包头），到第二个结束
console.log(arr2.slice(2,3))
console.log(arr2.slice(arr2.length-3))

其他案例

数组去重

var arr1 = [1,1,1,true,true,true,false,"hello",'hello']
// 不添加新数组的前提  
// 拿数组每一个元素和他们后面元素进行对比 如果相等了 把后面元素删除，删除之后下标减一
/*
function quChong1(arr){
    for(var i = 0;i<arr.length;i++){
        for(var j = i+1;j<arr.length;j++ ){
          if(arr[i]==arr[j]){
            arr.splice(j,1) 
            j--
          }
        }
    }
    return arr
}
console.log(quChong1(arr1))
*/
// 定义一个新数组，遍历原先数组，判断新数组有没有原先数组的元素，如果有，就不添加，如果没有，添加新数组里面
function quChong2(arr){
    var newArray = []
    // find() 遍历函数， 找到满足遍历条件的元素的值,如果有，result就是这个值，如果没有，result就是undefined
    for(var i = 0;i<arr.length;i++){
        var result =  newArray.find(function(v){
        return v == arr[i]
      })
      if(result==undefined){
          newArray.push(arr[i])
      }   
    }
    return newArray
}
console.log(quChong2(arr1))

简单的注册登录数组

d
// 注册账号数组
var registerArray = ["sj123456","gh123456","xzy123456"]
var use = "xzy123456"
var t3 = registerArray.some(function(v,i,a){
  return v == use
})
if(t3){
  console.log("该账号已被注册")
}else{
  console.log("恭喜注册成功了")
}

// 账号密码
// 判断登录成功与否
var userArray = [{user:"13653858031",psw:"123456"},{user:"10086",psw:"123456"},{user:"10000",psw:"123456"},{user:"10010",psw:"123456"}]
var user = "10000"
var psw = "123456"
var t4 =  userArray.some(function(v,i,a){
  // v对象
  return v.user==user&&v.psw == psw
})
if(t4){
  alert("登录成功")
}else{
  alert("账号或者密码错误")
}

冒泡排序

// 实现俩个数字交换位置
// 定义中间变量
var a = 10
var b = 20

/*
var temp = a // 把a的值赋值给temp
a = b //a = 20
b = temp // 10

console.log(a,b) // 20 10
*/

//不使用中间变量实现数字交换
// b = a - b
// a = a - b // a = a-(a-b)=b
// b = a + b // a-b+b =a
// console.log(a,b)

// 冒泡：把数组元素从小到大进行排序，
var arr = [ 1,3,9,20,11,2,5]

// 外循环是经过多少次循环，每次循环找出一个最值
// 内循环是比较的次数 ,如果前面数比后面大，交换位置
// 未优化之前的写法

/*
for(var i = 0;i<arr.length;i++){
for(var j = 0;j<arr.length;j++){
if(arr[j]>arr[j+1]){
var temp = arr[j] // 把大值赋值给temp
arr[j] = arr[j+1] //把小值提到前面元素上
}
}
console.log(arr)
*/

// 外循环是经过多少次循环，每次循环找出一个最值当i=0 找一个最值 ; 当i=1 找一个最值
// 7个数其实经过6次找出6个最值

// 内循环第一轮已经找到一个最值，以后比较没有必要再和最值进行相比，
for(var i = 0;i<arr.length-1;i++){
for(var j = 0;j<arr.length-1-i;j++){
if(arr[j]>arr[j+1]){
var temp = arr[j] // 把大值赋值给temp
arr[j] = arr[j+1] //把小值提到前面元素上
arr[j+1] = temp // 把大值放大后面元素
}
}
}
console.log(arr) arr[j+1] = temp // 把大值放大后面元素
}