字符串和数组常用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

console.log(str.link('https://php.cn'));
document.body.insertAdjacentHTML('afterbegin', str.link('https://php.cn'));

blold." class="reference-link">把字符串显示为粗体:blold.

console.log(str.bold());
document.body.insertAdjacentHTML('afterbegin', str.bold());

数组常用 API

数组可以组成的成员" class="reference-link">数组可以组成的成员

let arr = [
    //1.数字
    1,
    2,
    //2.字符串
    'a',
    'b',
    //3.布尔值
    true,
    //4.数组还可以再放数组进来
    [1, 2, 3],
    //5.数组也可以放对象进来
    {
        x: 1,
        y: 2,
    },
    //6.数组还支持放函数进来
    function () {},
];
console.log(arr);

Array.of(),创建数组,服务器返回数组" class="reference-link">Array.of(),创建数组,服务器返回数组

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

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

let a = [1, 2, 3, 4, 5];
console.log(Array.of(1, 2, 3, 4, 5));
console.log(Array.of(...a));

类数组" class="reference-link">类数组

const arr1 = {
    0: 'red',
    1: 'blue',
    2: 'green',
    length: 3,
};
// 类数组本质上是一个对象
console.log(arr1);
// 转为真正的数组
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')

相关推荐