join方法 js 单字符串会报错_JS中字符串和数组的常用操作方法

一、学习的新知识

对于字符串和数组方法经常是用到时才百度下，然后参考写出代码，今天通过朱老师总结字符串和数组方法，也算是对它们有了比较全面认识了。

数组的map、filter和reduce方法的学习 这些方法极大提高了数组的使用，要求都要掌握，其实不难，主要是没实例讲解，下面都有了

Array.prototype.join.call(str,\’*\’) 调用数组的join方法对字符串进行合并操作，解决了字符串默认不支持数组join方法。老师形它为 “借用” 。太经典了，我又测试了String.prototype.substr.call操作数组，也成功了，这个借用值得研究下。

构造函数原型对象prototype 这个是拓展知识了，也是JS高级操作之一，如用它重定义内置函数，我改造了join()默认用逗号连接数组的行为。实在是巧妙，有能力可以继续学习。

字符串即是数组 对于老师的这个提法，我进行验证测试，完全成立，字符串可以看成每个字符为成员的数组，编号从0开始，不过反过来则不行。

二、字符串和数组相关的常用操作

1、concat拼接字符串或合并数组

都不影响原来的字符串或数组，返回值是新的字符串或数组。数组拼接时若没参数则相当于拷贝成一个新数组。

let str1='Hello www.php.cn';

let str2='woxiaoyao';

let arr1=[1,2,3,4,5,6];

let arr2=['Man','Woman'];

console.log('str1 = %s ,str2 = %s ,str1+str2 = %s',str1,str2,str1.concat(str2));

console.log(arr1.concat(arr2));

console.log(arr1);

console.log(arr2);

2、slice和substr取字符串的子串或数组成员

字符串对slice和substr都支持，数组只支持slice，对于substr不直接支持，通过”借用”可间接支持，不过此时将数组先join成字符串，再执行字符串的substr，意义不是很大，这里就是当成研究。

slice支持数组和字符串，原理都是从索引提取字串或成员

slice和substr的索引支持负值，字符串编号同时存在正向0,1,….，也有反向-1,-2,…。这点和CSS的grid布局时列或行号相似。

slice没有第二个参数则取到结束。

slice使用是要注意结果中不包括结束索引的对应的成员。

// 语法: slice(开始索引,结束索引), 返回结果中不包括结束索引的对应的成员,不写第二参数,默认取到结束。

// 语法：substr(startIndex, length(不能为负,如果为负转为0,返回空))

// 索引支持负数，最后个对应-1(和grid的列号和行号相似，在正向编号也有反向编号)

console.log('str => %s ,string slice => ',str1,str1.slice(0,5));

console.log('str => %s ,string slice => ',str1,str1.slice(-6));

console.log('str => %s ,string substr => ',str1,str1.substr(0,5));

// substr是字符串方法，对数组直接使用则报错。

console.log('arr => %s ,array slice => ',arr1,arr1.slice(0,5));

// console.log('arr => %s ,array substr => ', arr1, arr1.substr(0, 5));

// 通过String.prototype.substr.call调用数组时，此时数组相当于先join转为逗号分隔的字符串。

console.log('arr => %s ,array substr => ',arr1,String.prototype.substr.call(arr1,3,2));

3、indexOf查找返回子字符串在原始的字符串出现的索引,找不到返回 -1，

第二个参数指定查询的起始位置。

对数组无效。

console.log('indexof => ',str2.indexOf('a'));

console.log('indexof => ',str2.lastIndexOf('a'));

4、split和join实现字符串和数组转换split(‘分隔符’) 将字符串打散,转为数组。常用于处理格式化数据非常方便,例如url, email

join(‘分隔符’) 将数组转成字符串。以指定分隔符分隔，默认是逗号。

console.log(str1.split('.'));

console.log(arr1.join());

5、toUpperCase和toLowerCase字符串的大小写转换

常用在用户输入格式的统一处理或条件循环控制时条件的统一格式(如防止大小写导致条件不成立)。

res=str1.toUpperCase();

console.log(res);

console.log(res.toLowerCase());

res=str1.substr(0,5).toUpperCase().concat(" ",str.substr(-6));

console.log(res);

6、trim去掉字符串二边的多余的空格

字符串独有的方法。

let psw=" root888 ";

console.log(psw.length);

res=psw.trim().length;

console.log(res);

三、数组要掌握的常用操作

1、出入栈栈: 后进先出(LIFO),最后添加的最先出去

队: 先进先出(FIFO), 最先进入的最先出来

都是”增删”受限,只允许在一端进行,要么在尾部, 要么是头部

栈操作有:push和pop(从尾部)，unshift和shift(从头部)

console.log('尾部入栈操作 =>',arr1.push(11),arr1);

console.log('尾部出栈操作 =>',arr1.pop(),arr1);

console.log('头部入栈操作 =>',arr1.unshift(11),arr1);

console.log('头部出栈操作 =>',arr1.shift(),arr1);

队列:

push+shift：尾部开始的先进先出队列

unshift+pop：头部开始的先进先出队列

// push+shift

console.log('尾部入栈操作 =>',arr1.push(11),arr1);

console.log('头部出栈操作 =>',arr1.shift(),arr1);

// unshift+pop

console.log('头部入栈操作 =>',arr1.unshift(11),arr1);

console.log('尾部出栈操作 =>',arr1.pop(),arr1);

2、splice实现数组增删改最强大的数组方法,通过不同的参数,可以轻松实现 “增删改” 。

这个方法是直接在 原始数组上操作 ,要当心

语法 : slice(开始索引, 删除的数量, 插入的元素)

// 删除

// 一个参数

let arr=[1,2,3,4,5];

res=arr.splice(2);

// 返回的是删除的元素

console.log(res);

console.log(arr);

// 适合一分为二

console.log(arr.concat(res));

// 二个参数,第二个是删除的数量

arr=[1,2,3,4,5];

arr.splice(1,2);

console.log(arr);

// 更新操作

arr=[1,2,3,4,5];

// 将2,3,更新成: 88,99

arr.splice(1,2,88,99);

console.log(arr);

// 新增操作: 只要第二个参数为0, 就是新增

arr=[1,2,3,4,5];

arr.splice(1,0,88,99);

console.log(arr);

3、sort排序

默认将成员都做为字符串, 按字母表的顺序,也是直接改写了原数组。其中要关注数值数组时排序的问题，要通过自定义排序规则重新定义它的行为，实现数组也能正常排序。

arr=['p','b','a'];

arr.sort();

console.log(arr);

// 对于纯数值排序会有问题

arr=[10,9,22,1];

arr.sort();

// 为什么结果不对, 因为自动将成员转为string

console.log(arr);

// sort(callback): 用这个回调函数自定义排序规则，为什么a-b就实现了数字比较？

arr.sort((a,b)=>a-b);

console.log(arr);

4、forEach和map遍历数组forEach((item,index,arr)=>{…})

map((item,index,arr)=>{…}),与forEach()不一样,有返回值

arr=[1,2,3,4,5];

res=arr.forEach(item=>console.log(item));

// forEach()没有返回值

console.log(res);

res=arr.map(item=>item*2);

console.log(res);

5、filter过滤方法filter(callback): 对每个成员逐一处理,返回处理结果为true的成员组成的新数组

arr=[1,2,3,4,5];

// 返回数组中的奇数, 直接过滤掉偶数, 可以被2整除

res=arr.filter(item=>item%2);

console.log(res);

6、reduce归并方法reduce(callback, init): 逐个依次的处理每个成员,并最终合并成一个值返回，init是初始值，主要应用就是数组求和和大量字符串拼接

// arr 求和

res=arr.reduce((a,b)=>a+b);

// 第二个参数表示从哪个初始开始操作,当前是0

res=arr.reduce((a,b)=>a+b,0);

console.log(res);

// 如果不想从0开始累加, 例如点赞数,想从50000开始

res=arr.reduce((a,b)=>a+b,50000);

res=arr.reduce((a,b)=>a+b,55610);

console.log("点赞: ",res,"次");

四、几点拓展

1、字符串即是数组

这个很好测试，如字符串str=”hello www.php.cn”，str[0]就是’h’，其实slice既是字符串的方法，又是数组方法，尤其是通过索引来访问，就很明确的说字符串就是数组。

2、借用方法

无论是Array.prototype.join.call()还是String.prototype.substr.call()都是”借用”方法，为什么要单独提出来，因为我感觉它挺好用的，它们格式都是 “对象.prototype.方法.call(借用对象,…参数)”

对象可以是内置对象，也可以是自定义对象

方法是对象的方法，也是借用对象要借用的方法，因为借用对象不支持这种方法，所有需要向支持方法的对象借用。

借用对象 就是要借用方法的对象。如上面列举的substr方法，它的对象是String，数组是不支持substr的，此时数组就是借用对象。

参数 这里参数是借用方法的参数，只是相比原方法，它多了个借用对象的参数。

3、构造函数原型对象prototype

学习构造函数原型对象prototype是JS高级操作，目前我也只是入门，只是为了写本文才查阅了相关资料，简单明白几下几点，更高深待日后研究到这方面再说。

prototype是每个对象都有的

prototype使您有能力向对象添加属性和方法

通过内置对象的prototype属性可以改变内置方法

// 修改join默认使用逗号拼接，连接符现在为%.

Array.prototype.join=function(){

returnthis.reduce((a,b)=>a+'%'+b);

};

console.log(arr1.join());

五、学习后的总结字符串就是数组，数组则不是字符串。对于它们使用可参考上面常用方法的介绍。

数组的splice、map、filter和reduce方法要掌握

JS的”方法借用”和prototype的知识，在能力情况下可以深入探讨下，这是走向高级JS之路，网上说Javascript高级程序设计提到了，以后有机会要认真学习下。