js 数组倒序_js数组的创建及数组方法的汇总-CSDN博客

js基础------数组篇

一.数组的创建

1.使用Array构造函数创建

可以通过给构造函数传递该数组的数量，这个数量会自动转换为length属性的值

      // var arr = new Array(123)
       
      console.log(arr.length); //123

      console.log(arr); // [empty × 123] 即数组长度为123 但是内容为空

      arr[2] = '第三个哦';

      console.log(arr);   // [empty × 2, "第三个哦", empty × 120]```

给构造函数传递一个值也可以创建一个数组，但如果是数值的话效果如上，可以是其他类型的值

var arr = new Array('one')

console.log(arr); // ["one"]
       
var arrObj = new Array({ name: 'wala' })

console.log(arrObj); // [{name: "wala"}]

另外在使用Array构造函数时,可以省略new操作符

var arr = Array(123)
console.log(arr); // [empty × 123]

2.使用数组字面量[]创建

用字面量[] 创建数组，多项数组之间用 ',' 隔开

      var arr = []
      console.log(arr); // []
       
      var arrOne = [1, 2, 3, 4]
      console.log(arrOne); // [1, 2, 3, 4]
       
      var arrTwo = [1, 2,]
      console.log(arrTwo); // [1, 2] 
      console.log(arrTwo.length) // 2
       
      var arrThree = [, , , ,]
      console.log(arrThree); // [empty × 4]

二.数组的方法

1.push()

push()方法可以接受任意数量的参数，然后将他们逐个添加到数组末尾,并返回修改数组后的数组长度

    var arr = new Array()
      arr.push(123)
      arr.push({ name: '张三' })
      const count = arr.push('One', 'Two')
      console.log(count); // 4 即返回的是修改数组后的数组长度
      console.log(arr); // [123, {…}, "One", "Two"]

2.pop()

pop()方法从数组末尾移除最后一项，减少数组的length值，会返回他移除的项

      var arrPop = new Array('张三', '李四', '王五', '赵六')
      const result = arrPop.pop()
      arrPop.pop('李四') // 在pop方法中传入参数并不会报错 但也没有任何效果
      console.log(arrPop); // ["张三", "李四", "王五"]
      console.log(result); // 赵六 pop()返回的是 它删除的那个数组的值

3.shift()

shift()方法与pop()相反，它是从数组前端开始删除，减少数组的length值，并返回它移除的项

      var arrShift = new Array('张三', '李四', '王五', '赵六')
      const result = arrShift.shift()
      console.log(arrShift); // ["李四", "王五", "赵六"]
      console.log(result); // 张三

4.unshift()

unshift()方法的用途则与shift相反，它是从前面添加项，并返回数组的长度

      var arrUnshift = new Array('张三', '李四', '王五', '赵六')
      const result = arrUnshift.unshift('刘大', '关二')
      console.log(arrUnshift); //  ["刘大", "关二", "张三", "李四", "王五", "赵六"]
      console.log(result); //6

5.reverse()

reverse()方法就是将数组进行倒序排列,会改变原数组，也会返回对数组进行操作后的结果

    var arrReverse = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        const result = arrReverse.reverse()
        console.log(arrReverse); // [9, 8, 7, 6, 5, 4, 3, 2, 1]
        console.log(result); // [9, 8, 7, 6, 5, 4, 3, 2, 1]

6.sort()

因为reverse()方法的局限性，sort()较为灵活

      1.单纯的使用sort（）方法只能进行数组的升序排列，限制了sort（）发挥空间
      var arrSort = [1, 2, 3, 4, 5, 9, 7, 5]
        arrSort.sort()
        console.log(arrSort); // [1, 2, 3, 4, 5, 5, 7, 9]

        var arrSort1 = [12, 45, , 45, 98, 74, 1, 65, 65, 65]
        arrSort1.sort()
        console.log(arrSort1); // [1, 12, 45, 45, 65, 65, 65, 74, 98, empty]
        //另外数组中未定义的项，排序下来时最大的

在sort()方法中可以传递一个函数作为参数，这个函数也接受两个参数;如果第一个参数应在第二个参数之前则返回一个负数，如果位置不需要改变则返回0，如果第一个参数应在第二参数之后则返回一个正数**

   var arr = [12, 45, 78, 96, 4]
升序：   arr.sort((a, b) => {
            return a - b
        })
        console.log(arr); // [4, 12, 45, 78, 96]

降序：   arr.sort((a, b) => {
            return b - a
        })
        console.log(arr); // [96, 78, 45, 12, 4]

对于较为复杂的排序，可以用判断，然后返回相应调换位置的数值的形式进行排序
var arr = [12, 45, 78, , 56, 78, 89, 96, 4]
        arr.sort((val1, val2) => {
            if (val1 > val2) {
                return 1
            } else if (val1 < val2) {
                return -1
            } else {
                return 0
            }
        })
console.log(arr); // [4, 12, 45, 56, 78, 78, 89, 96, empty]

7.concat()

concat()用于拼接两个数组，基于当前数组的所有项创建一个新数组，即不会影响原有的数组

        var arrOne = [1, 2, 4, 5, 6, 7]
        var arrTwo = ['one', 'two', 'three']
        var result = arrOne.concat(arrTwo)
        
        console.log(result); // [1, 2, 4, 5, 6, 7, "one", "two", "three"]
        console.log(arrOne); // [1, 2, 4, 5, 6, 7]
        console.log(arrTwo); // ["one", "two", "three"]

8.slice()

slice()方法是基于原数组的一项或多项创建一个新数组，即不会影响原有的数组,可以接受一个或者两个参数，第三个参数开始以后的参数都没有意义，多了也不会报错

slice()方法接收两个参数，第一个参数为截取的起始索引，第二的参数为结束的索引（若第二个参数省略，则会默认截取到数组的末端）
 var arrSlice = [1, 2, 4, 5, 7, 8, 9]
        // var result = arrSlice.slice(2)
        // console.log(result); //  [4, 5, 7, 8, 9] （注：结果包括它截取的开始的数组项）
        var result1 = result.slice(1, 4)
        console.log(result1); // [5, 7, 8]
        console.log(arrSlice); // [1, 2, 4, 5, 7, 8, 9]

注：这里的两个参数都对应数组的索引，第二个参数并不是截取的个数，只是截取结束的数组结束位置

另外：第二个参数若是其他数值类型，或者说比一个索引值小，则会返回一个空数组
  var arrSlice = [1, 2, 4, 5, 7, 8, 9]
        // var result = arrSlice.slice(1, 0)
        var result1 = arrSlice.slice(1, 'one')
        // console.log(result); // []
        console.log(result1);

9.splice()

splice()可以对数组进行删除，替换，添加的操做；会影响原来的数组，返回值是删除的数组项

1.删除 ： 可以删除任意数量项，只需要指定两个参数，第一个参数为起始位置，第二个参数为删除的个数

    var arrSplice = ["刘大", "关二", "张三", "李四", "王五", "赵六"]
    var result = arrSplice.splice(2, 3)
    console.log(arrSplice); //  ["刘大", "关二", "赵六"]
    console.log(result); //  ["张三", "李四", "王五"]

2.替换 ：可以向指定位置插入任意数量的项，因为从第三个参数开始视为添加的项

     var arrSplice = ["刘大", "关二", "张三", "李四", "王五", "赵六"]
     var result = arrSplice.splice(1, 2, '陈狗蛋', '曾二狗')
     console.log(result); //["关二", "张三"]
     console.log(arrSplice); //  ["刘大", "陈狗蛋", "曾二狗", "李四", "王五", "赵六"]

3.添加 
        var arrSplice = ["刘大", "关二", "张三", "李四", "王五", "赵六"]
        var result = arrSplice.splice(1, 0, '陈狗蛋', '曾二狗')
        console.log(result); // []
	console.log(arrSplice); // ["刘大", "陈狗蛋", "曾二狗", "关二", "张三", "李四", "王五", "赵六"]

10.indexOf() ; lastIndexOf()

indexOf()用于查找数组项的索引，找到第一个后就会停止寻找，若没有找到则会返回-1（从前往后找）；

而lastIndexOf()则是从后往前找，于indexOf用法相同

     var arr = [1, 2, 6, 3, 1, 5, 6, 7, 8, 9]
        const result = arr.indexOf(1)
        console.log(result);  // 0 
        const resultLast = arr.lastIndexOf(1)
        console.log(resultLast); // 4

11.Array.isArray(arr)

Array.isArray(arr)用于判断数值类型，是否为数组,返回Boolean类型的数值

  	var arr = [];
        const result = Array.isArray(arr)
        console.log(result); // true

12.every()

every()方法用于判断数组每一项是否都符合要求，若有一项不符合则会返回false,反之true;

并且当找到不符合条件的后，该方法就会停止遍历，返回false;在某些时候用every()方法能提高性能

   var arr = [1, 2, 5, 7, 8, 9, 10]
        const result = arr.every((item, index, array) => {
            console.log(item);  // 数组项的值 
            console.log(index); // 索引
            console.log(array); // 返回的是arr这个数组
            return item > 2
        })
        console.log(result); // false

13.some()

some()方法类似于ervey();但some()只要有一项符合要求则会返回true;都不符合要求时才会返回false.

并且当找到符合条件的后，该方法就会停止遍历，返回true ;在某些时候用some()方法能提高性能

    var arr = [1, 2, 5, 7, 8, 9, 10]
        const result = arr.some((item, index, array) => {
            console.log(item);  // 数组项的值 
            console.log(index); // 索引
            console.log(array); // 返回的是arr这个数组
            return item > 2
        })
        console.log(result); // true

14.forEach()

forEach()对数组进行遍历；这个方法没有返回值；不会对原数组进行修改；

它仅仅只是对数组中的每一项运行传入函数

        var arr = [1, 2, 5, 7, 8, 9, 10]
        const a = arr.forEach(function (item, index, array) {
            arr[index] = item * 2
        })
        console.log(arr); // [2, 4, 10, 14, 16, 18, 20]
        console.log(a); // undefined

15.map()

map()方法不会影响原数组，会返回一个新的数组

 	 var arr = [1, 2, 5, 7, 8, 9, 10]
        var result = arr.map((item, index, array) => item * 2)
        console.log(result); // [2, 4, 10, 14, 16, 18, 20]
        console.log(arr); //  [1, 2, 5, 7, 8, 9, 10]

16.filter()

filter()不会影响原数组，会返回过滤后的一个新的数组

       var arr = [1, 2, 5, 7, 8, 9, 10]
        var result = arr.filter((item, index, array) => item > 5)
        console.log(arr); // [1, 2, 5, 7, 8, 9, 10]
        console.log(result); // [7, 8, 9, 10]

17.reduce() ； reduceRight()

归并方法，用于计算数组的方法; 接收两个参数，

第一个参数为函数方法（函数方法又可以接收四个参数），第二个参数为计算的初始值

reduceRight()是从末端开始遍历，其他无reduce()无异

 var arr = [1, 2, 5, 7, 8, 9, 10]
        var result = arr.reduce((pre, cur, index, array) => {
            console.log(pre);  //第一次打印时  初始值 若没有设初始值，则刚开始的初始值为数组的第一项
            console.log(cur); // 为数组每一项的值
            // console.log(index);  // 索引
            console.log(array); // 原数组
            return pre + cur
        }, 50)
        console.log(result); // 92
注：cur是循环元素，每次运算return的值会存储在pre中，作为下一次运算的初始值

18.find()

find()不会影响原数组，用于查找符合条件的数组项，并返回符合条件的数组项；找到后就会终止遍历查找

     var arr = [{ name: '陈狗蛋' }, { name: '增二狗' }, { name: '赵傻蛋' }]
        var result = arr.find((item, index, array) => {
            // console.log(item);
            // console.log(index);
            // console.log(array);
            return item.name === '增二狗'
        })
        console.log(result); // {name: "增二狗"}
        console.log(arr);  // [{…}, {…}, {…}]

20.includes()

includes()用于判断数组中是否包含给定的值，返回一个布尔值

        var arr = ["刘大", "陈狗蛋", "曾二狗", "关二", "张三", "李四", "王五", "赵六"]
        var result = arr.includes('刘大')
        var result1 = arr.includes('赵啦啦')
        console.log(result); // true
        console.log(result1); // false

21.findIndex()

findIndex() 与indexOf()类似，返回的都是在数组中符合条件的项的索引，若找不到则返回-1；注意要retrun

   var arr = ["刘大", "陈狗蛋", "曾二狗", "关二", "张三", "李四", "王五", "赵六"]
        var result = arr.findIndex((item, index, array) => {
            console.log(item);
            return item == "李四"
        })
        console.log(result); // 5

22.join()

join()用于对数组转换为字符串的拼接，而join()接受的参数则时数组项之间连接的符号;不影响原数组

  var arr = ["刘大", "陈狗蛋", "曾二狗", "关二", "张三", "李四", "王五", "赵六"]
  var result = arr.join('$')
  console.log(arr); // ["刘大", "陈狗蛋", "曾二狗", "关二", "张三", "李四", "王五", "赵六"]
  console.log(result); //  刘大$陈狗蛋$曾二狗$关二$张三$李四$王五$赵六