JavaScript中map、filter、forEach、find等详解（数组、字符串操作）

数组方法

join()----（原数组不变）

*把数组转换成字符，默认','连接

let arr=[1,2,3]
console.log(arr.join()); 　　　　// 1,2,3
console.log(arr.join("-")); 　　// 1-2-3
console.log(arr); 　　　　　　　 // [1, 2, 3]

push()和pop()-------（原数组改变）

*push()：把里面内容添加到数组末尾，并返回修改后长度

let arr = [1, 2, 3]; 
console.log(arr.push(4));　　　　// 4（字符串要加引号）
console.log(arr);　　　　        // [1,2,3,4]

*pop()：移除数组最后一项，返回移除的那个值，数组的length减1

let arr = ['tom', 'jim', 'bob'];
console.log(arr.pop());　　　　  // bob
console.log(arr);　　　　        // ['tom', 'jim'] 

shift()和unshift()--------(只针对数组第一项、原数组改变)

*shift()：删除数组第一项，并返回删除元素的值；如数组为空返回undefined

let arr = [1, 2, 3];
console.log(arr.shift());　　　　 // 1
console.log(arr);　　　　         // [2, 3] 

*unshift()：将参数添加到数组开头，并返回数组的长度

let arr = [2, 3];
console.log(arr.unshift(1));　　　// 3（字符串要加引号）
console.log(arr);　　　           // [1, 2, 3]

sort()----原数组改变

*sort()：将数组里的项从小到大排序

//不按数值大小排
let arr = [2, 1, 4, 31];
console.log(arr.sort());　     // [1, 2, 31, 4]比较第一个值
console.log(arr); 	       // [1, 2, 31, 4]

let arr1 = ['ca', 'a', 'd', 'b'];
    console.log(arr1.sort());    // ['a','b','c','d']较第一个ASCII码值
    console.log(arr1);	         // ['a','b','ca','d']

//按数值大小排（a-b从小到大，b-a从大到小）
let arr = [2, 1, 4, 31];
console.log(arr.sort(function(a,b){return a-b}));    // [1, 2, 4 ,31]
console.log(arr);			 	     // [1, 2, 4 ,31]

reverse()----原数组改变

*reverse()：反转数组项的顺序

let arr = ['tom', 'jim', 'bob'];
console.log(arr.reverse());  		// ['bob','jim','tom']
console.log(arr); 			// ['bob','jim','tom']

concat()----原数组、字符串不改变

*concat()：将参数添加到原数组中（需拿新数组去接收）

//数组
let arr = [1, 2, 3];
console.log(arr.concat(4, [5, 6], 'tom'));	// [1, 2, 3, 4, 5, 6, 'tom']
console.log(arr);				// [1, 2, 3]
//字符串
let str = '12345678';
console.log(str.concat('9', '10'));		//12345678910
console.log(str);				//12345678

slice()----原数组不改变

*slice()：截取数组，可传一个参数或两个参数

//一个参数
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.slice(2));// [3, 4, 5, 6, 7, 8, 9]从下标为2(包括下标2)截取到末尾的子数组
//两个参数
console.log(arr.slice(3, 6));//[4, 5, 6]从下标为3(包括下标3)截取到下标为6(不包括下标6)的子数组
console.log(arr.slice(3, -2));//[4, 5, 6, 7]从下标为3(包括下标3)截取到下标为-2+length(不包括)的子数组
console.log(arr.slice(-8, -6));//[2, 3]从下标为-8+length(包括)截取到下标为-6+length(不包括)的子数组
console.log(arr);				//[1, 2, 3, 4, 5, 6, 7, 8, 9]

splice()----原数组改变

*splice()：删除、插入和替换数组

//删除--两个参数（删除的起始下标，删除项数）
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.splice(2, 3));		// [3, 4, 5]
console.log(arr);			// [1, 2, 6, 7, 8, 9]

//替换
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr1.splice(2, 1, 666));	//[3]
console.log(arr1);			//[1, 2, 666, 4, 5, 6, 7, 8, 9]

//插入--三个参数+（起始下标，删除项数，插入的项,插入的项...）插入的项数不必与删除的项数相等
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(ar2.splice(2, 3, 100,200));  // [3, 4, 5]
console.log(arr2);                       // [1, 2, 100,200, 6, 7, 8, 9]

indexOf()和lastIndexOf()

*indexOf()和lastIndexOf()：返回指定字符串在字符串中首次出现位置的下标

*两个参数（检索的字符串，开始检索的位置（可选、0到lengt-1、indexOf从前往后或lastIndexOf从后往前））

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//从前往后查
console.log(arr.indexOf(6));    //5
console.log(arr.indexOf(6, 2)); //5
console.log(arr.indexOf(6, 7)); //-1（从下标7到末尾查）
//从后往前查
console.log(arr.lastIndexOf(6));     //5
console.log(arr.lastIndexOf(6, 7));  //5
console.log(arr.lastIndexOf(6, 4));  //-1(从下标4到下标0查)
console.log(arr.lastIndexOf(100));   //-1

forEach()----无返回值

*forEach()：对数组进行普通循环遍历（相当于for循环）

遍历内容（对应项，项索引，数组本身）

let arr = ['tom', 'jim', 'bob'];
arr.forEach((item, index, oldArr) => {
	console.log(item + '-' + index + '-' + (oldArr === arr));
});
//tom-0-true
//jim-1-true
//bob-2-true

map()-----原数组不改变、有返回值

*map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

let arr = [1, 2, 3, 4];
let arr1 = arr.map((item, index) => {
	return item * item;
});
console.log(arr1);	// [1, 4, 9, 16]
console.log(arr);	// [1, 2, 3, 4]

filter()-----原数组不改变、有返回值

*filter()：过滤功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr1 = arr.filter((item, index) => {
	return item > 4 && index % 2 == 0;
});
console.log(arr1);	// [6, 8, 10] 
console.log(arr);	// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

every()-----原数组不改变

*every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

let arr = [5, 6, 7, 8, 9, 10];
let arr1 = arr.every((item, index) => {
	return item > 8;
});
let arr2 = arr.every((item) => {
	return item > 4;
});
let arr3 = arr.every((item) => {
	return item > 20;
});
console.log(arr);	//[5, 6, 7, 8, 9, 10]原始
console.log(arr1);	//false	部分满足
console.log(arr2);	//true	都满足
console.log(arr3);	//false	全都不满足

some()

*some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

let arr = [5, 6, 7, 8, 9, 10];
let arr1 = arr.some((item, index) => {
	return item > 8;
});
let arr2 = arr.some((item) => {
	return item > 20;
});
console.log(arr);	// [5, 6, 7, 8, 9, 10]原始
console.log(arr1);	//true 部分满足
console.log(arr2);	//false 都不满足

find()

*find()：查找目标元素，找到数组中满足条件的第一项，并返回该项

//数组
let arr = [1, 9, 4, 8];
let newArr = arr.find((item) => {
	return item > 6
});
// 若没有满足条件返回undefined
console.log(newArr);//9  字符串

findeIndex()

*findIndex()：查找目标元素，找到数组中满足条件的第一项就返回元素的位置，找不到就返回-1

let arr = [1, 9, 4, 8];
let newIdx = arr.findIndex((item) => {
	return item >= 9;
});
//若没有满足条件的返回-1
console.log(newIdx);//1

includes()

*includes()是否包含某个元素

//数组
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.includes(1));//true
console.log(arr.includes(7));//false
//字符串
let arr = '1234556';
console.log(arr.includes(1));//true
console.log(arr.includes(7));//false

reduce和reduceRight()

*reduce()和reduceRight()：

--------两个参数：(每项调用的函数，基础的初始值init(可选)）

--------前面数组项遍历产生的结果与当前遍历项进行运算

reduce()：数组的第一项开始，逐个遍历到最后

reduceRight()：数组的最后一项开始，向前遍历到第一项

*内部四个参数： prev：上一次调用回调时的返回值或初始值 init

cur：当前正在处理的数组元素

index：当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1

arr：原数组

let arr = [1, 2, 3, 4, 5, 6];
let arr1 = arr.reduce((prev, cur, index, arr) => {
	console.log('pre:' + prev + '----' + 'cur:' + cur + '----' + 'index:' + index + '----' + '数组本身:' + arr);
});
//pre:1----cur:2----index:1----数组本身:1,2,3,4,5,6
//pre:undefined----cur:3----index:2----数组本身:1,2,3,4,5,6
//pre:undefined----cur:4----index:3----数组本身:1,2,3,4,5,6
//pre:undefined----cur:5----index:4----数组本身:1,2,3,4,5,6
//pre:undefined----cur:6----index:5----数组本身:1,2,3,4,5,6

求最大值/最小

let arr = [700, 89, 100, 400];
let maxNum = arr.reduce((prev, cur) => {
	return Math.max(prev, cur);
        //return pre>cur?pre:cur;
	});
console.log(maxNum);//700

求和(可传第二个参数0)

let arr = [1, 2, 3, 4, 5, 6];
let sumNum = arr.reduce((prev, cur, index, arr) => {
		return prev + cur;
},0);
console.log(sumNum);//21

求阶乘(可传第二个参数1)

let arr = [1, 2, 3, 4, 5, 6];
let Num1 = arr.reduce((prev, cur, index, arr) => {
		return prev * cur;
},1);
console.log(Num1);//720

数组去重

let arr = [1, 4, 3, 2, 6, 6, 3, 4, 5, 3, 1, 3, 4, 6, 5, 5, 6];
let newArr = arr.sort().reduce((prev, cur) => {
	prev.indexOf(cur) === -1 && prev.push(cur);
	return prev;
}, []);
console.log(newArr);//[1, 2, 3, 4, 5, 6]

求字符串中字母出现的次数

let str = 'ajkjdkjfkdkljakldjfkldjkfjkdjfk';
let obj = str.split('').reduce((prev, cur) => {
	prev[cur] ? prev[cur]++ : (prev[cur] = 1);
		return prev;
}, {});
console.log(obj);
//{a: 2,d: 5,f: 4,j: 8,k: 9,l: 3}

降维

let arr = [
			[1, 2, 3],
			[3, 4, 6],
			[7, 8, 9]
		];
let newArr = arr.reduce((prev, cur) => prev.concat(cur), []);
console.log(newArr);//[1, 2, 3, 3, 4, 6, 7, 8, 9]

slice(start,end)---数组、字符串均可用（不改变原数）

start：开始截取的索引下标(包括)

end(可选)：结束的索引下标(不包括)：不写(截取到最末) 为负数(负数+length)

let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.slice(1, 4));		//[2, 3, 4]
console.log(arr.slice(-4, -1));		//[4, 5, 6]
console.log(arr);					// [1, 2, 3, 4, 5, 6, 7]
let str = 'This is my cat';
console.log(str.slice(4, 11));		//is my 
console.log(str);					//This is my cat

substr(start，length）----操作字符串（不改变原数）

start：开始截取的索引下标(包括)

length(可选)：必须是数值，截取的长度

let str = 'Thisismycat';
console.log(str.substr(4, 4));		//ismy 
console.log(str);					//Thisismycat

substring(start,end)

start：开始截取的索引下标(包括)

end(可选)：结束的索引下标(不包括)：不写(截取到最末)

start=end返回为空字符串

start >end提取子串之前会先交换这两个参数

let str = 'Thisismycat';
console.log(str.substring(4, 9));		//ismyc
console.log(str.substring(4, 4));		//''
console.log(str.substring(9, 4));		//ismyc
console.log(str);						//Thisismycat

split()----操作字符串（不改变原数）

一个字符串string分割成片段创建一个字符串数组

let str = '12345678';
console.log(str.split(''));		//['1', '2', '3', '4', '5', '6', '7', '8']
console.log(str.split('', 4));	//['1', '2', '3', '4']
console.log(str);				//12345678

charAt(pos)---操作字符串（不改变原数）

返回指定索引位置的字符

let str = '12345678';
console.log(str.charAt(4));	//5
console.log(str);			//12345678

indexOf(num1,num1)和lastIndexOf(num1,num1)(从后往前查找)（不改变原数）

num1:查找的字符串

num1:开始查找的位置索引

返回目标字符第一次出现的索引位置

let str = '12345678';
console.log(str.indexOf('45'));	//3
console.log(str);				//12345678

replace(num1,num2)

只替换找到的第一个元素

num1:查看的字符串

num2:替换的字符串

let str = '12845678';
console.log(str.replace('8', '9'));	//12945678
console.log(str);					//12845678