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>

更多相关文章

  1. 字符串，数组api实例演示
  2. React类组件和函数组件
  3. 字符串和数组遍历
  4. 字符串和数组常用API
  5. 表单、iframe后台、元素样式来源优先级
  6. Android五大布局（二）——RelativeLayout、TableLayout 和AbsoulteL
  7. Android(安卓)适配器Adapter的学习
  8. android 字符串数组资源
  9. Android(安卓)常用代码集合

随机推荐

  1. android编译错误，Android requires compil
  2. 安卓开发38：安卓的滚动条相关属性
  3. RelativeLayout的16种特有属性
  4. Android中使用Universal-Image-Loader图
  5. Android 5.1系统禁止通知状态栏下拉
  6. Android SDK中国在线更新镜像服务器 解决
  7. App 权限一点知识
  8. Android Map开发基础知识学习笔记(转)
  9. Android AndroidManifest.xml文件的andro
  10. Android 搭建环境配置