javascript -- 数组知识以及练习题

善待自己，别期望别人会善待你，因为每个人都自顾不暇呀

基础

• 作用：通过数组一次保存多条数据
• 定义
  • 通过字面量：var 数组名称 = []
  • 通过构造函数：var 数组名称 = new Array()
• 赋值
  • 定义数组的时候直接赋值：var 数组名称 = [值1, 值2, 值3...]
  • 通过索引赋值：数组名称[索引值] = 值
    • 索引：在数组中每一个值对应的那个编号，编号从 0 开始
• 取值
  • 通过索引的方式进行取值：数组名称[索引值]
  • 数组遍历：通过循环的方式将数组中的每一个值获取到
• 获取数组的长度：数组名称.length

冒泡排序

• 升序：从小到大排列， 相邻两个值比较大小，如果第一个值大于第二个值， 则交换位置
• 降序：从大到小排列， 相邻两个值比较大小，如果第一个值小于第二个值， 则交换位置
• 数组中表示相邻的两值 (假设数组名称用ary表示，索引用变量i表示)
  • ary[i]：表示前一个值
  • ary[i + 1]：表示相邻的后一个值

  var arr = [2, 1, 4, 3, 7, 6, 5]
  // 比较多少趟(循环多少次完成),比总数少1
  for (var i = 0; i < arr.length - 1; i++) {
    // 通过循环 比较相邻两个数字的大小
    for (var k = 0; k < arr.length; k++) {
      // 相邻的值比大小
      if (arr[k] < arr[k + 1]) {
        // 交换两个变量的位置
     	  var c = arr[k]
     	  arr[k] = arr[k + 1]
     	  arr[k + 1] = c
      }
    }
  }
  console.log(arr)
  

内置对象数组方法

• push()：在数组的末尾添加一个或更多元素 (返回新的长度， 此方法改变数组的长度)

  var arr = [3, 2]
  console.log(arr.push(1, 'A')) // 4
  

• pop()：删除数组的最后一个元素 (返回删除的元素，此方法改变数组的长度)

  var arr = [1, 2, 3]
  console.log(arr.pop()) // 3
  

• unshift()：在数组的开头添加一个或更多元素 (返回新的长度， 此方法改变数组的长度)

  var arr = [5, 6]  
  console.log(arr.unshift(4)) // 3
  

• shift()：删除数组的第一个元素 (返回删除的元素， 此方法改变数组的长度)

  var arr = [8, 4, 2]
  console.log(arr.shift()) // 8
  

• reverse()：反转数组中元素的顺序 (此方法改变原始数组)

  var arr = [3, 'yt', 0, 5, 'fsdfds']
  console.log(arr.reverse()) // ['fsdfds', 5, 0, 'yt', 3]
  

• join()：将数组转换为字符串 (此方法不会改变原始数组)

  // array.join(separator)：可选 要使用的分隔符，如果省略，则用逗号分割
  var arr = ['张三', '李四', '王五']
  console.log(arr.join()) // 张三,李四,王五
  console.log(arr.join('|')) // 张三|李四|王五
  

• concat()：数组合并 (返回一个新数组，此方法不会更改现有数组)

  var arr = [1, 2, 3]
  var ary = [4, 5, 6]
  console.log(arr.concat(ary)) // [1, 2, 3, 4, 5, 6]
  

• indexOf()：搜索一个指定的元素的位置，从数组的开始位置向后查找索引值

  var arr = [10, 20, '30', 'dfdv']
  console.log(arr.indexOf(10)) // 0      元素10的索引为 0
  console.log(arr.indexOf(20)) // 1      元素20的索引为 1
  console.log(arr.indexOf(30)) // -1     元素30没有找到,返回 -1
  console.log(arr.indexOf('30')) // 2    元素'30'的索引为 2
  

• lastIndexOf()：从数组的结束位置向开始位置查找索引值

  var arr = [10, 20, '30', 'dfdv']
  console.log(arr.lastIndexOf(5)) // -1
  

• filter()：创建数组 (此方法不会改变原始数组)

  var arr = [1, 2, 5, 6, 7, 9, 11, 16]
  var r = arr.filter(function (x) {
    return x % 2 != 0
  })
  console.log(r) // [1, 5, 7, 9, 11]
            
  var arr = ['A', '', 'B', null, undefined, 'C', '  ']
  var r = arr.filter(function (s) {
    return s && s.trim()
  })
  console.log(r) // ['A', 'B', 'C']
  

• forEach()：数组循环遍历

  var arr = ['A', 'B', 'C']
  arr.forEach(function (element, index, array) {
    // elememt: 当前元素的值
    // index: 当前元素的索引
    // array: array对象本身
    console.log(element) // 'A' 'B' 'C'
    console.log(index) // 0 1 2
    console.log(array) // ['A', 'B', 'C']
  })
  

• some()：检测数组中的元素是否满足指定条件 (此方法不会改变原始数组)

  <p id="demo"></p>           
  <script>
     const ages = [3, 10, 18, 20]
     document.getElementById('demo').innerHTML = ages.some(checkAdult)
     function checkAdult(age) {
        return age >= 18
     }
  </script>
  

• map()：数组循环

  var a = ['A', 'B', 'C']
  var s = new Set(['A', 'B', 'C'])  
  var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']])  
  for (var x of a) { // 遍历Array   
    console.log(x) 
  }  
  for (var x of s) { // 遍历Set   
    console.log(x) 
  }  
  for (var x of m) { // 遍历Map   
    console.log(x[0] + '=' + x[1])  
  }
  

• sort()：数组排序 (此方法会改变原始数组)

  var arr = ['B', 'A', 'C']
  console.log(arr.sort()) // ['A', 'B', 'C']
  

• slice()：数组截取

  var arr = [1, 3, 4, 'A', 'B']
  console.log(arr.slice(0, 3)) // [1, 3, 4] 从索引0开始 到索引3结束 但不包括索引3 
  console.log(arr.slice(3)) // ['A', 'B'] // 从索引3开始到结束
  console.log(arr.slice()) // [1, 3, 4, 'A', 'B'] // 从头到尾截取所有元素
  

• splice()：删除元素，并向数组中添加新的元素 (此方法会改变原始数组)

  var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle']
  // 从索引2开始删除3个元素,然后再添加两个元素
  console.log(arr.splice(2, 3, 'Goole', 'Facebook')) // ['Yahoo', 'AOL', 'Excite']
  console.log(arr) // ['Microsoft', 'Apple', 'Goole', 'Facebook', 'Oracle']
  console.log(arr.splice(2, 2)) // ['Goole', 'Facebook'] 只删除不添加
  console.log(arr) // ['Microsoft', 'Apple', 'Oracle']
  console.log(arr.splice(2, 0, 'IE')) // [] (因为没有删除任何元素) 只添加不删除
  console.log(arr) // ['Microsoft', 'Apple', 'IE', 'Oracle']
  

数组去重的方法

• 第一种：es6新特性 …new Set

  var arr = [0, 0, 1, 2, 1, 3, 3, 4, 2, 1, 0, 5]
  console.log(...new Set(arr))
  

• 第二种：循环遍历

  var arr = [0, 0, 1, 2, 1, 3, 3, 4, 2, 1, 0, 5]
  var newArr = []
  for (var i = 0;i<arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr)
  

• 第三种：往数组里面添加数据的时候去重

  var arr = [0, 0, 1, 2, 1, 3, 3, 4, 2, 1, 0, 5]
  var ary = [1, 2]
  for (var i = 0; i<=3; i++) {
    var num = parseInt(prompt('请输入要添加的数字'))
    if(ary.indexOf(num) == -1) {
      ary.push(num)
    }
  }
  console.log(ary)
  

• 第四种

  var arr = [0, 0, 1, 2, 1, 3, 3, 4, 2, 1, 0, 5]
  var newArr = []
  var flag = true
  for (var i = 0; i<arr.length; i++) {
    flag = true
    for (var k = 0; k<arr.length; k++) {
      flag = false
    }
    if (flag) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr)
  

清空数组的方法

• 数组名.length = 0
• 数组名 = []

var arr = [1, 2, 3, 4, 5]
console.log(arr.length = 0,arr)
console.log(arr = [])

数组比较

var a = [1, 2]
var b = [3, 4, 5, 6]

// 数组比较 取交集 有交集返回true 没有则返回false
if (arrCompare(a, b)) {
  alert(a + '和' + b + '不可重复')
}
function arrCompare(arr1, arr2) {
  var arr3 = arr1.filter(function (num) {
    return arr2.indexOf(num) != -1 
  })
  if (arr3.length > 0) {
    return true
  }else {
    return false
  }
}

判断一个对象是否为数组

function isArray(arg) {
  if (typeof arg === 'object') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return false
}

扩展

• 分割字符串：split('分隔符') 得到的结果是一个数组
• 获取系统时间
  • 定义一个日期对象 var 日期对象 = new Date()
  • 使用日期对象中的相关方法获取对应的日期
    • 获取年份：日期对象.getFullYear()
    • 获取月份：日期对象.getMonth() 获取的月份是从0开始的 需要加1
    • 获取日期：日期对象.getDate()
    • 获取小时：日期对象.getHours()
    • 获取分钟：日期对象.getMinutes()
    • 获取秒：日期对象.getSeconds()

  function addZero(n) {
  	return n < 10 ? '0' + n : n
  }
  let t = new Date()
  let y = t.getFullYear()
  let m = addZero(t.getMonth() + 1)
  let d = addZero(t.getDate())
  let h = addZero(t.getHours())
  let min = addZero(t.getMinutes())
  let s = addZero(t.getSeconds())
  console.log(`${y}-${m}-${d} ${h}:${min}:${s}`)
  

• 获取随机数：Math.random() 得到的随机数是一个小数，范围是大于等于0且小于1
• 获取整数
  • Math.floor(变量)
    • 返回的是一个小于当前数字，并且与它最接近的一个值
    • 如果当前变量的值本身就是一个整数，那么直接返回该数字本身
  • Math.ceil(变量)
    • 返回的是一个大于当前数字，并且与它最接近的一个值
    • 如果当前变量的值本身就是一个整数，那么直接返回该数字本身
• 求任意两个数中的随机整数：Math.floor(Math.random() * (m - n + 1) + n)
  • n代表最小值
  • m代表最大值

练习题

• 练习1：统计班级学生就业薪资，计算总薪资 和 平均薪资

  var ary = [1200, 4040, 6000, 8000, 4354]
  // 保存最后的和
  var sum = 0
  // ary.length: 获取数组中的长度(数组名.length)
  for (var i = 0; i < ary.length; i++) {
  	// ary[i]: 表示数组中的每一个值
  	sum += ary[i]
  }
  pj = sum / ary.length
  console.log('总薪资是:' + sum + ' ' + '平均工资是:' + pj)
  

• 练习2：统计班级学生就业薪资，计算薪资超过15000的人的个数

  var ary = [9800, 15000, 18000, 6000, 5500, 8000]
  // 保存人数
  var count = 0
  for (var i = 0; i < ary.length; i++) {
  	if (ary[i] >= 15000) {
  		count++
  	}
  }
  console.log('工资超过一万五的人数是:' + count)
  

• 练习3：给一个不重复的数字数组，求最大值和最大值对应的索引位置

  var ary = [9800, 15000, 18000, 6000, 5500, 8000]
  var max = ary[0]
  var maxIndex = 0
  for (var i = 0; i < ary.length; i++) {
    // 一直拿后面的数和前面的数比较，谁大谁留下，一直比完所有的数，就知道谁最大了
    if (max < ary[i]) {
        max = ary[i]
        maxIndex = i
     }
  }
  console.log('最大值是:' + max + ' ' + '最大值对应的索引位置是:' + maxIndex)
  

• 练习4：给一个字符串数组，将数组中的每一个数据拼接在一起，每个数据之间用 | 符合拼接。 如： ‘张三|李四|王五’

  var ary = ['张三', '王五', '赵六', '李四']
  var str = ''
  for (var i = 0; i < ary.length; i++) {
    // 数值中的最后一个值不需要加|
    if (i === ary.length - 1) {
      str += ary[i]
    }else {
      str += ary[i] + '|'
    }
  }
  console.log(str)
  

• 练习5：给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中

  var ary = [0, 1, 'ac', '你好', '中国加油']
  var newArry = []
  for (var i = 0; i < ary.length; i++) {
  	// 第一种方法
    if (ary[i] !== 0) {
      newArry[newArry.length] = ary[i]
    }
    // 第二种方法
    if (ary[i] === 0) {
      continue
    }
    newArry.push(ary[i])
  }
  console.log(newArry)