初学入门 JS/JavaScript的有用知识点简单总结（三）

最新推荐文章于 2022-09-19 19:07:50 发布

Et2nity

最新推荐文章于 2022-09-19 19:07:50 发布

阅读量166

点赞数 1

分类专栏： JS/JavaScript 文章标签： js javascript 前端 php vue.js

本文链接：https://blog.csdn.net/Eternity_matt/article/details/108441613

版权

JS/JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

JavaScript中的数组介绍以及数组方法函数

一、js中的数组

JavaScript中创建数组有两种方式

（一）使用 Array 构造函数：

let arr1 = new Array(); 
//创建一个空数组
let arr2 = new Array(10); 
// 创建一个包含10项的数组
let arr3 = new Array("孙悟空","猪八戒","沙和尚"); 
// 创建一个包含3个字符串的数组

（二）使用定义方法构造函数：


let arr=[12,23,34,45,56]
console.log(arr)

二、js中的数组方法以及个别自定义方法函数

在w3cschool网页里面，官方给出的数组方法共有30个之多，实际上在开发当中，我们常用的可能也就十多个，下面就把数组的方法写下来，自定义方法函数是为了让大家更清楚的理解记忆各个方法的操作规则，更有利于我们学习更深层次的javascrapt整体结构：

1、push()和pop()

push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

自定义函数：

   let arr = [11, 22, 33, 44, 55, 66]

        function push(val) {
            //下一个元素的下标是数组的自身长度
            arr[arr.length] = val
        }
         push(10)
         push(20)

pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

自定义函数：

   let arr = [11, 22, 33, 44, 55, 66]
        function pop() {
            //先将最后一个元素获取到并备份
            let res = arr[arr.length - 1]
            //数组长度-1，会自动删除最后一个元素
            arr.length--
            //返回备份
            return res
        }

        let last = pop()
        console.log(last);

2、shift() 和 unshift()

这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

自定义函数：

let arr = [11, 22, 33, 44, 55, 66]
 function shift() {
            //备份第一个
            let res = arr[0]
            //后面的往前挪
            for (let i = 0; i < arr.length; i++) {
                arr[i] = arr[i + 1]
            }
            //长度减一，删除最后一个元素
            arr.length--
            return res
        }

         let first = shift()
         console.log(first);

unshift():将参数添加到原数组开头，并返回数组的长度。

自定义函数：

  let arr = [11, 22, 33, 44, 55, 66]
function unshift(val) {
             //备份Length，防止数组扩容造成死循环
            let len = arr.length
             //从后往前循环，每个元素往后挪一个位置
             for (let i = len - 1; i >= 0; i--) {
                 arr[i + 1] = arr[i]
             }
             //覆盖第一个元素
             arr[0] = val
        }

         unshift(111)
         unshift(22222)

3、reverse()

reverse()：反转数组项的顺序，返回reverse之后的新数组，原数组随之改变。

自定义函数：

 let arr = [11, 22, 33, 44, 55, 66]
  function reverse() {
            let len = arr.length
  //循环数组到一半，将前面每一个元素跟后面相对应的元素比较，如果值不相等则互换位置
            for (let i = 0; i < arr.length / 2; i++) {
                //如果值相等则不必替换，节约内存开销
                if (arr[i] !== arr[len - 1 - i]) {
                 //定义第三个变量来完成变量值互换
                    let temp = arr[i]
                    arr[i] = arr[len - 1 - i]
                    arr[len - 1 - i] = temp
                }
            }
        }
         reverse()
         console.log(arr);

4、slice()和splice()

slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

`var` `arr = [1,2,3,4,5,6,7,8,9];`
slice结构	得到结果	简介
arr.slice(1)	`[2,3,4,5,6,7,8,9]`	不写就是1到末尾
arr.slice(1,4)	`[2,3,4]`	1-4但是不包含4
arr.slice(1,-2)	[2, 3, 4, 5, 6, 7]	1到倒数第2但不包含
arr.slice(-4,-1)	[6, 7, 8]	倒数第4到倒数第1

自定义函数：

 let arr = [11, 22, 33, 44, 55]
 function slice(start, end) {
            let res = []
            for (let i = start; i < end; i++) {
                res.push(arr[i]);
            }
            return res
        }

        console.log(slice(2, 4)); //[33,44]

splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

var arr = [];
        arr.push(1);
        arr.push(2);
        arr.push(3);
        console.log(arr); // [1, 2, 3]
        
        // 删除
        arr.splice(0,1);  // 删除  -> 从下标为0开始,项数为1
        console.log(arr); // [2,3]
        arr.splice(0,2);  // 删除  -> 从下标为0开始,项数为2
        console.log(arr); // []
        
        //替换
        arr.splice(0,1,4); // 替换 -> 从下标为0开始,项数为1的数组元素替换成4
        console.log(arr);  // [4,2,3]
        arr.splice(0,2,4); // 替换 -> 从下标为0开始,项数为2的数组元素替换成4(即4,2整体替换成4)
        console.log(arr);  // [4,3]
        
        //添加
        arr.splice(1,0,5); // 表示在下标为1处添加一项5
        console.log(arr);    // [1,5,2,3]

自定义函数：

       let arr = [11, 22, 33, 44, 55, 66]
        function splice(index, len) {
            if (len < 0) throw '请输入合法参数'
            //算出Len最大值，防止溢出
            let maxLen = arr.length - index
            //如果Len没传或者超过最大值，则限制为最大值
            if (!len || len > maxLen) len = maxLen

            let res = []
            //从参数传进来的下标开始删除
            for (let i = index; i < arr.length; i++) {
                //在删除的范围内的元素，返回出去
                if (i < index + len) {
                    res.push(arr[i])
                }
                //用后面对应的元素替换旧元素
                arr[i] = arr[i + len]
            }
            //删除对应长度，完成删除
            arr.length -= len

            return res
        }

        splice1(1, 2)

        // console.log(splice(2, 2));

5、indexOf()和 lastIndexOf()

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找。

自定义函数：

   let arr = [11, 22, 33, 44, 55, 66]
function indexOf(val) {
            let res = -1
            for (let i = 0; i < arr1.length; i++) {
                 //挨个比对，如果找到，则将当前下标赋值给res
                 if (arr1[i] === val) {
                     res = i
                    break
                 }
             }
             return res
         }

         console.log(indexOf(22));

lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。

6、concat()

concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

自定义函数：

 let arr = [11, 22, 33, 44, 55, 66]
function concat(newarr) {
             let res = []

             for (let i = 0; i < arr1.length; i++) {
                 res.push(arr1[i])
             }

             for (let i = 0; i < newarr.length; i++) {
                 res.push(newarr[i])
             }

             return res
         }

         console.log(concat([20, 30, 40, 50]));
//   输出结果   [1, 3, 5, 7, 7, 5, 3, 1, 20, 30, 40, 50]

7、sort()

sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

自定义函数：

       let arr2 = [1, 33, 2, 55, 32, 2]
        function sort() {
            for (let i = 0; i < arr2.length - 1; i++) {
                console.log(`-`.repeat(30));
                for (let j = 0; j < arr2.length - i - 1; j++) {
                    console.log(`第${i + 1}轮-第${j + 1}次`);
                    if (arr2[j] > arr2[j + 1]) {
                        let temp = arr2[j]
                        arr2[j] = arr2[j + 1]
                        arr2[j + 1] = temp
                    }
                }
            }

        }

        sort()

8、join()

join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）

同时也可以用来重复字符串：（一种特殊的形式）

function repeatString(str, n) {
return new Array(n + 1).join(str);
}

console.log(repeatString("Hi", 5)); // HiHiHiHiHi

9、 every() 和 some()

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

10、 forEach()

（1). forEach() 的简介

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参

foreach(function()) 方法需要一个函数作为参数如： function()函数

-由我们创建但是不由我们调用的，我们称为回调函数

-数组中有几个元素，函数就会执行几次，

-浏览器会将遍历到的元素以实参的形式传递进来，可以定义形参，来读取内容

-浏览器会在回调函数中创建三个函数

-第一个参数就是，当前正在遍历的元素

-第二个参数是，正在遍历的元素的索引

-第三个参数是，正在遍历的数组

缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，

方法不能使用break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数

优点：便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率

定义：用于调用数组的每个元素，并将元素传递给回调函数

（2）. 语法

//我们先用它来遍历数组
  let arry=[9,8,7,6,5,4]
  array.forEach(function(value,index,arr){
      console.log(value)
  })
//输出结果为9 8 7 6 5 4
 
//首先有人疑问它能不能用来遍历对象（一开始我也不知道）？
//我们用它来遍历对象试试可不可以
   let obj={a:1,b:2,c:3,d:4}
   obj.forEach(function(value,index,oObj){
       console.log(value)
   }
//输出结果会是obj.forEach is not a function，
//所以forEach不可以遍历对象，这也是它和for in的一个区别

   let arr2 = [121, 23, 1212, 2223, 44]

        function forEach(callback) {
            for (let i = 0; i < arr2.length; i++) {
                callback(arr2[i])
            }
        }

         forEach(function (item) {
             console.log(item);
         })