Web前端之JavaScript给定长度分割字符串、分段切割、二维数组、substring、parseInt、forEach、RegExp、filter、slice、split、test、map

大家好，欢迎来到IT知识分享网。

分割字符串

1、方法一(代码较多)

function lengthCutting(str, num) { 
     if (str == null || str == undefined) return null; if (!(/^[0-9]*[1-9][0-9]*$/.test(num))) return null; let array = new Array(), len = str.length; for (let i = 0; i < (len / num); i++) { 
     if ((i + 1) * num > len) { 
     array.push(str.substring(i * num, len)); } else { 
     array.push(str.substring(i * num, (i + 1) * num)); } } return array; } console.log(lengthCutting('ff0fce', 2)); // ['ff', '0f', 'ce'] 

2、方法二(代码一般)

function lengthCutting(str, num) { 
       let strArr = []; for (let i = 0; i < str.length; i += num) strArr.push(str.slice(i, i + num)); return strArr; } console.log(lengthCutting("hong鸿仔1", 2)); // ['20', '20', '11', '05', 'ho', 'ng', '鸿仔', '1'] 

方法传入两个参数，第一个参数是字符串；第二个是需要分割的长度，类型为数字；方法返回数组类型值。
代码分析

次数	i值	代码	取值
1	0	for (let i = 0; 0 < 15; 2) strArr.push(str.slice(0, 2));	20
2	2	for (let i = 0; 2 < 15; 4) strArr.push(str.slice(2, 4));	20
3	4	for (let i = 0; 4 < 15; 6) strArr.push(str.slice(4, 6));	11
4	6	for (let i = 0; 6 < 15; 8) strArr.push(str.slice(6, 8));	05
5	8	for (let i = 0; 8 < 15; 10) strArr.push(str.slice(8, 10));	ho
6	10	for (let i = 0; 10 < 15; 12) strArr.push(str.slice(10, 12));	ng
7	12	for (let i = 0; 12 < 15; 14) strArr.push(str.slice(12, 14));	鸿仔
8	14	for (let i = 0; 14 < 15; 16) strArr.push(str.slice(14, 16));	1

经过以上列举可看出splice方法截取字符串的截取规则是包含开始下标，不包含结束下标；如果结束下标值超过字符串长度那边截取到字符串末尾即结束。

3、方法三(正则，不适用于十六进制以外的字符，但可以自行优化)

function lengthCutting(str, num) { 
       // 此正则只针对十六进制 // 输入多于六个字符 // 超过的字符如果不属于十六进制会变成NaN let reg = new RegExp(`([0-9a-fA-F]{ 
       ${ 
        num}})`), arr = str.split(reg); arr = arr.filter(item => item != ""); arr = arr.map(item => parseInt('0x' + item)); return arr; } console.log(lengthCutting('54df5a', 2)); // [84, 223, 90] 

分割数组

1、方式一(代码较多)

function cutArray(array, subLength) { 
        let count = 1, newArr = [], resultArr = []; array.forEach(item => { 
        newArr.push(item); if (count % subLength == 0) { 
        resultArr.push(newArr); newArr = []; } if (count == array.length - 1) resultArr.push(newArr); count++; }); return resultArr; } console.log(cutArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 5)); // [Array(5), Array(5), Array(4)] 

2、方式二(代码较少)

function cutArray(array, subLength) { 
         let index = 0, newArr = []; while (index < array.length) { 
         newArr.push(array.slice(index, index += subLength)); } return newArr; } console.log(cutArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 5)); // [Array(5), Array(5), Array(4)] 

test

w3school
test方法测试字符串中的匹配项。
如果找到匹配项，则返回true，否则返回false。

---

其他
敬请期待…

MDN
test方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回true或false。

---

其他
敬请期待…

push

MDN
push方法将指定的元素添加到数组的末尾，并返回新的数组长度。

---

其他
敬请期待…

w3school
push方法向数组末尾添加新项目，并返回新长度。
新的项目将被添加到数组的末尾。
push方法会改变数组的长度。
如需在数组的开头添加项目，请使用unshift方法。

---

其他
敬请期待…

substring

substring方法从字符串中提取两个索引位置之间的字符，并返回子字符串。
substring方法从头到尾(不包括)提取字符。
substring方法不会更改原始字符串。
如果start大于end，则交换参数，(4, 1) = (1, 4)。
小于0的开始或结束值被视为0。

slice

w3school
slice方法以新的数组对象，返回数组中被选中的元素。
slice方法选择从给定的start参数开始的元素，并在给定的end参数处结束，但不包括。
slice方法不会改变原始数组。

---

MDN
slice方法返回一个新的数组对象，这一对象是一个由start和end决定的原数组的浅拷贝，包括start，不包括end，其中start 和end代表了数组元素的索引。原始数组不会被改变。

split

split方法将字符串拆分为子字符串数组。
split方法返回新数组，不会更改原始字符串。
如果(" ")用作分隔符，则字符串在单词之间进行拆分。

filter

MDN
filter方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

---

w3school
filter方法创建数组，其中填充了所有通过测试的数组元素(作为函数提供)。
filter不会对没有值的数组元素执行该函数。
filter不会改变原始数组。

map

MDN
map方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

---

w3school
map方法使用为每个数组元素调用函数的结果创建新数组。
map方法按顺序为数组中的每个元素调用一次提供的函数。
map对没有值的数组元素不执行函数。
map不会改变原始数组。

parseInt

parseInt(string, radix)解析一个字符串并返回指定基数的十进制整数，radix是2–36之间的整数，表示被解析字符串的基数。

forEach

MDN
forEach方法对数组的每个元素执行一次给定的函数。

---

w3school
forEach方法按顺序为数组中的每个元素调用一次函数。
对于没有值的数组元素，不执行forEach方法。