JavaScript字符串、数组、对象方法总结

最新推荐文章于 2022-05-10 21:42:24 发布

weixin_30493401

最新推荐文章于 2022-05-10 21:42:24 发布

阅读量114

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/V587Chinese/p/11404916.html

版权

字符串方法

示例字符串：

const str = "hello,kitty,hello,vue ";

一、基本方法

charAt()       返回指定索引的字符
startsWith()   判断字符串是否以xxx开头，返回布尔值
endsWith()    判断字符串是否以xxx结尾，返回布尔值
padStart()     头部补全，返回新字符串
padEnd()       尾部补全，返回新字符串
repeat()        拷贝字符串，返回新字符串
toUpperCase()  大写转换，返回新字符串
toLowerCase()  小写转换，返回新字符串

用例：

charAt()
    console.log(str.charAt(1));   // h
trim()
    console.log(str.trim());  // hello,kitty,hello,vue
startsWith() / endsWith()
    console.log(str.startsWith("hello")); // true
padStart() / padEnd()
    str.padStart(number,string) 接收两个参数，第一个指定补全后的字符串长度，第二个可选，用来补全的字符串。默认补全空格
    console.log(str.padStart(5,"x")); // hello,kitty,hello,vue    原本的长度超过了5，所以补不全
    console.log(str.padStart(30,"x")); // xxxxxxxxhello,kitty,hello,vue  原本的长度少于30，缺多少补多少
    console.log(str.padStart(30));      //         hello,kitty,hello,vue
repeat() 
    str.repeat(number)接收一个参数，复制的份数
    console.log(str.repeat(2));     // hello,kitty,hello,vue hello,kitty,hello,vue 
toUpperCase() / toLowerCase()
    console.log(str.toUpperCase()); // HELLO,KITTY,HELLO,VUE

二、字符串匹配

indexOf()       返回字符串中指定文本首次出现的索引，不存在返回-1
lastIndexOf()   返回字符串中指定文本最后一次出现的索引.如果不存在返回-1
search()        字符串内搜索特定值，返回第一次出现的索引，如果没有返回-1。与indexOf()的区别是，可以使用正则表达式，
match()         字符串内检索指定的值，或找到一个或多个正则表达式的匹配。(通过字符串或正则表达式)。返回数组或null
includes()      【es6新增】判断字符串中是否包含指定文本，返回布尔值

示例：

indexOf() / lastIndexOf()
    indexOf(string,start) 为匹配的字符串，start为开始匹配的索引，默认为0
    console.log(str.indexOf("5"));  // -1
    console.log(str.indexOf("e"));  // 1
search()
    console.log(str.search("o"));  // 4
match()
    console.log(str.match("e"));   // ["e"] 属性有：length,index,input
    console.log(str.match(/ell/g)); // ["ell","ell"]
includes()
    console.log(str.includes("vue"));    // true
    console.log(str.includes("react"));  // false

三、字符串截取、分割：

substring()   根据索引截取字符串，返回新字符串
substr()      根据起始索引和长度截取。返回新字符串
slice()        根据索引截取，返回新字符串。与substring()不同的是，参数可以传入负值
trim()          去除首尾空格，返回新字符串
trimRight()   去除右侧空格，返回新字符串
trimLeft()     去除左侧空格，返回新字符串

用例：

substring()
    str.substring(start,end) 起始索引和结束索引。第一个参数必需，第二个非必需
    console.log(str.substring(1));    // ello,kitty,hello,vue 从索引1开始到结束
    console.log(str.substring(1,4));  // ell    从索引1到索引3的字符串
substr()
    str.substr(start,length) 传入一个开始索引和截取长度
    console.log(str.substr(1,10));    // ello,kitty  从索引1开始截取长度为10的字符串
slice()
    str.slice(start,end)    根据索引，与substring不同的是，可以传入负值。如果参数为负值，表示从字符串的结尾开始计数。这里需要注意，如果传入负值，也遵从start在坐，end在右的规则。示例如下
    console.log(str.slice(-7,-3));  // lo,v
    console.log(str.slice(-3,-7));  // 空

四、字符串分割、拼接

concat()   可拼接多个字符串，返回新的字符串
split()     将字符串分割成数组
join()      将数据转成字符串

用例：

let str1 = "abc",str2 = "def";
let arr = [1,2,3,4,5];
console.log(str.concat(str1,str2)); // hello,kitty,hello,vue abcdef
console.log(str.split(","));        // ["hello", "kitty", "hello", "vue "]
console.log(arr.join("-"));         // 1-2-3-4-5

五、字符串替换

replace() 根据字符串或正则表达式进行替换，返回新字符串

用例：

let  re = "/hello/g", re2 = "/hello/", re3 = "hello";
str.replace(re,"React");    // React,kitty,React,vue
str.replace(re2,"React");   // React,kitty,hello,vue
str.replace(re3,"React");   // React,kitty,hello,vue

数组方法

示例数组：

let arr = [1,2,3,4,5,6,7,8,9,10];

Array方法

Array.isArray()	    判断对象是否为数组。
Array.of()           生成新的数组
Array.from()        将类数组或可迭代对象转化成数组，返回新数组，浅拷贝。

用例：

Array.from()    
        什么是类数组？有些对象，看上去很像数组，但不是array类型，不具有array的内置方法。例如querySelectorAll获取的元素列表。（实现相同的效果也可用延展操作符完成）
        let dom = document.querySelectorAll("li");
        console.log(dom);
        console.log([...dom]);
        console.log(Array.from(dom));
        let a = Array.from(["a","b","c"]) 
        let b = Array.from([1,2,3],(x)=>{x+x}) // Array [2, 4, 6]
Array.of()
        Array.of(5)     // [5]
        Array.of(1,2,3) // [1,2,3]

元素的增删改（都会改变原数组）

增：
    push()	    向数组的末尾添加一个或更多元素，并返回新的长度。
    unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
删：
    pop()	    删除并返回数组的最后一个元素
    shift()    删除并返回数组的第一个元素

copyWithin()   将数组中某几个元素复制到某一位置(浅拷贝)，将原来被复制位置上的元素覆盖。该方法返回被改变的原数组。 
splice()	   可添加、删除、替换元素。
fill()              用一个固定值填充一个数组中指定范围内的元素

详细说明：

copyWithin()
    copyWithin(target,start,end) target是目标位置的索引，start是复制源的起始位置，end是结束位置。
    三个参数都可以是负数，如果是负数，从末尾开始计算。后两个参数可选，如果start被忽略，将从0开始复制，如果end被忽略，将一直复制到数组结尾。
        例如，将数组中第5个元素复制到第一个位置。将第5,6个元素复制到第1,2个位置。
        console.log(arr.copyWithin(0, 4, 5)); // [5, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        console.log(arr.copyWithin(0, 4, 6)); // [5, 6, 3, 4, 5, 6, 7, 8, 9, 10]

splice()
    splice(start,number,items...)   start为指定修改的开始位置,number为删除元素的个数,items数量不限表示要添加进数组的元素。该方法有返回值，不同的功能返回不同的内容。需要明确的是，此方法会改变原数组
    删除：
        list.splice(0, 1)   // 从下标为0开始,长度为1
        list.splice(0, 2)   // 从下标为0开始,长度为2
    替换：
        list.splice(0, 1, 4); // 从下标为0开始,长度为1的数组元素替换成4
        list.splice(0, 2, 4); // 从下标为0开始,长度为2的数组元素替换成4【两个元素被替换成一个元素】
    添加：
        list.splice(1, 0, 5)；       // 在下标为1处添加一项5
        list.splice(1, 0, 5, 4, 3);  // 在下标为1处依次添加5/4/3三个元素

fill()
    fill(val,start,end) 后两个参数可省略
    let array1 = [1, 2, 3, 4, 5];
    console.log(array1.fill('a', 2, 5)); // [1, 2, "a", "a", "a"]

查找元素（非遍历）

includes()      判断数组是否包含某个值，返回布尔值。
slice()	      根据索引从数组中返回选定的元素(浅拷贝)
indexOf()       返回某元素在数组中首次出现的位置，不存在返回-1
lastIndexOf()  返回最后一次出现的位置，不存在返回-1

用例：

slice()
    slice(start,end) 
    console.log(arr.slice(5,7)); // [6, 7]

数组遍历

传统for循环
forEach()   遍历数组，为所有元素调用一次回调函数。
map()       遍历数组，处理后返回一个新数组。如果回调函数内不返回，默认返回undefined数组
filter()      返回所有满足条件的元素，形成新数组。与map()的不同是，filter()只能返回元素，不能返回处理后的值。
find()       返回数组中满足条件的元素，只返回第一个。与filter()的不同是只返回第一个符合条件的元素。
findIndex() 返回数组中满足条件的元素的索引，只返回第一个。
some()      用于检测数组中的元素是否满足指定条件，只要有一个符合就返回true，结束循环。
every()     用于检测数组所有元素是否满足指定条件，一旦有一个不满足就返回false
reduce()    从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
reduceRight() 从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

说明：

forEach()
    forEach((item,index,array)=>{}) 遍历数组，无法通过item修改原数组。
map()
    map((item,index,array)=>{})     遍历数组，返回新数组，返回值由自己控制。
filter()
    filter((item,index,array)=>{})  与map不同，该方法的作用是筛选元素。因此返回的数组中的项只能是原数组中的元素该方法将回调函数的返回值视为true和false，视为true时返回该元素。
find()
    find(...)
    ...

数组拼接、转换

concat()	连接两个或更多的数组，并返回结果。不会改变原数组
join()	     把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
toString()	把数组转换为字符串，并返回结果。

数组的排序

sort()	   对数组的元素进行排序,返回排序后的数组
reverse()	颠倒数组中元素的顺序。

用例：

sort()
    默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
    let points = [40, 100, 1, 5, 25, 10];
    points.sort();     // [1, 10, 100, 25, 40, 5]
    因此，有时需要我们自定义排序条件。回调函数中a,b两个参数是用来比较的两个元素，需要返回正值、0或负值。返回正值，a会排到b之前，返回0不改变相对位置，返回负值b排到a之前。
    points.sort((a,b)=>{return a-b})); // [1, 5, 10, 25, 40, 100]
    points.sort((a, b)=》{return 0.5 - Math.random()}); // 随机排序

数组深拷贝

1.json序列化和反序列化

没错，这是个投机取巧的方法，简单粗暴，大部分基本类型都能都被有效拷贝。但也有一些弊端：像Maps，Sets，RegExps，Dates，ArrayBuffers和其他内置类型这样的东西以及undefined、函数在序列化时会丢失。

2.MessageChannel

通过构造函数MessageChannel()可以创建一个消息通道，实例化的对象会集成两个属性：port1和port2，这两个属性都是MessagePort对象。可以理解成电话两线的两端，都可以收发数据。

MessagePort

我们可以为其添加属性

let ms = new MessageChannel(); // 内含port1和port2
ms.port1.name = "Alex";
console.log(ms.port1);

可以看到，MessagePort还有两个属性onmessage和onmessageerror，他们都是接收到消息时的回调函数。
收发数据

port1.postMessage("发送数据");
port2.onmessage = (e) => {console.log("port2接收数据",e.data)}

回归正题，它除了可以用来通讯，还可以用作深拷贝，当然，拷贝函数对象的时候还是会报错。

3.loadsh，万全的深拷贝方案。

转载于:https://www.cnblogs.com/V587Chinese/p/11404916.html

weixin_30493401

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫