代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {

      },
      created() {
        // 1. join()功能：将数组中所有元素都转化为字符串并连接在一起。
        console.log('-------------arr1 start-------------')
        let arr1 = ["张三", 23, "男"]
        console.log(arr1.join()); //张三,23,男
        console.log('-------------arr1 end-------------')

        // 2. reverse()功能：将数组中的元素颠倒顺序。
        console.log('-------------arr2 start-------------')
        let arr2 = [1, 2, 3, 4, 5]
        console.log(arr2.reverse()); //[5, 4, 3, 2, 1]
        console.log('-------------arr2 end-------------')

        // 3. concat()功能：数组拼接的功能 ,返回新数组，原数组不受影响。
        console.log('-------------arr3 start-------------')
        let arr3 = [1, 2, 3]
        let arr3_1 = [4, 5, 6]
        console.log(arr3.concat(arr3_1)); //[1, 2, 3, 4, 5, 6]
        console.log('-------------arr3 end-------------')

        // 4. slice()截取数组生成新数组，原数组不受影响。
        // 返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。
        // 如果为负数，表示相对于数组中最后一个元素的位置。
        // 如果只有一个参数，表示到数组末尾。
        console.log('-------------arr4 start-------------')
        let arr4 = [1, 2, 3, 4, 5, 6];
        console.log(arr4.slice(2)); //[3,4,5,6]
        console.log(arr4.slice(2, 8)); //[3,4,5,6] 超过最大长度，只显示到最后结果
        console.log(arr4.slice(2, 5)); //[3,4,5]
        console.log(arr4.slice(2, -1)); //[3,4,5] 相对于倒数第一个之前
        console.log(arr4.slice(2, -2)); //[3,4] 相对于倒数第二个之前
        console.log(arr4.slice(3)); //[4,5,6] 一个参数从第三个到最后
        console.log(arr4.slice(-2)); //[5,6] 一个参数负值从倒数第二个到最后
        console.log('-------------arr4 end-------------')


        // 5. splice()
        // 功能：从数组中删除元素、插入元素到数组中或者同时完成这两种操作。
        // 输入：第一个参数为指定插入或删除的起始位置，第二个参数为要删除的个数。
        //      之后的参数表示需要插入到数组中的元素 。如果只有一个参数，默认删除参数后边的所有元素。
        // 输出：返回一个由删除元素组成的数组。
        // 注意：新建了一个数组，并修改了原数组
        console.log('-------------arr5 start-------------')
        let arr5 = [1, 2, 3, 4, 5, 6];
        console.log(arr5.splice(4)); //[5,6]  返回删除后的数组
        // aa; // [1,2,3,4]
        console.log(arr5.splice(2, 2)); //[3,4] 从第二位起删除两个元素
        // aa; //[1,2]
        console.log(arr5.splice(1, 0, 7, 8)); //[]从第一位起删除0个元素，添加7,8到原数组
        console.log(arr5); // aa;//[1,7,8,2] 
        console.log('-------------arr5 end-------------')

        // 6. push()  尾插法
        // 在数组末尾添加一个或多个元素，并返回新数组长度

        console.log('-------------arr6 start-------------')
        let arr6 = [1, 2, 3]
        console.log(arr6.push(4)); // 1
        //arr6 [1,2,3,4]
        console.log(arr6.push(5, 6)); // 2
        //arr6 [1,2,3,4,5,6]
        console.log(arr6.push(7, 8, 9)); // 3
        //arr6 [1,2,3,4,5,6,7,8,9]
        console.log('-------------arr6 end-------------')

        // 7. pop() 尾删法
        // 从数组末尾删除1个元素(删且只删除1个), 并返回 被删除的元素
        console.log('-------------arr7 start-------------')
        let arr7 = [1, 2, 3, 4, 5, 6]
        console.log(arr7.pop()); //[1,2,3,4,5]
        console.log(arr7.pop()); //[1,2,3,4]
        console.log('-------------arr7 end-------------')

        // 8. shift()  头删法
        // 在数组开始删除一个元素（删且只删1个元素），并返回 被删除的元素
        console.log('-------------arr8 start-------------')
        let arr8 = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr8.shift()); // 1
        //arr8 [2,3,4,5,6,7]
        console.log(arr8.shift()); // 2
        //arr8 [3,4,5,6,7]
        console.log(arr8.shift()); // 3
        console.log(arr8); //[4,5,6,7]
        console.log('-------------arr8 end-------------')

        // 9. unshift()  头插法
        // 在数组开始添加一个或多个元素，并返回新数组长度
        console.log('-------------arr9 start-------------')
        let arr9 = [1, 2, 3]
        console.log(arr9.unshift(4)); //4
        // arr9 [1,2,3,4]
        console.log(arr9.unshift(5, 6)); //6
        // arr9 [1,2,3,4,5,6]
        console.log(arr9.unshift(7, 8, 9)); //9
        // arr9 [1,2,3,4,5,6,7,8,9]
        console.log('-------------arr9 end-------------')

        // 10. toString()和toLocaleString()
        // 将数组的每个元素转化为字符串，并且输入用逗号分隔的字符串列表。功能类似join();
        console.log('-------------arr10 start-------------')
        let arr10 = [1, 2, 3, 4, 5, 6, 7, 8]
        console.log(arr10.toString()); //1,2,3,4,5,6,7,8
        console.log(arr10.toLocaleString()); //1,2,3,4,5,6,7,8

        let arr10_num = 123456
        console.log(arr10_num.toLocaleString()); //123,456
        console.log('-------------arr10 end-------------')

        // 11. indexOf()和lastIndexOf()
        //  indexOf 是查某个指定的字符串在字符串首次出现的位置（索引值）（从左往右）
        //  lastIndexOf 是查某个指定的字符串在字符串最后一次出现的位置（索引值）（从右往左）
        console.log('-------------arr11 start-------------')
        let str1 = "abcdefg"
        console.log(str1.indexOf("c")); //2
        console.log(str1.lastIndexOf("c")); //2
        let str2 = "abccccdefg"
        console.log(str2.indexOf("c")); //2
        console.log(str2.lastIndexOf("c")); //5
        console.log('-------------arr11 end-------------')

        // 在数学中高阶函数听起来很大上，JavaScript中也有的，其实就是把一个函数作为另一个函数的参数，不要被高阶吓到了，下边几种数组方法都属于此。

        // A. sort();
        // 默认情况下sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，
        // 会调用toString()方法将元素转化为字符串的Unicode(万国码)位点，
        // 然后再比较字符。所以用默认方法排序数据是有问题的。
        console.log('-------------arrA start-------------')
        let arrA = [20, 10, 2, 1, 3];
        arrA.sort()
        console.log(arrA); // [1, 10, 2, 20, 3]

        arrA.sort(function (a, b) {
          return a - b; //升序
        });
        console.log(arrA); //[1, 2, 3, 10, 20]

        arrA.sort(function (a, b) {
          return b - a; //降序
        });
        console.log(arrA); //[20,10,3,2,1]
        console.log('-------------arrA end-------------')

        // B. forEach()
        // 从头至尾遍历数组，为每个元素调用指定函数
        // 输入为一个待遍历函数，函数的参数依次为：数组元素、元素的索引、数组本身
        console.log('-------------arrB start-------------')
        let arrB = [1, 10, 2, 20, 3]
        arrB.forEach(element => {
          console.log(element); //1, 10, 2, 20, 3
        })
        console.log('-------------arrB end-------------')

        // C. filter函数的使用()
        // filter函数的使用
        // 10,20,27,50,90
        //1、 取所有小于100的数加入新的数组中
        console.log('-------------arrC start-------------')
        let nums = [10, 20, 111, 27, 120, 444, 50, 90, 208]
        let newNums = nums.filter(function (n) {
          return n < 100
        })
        console.log(newNums); //[10,20,27,50,90]
        console.log('-------------arrC end-------------')

        // D map函数的使用
        // map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
        // map()不会对空数组进行检测
        // map()不会改变原始数组
        console.log('-------------arrD start-------------')
        //2、map 将所有小于100的数乘以2
        // 20,40,54,100,180
        let newNum2 = newNums.map(function (n) {
          return n * 2
        })
        console.log(newNum2);
        console.log('-------------arrD end-------------')

        // E reduce() 两个参数：函数和递归的初始值。从数组的第一项开始，逐个遍历到最后
        // reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个
        //值。对空数组是不会执行回调函数的。
        console.log('-------------arrE start-------------')
        let totalNums = newNum2.reduce(function (prevalue, n) {
          return prevalue + n
        }, 0)
        console.log(totalNums)
        // prevalue           n
        // 第一次   0         20
        // 第二次   20        40
        // 第三次   60        54
        // 第四次   114       100
        // 第五次   214       180
        // 第六次   394
        console.log('-------------arrE end-------------')

        // filter、map、reduce等综合写法
        console.log('-------------filter、map、reduce等综合写法 start-------------')
        let numsx = [10, 20, 111, 27, 120, 444, 50, 90, 208]
        let totalNumsx = numsx.filter((n) => {
          return n < 100;
        }).map((n) => {
          return n * 10
        }).reduce((prevalue, n) => {
          return prevalue += n
        })
        console.log(totalNumsx)
        console.log('-------------filter、map、reduce等综合写法 end-------------')

        // E. every()和some()
        // every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
        // some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
        let arrE = [1, 2, 3, 4, 5, 6];
        arrE.every(x => x > 0); //return true;
        arrE.every(x => x > 5); //return false;
        arrE.some(x => x > 5); //return true;
      },
    })
  </script>
</body>

</html>
JS-数组操作

代码

操作系统-中断机制

Vue-Key的作用

ckk
