本文全面解析JavaScript中数组和字符串的各种操作方法，包括数组的增删查改、排序、过滤、查找，以及字符串的拼接、转换、分割、提取等实用技巧。深入浅出，适合各水平开发者学习。
1、push()
push（）：向数组的末尾添加一个或多个元素，并返回新的长度
用法
arrayObject.push(newelement1,newelement2,…,newelementX)
| 参数 | 描述 |
|---|---|
| newelement1 | 必需。要添加到数组的第一个元素。 |
| newelement2 | 可选。要添加到数组的第二个元素。 |
| newelementX | 可选。可添加多个元素。 |
2、pop()
pop（）：删除并返回数组的最后一个元素
用法
arrayObject.pop()
3、shift()
shift（）：从数组中删除第一个元素，并返回该元素的值
用法
arrayObject.shift()
4、unshift()
unshift（）：向数组的开头添加一个或更多元素，并返回新的长度
用法
arrayObject.unshift(newelement1,newelement2,…,newelementX)
| 参数 | 描述 |
|---|---|
| newelement1 | 必需。要添加到数组的第一个元素。 |
| newelement2 | 可选。要添加到数组的第二个元素。 |
| newelementX | 可选。可添加多个元素。 |
4、splice()
splice（）：向/从数组中添加/删除项目，然后返回被删除的项目。
用法
arrayObject.splice（index,howmany,item1,…,itemX)
| 参数 | 描述 |
|---|---|
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
| item1, …, itemX | 可选。向数组添加的新项目。 |
5、sort()
sort（）：对数组的元素进行排序。
用法
arrayObject.sort(sortby)
| 参数 | 描述 |
|---|---|
| sortby | 可选。规定排序顺序。必须是函数。 |
说明
function sortby(a, b)
{
return b - a //倒序
return a - b //顺序
}
6、reverse()
reverse（）：用于颠倒数组中元素的顺序。
用法
arrayObject.reverse()
7、filter()
filter（）：向/从数组中添加/删除项目，然后返回被删除的项目。
用法
filter（function(){}）： 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
8、concat()
concat（）： 方法用于连接两个或多个数组。
用法
arrayObject.concat(arrayX,arrayX,…,arrayX)
| 参数 | 描述 |
|---|---|
| arrayX | 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。 |
9、slice()
slice（start,end）：从已有的数组中返回选定的元素。
用法
arrayObject.slice(start,end)
| 参数 | 描述 |
|---|---|
| start | 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 |
| end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 |
10、find()
let jsonArr = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'lisi',age:30}
]
//找到 age 为 30的值
jsonArr.find(item=>item.age===30) //{id: "1", name: "lisi", age: 30}
//找到 age为 301的值
jsonArr.find(item=>item.age===301) //undefined
11、lastfind()
自定义
function lastFind(jsonArr,callback){
let _jsonArr = jsonArr.reverse()
let obj = _jsonArr.find(callback)
return obj
}
let jsonArr = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'wangermazi',age:30},
{id:'4',name:'xiaoming',age:18},
{id:'5',name:'wuming',age:30},
]
lastFind(jsonArr,item=>item.age==30) // {id: "5", name: "wuming", age: 30}
lastFind(jsonArr,item=>item.age==18) // {id: "4", name: "xiaoming", age: 18}
lastFind(jsonArr,item=>item.age==188)// undefined
12、filter
let jsonArr = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'lisi',age:30}
]
//找到 age 为 30的所有值
jsonArr.filter(item=>item.age===30) //[{id:'1',name:'lisi',age:30},{id:'3',name:'lisi',age:30}]
//找到 age为 301的所有值
jsonArr.filter(item=>item.age===301) //[]
13、every
let arr = [1,2,3,4,5]
//检测数组的每一项是否都大于0
arr.every(item=>item>0) //true
//检测数组的每一项是否都大于1
arr.every(item=>item>1) //false
//用户列表
let userList = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'wangermazi',age:30},
{id:'4',name:'xiaoming',age:18},
{id:'5',name:'wuming',age:30},
]
//未成年检测
userList.every(item=>item.age>=18)//true
14、includes
let arr = [1,2,3,4,5]
//检测数组中是否包含 4
arr.includes(4) //true
arr.includes(6) //false
15、some
针对json
//用户列表
let userList = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'wangermazi',age:30},
{id:'4',name:'xiaoming',age:18},
{id:'5',name:'wuming',age:30},
]
//用户列表中是否包含年龄20岁的
userList.some(item=>item.age===20) // true
//用户列表中是否包含年龄201岁的
userList.some(item=>item.age===201)// false
16、reduce
let arr = [1,2,3,4,5]
arr.reduce((pre,cur)=>pre+=cur,'') //'12345'
17、generateArr
自定义
//动态生成 一个长度 不定 值 不定的 数组
function generateArr(len,val){
return Array(len).fill(val)
}
//需求1：生成长度为5的值都是[]的数组
generateArr(5,[])//[[],[],[],[],[]]
//需求2：生成长度为3的值都是{}的数组
generateArr(3,{})//[{},{},{}]
//需求3：生成长度为5的值都是0的数组
generateArr(5,0)//[0,0,0,0,0]
13、索引值查询
1）findIndex
let jsonArr = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'lisi',age:30}
]
// 查询age为30的第一个值的索引
jsonArr.findIndex(item=>item.age===30)//0
2）indexOf
let arr = [1,2,1,4]
arr.indexOf(1)//0
3）lastFindIndex
function lastFindIndex(jsonArr,callback){
let _jsonArr = jsonArr.reverse()
let index = _jsonArr.findIndex(callback)
return index>-1?_jsonArr.length-index-1:-1
}
let jsonArr = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'wangermazi',age:30},
{id:'4',name:'xiaoming',age:18},
{id:'5',name:'wuming',age:30},
]
lastFindIndex(jsonArr,item=>item.age==18) //3
lastFindIndex(jsonArr,item=>item.age==30) //4
4）lastIndexOf
let arr = [1,2,1,4]
arr.lastIndexOf(1)//2
5）allFindIndex
function allFindIndex(jsonArr,callback){
let res= []
for(let i=0;i<jsonArr.length;i++){
if(callback(jsonArr[i])){
res.push(i)
}
}
return res
}
let jsonArr = [
{id:'1',name:'lisi',age:30},
{id:'2',name:'zhangsan',age:20},
{id:'3',name:'wangermazi',age:30},
{id:'4',name:'xiaoming',age:18},
{id:'5',name:'wuming',age:30},
]
//从jsonArr数组中 找到符合给定条件的值的所有索引
allFindIndex(jsonArr,item=>item.age==30)// [0, 2, 4]
allFindIndex(jsonArr,item=>item.age==18)// [3]
allFindIndex(jsonArr,item=>item.age==20)// [1]
allFindIndex(jsonArr,item=>item.age==201)// []
数组填充fill
const rankList = [{}, {}]
[...rankList, ...new Array(3).fill({})].slice(0,3)
// output: [{}, {}, {}]
二、对字符串操作的常用方法
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、charAt() 获取字符串中的某一个字符
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #
6、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
7、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
8、toUpperCase() 字符串转大写
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF
9、toLowerCase() 字符串转小写
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef
10、字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
去除字符串内所有的空格：str = str.replace(/\s*/g,"");
去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");
去除字符串内左侧的空格：str = str.replace(/^\s*/,"");
去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");
// 较少使用的方法
11、charAt(x)
charAt(x)返回字符串中x位置的字符，下标从 0 开始。
//charAt(x)
var myString = 'jQuery FTW!!!';
console.log(myString.charAt(7));
//output: F
12、charCodeAt(x)
charCodeAt(x)返回字符串中x位置处字符的unicode值。
//charAt(position)
var message="jquery4u"
//alert "113"
alert(message.charCodeAt(1)
13、fromCharcode(c1,c2)
fromCharcode(c1,c2)转换一组Unicode值转换为字符。
//fromCharCode(c1, c2,...)
console.log(String.fromCharCode(97,98,99,120,121,122))
//output: abcxyz
console.log(String.fromCharCode(72,69,76,76,79))
//output: HELLO
14、indexOf(substr, [start])
indexOf方法搜索并(如果找到)返回字符串中搜索到的字符或子字符串的索引。如果没有找到，则返回-1。Start是一个可选参数，指定字符串中开始搜索的位置，默认值为0。
//indexOf(char/substring)
var sentence="Hi, my name is Sam!"
if (sentence.indexOf("Sam")!=-1)
alert("Sam is in there!")
15、lastIndexOf(substr, [start])
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引, 如果未找到，则返回-1。“Start”是一个可选参数，指定字符串中开始搜索的位置, 默认值为string.length-1。
//lastIndexOf(substr, [start])
var myString = 'javascript rox';
console.log(myString.lastIndexOf('r'));
//output: 11
16、match(regexp)
根据正则表达式在字符串中搜索匹配项。如果没有找到匹配项，则返回一个信息数组或null。
//match(regexp) //select integers only
var intRegex = /[0-9 -()+]+$/;
var myNumber = '999';
var myInt = myNumber.match(intRegex);
console.log(isInt);
//output: 999
var myString = '999 JS Coders';
var myInt = myString.match(intRegex);
console.log(isInt);
//output: null
17、replace(regexp/substr, replacetext)
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
//replace(substr, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(/JavaScript/i, "jQuery"));
//output: 999 jQuery Coders
//replace(regexp, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(new RegExp( "999", "gi" ), "The"));
//output: The JavaScript Coders
18、search(regexp)
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，如果找到，返回与 regexp 相匹配的子串的起始位置，否则返回 -1。
//search(regexp)
var intRegex = /[0-9 -()+]+$/;
var myNumber = '999';
var isInt = myNumber.search(intRegex);
console.log(isInt);
//output: 0
19.slice(start, [end])
slice() 方法可提取字符串的某个部分，返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
//slice(start, end)
var text="excellent"
text.slice(0,4) //returns "exce"
text.slice(2,4) //returns "ce"
11.split(delimiter, [limit])
split() 方法用于把一个字符串分割成字符串数组，返回一个字符串数组返回的数组中的字串不包括 delimiter自身。可选的“limit”是一个整数，允许各位指定要返回的最大数组的元素个数。
20.substr(start, [length])
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串，包含从 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到该字符串的结尾的字符。
//substring(from, to)
var text="excellent"
text.substring(0,4) //returns "exce"
text.substring(2,4) //returns "ce"
13.substring(from, [to])
substring() 方法用于提取字符串中介于两个指定下标之间的字符，返回的子串包括 start 处的字符，但不包括 stop 处的字符，to 可选，如果省略该参数，那么返回的子串会一直到字符串的结尾。
//substring(from, [to])
var myString = 'javascript rox';
myString = myString.substring(0,10);
console.log(myString)
//output: javascript
21.toLowerCase()
toLowerCase() 方法用于把字符串转换为小写。
//toLowerCase()
var myString = 'JAVASCRIPT ROX';
myString = myString.toLowerCase();
console.log(myString)
//output: javascript rox
22.toUpperCase()
toUpperCase() 方法用于把字符串转换为大写。
//toUpperCase()
var myString = 'javascript rox';
myString = myString.toUpperCase();
console.log(myString)
//output: JAVASCRIPT ROX
23. includes()
includes() 方法用于检查字符串是否包含指定的字符串或字符。
//includes()
var mystring = "Hello, welcome to edureka";
var n = mystring.includes("edureka");
//output: True
24. endsWith()
endsWith()函数检查字符串是否以指定的字符串或字符结束。
//endsWith()
var mystr = "List of javascript functions";
var n = mystr.endsWith("functions");
//output: True
25. repeat()
repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
//repeat()
var string = "Welcome to Edureka";
string.repeat(2);
//output: Welcome to Edureka Welcome to Edureka
26. valueOf()
valueOf() 方法返回一个String对象的原始值（primitive value），该值等同于String.prototype.toString()。
//valueOf()
var mystr = "Hello World!";
var res = mystr.valueOf();
//output: Hello World!
27. trim()
trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）
//trim()
var str = " Hello Edureka! ";
alert(str.trim());
28. padStart()
padStart() 方法接受两个参数，第一个是长度，第二个是开头补充的字符
//trim()
var str = "3";
alert(str.padStart(2, 0));
// output: 03
29. padEnd()
padEnd() 方法接受两个参数，第一个是长度，第二个是末尾补充的字符
//trim()
var str = "3";
alert(str.padEnd(2, 0));
// output: 30
30. startsWith()
startsWith() 方法用来检查字符串是否以特定序列开头
//trim()
var str = "hello word";
alert(str.startsWith('hello'));
// output: true
29. endsWith()
endsWith() 方法用来检查字符串是否以特定序列结尾
//trim()
var str = "hello word";
alert(str.endsWith('hello'));
// output: false
Array.form(set) 将set转为数组
扫一扫
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
