【超硬核】js 数组 这一篇就够了 ,九千字总结,值得收藏【宝藏级】

6616e929c092402fb66570567d26bac4.gif

 

沉迷学习,无法自拔, 

目录

获取数组最后一项

 先来几个随机数,开始热身 ♥♥♥

从数组中随机取出来一个值(文字)

置顶 vue的结合js数组方法 

javaScript常用数组方法

1 数组长度 

 2 split 字符串转数组 

 3 join 数组转字符串 

4 push末尾追加 

5、unshift头部添加

 6 pop 末尾删除 

 7、shift头部删除

8  、sort排序

9 、reverse()数组反转 

 10 、slice数组删除(不改变原数组)

11 、splice 数组删除(会改变原数组)

两个参数:删除返回值为被删除的元素,会改变原数组

11.1 方法用于字符串的截取 

12 、 arr.filter 过滤数组 要用return返回出来

13 、forEach() 数组遍历

 ​

14  、set 去重

 ​

 15、  将数组中的字符串拿出来 取出来一种类型

16、 去空

 17、xx.concat(n,n) 合并数组

 18 、数组转字符串 (默认",")

 20 、arr.toString() 强制转字符串

21 、valueOf(); 返回数组的原始值(一般情况下其实就是数组自身)

22 、arr.indexOf(); 

23 、arr.map() 

24 arr.find();

25 、arr.fill 数组填充

 26、数组扁平   arr.flat(num/Infinity);

27 、求最大值最小值

28 、计算字符串每个字符出现次数

 29、出现次数最多的元素为

30 、reduce 累加器方法

31 、将字符串变成真正的正则

32、replace


watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

获取数组最后一项

 let arr = ['a', 'b', 'c'];
    console.log(arr.length); //3
    // 因为下标是从零开始,减一正好是最后一项(3-1=2)下标0、1、2,以此类推...
    console.log(arr[arr.length - 1]) //c

   // 获取第一项
     console.log(arr[0])

 先来几个随机数,开始热身 ♥♥♥

  • watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

从数组中随机取出来一个值(文字)

  var arr = ["被表白", "你爱的人也喜欢你","好运连连", "遍地桃花", "开心", "升职", 
                   "防dao", "加薪", "健康", "出名", "暴富", "瘦成闪电"
       ];
    var aa = Math.floor((Math.random() * arr.length));
    // console.log(aa); //直接打印是下标
    console.log(arr[aa]); //这样是文字,因为aa是变量所以[]

 开始

Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 。

Math.round(num); 参数num为一个数值,函数结果为num四舍五入后的整数。

Math.ceil(n); Math.floor() 向上取整和向下取整。 (ceil有天花板的意思,向上;floor是地板的意思,向下)

因此可以用以上函数配合实现取1-6的随机数:

1,用Math.ceil(Math.random()*6);时,主要获取1到6的随机整数,取0的几率极小。

2,用Math.round(Math.random()*5 + 1),可基本均衡获取1到6的随机整数,其中获取最小值0和最大值6的几率少一半。

3,用Math.floor(Math.random()*6 + 1);时,可均衡获取1到6的随机整数。

1 Math.ceil() 、 Math.floor() 、向上取整和向下取整。 (ceil有天花板的意思,向上;floor是地板的意思,向下)

   console.log(Math.ceil(8.11));//9
   console.log(Math.floor(8.11));//8

2 Math.round() 四舍五入。 (注意:正数时,包含5是向上取整,负数时 ,包含5是向下取整(因为负数时往下取更大)。)

   console.log(Math.round(-8.3)); //-8
    console.log(Math.round(-8.5)); //-8
    console.log(Math.round(-8.51)); //-9

  3 随机数 (包头不包尾)

  //随机数 (包头不包尾)
    console.log(parseInt(Math.random() * 10)); //未包含10 [0,10]
    console.log(parseInt(Math.random() * (10 + 1))); //包含10 [0,11]

 4 Math.abs() 获取绝对值

 console.log(Math.abs(~8.24512)); //9
    console.log(Math.abs(9 > 8)); //1
    console.log(Math.abs(9 == 8)); //0

5、 Math.max() 、 Math.min()、 获取一组数据中的最大值和最小值

   console.log(Math.max(10, 15, 9, 1010, 2002, 45, 78)); // 2002
    console.log(Math.min(10, 1, 59, 1000, 200, 45, 78)); // 1

6,Math.PI 获取圆周率π 的值

    console.log(Math.PI); //3.141592653589793

置顶 vue的结合js数组方法 

1

 <div v-for="(item, index) in list" :key="index" @click="chose(index)"></div>
chose(index){
    this.list.unshift(...this.list.splice(index,1));//将删除的那个元素添加到最前
}

2

 //map和forEach的区别,map是映射,有返回值

    let data = ['cat', 'pig', 'dog'];
    data.map((item, index) => {
        //dog
        if (index == 2) {
            //要加[0],添加成数组第一个, 
            data.unshift(data.splice(index, 1)[0]); // ['dog', 'cat', 'pig']
            // 不加[0] 是这样 
            // data.unshift(data.splice(index, 1));//[Array(1), 'dog', 'cat']

        }
    })


    console.log(data) // ['dog', 'cat', 'pig']

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_16,color_FFFFFF,t_70,g_se,x_16

 data.unshift(data.splice(index, 1)[0]);

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_18,color_FFFFFF,t_70,g_se,x_16

data.unshift(data.splice(index, 1))

 map ? 映射 ?不太懂

  • 映射:你去照镜子,镜子里的你就是映射,是不是通俗易懂?就是副本

javaScript常用数组方法

整理了好久感觉还是表格清晰,

活在风浪,赢在当下 ~ 
 序号    方法名                      功能              返回值 是否会  改变  原数  组  版本
1    push()(在结尾)向数组添加一或多个元素返回新数组长度YES5
2   unshift()(在开头)向数组添加一或多个元素返回新数组长度YES5
3   pop()删除数组的最后一位返回被删除的数据YES5
4   shift()删除数组的第一项返回被删除的数据YES5
5  reverse()反转数组中的元素返回反转后数组YES5
6  sort()排序返回排序后的新数组YES5
7splice()删除现有元素和/或添加新元素来更改数组的内容。原来的数组:改变返回删除的数据YES5
8slice()

裁切指定位置的数组 

原来的数组:不改变

被裁切的元素形成的新数组NES5
9substr方法用于字符串的截取截取后的字符串NEs5
9.1join()

数组转字符串

返回拼接后的新数组NES5
9.1arr.split()字符串转数组返回拼接后的新数组ES5
10concat()数组连接(合并)返回合并之后的数组NES5
11toString()将数组转换为字符串新数组NES5
12valueOf()查询数组原始值数组的原始值NES5
13indexOf()查询某个元素在数组中第一次出现的位置存在该元素,返回下标,不存在 返回 -1NES5
14lastIdexOf()反向查询数组某个元素在数组中第一次出现的位置存在该元素,返回下标,不存在 返回 -1NES5
15forEach()(迭代) 遍历数组,每次循环中执行传入的回调函数无/(undefined)NES5
16map()(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组有/自定义NES5
17filter()过滤数组满足条件的元素组成的新数组NES5
18every()(迭代) 判断数组中所有的元素是否满足某个条件

全部满足返回true,只要有一个不满足就返回false

         N               ES5
19some()(迭代) 判断数组中是否存在,满足某个条件的元素只要有一个元素满足条件就返回true,都不满足返回falseNES5
20reduce()(归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中,我一般用于计算价格 购物车全选 反选最终操作的结果NES5
21reduceRight()(归并)用法同reduce,只不过是从右向左同reduceES5
22includes()判断一个数组是否包含一个指定的值.是返回 true,否则falseNES6
23Array.from()

接收伪数组,返回对应的真数组,我一般用于去重

Array.from(new Set(arr))

对应的真数组NES6
24find()返回满足条件的第一个元素,不存在返回undefined满足条件第一个元素/否则返回undefinedNES6
25findIndex()返回满足条件的第一个元素下标,不存在返回-1满足条件第一个元素下标,不存在返回-1NES6
26fill()用给定值填充一个数组新数组NES6
27flat()用于将嵌套的数组“拉平”,变成一维的数组。返回一个新数组NES6
28replace()

替换

replace语法:str.replace(regexp|substr, newSubStr|function)

返回替换后的字符串ES5

1 数组长度 

  • 中括号里的中括号算一个 
 let arr = [1, 2, 3, [4, 5]];
    console.log(arr.length); //4

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_9,color_FFFFFF,t_70,g_se,x_16

 2 split 字符串转数组 

  • 语法:split('字符串的分隔符') 
     var str = '啊,吧,c' //字符串
    var arr66 = str.split(",") //字符串转数组方法括号里面是 分隔符
    console.log(arr66); //数组

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_15,color_FFFFFF,t_70,g_se,x_16

 3 join 数组转字符串 

  • 语法:数组名.join(“要拼接的符号”)
 let arr1 = [1, 2, 3, 4, 5, 6];
 console.log(arr1.join("-")); //1-2-3-4-5-6

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_16,color_FFFFFF,t_70,g_se,x_16

4 push末尾追加 

  • 语法:数组名.push()数组末尾追加 返回的是追加后数组元素长度个数 
 let arr2 = ["a", "b", "c", "d"];
 console.log(arr2.push("e", "f")); //6

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_14,color_FFFFFF,t_70,g_se,x_16

5、unshift头部添加

  • 语法:arr.unshift()数组头部追加 返回的是追加后数组元素个数 
  let arr4 = ["a", "b", "c", "d"];
    console.log(arr4.unshift("aa")); //5

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_19,color_FFFFFF,t_70,g_se,x_16

 6 pop 末尾删除 

  • 语法:arr.pop()数组末尾删除 ,返回值是被删除的元素 
let arr3 = ["a", "b", "c", "d"];
    console.log(arr3.pop()); //d   

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_16,color_FFFFFF,t_70,g_se,x_16

 7、shift头部删除

  • 语法:shift()数组头部删除  返回值是被删除的元素 
  let arr5 = ["a", "b", "c", "d"];
    console.log(arr5.shift()); //a

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

8  、sort排序

  • 语法:sort()数组排序 要用return返回出来 
 let arr6 = [1, 59, 6, 9, 2, 4];
    //1,2,4,6,9,59 箭头函数可以省略return只有一行语句时 a-b升序 b-a倒叙
    console.log(arr6.sort((a, b) => a - b));

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

   // 上面是简写 
    //完整写法如下

    arr6.sort((c, d) => { //降序
        return d - c
    });
    console.log(arr6);

js 冒泡排序 

<!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>冒泡排序</title>
  </head>

  <body>
    <script>
      let arr = [1, 3,2,  10, 4];

      // 判断是否是数组并且数组长度大于0并且数组元素都是数字并且数组元素不为空
      // every 断数组中所有的元素是否满足某个条件	全部满足返回true,只要有一个不满足就返回false
      //  typeof 检测基本数据类型
      //  Object.prototype.toString.call() 检测引用数据类型
      //  Object.prototype.toString.call(arr) === "[object Array]"  Es5
      //  Array isArray() Es6
      //  每一项元素都不为空
      arr = arr.filter((item) => item !== "empty");
      console.log("😂👨🏾‍❤️‍👨🏼==>:", arr);

      function onIsArray(arr) {
        return (
          Array.isArray(arr) &&
          arr.length > 0 &&
          arr.every((item) => typeof item === "number")
        );
      }

      function bubble(params) {
        let len = params.length;
        if (!onIsArray(params)) {
          return "请输入一个不为空的数组并且数组元素都是数字";
        }
        // 轮数
        for (let i = 0; i < len - 1; i++) {
          // 每轮比较的次数
          for (let j = 0; j < len - 1 - i; j++) {
            // 比较相邻的两个元素(下标)
            if (params[j] > params[j + 1]) {
              [params[j], params[j + 1]] = [params[j + 1], params[j]];
            }
          }
        }
        return params;
      }
      document.write(bubble(arr));
    </script>
  </body>
</html>

9 、reverse()数组反转 

 let arr7 = ["a", "b", "c", "d"];
    console.log(arr7.reverse()); //d c b a
    //数组方法可以串联例如, 也可以在data中定义,
   //在vue中复杂过重的模板建议写在computed中
    computed: {

           xx.split('').reverse().join('')
        },

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 10 、slice数组删除(不改变原数组)

  • slice()数组删除或组成新数组 传一个参数是删除几个,两个参数是从开始下标到结束下标之间组成新数组包头不包尾,特点不会改变原数组 
 let arr8 = ["a", "b", "c", "d", "e", "f"];
    console.log(arr8.slice(3)); //d e f  一个参数是删除几个
 //b c d 两个参数是从开始下标到结束下标之间组成新数组包头不包尾
//括号里默认不写就是从头到尾
    console.log(arr8.slice(1, 4));
    console.log(arr8); //(6) ['a', 'b', 'c', 'd', 'e', 'f'] 特点不会改变原数组

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

11 、splice 数组删除(会改变原数组)

两个参数:删除返回值为被删除的元素,会改变原数组

//  arr.splice(从下标那个位置删除,删除几个元素包含当前元素)
// 会改变原数组
 var arr = ['a', 'b', 'c', 'd'] 
    arr.splice(1, 2) //删除 b  c
    console.log(arr); //打印 a d

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_13,color_FFFFFF,t_70,g_se,x_16

 splice作用:删除/插入/替换元素
第一个参数传入开始处理的下标,
删除:第二个参数传入你要删除几个元素(如果没有传就删除后面所有的元素)
插入:第二个参数传入0,并且后面跟上要插入的元素
替换:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素

<script>
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // 删除:
    // 一个参数是下标,删除后面的所有元素,返回值是被删除的元素,原数组会改变
    // console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr.splice(1)); // [2, 3, 4, 5, 6, 7, 8, 9, 10]
    // console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr);//[1]

    // 两个参数,第一个为下标,第二个为删除的个数,返回被删除的元素
    // console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr.splice(1, 3));//[2, 3, 4]
    // console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr);//[1, 5, 6, 7, 8, 9, 10]


    // 插入:
    // 第一个参数是下标,第二个参数传入0,并且后面跟上要插入的元素,插入返回值为[],原数组会改变
    // console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr.splice(1, 0, 666,777,888)); // [] 从下标1开始插入666,777,888
    // console.log('\😂👨🏾‍❤️‍👨🏼==>: ',arr); //  [1, 666, 777, 888, 2, 3, 4, 5, 6, 7, 8, 9, 10]


    // 替换:
    // 第一个参数是下标,第二个参数是要替换的个数,
    console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr.splice(1, 3, 666, 777, 888)); // [2, 3, 4]
    console.log('\😂👨🏾‍❤️‍👨🏼==>: ', arr); //  [1, 666, 777, 888, 5, 6, 7, 8, 9, 10]
</script>

11.1 方法用于字符串的截取 

  • 如果是0或正整数,则代表字符串截取的起始下标

  • 如果是负数,则代表从倒数第几个字符开始截取

        var str="abcdefghijklmn";
         var res=str.substr(2,5);
         结果为res:"cdefg"
         
         var str1="abcdefghijklmn";
         var res1=str1.substr(-5,2);
         结果为res1:"jk"
  • 如果是0或正整数:字符串截取的起始下标,默认截取至字符串结尾
  • 如果是负数:则从倒数第几个字符开始截取,默认截取至字符串结尾

        var str="abcdefghijklmn";
         var res=str.substr(2);
         结果为res:"cdefghijklmn"
   
        var str1="abcdefghijklmn";
        var res1=str1.substr(-2);
         结果为res1:"mn"

12 、 arr.filter 过滤数组 要用return返回出来

 let arr10 = [1, 2, 4, 5, 6, 7, 8, 9]
    let arr11 = arr10.filter(item => {
        return item > 5
    });
    console.log(arr11); // 6 7 8 9 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_16,color_FFFFFF,t_70,g_se,x_16

13 、forEach() 数组遍历

  • forEach() 数组遍历 可以传三个参 item index array (每一项,下标,原数组) 
 let arr12 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    arr12.forEach((item, index, array) => {
         console.log(item); //每一项
       
          console.log(index); //0 1 2 3 4 5 6 7 8  下标

        console.log(array); //9个数组,每一数组有1 2 3 4 5 6 7 8 9

    })

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

14  、set 去重

var arr14 = [1, 2, 1, 2, 3];
    console.log(new Set(arr14)); // 1 2 3

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 15、  将数组中的字符串拿出来 取出来一种类型

  • 数组中多种类型,将某一类取出来
  let arr15 = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
    let newArr1 = [];
    for (i = 0; i < arr15.length; i++) {
        // 不是必要循环的内容不要放在for里 定义的新数组不要放在for循环里
        //  var  newArr1 = []; 错误 定义 
        if (typeof arr15[i] == "string") {
            newArr1.push(arr15[i])
        }
    };
    console.log(newArr1); // 'a' 'b' 'c'

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

16、 去空

  let arr16 = [1, 2, , , 3];
    let newArr2 = [];
    for (i = 0; i < arr16.length; i++) {
        //空就是undefined 所以将不是空的拿出来,逆向思维
        if (typeof arr16[i] != "undefined") {
            newArr2.push(arr16[i]) //不等于空追加到新数组
        }
    };
    console.log(arr16); //[1, 2, empty × 2, 3]
    console.log(newArr2); // 1 2 3

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 17、xx.concat(n,n) 合并数组

    var arr1 = [1, 2, 3];
    var arr2 = ["a", "b", "c"];
    var arr3 = ["A", "B", "C"];
    var rel = arr1.concat(arr2, arr3);
    console.log(arr1); //原数组
    console.log(rel); //新数组

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 18 、数组转字符串 (默认",")

  •  语法:数组名.join(“要拼接的符号”)  
   var list = ["a", "b", "c", "d"]; // "a-b-c-d"
    var result = list.join("-");     //"a-b-c-d"
    var result1 = list.join("/");     //"a/b/c/d"
    var result2 = list.join("");      //"abcd"
    var result3 = list.join();        //  a,b,c,d 默认不写就是逗号
    console.log(result,result1 ,result2 ,result3 );

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 20 、arr.toString() 强制转字符串

 var list = ["a", "b", "c", "d"];
    var rel = list.toString();
    console.log(rel);   // a,b,c,d   (字符串类型)

21 、valueOf(); 返回数组的原始值(一般情况下其实就是数组自身)

   var list = [1, 2, 3, 4];
    var rel = list.valueOf();
    console.log(list); // [1, 2, 3, 4]
    console.log(rel); // [1, 2, 3, 4]

22 、arr.indexOf(); 

  • 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1  
 var list = [1, 2, 3, 4];
    var index = list.indexOf(4); //3
    var index = list.indexOf("4"); //-1
    console.log(index);

23 、arr.map() 

  • map 的速度大于forEach。
  • map会返回一个新的数组,不会改变原来的数组,forEach不会返回新数组,会改变原数组
    var list = [32, 93, 77, 53, 38, 87];
    var res = list.map(function (item, index, array) {
      return item + 10;
    });
    console.log("原数组", list);
    console.log("新数组", res);

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

24 arr.find();

  • 返回满足条件的第一个元素,不存在则返回undefined参数 
 var list = [505, 686, 77, 48, 99, 100];
    var index = list.find(function(item, index, array) {
        console.log(item, index, array);
        return item > 800;
    });
    console.log(index); //undefined   找到返回元素,找不到返回undefined

25 、arr.fill 数组填充

  • 语法:arr.fill('要填充的值',从下标哪里开始,到下标那里结束)
  • 特点:包头不包尾,下标开始,下标结束这两个值相同数组不会有变化
  •  结束下标长度超出数组长度按照最大数组长度填充, 
   let v = ["1", "2", "3"];
    let a = v.fill("填充的值", 1, 1);
    console.log(a); // ['1', '2', '3']后面两个值相同数组不会有变化,


    let v1 = ["a", "b", "c"];
    let a1 = v1.fill("填充的值", 2, 5);
    console.log(a1); // ['a', 'b', '填充的值']
    // 结束下标长度超出数组长度按照最大数组长度填充, 
    //例如这里填充结束下标是5, 数组长度不够用, 则按照数组最大长度填充



    let v2 = ["a", "b", "c", "d", "e"];
    let a2 = v2.fill("填充的值", 1, 2);
    console.log(a2); // ['a', '填充的值', 'c', 'd', 'e'] 包头不包尾

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

 26、数组扁平   arr.flat(num/Infinity);

  • 用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数据没有影响。
  • 注意 默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity

第一种: 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  var list = [1, 2, [3, 4, [5], 6, [7, 8, [66, 77]]]];
    var arr = list.flat(); // 默认拉平一次
    console.log("拉平一次", arr);

    var arr = list.flat(2); // 拉平2次
    console.log("拉平两次", arr);

    // 小括号里写几拉平几次,infinity全部拉平
    var arr = list.flat(Infinity); 
    console.log("全部拉平", arr);

第二种:

   var list = [1, 2, [3, 4, [5], 6, [7, 8, [66, 77]]]];
    // 第一步 toString()转为一维字符串
    var newList = list.toString();
    console.log(newList); // 1,2,3,4,5,6,7,8,66,77
    // 第二步 转为数组
    var arr = newList.split(",")
    console.log(arr); //['1', '2', '3', '4', '5', '6', '7', '8', '66', '77']
    // 第三步 用map循环将每一项转为数值型,
    list = arr.map(v => Number(v))
    console.log(list); // [1, 2, 3, 4, 5, 6, 7, 8, 66, 77]

    // 以上方法合写
    list = list.toString().split(',').map(v => Number(v))
    console.log(list); // [1, 2, 3, 4, 5, 6, 7, 8, 66, 77]

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

27 、求最大值最小值

  // 求最大值最小值 第一种:
    const array = [5, 4, 7, 8, 9, 2];

    let num = array.reduce((a, b) => a > b ? a : b);
    console.log('最大值:', num)   // 输出: 9

    let num1 = array.reduce((a, b) => a < b ? a : b);
    console.log('最小值:', num1)   // 输出: 2

   // 求最大值最小值 第二种:
    let sortArr = [5, 4, 7, 8, 9, 2];
    sortArr = sortArr.sort((a, b) => {
        return a - b
    })

    console.log(sortArr); // 2, 4, 5, 7, 8, 9]
    console.log('最大值:', sortArr[sortArr.length - 1]); // 9
    console.log('最小值:', sortArr[0]); // 2

28 、计算字符串每个字符出现次数

 let string = 'zzzkkl';
    const obj = {};
    for (let key of string) {
        // key 是键, obj[key]是value,因为这是字符串所以打印value是undefined
        // console.log(key); //key
        console.log(obj[key]); //value,没有value所以undefined
        obj[key] = obj[key] + 1 || 1;
    }
    console.log(obj) //{z: 3, k: 2, l: 1}

 29、出现次数最多的元素为

 let arr2 = [1, 1, 1, 2, 3, 4, 5];
    findMost(arr2);
    console.log(findMost(arr2));

    function findMost(arr2) {
        if (!arr2.length) return;
        if (arr2.length === 1) return 1;
        let res = {};
        let maxName, maxNum = 0
            // 遍历数组
        arr2.forEach((item) => {
            res[item] ? res[item] += 1 : res[item] = 1
            if (res[item] > maxNum) {
                maxName = item
                maxNum = res[item]
            }
        })
        return '出现次数最多的元素为:' + maxName + ', 出现次数为:' + maxNum;
    };

出现次数最多的元素为:1, 出现次数为:3 

30 、reduce 累加器方法

1、num就是后面的数字,一般都是从零累加,可以自定义

2、item,数组每一项

    let number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let result = number.reduce((num, item) => num += item, 0)
    console.log(result);//55

31 、将字符串变成真正的正则

    let str = '/^a-z/'
    console.log(str); //黑色 /^a-z/ 
    console.log(typeof str); //string


    let reg = new RegExp(str)
    console.log(reg); // 红色 /\/^a-z\//
    console.log(typeof reg); //Object typeof可以正确检测基本数据类型,检测对象和正则是Object
    console.log(Object.prototype.toString.call(reg)); // [object RegExp] 万能检测方法

32、replace

语法:str.replace(regexp|substr, newSubStr|function) 

JS 中 replace 和 replaceAll 的区别?

当 pattern 是字符串,有区别。

当 pattern 是字符串时,replace 只替换匹配到的第一个位置,replaceAll 会替换每一个匹配到的地方。代码如下

例 1 

var value = '123-234-234-234'
var pattern = '-'
console.log('replace: ' + value.replace(pattern, '/'))   
console.log('replaceAll: ' + value.replaceAll(pattern, '/'))

// 输出:
// replace: 123/234-234-234
// replaceAll: 123/234/234/234

例 2  

    let str = 'hello world'
    console.log(str.replace('l', 'L'))// 替换字符串中的字符,只替换第一个    
    console.log(str.replace('l', 'L', 'i'))// 忽略大小写
    console.log(str.replace(/l/g, 'L'))// 全局替换
    console.log(str.replace(/l/gi, 'L'))// 全局替换,忽略大小写
    console.log(str.replace(/l/gi, function (match) // 全局替换,忽略大小写,使用函数
    {
      return match.toUpperCase()
    }))

 当 pattern 都是正则表达式时,没有区别。

var value = '123-234-234-234'
var pattern = /-/g
console.log('replace: ' + value.replace(pattern, '/'))   
console.log('replaceAll: ' + value.replaceAll(pattern, '/'))

// 输出:
// replace: 123/234/234/234
// replaceAll: 123/234/234/234

 除此之外,两个函数的第二个参数都可以传入一个函数,用来自定义替换规则。

var value = '123-234-234-234'
var pattern = '-'
value.replace(pattern, (item, index) => {
	// item 替换元素,index 替换元素的下标
	console.log(item, index)
	return '/'
})

// 输出:
// - 3
// 123/234-234-234

数据类型检测看这里奥 没有js金刚钻 怎么,一步一步,一步斩获大厂offer_0.活在风浪里的博客-CSDN博客 

更新中。。。

2020/319 15:25

  • 33
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彩色之外

你的打赏是我创作的氮气加速动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值