JavaScript学习总结--JavaScript数组

Posted 2021-01-08 zhtian

数组

• 创建数组的两种基本方式
  • 1使用构造函数
  • 2.数组字面量

    var colors = new Array();
    var colors = [];
  
    //检测数组 instanceof
    // 1. if(value instanceof Array) {}
    // 2. Array.isArray()
  
    if(Array.isArray(value)) {
  
    }

  数组转换方法

• toString() 返回有数组中的每个值得字符串形式拼接而成的一个以逗号分隔的字符串
• valueOf() 返回的还是数组

  var colors = [‘red‘, ‘blue‘, ‘green‘];
  // console.log(colors.toString()); //red,blue,green
  // console.log(colors.valueOf()); // ["red", "blue", "green"]
  console.log(colors.join(",")); //red,blue,green
  console.log(colors.join()) //red,blue,green
  console.log(colors.join("||")) //red||blue||green

数组方法 栈方法和队列方法

• 栈方法 栈是一种后进先出的数据结构

• 队列数据结构是先进先出

  push() pop()

  // 栈方法 栈是一种后进先出的数据结构
    // push() pop()
    // push() 添加到数组末尾
    // pop()从数组末尾移除最后一项
    var colors = new Array();
    var count = colors.push("red", "green");
    count = colors.push(‘black‘);
    console.log(count) //3
    console.log(colors) //["red", "green", "black"] 
    var item = colors.pop();
    console.log(colors) // ["red", "green"]

shift() unshift()

    // 队列方法
    // 队列数据结构是先进先出
    // shift() unshift()
    // shift() 移除数组中的第一个项并返回该项
    // unshift() 向数组前端添加任意项并返回新数组的长度
    var colors = new Array();
    var count = colors.push("red", "green");
    console.log(colors);
    count = colors.push(‘black‘);
    var item = colors.shift();
    console.log(item)// red
    console.log(colors)// ["green", "black"]

    var colors = new Array();
    var count = colors.unshift("red", "green");
    console.log(count)//2
    count = colors.unshift("black");
    console.log(colors)// ["black", "red", "green"]
    var item = colors.pop();
    console.log(item) // green
    console.log(colors) // ["black", "red"]

重排序方法

reverse() sort()

  // reverse() sort()
  // reverse()数组翻转
  // sort()  方法按升序排列数组项
  // sort()方法本质上实现是调用每个数组项的toString()转型方法，然后比较得到的字符串，来确定排序。即使数组的每项都是数组，sort()方法比较的也是字符串

  var value = [1,2,3,4,5];
  value.reverse();
  console.log(value) //[5, 4, 3, 2, 1]
  var values = [0,1,5, 10, 15];
  values.sort()
  console.log(values) //[0, 1, 10, 15, 5]

操作方法

concat() slice() splice()

    // 操作方法
    // concat() 法基于当前数组中的所有项创建一个新数组。也就是将新的添加到数组的末尾，最后构成新的数组。也可以传递多个数组。
    var colors = ["red", "green", "blue"];
    var colors2 = colors.concat("yellow", ["blcak", "brown"]);
    console.log(colors); //["red", "green", "blue"]
    console.log(colors2); // ["red", "green", "blue", "yellow", "blcak", "brown"]
    // slice()
    // 截取
    // slice() 接收一个或两个参数。 既要返回项的起始和结束位置。方法不会影响原来的数组。
     var colors = ["red", "green", "blue", "yellow", "purple"];
     var colors2 = colors.slice(1);
     var colors3 = colors.slice(1, 4);
     console.log(colors2); //["green", "blue", "yellow", "purple"]
     console.log(colors3); //["green", "blue", "yellow"]
    // splice() 主要是向数组中部插入项
    // 删除 插入 替换
    var colors = ["red", "green", "blue"];
    var removed = colors.splice(0, 1);
    console.log(colors); // ["green", "blue"]
    removed = colors.splice(1, 0,"yellow", "orange");
    console.log(colors); // ["green", "yellow", "orange", "blue"]
    removed = colors.splice(1, 1, "red", "pruple");
    console.log(removed);// ["yellow"]

位置方法

indexOf() lastIndexOf()

  // indexOf() lastIndexOf()
  // 没有找到的情况返回-1
  var numbers = [1,2,3,4,5];
  console.log(numbers.indexOf(4)) //3
  

迭代方法

1. every() 对数组中的每一项运行给定函数，如果该函数对每一项返回true 着返回true
2. filter() 对数组中的每一项运行给定函数， 如果该函数会返回true的项组成的数组
3. forEach() 这个方法没有返回值
4. map() 返回每次函数调用的结果组成的数组

5. some() 如果该函数对每一项返回true，着返回true

   这些方法都不会修改数组的值

    var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    var everyResult = numbers.every(function (item, index, array) {
      return (item > 2)
    })
    console.log(everyResult) // false
    var someResult = numbers.some(function (item, index, array) {
      return (item > 2)
    })
    console.log(someResult) // true
    var filterResult = numbers.filter(function (item, index, array) {
      return (item > 2)
    })
    console.log(filterResult) // [3, 4, 5, 4, 3]

     var mapResult = numbers.map(function (item, index, array) {
      return item * 2
    })
    console.log(mapResult) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

  // forEach()方法 只是对数组中的每一项运行传入的函数，这个方法没有返回值。
  // 本质上与使用for循环迭代数组一样
  var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  numbers.forEach(function(item, indx, array) {
    // 执行操作
  })

归并方法

reduce() reduceRight()

• es5新增两个归并数组的方法。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。
• reduce()方法从数组的第一项开始，逐个遍历到最后。
• 而reduceRight()则从数组的最后一项开始，向前遍历到第一项。
• 这两个方法都接收两个参数，一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
• 传个reduce()和reduceRight()的函数接收4个参数
• 前一个、当前值、项的索引和数组的对象
• 这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项

   // reduce() reduceRight()
    // 使用reduce() 方法可以执行求数组中所有值之和的操作
    var values = [1, 2, 3, 4, 5];
    var sum = values.reduce(function (prev, cur, index, array) {
      return prev + cur;
    })
    console.log(sum) // 15
    var values = [1, 2, 3, 4, 5];
    var sum = values.reduceRight(function (prev, cur, index, array) {
      return prev + cur;
    })
    console.log(sum) // 15