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

字符串方法

示例字符串:

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为开始匹配的索引,默认为0console.log(str.indexOf("5"));  // -1console.log(str.indexOf("e"));  // 1
search()console.log(str.search("o"));  // 4
match()console.log(str.match("e"));   // ["e"] 属性有:length,index,inputconsole.log(str.match(/ell/g)); // ["ell","ell"]
includes()console.log(str.includes("vue"));    // trueconsole.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,vconsole.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开始,长度为1list.splice(0, 2)   // 从下标为0开始,长度为2替换:list.splice(0, 1, 4); // 从下标为0开始,长度为1的数组元素替换成4list.splice(0, 2, 4); // 从下标为0开始,长度为2的数组元素替换成4【两个元素被替换成一个元素】添加:list.splice(1, 0, 5);       // 在下标为1处添加一项5list.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云盘同步本地文件和QQ聊天记录

腾讯微云同步本地QQ聊天记录和QQ接受的文件;手机版本可同步通讯录和手机相册和视频。 360云盘同步本地文件和定时自动备份本地文件; 金山快盘可以同步通讯录、短信、通话记录和手机本地文件;(快盘仅适合同步手机信息&#xff0c…

Java生鲜电商平台-SpringCloud微服务架构高并发参数优化实战

Java生鲜电商平台-SpringCloud微服务架构高并发参数优化实战 一、写在前面 在Java生鲜电商平台平台中相信不少朋友都在自己公司使用Spring Cloud框架来构建微服务架构,毕竟现在这是非常火的一门技术。 如果只是用户量很少的传统IT系统,使用Spring Cloud可…

Objective-C Runtime的数据类型

转自:http://www.cnblogs.com/whyandinside/archive/2013/02/26/2933552.html Class Objective-C是支持反射的,先来了解一下其如何表达一个类。在Objective-C的Runtime中有个类型是Class(只在Runtime环境中使用),用来表…

CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片。这些效果 CSS 属性也可以完成。 方法一、利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片&#xff…

HTTP基本认证

HTTP质询/响应认证框架 HTTP提供了一个原生的质询/响应框架,简化了对用户的认证过程。HTTP的认证模型如图所示. Web服务器接收到一条HTTP请求报文时,服务器没有直接响应请求的资源,而是以一个“认证质询”进行响应,要求用户提供一…

单行、多行文本超出显示省略号

前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。单行文本省略 .ellipsis-line {border: 1px solid #f70505;padding: 8px;width: 400px;overflow:…

数据归一化matlab及python 实现

更多细节请查看 https://www.zhihu.com/question/20455227 归一化的目的简而言之,是使得没有可比性的数据变得具有可比性,同时又保持相比较的两个数据之间的相对关系。 归一化首先在维数非常多的时候,可以防止某一维或某几维对数据影响过大…

机器学习综述

机器学习综述 摘要 本文主要参考中科院自动化研究所复杂系统与智能科学实验室王珏研究员《关于机器学习的讨论》,讨论机器学习的描述,理论基础,发展历史以及研究现状。 关键字:机器学习,科学依据,发展脉络 0引言 20世纪…

递归锁、信号量、GIL锁、基于多线程的socket通信和进程池线程池

递归锁、信号量、GIL锁、基于多线程的socket通信和进程池线程池 递归锁 死锁现象:是指两个或两个以上的进程和线程因抢夺计算机资源而产生的一种互相等待的现象 from threading import Thread from threading import Lock import time lock_A Lock() lock_B Lock(…

10 种机器学习算法的要点(附 Python 和 R 代码)

前言 谷歌董事长施密特曾说过:虽然谷歌的无人驾驶汽车和机器人受到了许多媒体关注,但是这家公司真正的未来在于机器学习,一种让计算机更聪明、更个性化的技术。 也许我们生活在人类历史上最关键的时期:从使用大型计算机&#xff0…

阻塞、非阻塞、同步与异步

阻塞、非阻塞、同步与异步 阻塞与非阻塞 进程运行的三种状态:运行、就绪、阻塞 阻塞和非阻塞: ​ 阻塞:程序运行时,遇到了IO,程序挂起,cpu被切走. ​ 非阻塞: 程序没有遇到IO,程序遇到IO但是我通过某种手段,让cpu强行运行我的程序…

8大策略让你对抗机器学习数据集里的不均衡数据

本文转自:http://www.36dsj.com/archives/35137 http://blog.csdn.net/heyongluoyao8/article/details/49408131 英文版本:http://machinelearningmastery.com/tactics-to-combat-imbalanced-classes-in-your-machine-learning-dataset/ 你是不是也经历…

线程queue、事件event及协程

线程queue、事件event及协程 线程queue 多线程抢占资源,让其保持串行的两种方式: ​ 1、互斥锁 ​ 2、队列 线程队列分为以下三种: 1、Queue(先进先出) import queueq queue.Queue(3) q.put(1) q.put(2) q.put(3) # q…

不平衡数据下的机器学习方法简介

本文转自:http://baogege.info/2015/11/16/learning-from-imbalanced-data/ 引言 不管是在学术界还是工业界,不平衡学习已经吸引了越来越多的关注,不平衡数据的场景也出现在互联网应用的方方面面,如搜索引擎的点击预测&#xff08…

CSS预处理——LESS

LESS是什么? less是一门CSS预处理语言。由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上,引入了变量、Mixin混入、运算以及函数等功能,大大简化了CSS的编写&a…

不均衡数据的处理方法

关于不均衡数据的处理方法,主要有以下几个方面: 1. 采样的方法 1.1 过采样,采集类标少的样本,达到平衡样本的目的。 方法一,简单的复制类标少的样本 方法二,生成人工样本(SMOTE方法&#xff09…

.mat,.txt,.csv 数据转换为weka中的arff格式及matlab和Weka之间相互转换格式

在RUSBoost和SMOTEBoost中提供了csv转换为arff格式的方法,详见CSVtoARFF.m http://www.mathworks.com/matlabcentral/fileexchange/37315-rusboost http://cn.mathworks.com/matlabcentral/fileexchange/37311-smoteboost function r CSVtoARFF (data, relation…

IT人不仅要提升挣钱能力,更要拓展挣钱途径

前几天我上班路上,和小区门口开车的师傅闲聊,发现他们虽然学历不高,但挣钱的途径不少,比如固定接送多位客户,然后能通过朋友圈拓展新客户,而且通过客户口口相传,也能不断拉到生意,算…

Class Imbalance Problem

本文转自:http://www.chioka.in/class-imbalance-problem/#comment-202282 What is the Class Imbalance Problem? It is the problem in machine learning where the total number of a class of data (positive) is far less than the total number of another c…

matlab中的类标转换程序

matlab中的类标转换程序 原始类标为Y,新类标为Y_new %进行排序,针对类标数目orig_labels sort(unique(Y)); Y_new Y;new_labels 1:length(orig_labels);for i1:length(orig_labels)Y_new(find(Yorig_labels(i)))Inf;Y_new(isinf(Y_new))new_labels(…