ASCII码 ASCII码

字符串和数组常用API

发布于：2022-04-10 13:13:49  栏目：技术文档

字符串常用 API

length" class="reference-link">长度:length

获取字符串的长度console.log(str.length)

元素" class="reference-link">索引->元素

通过索引获取字符串元素console.log(str[3]);

索引 indexOf search" class="reference-link">元素->索引 indexOf search

通过元素内容查询元素的索引,两种方式

  • console.log(str.indexOf('网'));
  • console.log(str.search('网'));
concat" class="reference-link">字符串拼装:concat

拼接字符串有三种方式

  • console.log(str.concat('<a>', 'php.cn', '</a>'));

  • console.log(str + 'php.cn');

  • console.log(ˋ${str}php.cnˋ);

replace" class="reference-link">替换:replace

把php 中文网的中文网用.cn替换,最终成:php.cn<br />

console.log(str.replace('中文网', '.cn'));

slice忽略结束索引对应的值" class="reference-link">截取子串:slice忽略结束索引对应的值

  • slice

    • 参数 1:起始位置
    • 参数 2(可选):结束位置,若是结束位置不填写,则默认从起始位置开始到原字符串结尾

console.log(str.slice(0, 3));

substr不知到哪结束,但是知道取多少" class="reference-link">截取子串:substr不知到哪结束,但是知道取多少

  • substr

    • 参数 1:起始位置
    • 参数 2(可选):截取数量,若是截取数量不填写,则默认从起始位置开始到原字符串结尾

console.log(str.substr(0, 3));

split,返回值是数组(Array)" class="reference-link">分割字符串:split,返回值是数组(Array)

  • split

    • 参数 1:用作分割的字符串或正则表达式
    • 参数 2(可选):该参数可指定返回的数组的最大长度,不填则默认返回全部
字符串转换为大写或小写

  • toLowerCase

    • 把字符串转换为小写
    • console.log(str.toLowerCase());

  • toUpperCase

    • 把字符串转换成大写
    • console.log(str.toUpperCase());
link" class="reference-link">把字符串显示为超链接:link
  1. console.log(str.link('https://php.cn'));
  2. document.body.insertAdjacentHTML('afterbegin', str.link('https://php.cn'));
blold." class="reference-link">把字符串显示为粗体:blold.
  1. console.log(str.bold());
  2. document.body.insertAdjacentHTML('afterbegin', str.bold());

数组常用 API

数组可以组成的成员" class="reference-link">数组可以组成的成员
  1. let arr = [
  2.     //1.数字
  3.     1,
  4.     2,
  5.     //2.字符串
  6.     'a',
  7.     'b',
  8.     //3.布尔值
  9.     true,
  10.     //4.数组还可以再放数组进来
  11.     [1, 2, 3],
  12.     //5.数组也可以放对象进来
  13.     {
  14.         x: 1,
  15.         y: 2,
  16.     },
  17.     //6.数组还支持放函数进来
  18.     function () {},
  19. ];
  20. console.log(arr);
Array.of(),创建数组,服务器返回数组" class="reference-link">Array.of(),创建数组,服务器返回数组

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为 7 的空数组

  1. let a = [1, 2, 3, 4, 5];
  2. console.log(Array.of(1, 2, 3, 4, 5));
  3. console.log(Array.of(...a));
类数组" class="reference-link">类数组
  1. const arr1 = {
  2.     0: 'red',
  3.     1: 'blue',
  4.     2: 'green',
  5.     length: 3,
  6. };
  7. // 类数组本质上是一个对象
  8. console.log(arr1);
  9. // 转为真正的数组
  10. console.log(Array.from(arr1));
数组的增删仅限于数组二端的操作" class="reference-link">数组的增删仅限于数组二端的操作

  • push:数组尾部追加

    • 参数:要添加到数组的元素,可以是 1 个也可以是多个
    • 返回值:数组新长度
    • 多个示例:console.log(arr.push(20, 30));

  • pop:数组尾部删除

    • 参数:无
    • 返回值是删除的元素
    • console.log(arr.pop());

  • unshift:数组头部追加

    • 参数:要添加到数组的元素,可以是 1 个也可以是多个
    • 返回值:数组新长度
    • 多个示例:console.log(arr.unshift(30, 20));

  • shift:数组头部删除

    • 参数:无
    • 返回值是删除的元素
    • console.log(arr.shift());
数组遍历" class="reference-link">数组遍历

let arr = [1, 2, 3, 4, 5];

  • 遍历数组:forEach,map

    • forEach,没有返回值,其他和 map 一样

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.forEach(function(元素的值,值对应的索引,数组本身) {})
      • let res = arr.forEach((item, index, arr) => console.log(item, index, arr));

    • map,有返回值.其他和 forEach 一样

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.map(function(元素的值,值对应的索引,数组本身) {})
      • 返回值:返回函数处理过的新数组
      • res = arr.map((item, index, arr) => [item, index, arr]);

  • every,some:数组成员条件判断,返回布尔值

    • every: 数组成员全部满足条件,则返回 true , 否则 false

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.every(function(元素的值,值对应的索引,数组本身) {})
      • 返回值:布尔值
      • console.log(arr.every(item => item >= 0));

    • some:数组成员只有 1 个满足条件,则返回 true , 都不满足则 false

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.some(function(元素的值,值对应的索引,数组本身) {})
      • 返回值:布尔值
      • console.log(arr.some(item => item >= 6));

  • filter,find,findIndex:数组条件判断,返回符合条件的数组,或者单个值

    • filter:只返回为真的元素组成的数组

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.filter(function(元素的值,值对应的索引,数组本身) {})
      • 返回值:返回符合条件的所有元素的数组,若无符合条件元素则返回空数组
      • console.log(arr.filter(item => item >= 3));

    • find,返回满足条件的第一个元素值

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.find(function(元素的值,值对应的索引,数组本身) {})
      • 返回值:返回符合条件的第一个数组元素值,若无符合条件则返回undefined
      • console.log(arr.find(item => item >= 3));

    • findIndex,返回满足条件的第一个元素的索引

      • 参数 1:函数，数组中的每个元素都会执行这个函数
      • arr.findIndex(function(元素的值,值对应的索引,数组本身) {})
      • 返回值:返回符合条件的第一个数组元素索引,若无符合条件则返回-1
      • console.log(arr.findIndex(item => item >= 3));

  • reduce:归并

    • 参数 1:函数，数组中的每个元素都会执行这个函数,若有起始值则从起始值开始累加
    • arr.reduce(function(累加器,元素的值,值对应的索引,数组本身) {},起始值)
    • 返回值:返回符合条件的第一个数组元素索引,若无符合条件则返回-1
    • res = arr.reduce((acc, item) => acc + item);
数组操作" class="reference-link">数组操作

  • sort:排序

    • 默认按字符排序,console.log(arr.sort());
    • 升序:console.log(arr.sort((a, b) => a - b));
    • 降序:console.log(arr.sort((a, b) => b - a));

  • join:把数组中的所有元素转换一个字符串

    • 默认:把数组按照,来分割组成字符串,console.log(arr.join());
    • 可自定义分割字符,console.log(arr.join('--'));

  • slice:取子元素,slice(起始元素索引, 结束元素索引)

    • 参数 1:起始元素索引,必填
    • 参数 2(选填):结束元素索引,若不填则从起始元素开始取到数组结尾
    • console.log(arr.slice(2, 5));

  • splce:删除,新增,替换,默认删除,返回被删除的元素

    • 删除:arr.splice(起始索引, 删除个数)

      • 返回值:返回所有删除的元素组成的数组

    • 更新或替换:arr.splice(起始索引, 删除格式, 要替换的元素(可以是多个))

      • 可以是删除多个或单个元素,替换进去单个或多个元素
      • console.log(arr.splice(1, 3, 'a', 'b'));
      • console.log(arr.splice(1, 3, ...c));
      • 返回值:返回所有删除的元素组成的数组

    • 新增:因是增加不删除,所以第 2 个参数设置 0,添加同样可以多个或单个

      • arr.splice(1, 0, 'red', 'green')
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行