search

博客列表 >JavaScript 字符串常用方法和数组api

JavaScript 字符串常用方法和数组api

李玉峰
李玉峰原创
2022年04月10日 17:18:47311浏览

1.字符串方法

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>字符串常用api(简单的理解为函数或者方法)</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let str = "我是中国人";
  12.       console.log(str[0], str[1], str[2], str[3], str[4]);
  13.       //   索引取值范围：[0,4]  [0,str.length - 1]
  14.       //   字符串长度
  15.       console.log(str.length);
  16.       //   索引 -> 元素
  17.       console.log(str[3]);
  18.       //   函数：charAt(3)
  19.       console.log(str.charAt(3));
  21.       //   元素 -> 索引
  22.       console.log(str.indexOf("中"));
  23.       let str0 = "The full name of China is the People's Republic of China.";
  24.       //   search 还支持正则
  25.       console.log(str0.search("name"));
  26.       //   两种方法，indexOf() 与 search()，是相等的。
  27.       // 这两种方法是不相等的。区别在于：
  28.       // search() 方法无法设置第二个开始位置参数。
  29.       // indexOf() 方法无法设置更强大的搜索值（正则表达式）。
  31.       //   字符串的拼装
  32.       console.log(str.concat(",我们要爱自己的祖国"));
  33.       console.log(str + ",我们要爱自己的祖国");
  34.       console.log(`${str} ,我们要爱自己的祖国`);
  36.       //   字符串替换：replace("被替换的值", "替换新值")
  37.       console.log(str.replace("中国", "甘肃"));
  39.       //   字符串查询和取值
  40.       //   slice 取子串
  41.       //   执行结果：从0开始到索引2之前结束（不含索引2的值）
  42.       console.log(str.slice(0, 2));
  43.       //   substr:不知在哪结束，但是知道取多少个值
  44.       console.log(str.substr(2, 3));
  45.       //   从后往前取
  46.       console.log(str.substr(-3, 3));
  48.       //   split:字符串 转为  数组
  49.       let s = "1-2-3-4-5";
  50.       //   用”-“切割
  51.       console.log(s.split("-"));
  52.       // 用空字符’‘进行分割，分割后即可转为数组
  53.       console.log(str.split(""));
  54.       //   设置返回数组数量
  55.       console.log(str.split("", 4));
  57.       //   toLoweerCase:转为小写字母
  58.       //   toUpperCase:转为大写字母
  59.       let str1 = "SDFFRFRF";
  60.       console.log(str1.toLowerCase());
  61.       let str2 = "dggghH";
  62.       console.log(str2.toUpperCase());
  64.       //   加链接
  65.       let url = `<a href="https://www.baidu.com">${str}</a>`;
  66.       console.log(url);
  67.       document.body.insertAdjacentHTML("afterbegin", url);
  68.       //   以上代码可以用函数link一步简化
  69.       console.log("-----------------------");
  70.       document.body.insertAdjacentHTML("afterbegin", "<br />");
  71.       document.body.insertAdjacentHTML("afterbegin", str.link("https://www.baidu.com"));
  72.       //   字符串加粗
  73.       document.body.insertAdjacentHTML("afterbegin", "<br />");
  74.       console.log(str.bold());
  75.       document.body.insertAdjacentHTML("afterbegin", str.bold());
  76.     </script>
  77.   </body>
  78. </html>

2.数组api

2.1数组的创建和类数组转换

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组的创建和类数组转换</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //   字面量创建;
  12.       let cars = ["Saab", "Volvo", "BMW"];
  13.       console.log(cars);
  15.       //   Array.of
  16.       //   服务器返回数组:a
  17.       let a = [1, 2, 3, 4, 5];
  18.       console.log(Array.of(1, 2, 3, 4, 5));
  19.       //   console.log(Array.of(a));
  20.       console.log(Array.of(...a));
  22.       //   类数组
  23.       cars1 = {
  24.         0: "Saab",
  25.         1: "Volvo",
  26.         2: "BMW",
  27.         length: 3,
  28.       };
  29.       //   类数组是对象Object
  30.       console.log(cars1);
  31.       //   转为真正的数组：array.from
  32.       console.log(Array.from(cars1));
  33.     </script>
  34.   </body>
  35. </html>

2.2数组的增删(两端)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组的增删</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //   数组的增删
  12.       //   push, pop;
  13.       //   unshift, shift;
  14.       let arr = [];
  15.       console.log(arr);
  16.       //   push尾部添加，返回数组的元素数量
  17.       console.log(arr.push(10));
  18.       console.log(arr.push(20, 30));
  19.       console.log(arr);
  20.       //   pop尾部删除，返回值是被删除的元素
  21.       console.log(arr.pop());
  22.       console.log(arr.pop());
  23.       console.log(arr);
  25.       //   unshift:头部追加，返回数组的元素总数量
  26.       //   unshift(15, 20, 30)从数组尾部30执行添加
  27.       console.log(arr.unshift(30, 20, 15));
  28.       console.log(arr);
  29.       //   shift：头部删除，从右向左删除
  30.       //   返回被删除的元素
  31.       console.log(arr.shift());
  32.       console.log(arr.shift());
  33.       console.log(arr);
  34.       //   示例：push:尾部进入，shift:头部删除
  35.       console.log(arr.push("volvo", "bmw"));
  36.       console.log(arr);
  37.       console.log(arr.shift());
  38.       console.log(arr);
  39.       console.log(arr.shift());
  40.       console.log(arr);
  41.     </script>
  42.   </body>
  43. </html>

2.3遍历数组的方法

2.3.1.foreach没有返回值,map有返回值

2.3.2.every和some

  1.      every  与：都满足返回true  否则false;
  2.      some 或：满足一个返回true  否则false

2.3.3.filter,find,findIndex

filter:只返回为真的元素组成的数组
find:返回满足条件的第一个元素
findIndex:找到返回元素索引下标，找不到返回-1

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>遍历数组的方法</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //  1.foreach,Map
  12.       let arr = [1, 2, 3, 4, 5];
  13.       //   arr.forEach(function (当前元素的值, 值对应的索引, 数组本身) {
  14.       //       对数组中的每个元素逐个调用回调方式进行处理
  15.       //   });
  16.       let res = arr.forEach(function (item, index, arr) {
  17.         console.log(item, index, arr);
  18.         document.body.append(item);
  19.       });
  20.       //   箭头函数简化
  21.       res = arr.forEach((item, index, arr) => {
  22.         console.log(item, index, arr);
  23.         document.body.append(item);
  24.       });
  25.       //   foreach没有返回值,undefined
  26.       console.log(res);
  27.       //   map：如果想要返回值，使用map
  28.       res = arr.map((item, index, arr) => [item, index, arr]);
  29.       res = arr.map((item) => item);
  30.       console.log(res);
  31.       //   将每个元素成2返回，返回一个新数组
  32.       res = arr.map((item) => item * 2);
  33.       console.log(res);
  34.       //   2.every,some
  35.       //   every  与：都满足返回true  否则false
  36.       console.log("-------------------");
  37.       console.log(arr);
  38.       console.log(arr.every((item) => item >= 0));
  39.       console.log(arr.every((item) => item >= 3));
  40.       //   some 或：满足一个返回true  否则false
  41.       console.log(arr.some((item) => item >= 3));
  42.       console.log(arr.some((item) => item >= 6));
  43.       //   3.filter,find,findIndex
  44.       // filter:只返回为真的元素组成的数组
  45.       console.log(arr.filter((item) => item >= 2));
  46.       //   find:返回满足条件的第一个元素
  47.       console.log("--------");
  48.       console.log(arr.find((item) => item >= 2));
  49.       console.log("--------");
  50.       //   findIndex:
  51.       console.log(arr.findIndex((item) => item >= 5));
  52.       const array1 = [5, 12, 8, 130, 44];
  53.       const isLargeNumber = (element) => element > 8;
  54.       console.log(array1.findIndex(isLargeNumber));
  55.       // expected output: 1
  56.       console.log(array1.findIndex((item) => item >= 6));
  57.       console.log("--------");
  59.       //   4.reduce
  60.       //   reduce:归并
  61.       let acc = 0;
  62.       for (let i = 0; i < arr.length; i++) {
  63.         acc += arr[i];
  64.       }
  65.       console.log(acc);
  66.       //   arr.reduce(function(累加器，当前元素的值, 值对应的索引, 数组本身)){
  67.       //   }
  68.       res = arr.reduce(function (acc, cur, index, arr) {
  69.         console.log(`acc = ${acc},cur=${cur},index=${index},arr=${arr}`);
  70.         return acc + cur;
  71.         // 第二个值1500是初始值，不写默认0
  72.       }, 1500);
  73.       console.log(res);
  74.       //   简化代码：
  75.       res = arr.reduce((acc, cur) => acc + cur);
  76.       console.log(res);
  77.     </script>
  78.   </body>
  79. </html>

2.4.数组元素排序和增、删、更新操作

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>排序</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //sort
  12.       let arr = [1, 13, 5, 18, 9];
  13.       //   sort默认按字符串来排
  14.       console.log(arr.sort());
  15.       console.log(
  16.         arr.sort(function (a, b) {
  17.           return a - b;
  18.         })
  19.       );
  20.       //   倒序
  21.       console.log(
  22.         arr.sort(function (a, b) {
  23.           return b - a;
  24.         })
  25.       );
  26.       //   简化
  27.       console.log(arr.sort((a, b) => b - a));
  29.       //   join:Array -> String
  30.       arr = ["red", "green", "blue"];
  31.       console.log(arr.join());
  32.       console.log(arr.join("-"));
  33.       console.log(arr.join("--"));
  34.       //   split:字符串 转为  数组
  35.       let arr1 = arr.join(" - ");
  36.       console.log(arr1);
  37.       arr1 = arr1.split("-");
  38.       //   用”-“切割
  39.       console.log(arr1);
  41.       //   slice:取子元素，字符串也有一个slice
  42.       arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  43.       console.log(arr);
  44.       console.log(arr.slice(3, 4));
  45.       console.log(arr.slice(3));
  46.       console.log(arr.slice(-7, -6));
  48.       //   splce:删除，新增，替换
  49.       //   默认删除,返回被删除的元素
  50.       console.log(arr.splice(1, 2));
  51.       console.log(arr);
  53.       //   更新操作
  54.       //   从下表1开始，将2个元素4和5用a和b替换
  55.       console.log(arr.splice(1, 2, "a", "b"));
  56.       console.log(arr);
  58.       //   新增
  59.       console.log(arr.splice(1, 0, "red", "bmw"));
  60.       console.log(arr);
  62.       //   反转
  63.     </script>
  64.   </body>
  65. </html>
上一条：选项卡和购物车实例下一条：classlist对象和表单非空验证
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议