JavaScript Array对象使用方法解析

<script>
  var arr = [1,2,3,4]

  // 在数组末尾添加元素
  arr.push(5)
  console.log(arr) // [1, 2, 3, 4, 5]

  // 删除数组最后一个元素
  arr.pop()
  console.log(arr) // [1, 2, 3, 4]

  // 在数组最前面添加元素
  arr.unshift(0)
  console.log(arr) // [0, 1, 2, 3, 4]

  // 删除数组的第一个元素
  arr.shift()
  console.log(arr) // [1, 2, 3, 4]
</script>

<script>
  var arr = [1,2,3,4]

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

  // foreach
  arr.forEach(function(val,index){
    console.log(val,index)
  })
</script>

<script>
  var arr = [1,2,3,4]
  var newArr = arr.map(function(val){
    return val*2
  })
  console.log(newArr) // [2, 4, 6, 8]
</script>

<script>
  var arr = [1,2,3,4]

  var newArr = arr.filter(function(val){
    // 只保留 >2 的元素
    return val>2
  })

  console.log(newArr) // [3, 4]
</script>

<script>
  var arr = [1,2,3,4]

  var flag = arr.some(function(val){
    return val>2
  })
  console.log(flag) // true

  var flag2 = arr.some(function(val){
    return val>5
  })
  console.log(flag2) // false
</script>

<script>
  var arr = [1,2,3,4]

  var flag = arr.every(function(val){
    return val>2
  })
  console.log(flag) // false

  var flag2 = arr.every(function(val){
    return val>0
  })
  console.log(flag2) // true
</script>

var list = [
  {name:'西瓜',price:2,num:2},
  {name:'香蕉',price:4,num:1},
  {name:'玉米',price:2,num:5},
  {name:'苹果',price:8,num:1}
]
var totalPrice = list.reduce((total,item) => {
  return total + item.price * item.num
},0)
console.log(totalPrice) // 26

<script>
  var arr = [1,2,3,4]

  var index = arr.indexOf(1)
  console.log(index) // 0
  var index2 = arr.indexOf(5) // 没有这个元素
  console.log(index2) // -1

  var index3 = arr.findIndex(function(val){
    return val>2
  })
  console.log(index3) // 2
  var index4 = arr.findIndex(function(val){
    // 没有一个元素符合条件
    return val>5
  })
  console.log(index4) //-1
</script>

<script>
  var arr = [1,2,3,4]

  var result = arr.find(function(val){
    // 查找第一个大于3.5的子元素
    return val>3.5
  })
  console.log(result) // 4
</script>

<script>
  var arr = [1,2,3,4]

  // 数组是否含有 1
  var flag = arr.includes(2)
  // 数组是否含有 5
  var flag2 = arr.includes(5)

  console.log(flag) // true
  console.log(flag2) // false
</script>

<script>
  var str = "hello world"
  // 根据标识将字符串分割成数组
  var arr = str.split(" ")
  console.log(arr) //["hello", "world"]

  // 将数组的子元素拼接成字符串
  var str2 = arr.join("-")
  console.log(str2) // "hello-world"
</script>

<script>
  var lis = document.getElementsByTagName('li')

  // 伪数组，不能使用foreach()
  console.log(lis) // HTMLCollection(4) [li.test, li.test, li.test, li.test]

  // 已经转化为数组，但是是个空数组，依然无法遍历
  console.log(Array.prototype.slice(lis)) // []

  // 已经转化为数组，且可以遍历
  console.log(Array.from(lis)) // [li.test, li.test, li.test, li.test]

  Array.from(lis).forEach(function(item){
    console.log(item.innerHTML)
  })
</script>

<script>
  var arr = [6, 3, 4, 7, 5, 19, 2];
  var length = arr.length;
  // 进行升序排列，大的元素往右边挤，小的元素往左边挤
  for (var i = 1; i < length; i++) {
    // i为当前元素的下标
    var temp = arr[i];
    // p为比对元素的下标
    p = i - 1;
    // 如果当前元素比目标元素小
    while (p >= 0 && temp < arr[p]) {
      // 将比对元素往右挪一个位置
      arr[p + 1] = arr[p];
      // 往左一个位置找新的比对元素
      p--;
    }
    // 将当前元素放到合适的位置
    arr[p + 1] = temp;
  }
  console.log(arr) // [2, 3, 4, 5, 6, 7, 19]
</script>

var arr = [4, 3, 6, 7, 5, 19, 2];
var newArr = quickSort(arr);
console.log(newArr);
function quickSort(arr) {
  if (arr.length <= 1) return arr;
  else {
    var center = parseInt((arr.length - 1) / 2);
    var centerValue = arr.splice(center, 1)[0];
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] <= centerValue) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
    }
    return quickSort(left).concat(centerValue, quickSort(right));
  }
}

<script>
  var arr = [
    {name:"张三",age:18},
    {name:"李四",age:16},
    {name:"王五",age:10},
    {name:"赵六",age:22}
  ]
  arr.sort(function(p1,p2){
    //p1.age-p2.age就是升序
    //p2.age-p1.age就是降序
    return p1.age-p2.age
  })
  console.log(arr)
  // [{name: "王五", age: 10}
  // {name: "李四", age: 16}
  // {name: "张三", age: 18}
  // {name: "赵六", age: 22}]
</script>

<script>
  var arr = [1,2,3,4]
  arr.reverse()
  console.log(arr) // [4, 3, 2, 1]
</script>

<script>
  var arr = [1,2,3,4]
  // 在下标3的位置添加数组元素
  arr.splice(3,0,5)
  console.log(arr) // [1, 2, 3, 5, 4]
  // 删除下标为1的数组元素
  arr.splice(1,1)
  console.log(arr) // [1, 3, 5, 4]
  // 从下标1的位置开始删除3个元素，并添加2个元素
  arr.splice(1,3,"life","good")
  console.log(arr) // [1, "life", "good"]
</script>

<script>
  var arr = [1,2,3,4]
  // 不包含参数二对象的下标元素
  var newArr = arr.slice(1,3)
  console.log(newArr) // [2, 3]
  // 默认剪切到最后一个元素
  var newArr2 = arr.slice(1)
  console.log(newArr2) //[2, 3, 4]
  // 可接受负数
  var newArr3 = arr.slice(0,-1)
  console.log(newArr3) //[1, 2, 3]
</script>

<script>
  var arr = [1,2,3,4]
  var arr2 = [5,6,7,8]
  var newArr = arr.concat(arr2)
  console.log(arr) // [1,2,3,4]
  console.log(arr2) // [5,6,7,8]
  console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8]
</script>