字符串方法
indexOf() ：搜索首个字符串出现的位置
var str = 'hi weianl ！哈哈哈';
str.indexOf('h'); // 返回0,从0开始
str.indexOf('i'); // 返回1,首个字符串
str.indexOf('weianl'); // 返回3,空格键占1
str.indexOf('！'); // 返回13,Tab键占4
str.indexOf('233'); //返回-1,未找到
lastIndexOf()：搜索最后出现的字符串位置
var str = '赏花赏月赏秋香';
str.lastIndexOf('赏')//返回4,下标从左边0开始数起
includes()：搜索判断字符串是否包含指定的子字符串
var str = '哇拷I服了YOU';
str.includes('I')//true
str.includes('i')//区分大小写false
str.includes('I',3)//指定位置开始搜索,未找到返回false,
charAt()：搜索返回指定位置的字符
var str = "做人如果没梦想，跟咸鱼有什么分别。";
str.charAt(5)//返回'梦'
++截取、提取
substring()：返回指定索引区间的字符串
substring()返回的字符串是原有的，参数一为开始下标(必需，一个非负的整数)；参数二为结束下标(可选，一个非负的整数);
var s = '其实我是个演员';
s.substring(0, 2); // 从索引0开始到2（不包括2），返回'其实'
s.substring(5); // 从索引5开始到结束，返回'演员'
s.substring(5,7); // 下标超出后不报错，返回'演员'
s.substring(2, 0); // 反着写也可以，返回'其实'
s.substring(2, -1); // 下标为负数直接忽略为，返回'其实'
s.substring(-1, 2); // 下标为负数直接忽略为，返回'其实'
slice() ：提取字符串的某个部分，并且返回的字符串是新的
slice()返回的字符串是新的，参数一为开始下标(必需，一个非负的整数)；参数二为结束下标(可选，一个整数，可已是负)
var str='如花！真的是你！';
str.slice(0,3); //从索引0开始到2（不包括2）,返回'如花！'
str.slice(3);// 从索引3开始到结束，返回'真的是你！'
str.slice(3,8);//下标超出后不报错，返回'真的是你！'
str.slice(3,0);//输出值为空
str.slice(3,-1);//负数下标从右边数起，返回'真的是你'
str.slice(-1,3);//输出值为空
substr() ：抽取指定下标到指定数目长度的字符串
substr()可传两个参数，参数一为开始下标（如果是负数，那么该参数声明从字符串的尾部开始算起的位置）；参数二为截取长度（可选。子串中的字符数，正整数）
var str ='别以为你长得帅我就不打你';
str.substr(4,3)//从索引4开始取3位,返回'长得帅'
str.substr(-2)//负数下标从右边数起，返回'打你'
str.substr(-8,3)//，下标负时长度无效了，返回'长得帅我就不打你'
++拼接
concat() ：抽取指定下标到指定数目长度的字符串
var str1 ='你可以叫我跑龙套的，'
var str2 ='但是请不要在前面加个“死”字好不好？'
var str3 ='哼，你个死跑龙套的。'
str1.concat(str2);//返回'你可以叫我跑龙套的，但是请不要在前面加个“死”字好不好？'
str1.concat(str2,str3);//返回'你可以叫我跑龙套的，但是请不要在前面加个“死”字好不好？哼，你个死跑龙套的。'
++替换
replace() ：用一些字符替换另一些字符或替换一个与正则表达式匹配的子串。
var str = '我爱你!如果非要给这份爱加上一个期限，我希望是，一万年!'
str.replace('我爱你','我钟意你')
//返回"我钟意你!如果非要给这份爱加上一个期限，我希望是，一万年!"
str.replace('一','1')
//只匹配首个，返回"我爱你!如果非要给这份爱加上1个期限，我希望是，一万年!"
//正则表达
str.replace(/一/g,"1");
//"我爱你!如果非要给这份爱加上1个期限，我希望是，1万年!"
++转换
toString() ：返回一个表示 String 对象的值。
//数字转换为字符串。
var num=727;
typeof(num) //"number"
num.toString()//"727"字符串
typeof(num.toString())//"string"
//数组转换成字符串
var fruits = ["Apple","Banana", "Mango","Orange"];
fruits.toString();//返回字符串"Apple,Banana,Mango,Orange"
//进制转换
var num = 10; //默认10进制数字
num.toString(10)//转换成十进制，返回字符串"10"
num.toString(2)//转换成而进制，返回字符串"1010"
num.toString(8)//转换成八进制，返回字符串"12"
num.toString(16)//转换成十进制，返回字符串"a"
//toString返回的是字符串，要转成数字用parseInt(num)
toUpperCase() ：把字符串转换为大写。
var str='WeianL';
str.toUpperCase()//返回'WEIANL'
toLowerCase() ：把字符串转换为小写。
var str='WeianL';
str.toLowerCase()//返回'weianl'
++分割成数组
split()：把一个字符串分割成字符串数组
//直接分割
var str = '我左青龙,右白虎,老牛在腰间,龙头在胸口,人挡杀人,佛挡杀佛!'
str.split('')
/*
** 返回
** ["我", "左", "青", "龙", ",", "右", "白", "虎", ","
** ,"老", "牛", "在", "腰", "间", ",", "龙", "头", "在", "胸", "口", ","
** ,"人", "挡", "杀", "人", ",", "佛", "挡", "杀", "佛", "!"]
*/
//以逗号分割
str.split('，')//返回["我左青龙", "右白虎", "老牛在腰间", "龙头在胸口", "人挡杀人", "佛挡杀佛!"]
//第二个参数为返回的长度
str.split('，',2)//返回["我左青龙", "右白虎"]
//以空格分割
var str = '我左青龙 右白虎 老牛在腰间 龙头在胸口 人挡杀人 佛挡杀佛!'
str.split(' ')//返回["我左青龙", "右白虎", "老牛在腰间", "龙头在胸口", "人挡杀人", "佛挡杀佛!"]
需要看更多？
++菜鸟教程字符串操作方法合集地址
++w3school字符串操作方法合集地址
数组方法
indexOf()：搜索首个数组出现的位置
var arr = ['不', '上', '班', '行', '不', '行'];
arr.indexOf('行') // 下标从0开始，返回数字3
arr.indexOf('行',3) // 指定下标从3开始，算上3，返回数字3
arr.indexOf('行',4) // 指定下标从4开始，算上4，返回数字5
arr.indexOf('啊') // 搜索不到时，返回数字-1lastIndexOf() ：搜索最后出现的数组位置
var arr = ['不上班', '你养你', '啊', '？', '我养你', '啊','！'];
arr.lastIndexOf('啊') // 下标从0开始，返回数字5
arr.lastIndexOf('！') // 搜索不到时，返回数字-1findIndex() ：返回符合传入测试（函数）条件的数组元素索引。
var fruit = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'orange' },
{ id: 3, name: 'grape' }
];
//find返回一整项，findIndex返回下标
var item = fruit.find(element => element.name == 'orange');
console.log(item); // { id: 2, name: 'orange' }
//根据对象某属性获得其在数组中的index
var index = fruit.findIndex(function(e) {
return e.name == 'orange';
});
console.log(index); // 1
//es6版
var index = fruit.findIndex(element => element.name == 'orange');
console.log(index); // 1
includes() ：判断一个数组是否包含一个指定的值。
var arr = ['apple', 'banana', 'cheery'];
arr.includes('apple');
// true
arr.includes('tomato');
// false
arr.includes('apple',1); //从下表1开始
// falsesome() ：方法用于检测数组中的元素是否满足指定条件（函数提供）
var arr = [18, 19, 20];
arr.some((age)=>age==18);
// true
arr.some((age)=>age<18);
// falseevery() ：方法用于检测数组所有元素是否都符合指定条件
var arr = [18, 18, 18];
arr.every((age)=>age==18);
// true
var arr = [18, 18, 19];
arr.every((age)=>age<=18);
// falsefilter() ：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
var arr = [1,2,3,4,5];
arr.filter(item=>item>3)
// [4, 5]slice() ：添加或删除数组中的元素。
slice() 方法不会改变原始数组。参数一：可选。如果是负数则从数组尾部开始算起；参数二：可选。数组片断结束下标。如果没指定则提取到末尾。如果是负数则是从数组尾部开始算起的元素。
var arr = ['一万年太久', ',', '爱我', '就现在', '！'];
arr.slice(0, 4); // 从索引0开始到4（不包括4），返回["一万年太久", ",", "爱我", "就现在"]
arr.slice(2); // 返回["爱我", "就现在", "！"]
arr.slice(-2); // 从后面算起，返回空数组["就现在", "！"]
arr.slice(2,6); // 超出长度按数组长度算，返回["爱我", "就现在", "！"]
arr.slice(2,0); // 参数二为0时，返回空数组[]
arr.slice(2,-1); // 参数二为负数时结束从后面算起，返回["爱我", "就现在"]
arr.slice(-2,1); // 返回空数组[]
splice() ：添加或删除数组中的元素（修改Array的“万能方法”）。
splice() 可传3个参数。参数一：必需。规定从何处添加/删除元素；参数二：可选。规定应该删除多少元素；参数三：可选。要添加到数组的新元素
var arr = ['小强', ',', '小强', '你怎么了','小强'];
// 只删除,不添加:
arr.splice(2, 2); // ["小强", "你怎么了"]
// 只添加,不删除:
arr.splice(5, 0, '！', '！'); // 返回[],因为没有删除任何元素
arr; // 原有数组已改变为["小强", ",", "小强", "你怎么了", "小强", "！", "！"]
// 从索引2开始删除3个元素,然后再添加一个元素:
arr.splice(1, 3, '啊'); // 返回删除了的元素[",", "小强", "你怎么了"]
arr; // 原有数组变为["小强", "啊", "小强"]
unshift()和push()：向数组开头添加一个、向数组末尾添加一个或更多元素
//头部添加
var arr =['需要吗？','不需要吗？','需要吗？'];
arr.unshift('喜爱一个人需要理由吗？') // 返回长度5
arr; // ["喜爱一个人需要理由吗", "？", "需要吗？", "不需要吗？", "需要吗？"]
//尾部添加
var arr =['喜爱一个人需要理由吗？','需要吗？','不需要吗？'];
arr.push('需要吗','？') // 返回长度5
arr; // ["喜爱一个人需要理由吗？", "需要吗？", "不需要吗？", "需要吗", "？"]shift()和pop()：向数组开头删除一个、向数组末尾删除一个或更多元素
//头部删除
var arr =['你会爱上一个你讨厌的人吗？','会吗？','不会吗？'];
arr.shift(); // 返回已删除元素"你会爱上一个你讨厌的人吗？"
arr; // ["会吗？", "不会吗？"]
arr.shift();arr.shift();arr.shift(); // 数组空时shift不会报错，而是返回undefined
arr; // 返回[]
//尾部删除
var arr =['你会爱上一个你讨厌的人吗？','会吗？','不会吗？'];
arr.pop(); // 返回已删除元素"不会吗？"
arr; // ["你会爱上一个你讨厌的人吗？", "会吗？"]
arr.pop();arr.pop();arr.pop(); // 数组空时pop不会报错，而是返回undefined
arr; // 返回[]
concat() ：连接两个或更多的数组
请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array
var arr1 = ['只要你说我行，'];
var arr2 = ['就算全天下的人都说我不行，'];
var arr3 = ['我也不在乎。'];
arr1.concat(arr2,arr3) // ["只要你说我行，", "就算全天下的人都说我不行，", "我也不在乎。"]
arr1; // ["只要你说我行，"] toString() ：无指定分隔符把数组转换为字符串
元素无指定分隔符进行分隔的，返回的字符串会用逗号分隔
var arr = ['那个人样子好怪','我也看到了','他好像一条狗']
arr.toString() // "那个人样子好怪,我也看到了,他好像一条狗"
join() ：有指定分隔符把数组转换为字符串
元素是通过指定的分隔符进行分隔的。
var arr = ['面子不是别人给的','是自己凑上来丢的']
arr.join() // 什么都不传默认用逗号分隔，返回"面子不是别人给的,是自己凑上来丢的"
arr.join('') // "面子不是别人给的是自己凑上来丢的"
arr.join('——') // "面子不是别人给的——是自己凑上来丢的"reverse() 颠倒数组中元素的顺序
var arr = ['我','吻','你','准','不'];
arr.reverse() // ["不", "准", "你", "吻", "我"]sort() 对数组的元素进行排序
+++数组排序
/***************排序数字****************/
var arr = [1, 100, 30, 20, 50, 40]
arr.sort() // 只能排序0-9以内的数组 结果[1, 100, 20, 30, 40, 50]
//所以需要封装一下
arr.sort(function(a,b){return a-b}); // [1, 20, 30, 40, 50, 100]
//写成ES6版
arr.sort((a, b) => a - b) //降序改为b-a
console.log(arr) // [1, 20, 30, 40, 50, 100]
//挂载到原型链的调用方式
Array.prototype.MySort = function() {
return this.sort((a, b) => a - b)
}
var arr = [1, 100, 30, 20, 50, 40]
arr.MySort() // 调用
console.log(arr) // [1, 20, 30, 40, 50, 100]
/***************排序英文**************/
var arr= ["apple", "banana", "cat", "dog"];
arr.sort(); // ["apple", "banana", "cat", "dog"]
+++对象型数组排序
//对象数组排序
var arr = [
{num:27,barrage:'第一'},
{num:0,barrage:'发条弹幕压压惊Σ(っ°Д°;)っ'},
{num:17,barrage:'(ノ°ο°)ノ前方高能预警'},
{num:7,barrage:'红红火火恍恍惚惚'}
];
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;//降序为value2 - value1
}
}
arr.sort(compare('num'))
/*
** 此时的arr为：
** [{num: 0, barrage: "发条弹幕压压惊Σ(っ°Д°;)っ"},
** {num: 7, barrage: "红红火火恍恍惚惚"},
** {num: 17, barrage: "(ノ°ο°)ノ前方高能预警"},
** {num: 27, barrage: "第一"}
*/
forEach() ：无返回的循环遍历
| 语法 | array.forEach(function(currentValue, index, arr), thisValue) |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。 |
var arr = ['前面漆黑一片','什么也看不到','也不是',' 天亮后会很美的']
var str = new String;
arr.forEach((e,index)=>{
str += `<div id='${index}'>${e}</div>`
})
str;
/*
** 此时的str为：
** "<div id='0'>前面漆黑一片</div>
** <div id='1'>什么也看不到</div>
** <div id='2'>也不是</div>
** <div id='3'> 天亮后会很美的</div>"
*/
map() ：有返回的循环遍历
| 语法 | array.map(function(currentValue,index,arr), thisValue) |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。 |
var arr = ['我那么喜欢你','你喜欢我一下会死啊？']
var str = new String;
str += arr.map((e,index)=>{
return `<div id='${index}'>${e}</div>`
})
str;
/*
** 此时的str为：
** "<div id='0'>我那么喜欢你</div>,
** <div id='1'>你喜欢我一下会死啊？</div>"
** 细心的同学应该会发现返回的盒子与盒子之间是有逗号分隔的
*/
//此时我们可以用join()来处理掉逗号
var arr = ['我那么喜欢你','你喜欢我一下会死啊？']
var str = new String;
str += arr.map((e,index)=>{
return `<div id='${index}'>${e}</div>`
}).join('')
str;
/*
** 此时的str为：
** "<div id='0'>我那么喜欢你</div>
** <div id='1'>你喜欢我一下会死啊？</div>"
*/
经过这两个js数组的数据遍历的列子不难看出forEach()和map()：
forEach()没有返回值而map()则通过return返回参数，
并且map()返回的值会以逗号的形式相连接。
reduce() ：将数组元素计算为一个值（从左到右）reduce
reduce求数组的和或者数组对象某值的和时非常好用，所以拿出来说下
// 求数组的和
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
// console.log(prev, cur, index);
return prev + cur;
})
console.log(sum); // 10
// 简写
var arr = [1, 2, 3, 4];
var sum = arr.reduce((prev, cur)=>prev + cur)
console.log(sum); // 10
/****************************************************/
// 求数组对象某值的和
var arr = [{num: 1}, {num: 2}, {num: 3}, {num: 4}];
var sum = arr.reduce(function(prev, cur, index, arr) {
// console.log(prev, cur, index);
return prev + cur.num;
}, 0); // 第二个参数可以指定初始值
console.log(sum);// 10
// 简写
var arr = [{num: 1}, {num: 2}, {num: 3}, {num: 4}];
var sum = arr.reduce((prev, cur) => prev + cur.num, 0);
console.log(sum);// 10