概念参考: 菜鸟教程 - 学的不仅是技术,更是梦想!
一、indexOf
定义:
返回某个指定的字符串值在字符串中首次出现的位置,如果没有找到匹配的字符串则返回 -1。
indexOf() 方法区分大小写。
语法:
string.indexOf(searchvalue,start)
参数:
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
返回值类型:
Number | 查找指定字符串第一次出现的位置,如果没找到匹配的字符串则返回 -1。 |
举个小例子:
let name='as张三d_李四张三'
console.log(name.indexOf('张三'))
//2
console.log(name.indexOf('张三',3))//在字符串第五个位置开始查找 "张三" 第一次出现的位置:
//8
let name2='asd_lisi'
console.log(name2.indexOf('张三'))
//-1
二、filter
定义:
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
不会对空数组进行检测、不会改变原数组
语法:
array.filter(function(currentValue,index,arr), thisValue)
参数:
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数
| ||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
返回值类型:
Array | 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。 |
举个小例子:
let arr=[1,2,3,4,5,6]
let newArr=arr.filter((item, index, arr)=>{
//函数本身返回布尔值,只有当返回值为true时,当前项存入新数组
return item>2
})
console.log(newArr)
//输出:[3,4,5,6]
let arr=[{name:'张三',age:19},{name:'李四',age:8}]
let newArr=arr.filter((item, index, arr)=>{
//函数本身返回布尔值,只有当返回值为true时,当前项存入新数组
return item.age<10
})
console.log(newArr)
//输出:[{name:'李四',age:8}]
filter+indexOf
1.去重
let arr = [1,2,3,4,44,4,5,5,66,6]
let newArr = arr.filter(function(item, index, arryList) {
//当前元素,在原始数组中的第一个索引 == 当前索引值,当前项则存入新数组,
//否则当前项不存入新数组,然后进行下一次循环
return arryList.indexOf(item) === index;
});
console.log(newArr)
//输出:[1, 2, 3, 4, 44, 5, 66, 6]
//法二 ES6的set方法
let arr = [1,2,3,4,44,4,5,5,66,6]
let arrFilter = [...new Set(arr)]
console.log(arrFilter)
//输出:[1, 2, 3, 4, 44, 5, 66, 6]
举个小例子:
//筛选出id不含user、manage的数据
let newList=[
{name:'张三',id:'name_user'},
{name:'李四',id:'name_tourists'},
{name:'王五',id:'name_tourists'},
{name:'大雅',id:'name_tourists'},
{name:'二丫',id:'name_manage'},
]
let newArry = newList.filter((item, i, newList) => {
let str = item.id
return str.indexOf('user') == -1 && str.indexOf('manage') == -1
})
console.loh(newArry)
//输出:[{"name": "李四", "id": "name_tourists"},{"name": "王五","id": "name_tourists"},{"name": "大雅","id": "name_tourists"}]
三、lastIndexOf()
定义:
可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索。如果没有找到匹配字符串则返回 -1 。
lastIndexOf() 方法是区分大小写的!
注意: 该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。
语法:
string.lastIndexOf(searchvalue,start)
参数:
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
返回值类型:
Number | 查找的字符串最后出现的位置,如果没有找到匹配字符串则返回 -1。 |
举个小例子:
let name='as张三d_李四张三'
console.log(name.lastIndexOf('张三'))
//8
console.log(name.lastIndexOf('张三',3))
//2
let name2='asd_lisi'
console.log(name2.lastIndexOf('张三'))
//-1
四、substring
定义:
用于提取字符串中介于两个指定下标之间的字符
返回的子串包括 开始 处的字符,但不包括 结束 处的字符。
语法:
string.substring(from, to)
参数:
from | 必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。 |
to | 可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。 如果省略该参数,那么返回的子串会一直到字符串的结尾。 |
举个小例子:
let str='hello world'
console.log(str.substring(3))
//lo world
console.log(str.substring(3,7))
//lo w
//获取字符串后四位
let name='hello.mp4'
let suffix = name.substring(name.length - 4, name.length)
console.log(suffix)
//.mp4
//获取指定字符后面的所有字符内容
let obj='系列讲座-传统文化'
let index=obj.lastIndexOf("\-")
console.log(index)
//4
obj=obj.substring(index+1,obj.length);
console.log(obj)
//'传统文化'
五、splice
定义:
用于删除或添加数组中的元素以及替换。会改变原始数组。只用于数组。
语法:
array.splice(index,howmany,item1,.....,itemX)
参数:
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 可选。规定应该删除多少个元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, ..., itemX | 可选。要添加到数组的新元素 |
返回值类型:
Array | 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。 |
1.删除
指定两个参数:要删除的第一项的位置,删除的项数
用法:arr.splice(index,deleteNum) 返回值为删除的内容,arr为结果
如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。
let arr=[1,2,3,4,5,6]
arr.splice(0,2)
console.log(arr.splice(0,2))
//输出:[1,2]
console.log(arr)
//输出:[3,4,5,6]
let arr2=[1,2,3,4,5,6]
arr.splice(2,0)
console.log(arr.splice(2,0))
//输出:[]
2.添加
指定三个参数:起始位置,0(要删除的项数,0->没有要删除的项),要插入的项
用法:arr.splice(index,0,...items) 返回值为删除的内容,arr为结果
let arr=[1,2,3,4,5,6]
arr.splice(1,0,'9')
console.log(arr.splice(1,0,'9'))
//输出:[]
console.log(arr)
//输出:[1,'9',2,3,4,5,6]
3.替换
指定三个参数:起始位置,要删除的项数,要插入任意数量的项(插入的项数不必与删除的项数相等。)
用法:arr.splice(index,deleteNum,...items) 返回值为删除的内容,arr为结果
let arr=[1,2,3,4,5,6]
arr.splice(1,1,'9')
console.log(arr.splice(1,0,'9'))
//输出:[2]
console.log(arr)
//输出:[1,'9',3,4,5,6]
let arr2=[1,2,3,4,5,6]
arr2.splice(1,1,'9','aaa')
console.log(arr.splice(1,1,'9','aaa'))
//输出:[2]
console.log(arr)
//输出:[1,'9','aaa',3,4,5,6]
六、slice
定义:
从已有的数组中返回选定的元素;
可提取字符串的某个部分,并以新的字符串返回被提取的部分
不会改变原始数组。用于数组和字符串
语法:
array.slice(start, end)
参数:
start | 可选。规定从何处开始选取(开始截取下标的位置)。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。 |
end | 可选。规定从何处结束选取(结束截取下标的位置,但不会截取到该位置的值)。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。 |
举个小例子:
let arr=[1,2,3,4,5,6,'hello']
let newArr=arr.slice(1,4)
console.log(newArr) // [2, 3, 4]
console.log(arr) // [1, 2, 3, 4, 5, 6, 'hello']
let arr=[1,2,3,4,5,6,'hello']
let newArr=arr.slice(1)
console.log(newArr) // [2, 3, 4, 5, 6, 'hello']
let arr=[1,2,3,4,5,6,'hello']
let newArr=arr.slice(-2)
console.log(newArr) // [6, 'hello']
let arr=[1,2,3,4,5,6,'hello']
let newArr=arr.slice(-2,-1)
console.log(newArr) // [6]
let str='hello_word'
let newStr=str.slice(0,5)
console.log(newStr) // 'hello'
七、pop()
定义:
用于删除数组的最后一个元素并返回删除的元素。
此方法改变数组的长度!
语法:
array.pop()
返回值类型:
所有类型(*) | 返回删除的元素。 |
*:数组元素可以是一个字符串,数字,数组,布尔,或者其他对象类型。
举个小例子:
let arr= ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
console.log(arr.pop())
//输出: 'Baidu'
console.log(arr)
//输出:['Google', 'Runoob', 'Taobao', 'Zhihu']
let arr= ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
console.log(arr.splice(arr.length-1,1))
//输出: ['Baidu']
console.log(arr)
//输出:['Google', 'Runoob', 'Taobao', 'Zhihu']
八、shift()
定义:
用于把数组的第一个元素从其中删除,并返回第一个元素的值。
此方法改变数组的长度!
语法:
array.shift()
返回值类型:
所有类型(*) | 数组原来的第一个元素的值(移除的元素)。 |
*:数组元素可以是一个字符串,数字,数组,布尔,或者其他对象类型。
举个小例子:
let arr= ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
console.log(arr.shift())
//输出: 'Google'
console.log(arr)
//输出:['Runoob', 'Taobao', 'Zhihu', 'Baidu']
九、unshift()
定义:
可向数组的开头添加一个或更多元素,并返回新的长度。
该方法将改变数组的数目。
语法:
array.unshift(item1,item2, ..., itemX)
参数:
item1,item2, ..., itemX | 可选。向数组起始位置添加一个或者多个元素。 |
返回值类型:
Number | 数组新长度 |
举个小例子:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.unshift("Lemon","Pineapple"));
//6
console.log(fruits)
//输出:['Lemon', 'Pineapple', 'Banana', 'Orange', 'Apple', 'Mango']
十、push()
定义:
可向数组的末尾添加一个或多个元素,并返回新的长度。新元素将添加在数组的末尾。
此方法改变数组的长度!
语法:
array.push(item1, item2, ..., itemX)
参数:
item1, item2, ..., itemX | 必需。要添加到数组的元素。 |
返回值类型:
Number | 数组新长度 |
举个小例子:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Lemon","Pineapple");)
//输出:6
console.log(fruits)
//输出: ['Banana', 'Orange', 'Apple', 'Mango', 'Lemon', 'Pineapple']
十一、map
定义:
遍历时可以返回一个新数组,新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。
按照原始数组元素顺序依次处理元素。
不会对空数组进行检测。
map() 不会改变原始数组。
语法:
array.map(function(currentValue,index,arr), thisValue)
参数:
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数
| ||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。 |
返回值类型:
Array | 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 |
举个小例子:
// 遍历数组
let arr = [1, 2, 3]
let newArr = arr.map((item) => item * 2)
console.log(newArr);//[2,4,6]