字符串与数组的API总结

第一部分 基础操作

字符串的操作方法:

一 检索字符串

//方法可返回某个指定的字符串值在字符串中首次出现的位置。

字符串对象.indexOf() 

//注意对大小写敏感,如果检索的字符串没出现返回-1.有的话返回字符串出现的第一个位置.

//这里要注意的是在ES6的语言规定中,做出了改进

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith('参数字符串')：返回布尔值，表示参数字符串是否在原字符串的头部。
	//这个方法用来查询协议 http file
	
endsWith('参数字符串')：返回布尔值，表示参数字符串是否在原字符串的尾部。
	//查询url中的参数

1.1应用场景:

<a id="play" href="javascript:;" class="fa fa-play"></a>

//现在需要判断a标签里面是否有fa-pause这个类
if(document.getElementById('play').className.indexOf('fa-pause') != -1) {
	//doSomething......
}

//上面代码的含义是判断a标签里面的类,是否拥有fa-pause这个类,
//如果拥有,那么返回值就不等于-1

//----------------------华丽的分割线----------------------------

//上面的利用ES6来实现:
if(document.getElementById('play').className.includes('fa-pause')) {
	//doSomething......
}

1.2 includes的注意点

任何字符串都包含一个空字符.

// 任何字符串都包含一个空字符

console.log('123'.includes("")) //true

console.log('123'.includes(" ")) //false这是包含空格字符串,不包含空格字符串

console.log('12 3'.includes(" ")) //true 包含空格字符串

二 字符串转大小写

//把字符串转成小写
字符串对象.toLowerCase()

//把字符串转成大写
字符串对象.toUpperCase()

2.1应用场景

在AJAX通信汇总里面:
https://blog.csdn.net/weixin_42839080/article/details/82529218,
为了方便我们传入get/GET 或则 post/POST这两种分别对应get提交方式和post提交方式.但是传参的时候,开发者容易不区分字母大小写,所以在提取的时候参数的操作是:

//应用场景

if(para.type.toLowerCase() == 'post') {
        //请求方式为post方式
            //设置请求头
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            //发送数据
            xhr.send(para.data);
        }else {
            xhr.send();
        }

2.2 应用: 将命名改为驼峰命名

//将get-element-by-id变为驼峰命名
let str = "get-element-by-id";

function overturnName ( str = ""){
    //1.先将字符串变为数组
    let strArr = str.split('-');
    //2.从数组的第二个元素开始,将首字母转为大写
    for(let i=1;i < strArr.length; i++) {
        //获取到首字母
        let firstChar = strArr[i].charAt(0).toUpperCase();
        strArr[i] = firstChar +  strArr[i].substr(1,strArr[i].length-1)
    }
    //将数组变为字符串
    let newStr = strArr.join(""); 

    //返回字符串的值
    return newStr;
}

三 字符串的截取

/*
  1.slice()定义和用法:
	slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

	stringObject.slice(start,end);

	strat:要抽取的片断的起始下标。如果是负数，
	则该参数规定的是从字符串的尾部开始算起的位置。
	
	end:紧接着要抽取的片段的结尾的下标。
*/

/*
2.substring()定义和用法:
	substring() 方法用于提取字符串中介于两个指定下标之间的字符。

	stringObject.substring(start,stop);
	
	start:一个非负的整数，规定要提取的子串的第一个
	字符在 stringObject 中的位置。
	
	end:一个非负的整数，比要提取的子串的最后一个字符
	在 stringObject 中的位置多 1。如果省略该参数，
	那么返回的子串会一直到字符串的结尾。
*/

3.1应用场景:

//给一个字符串,不要最后一个逗号
 
 var idStr = "1,2,3,4,";
//字符串的下标从0开始	
 idStr = idStr.slice(0,idStr.length-1); 

//或则
 idStr = idStr.substring(0,idStr.length-1);

注意:这里虽然传的参数一样,但是含义却不一样,slice里面的参数含义是:从第0个下标开始截取到字符串倒数第二个下标为止;而substring的参数含义是:从第0个下标开始,以字符长度减一作为截取的的长度来截取字符串.

3.2 应用场景: 获取URL路径中的查询字符串(?后面的参数值)

//获取url中的参数    
getQueryString :  function (name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return decodeURI(r[2]); 
    return null; 
},

3.3 获取url路劲中的?后面的键值对

// 获取url路劲中的?后面的键值对
function getUrlParams(param) {
	if(param) {
		if(param.indexOf("?") > 0) {
			param = param.slice(param.indexOf("?"))
		}
	}

	let url = param || location.search
	let resParam = new Object()
	str = ""
	strs = []
	if(url.indexOf("?") !== -1) {
		str = url.substr(1)
		if(str.indexOf("&") !== -1) {
			strs = str.split("&")
		}else {
			strs.push(str)
		}
		for(let i=0; i< strs.length; i++) {
			resParam[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1])
		}
	}
	return resParam
}	

/* 输入 输出
input: getUrlParams("www.123.com?id=1")
output: {id: "1"}
*/

四 字符串转数组

/*
 1.split()定义与用法:
    split方法用于把一个字符串分割成字符串数组。

	字符串对象.split(separator,howmany);

	separator 必需。字符串或正则表达式，从该参数指定的地方
	分割字符串。 
	howmany 可选。该参数可指定返回的数组的最大长度。如果设置
	了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置
	该参数，整个字符串都会被分割，不考虑它的长度。 

	**注意:**
	如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。(""空字符串)("   " 空格字符串)

*/

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

var str="How are you doing today?";
str.split("") //H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

4.1应用场景
现在有一个产品的尺码,后台返回的是"30-50"这样的字符串,那么需要生成30到50之间的数组.

var data = "30-50";

var start = data.split('-')[0];
var end = data.split('-')[1];

//循环生成一个数组
var arr = [];
for(var i=start,i<=end;i++) {
	arr.push(i);
	//arr[arr.length] = i;
}
console.log(data);

五 替换字符串

1.replace()使用方法:
	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
	字符串对象.replace(regexp,replacement);

	regexp:原字符串中需要被替换的字符串
	replacement: 替换文本

var baseTitle = "数码相机十大品牌";
baserTitle = baserTitle.replace('十大品牌','');

5.1 应用场景:去掉html标签之间的空格

var htmlStr = htmlStr.replace(/[\r\n]/g, "");//去掉所有的html标记

5.2 应用场景:改变对象的属性名

怎么使用js高效的将其中的CourseName更改为title,这种做法常常用在对JSON数据的属性名字段转义

  var test = [
    {
        "Id":"3972679ef2c04151972b376dd88e6413",
        "T_CourseId":"7a4494aae1804d3e94094583249750fe",
        "CourseName":"英语",
        "Code":"english"
    },
    {
        "Id":"5665d803e7994b26a56c6287d12c2090",
        "T_CourseId":"75761ad2ce23498c9f9db134ab844aec",
        "CourseName":"药物化学",
        "Code":"ywhx"
    }
]
 
 //先转成字符串再转回原来的数据
 var temp = JSON.stringify(test).replace(/CourseName/g,"title")
 temp = JSON.parse(temp);
 console.log(temp )

六 模板字符串

用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量.{}中可以放任何javascript表达式,包括函数.

//模板字符串是es6后面出现的语法

<div id="box" data-str="divbox">点我a</div>

let str = `/static/musics/${ $('#box').data('str') }`

//其中的$('#box').data('str')就是利用jquery去找到自定义属性的值.

数组的API

一 数组的删除与增加

//1.push()  方法可向数组的末尾添加一个或多个元素，并返回新的长度。

arrayObject.push(newelement1,newelement2,....,newelementX)

//2.unshift() 方法向数组的开头添加一个或更多元素，并返回新的长度。

arrayObject.unshift(newelement1,newelement2,....,newelementX)

注意: unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。


//3.pop() 方法用于删除并返回数组的最后一个元素。
arrayObject.pop()

//push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

2.1.1 应用场景:

//向localstorage中加数据必须使添加的元素作为第一个添加

//取localstorage中的数据(字符串)
var searchData = localStorage.getItem('searchHistory');
//转化成数组
searchData = JSON.parse(searchData);
//添加新的元素
searchData.unshift('搜索记录1');

二 数组转字符串

//3.join()定义和用法

	join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
	
	arrayObject.join(separator)

	separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。 

应用: 将一个字符串翻转

let str = "hello"
str.split('').reverse().join('') // 'olleh'

三 删除增加数组中的元素

//1. splice()方法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

arrayObject.splice(index,howmany,item1,.....,itemX)

index : 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany:  必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX:  可选。向数组添加的新项目。  

2.3 应用场景:

// 删除localstorage中拥有相同历史记录的数据,只保留一条

searchData.splice(historyData.indexOf('搜索记录一'),1);

//其中的historyData.indexOf('搜索记录一')用来寻找有相同搜索记录的数据出现在第几条.

//1.删除数组
[1,2,3,4].splice(1,2) //从数组的第二个数据开始删除,一次删除两个 [1,4]
//2.增加数组
[1,2,3,4].splice(1,0,[5,6]) //从数组的第第二个元素开始新增一个数组元素 [1,[5,6],2,3,4]

四 forEach遍历数组

foreach()是ES5中引入的对数组的每个元素执行一次提供的函数.在es3里面我们遍历数组最常用的方法是:

for(var i=0;i<arr.length;i++){  
	//do something
}
// 或则,利用遍历对象的方法forin
for(var key in arr) {
    console.log(key);  //获取下标
    console.log(arr[key]);  //获取下标对应的数组值
 }
 //或则jquery里面的each方法
 $(ele).each(function(value,index,arr) {
	//index 下标
	//value 元素值
	//arr 当前的数组
	//do something
});

而foreach()的语法最大的特点是可以为每一个元素提供一个可执行的函数.

//语法:
//forEach
array.forEach(callback(currentValue, index, array){
    //do something
}, this)
 
//或者
array.forEach(callback(currentValue, index, array){
    //do something
})　

/*
callback: 为数组中每个元素执行的函数,该函数接收三个参数，

参数一：当前数组中元素；参数二：索引； 参数三：当前数组。

this：可选，执行回调时候，this的指向。
*/

//举例:将对象的所有属性变成一个数组,然后在来获取对象的每一个属性值
 Object.keys(fields).forEach(function(value,index,arr){
     // console.log(value);
     // console.log(index);
     console.log(`我的键名是:${value},我的键值是${fields[value]}`);
         
 });

注意: forEach里面的return与for语句里面的return的区别:

1. forEach: return只结束本次循环,直接进入下一个循环

2. for: 跳出for语句,直接执行for后面的语句

五 map()方法

array.map(function(currentValue,index,arr), thisValue)

//1. function(currentValue,index,arr)回调函数作为参数,必须
		currentValue : 当前的元素 参数必须写上
		index : 下标 参数可选
		arr : 数组 参数可选
回调函数会遍历对象的每一个元素

//2. thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
	如果省略了 thisValue ，"this" 的值为 "undefined"

//3. 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

5.1 应用:给单词加上复数形式

function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]

六 filter() 方法

filter方法是对原数组的元素进行过滤，返回到一个新的数组中去。不影响原始的数组

array.filter(function(currentValue,index,arr), thisValue)

//1. function(currentValue,index,arr)回调函数作为参数,必须
		currentValue : 当前的元素 参数必须写上
		index : 下标 参数可选
		arr : 数组 参数可选
回调函数会遍历对象的每一个元素

//2. thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
	如果省略了 thisValue ，"this" 的值为 "undefined"

//3. 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

6.1 应用:对数组过滤

let arr = [1,2,3,4];
// newArr 的值是[3,4]
let newArr = arr.filter(function(currentValue ,index,arr){ 
    
    //判断数组的每一项
    // if(currentValue> 2) {
    //     return currentValue;
    // }
	
	//第二种写法:直接返回值
    return currentValue> 2
});

6.2 应用:模糊查询

let keyword = 'v'; //查询的字符
//查询的数据
let brandList  =  [
                    { id : 1,name : 'LV', ctime: new Date()},
                    { id : 2,name : 'Gucci', ctime: new Date()}
                ];
//过滤数组,识别大小写                
let newBrandList = brandList.filter( brand =>{
    //做到大小写都可以查询
   return brand.name.toLowerCase().includes(keyword.toLowerCase());
});

七 es6的数组去重

let arr = [1,1,2,2,3,3,4]
Array.from(new Set(arr) // [1,2,3,4]

7.1 之前的去重方法

var arr = [1,2,3,2,3,1] 
var newArr = []

for(var i=0; i<arr.length; i++) {
var flag = true

for(var j=0; j<newArr.length; j++) {
	if(arr[i] == newArr[j]) {
		flag = false
		break
	}
}

if(flag == true) {
	newArr.push(arr[i])
}
}

console.log(newArr)

八 sort()排序

语法：array.sort(fun)； //参数fun可选。规定排序顺序。必须是函数。 
/*
注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，
说得更精确点，是按照字符编码的顺序进行排序。*/

如果想按照其他规则进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

1. 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
2. 若 a 等于b，则返回 0。
3. 若 a 大于 b，则返回一个大于 0 的值。
   简单点就是：比较函数两个参数a和b，返回a-b 升序，返回b-a 降序

var arr = [{id:0,name:'java'},{id:2,name:"script"},{id:1,name:'json'}]

function sort(arr) {
    arr.sort(function(a,b){
        // return a.id-b.id //升序排布
        return b.id - a.id //降序排布
    })
    return arr
} 

console.log(sort(arr))  

九. 求数组中的最大值

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

十. 复制(拷贝)数组

//ES5的写法
arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX:	必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个
返回值: 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的


const a1 = [1, 2];
const a2 = a1.concat();

a2[0] = 2;
a1 // [1, 2]

//另外一种变通的方式
var arr = [1,2]
var arr2 = JSON.parse(JSON.stringify(arr)) 

//ES6的写法:
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

十一 清空数组

第一种: splice()方法

var ary = [1,2,3,4];
ary.splice(0,ary.length);
console.log(ary); // 输出 []，空数组，即被清空了

第二种: length赋值为0

var arr = [1,2,3,4]
arr.length = 0

第三种: 赋值为空数组

var arr = [1,2,3,4]
arr = []

十二 some()函数

array.some(function(currentValue,index,arr),thisValue)

currentValue	必须。当前元素的值
index	        可选。当前元素的索引值
arr	            可选。当前元素属于的数组对象
thisValue	    可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

返回值: 	布尔值。如果数组中有元素满足条件返回 true，否则返回 false。

var ages = [4, 12, 16, 20];

function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

十三 reduce()方法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

initialValue	可选。传递给函数的初始值

应用:

将多维数组转成一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

十四 将数组的元素push到另一个数组中

let arr1 = [1,2]
let arr2 = [3,4]

//1. 利用es6的展开运算符
arr1.push(...arr2)

//2. 利用apply的方法
arr1.push.apply(arr1,arr2)

//这里使用了函数的apply方法
/*
	第一个参数是指定this的指向 arr1虽然是数组,this就指向这个数组(数组也是对象,所以不会报错)
	第二个参数是数组,表示传给函数的参数 arr2中的元素作为参数传入push函数中
*/

console.log(arr1)

十五: 求数组中的最大值

let arr = [1,2,3,4,5]
console.log(Math.max(...arr)) //5

Math.max.apply(null,arr) // 5

//这里的this指向是null,其实还是原数组

十六: 数组展开的方法

如果数组中的元素又是一个数组,这样的数组称为嵌套数组,有的时候我们需要取消数组的嵌套,利用ES10/ES2019提供的钩子 flat()

flat()是一种用于展开数组的方法,可以取消数组的嵌套,参数表示深度的数字,返回值是一个展开处理后新的扁平数组

//示例
var newArr = arr.flat([depth])

//深度为3的嵌套数组
let arr = [1,2,[3,4,5,[6,7,8,9,[1,2,3]]]];

//将数组的嵌套深度变为2
var newArr = arr.flat(2)

console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, [1,2,3]]

//将数组的嵌套深度变为0
var newArr = arr.flat(3)

console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9,1,2,3]

当这个api没有出来之前,我们扁平化数组的做法是递归的方法