ES5 知道这些操作数组的方法还怕不够用?
JS中操作数组对象的常用方法
先说一句
大家好,这里是沉曦!一个前端的小学生。
js常用内置对象及方法有:Array数组对象、Math方法、String方法、日期对象的方法。那么学习ES5操作数组的方法,学习它的的什么呢?除了知道其效果之外,当然还有它的参数和返回值哟,它是否修改原数组呀!话不多说,该上干货了,整!
数组转化
字符串转化为数组
"string".split(“”);
效果:将字符串按一定参数符分割转化为字符数组,无参数直接全部转化为字符数组。
参数:1个;
返回值:按参数(符号)分割的数组,数组内不包含参数
Array.from("string");
效果:直接将该字符串转化为字符数组
参数:一个;
返回值:字符数组
数组转化为字符串
arr.join("")
效果:将字符数组按一定参数符分割转化为字符串,
参数:1个;
返回值:按参数(符号,)连接的字符串,
拼接两个数组
arr.concat(arr1,"str",...)
效果:按顺序将两个或多个数组拼接在一起
参数:1个;["1"].concat("a"/["a"]); ,参数可以是字符、数字、也可以是数组,结果不会受影响。
返回值:加上参数元素的字符数组参数:2个;["1"].concat("a",arr)
返回值:["1"]+["a"]+arr。拼接了两个参数的数组参数:3个或多个;["1"].concat("a",["c","c"],1,4)
返回值:拼接了参数的数组
裁切数组
arr.slice(start,end)
效果:裁切数组,从start下标到end下标开始裁切,不包含end下标,不会改变原数组。
参数:1个;arr.slice(2);从2下标开始,裁切到最后。
返回值:从参数开始的后面所有元素的数组,(包含参数下标元素)参数:2个;arr.slice(2,4);从2下标开始,切到4,不包含下标4的元素
返回值:从参数1开始到参数2结束的前面所有元素的数组,(不包含参数2下标元素)
arr.splice()
注: 不但可以裁切,还能做到对数组的增删改操作。
效果:在数组中添加删除或替换元素,会改变原数组。
参数:1个;arr.splice(3)
返回值:删除掉的前三个元素的数组,
[1,2,3,4].splice(3)//[4]
参数:2个;arr.splice(2,3)第二个值为删除的个数
返回值:删除掉的第2个开始数的3个元素的删除掉的数组,不包含第二个,即不包含起始坐标。
var arr=[1,2,3,4] arr.splice(1,2)//[2,3] arr//[1,4]
参数:多个;arr.splice(2,3,"a","b","c")第一个值为起始坐标,第二个值为替换的个数,后面的值都为替换的新元素;
返回值:被替换的元素的数组
var arr=[1,2,3,4] arr.splice(1,2,"a","b","c") console.log(arr);//[1,"a","b","c",4] arr.splice(1,1,"a","b") console.log(arr);//[1,"a","b",3,4] //相当于先删除第二个参数个,再添加参数个数
参数:多个;arr.splice(2,0,"a","b","c")如第二个值为替换的个数为0,后面的值都为插入的新元素;
返回值:新元素的数组(开始索引,操作几个,'元素1','元素2'); 增删改都可以做 (推荐使用)
因为会修改原数组,所以在遍历数组的时候,原数组变化,遍历计数不变,会导致遍历不完全
查询数组中某个字符
arr.indexOf(“a”)
效果:从数组头部找数组中某个元素
参数:1个、、从开始查找直到找到第一个 arr1.indexOf("a")
返回值:未找到 返回-1,找到返回下标参数:2个、、从第二个参数下标开始查找直到知道到第一个 arr1.indexOf(“a",5)
返回值:未找到 返回-1,找到返回下标
arr.lastIndexOf(“a”)
效果:从数组尾部开始 找数组中某个元素
参数:1个、、从开始查找直到遇到第一个 arr1.indexOf("a")
返回值:未找到 返回-1,找到返回下标参数:2个、、从第二个参数下标开始查找直到遇到的第一个 arr1.indexOf(“a",5)
返回值:未找到 返回-1,找到返回下标
arr.includes("str")
效果: 查看找数组中是否存在某个元素
参数:1个,查看的字符元素
返回值:未找到 返回false,找到返回true
添加
arr.push("string",1);
效果:在数组最后面,添加一个或多个元素
参数:一个或多个number和string类型都可以,,参数必填,
返回值:修改原来的数组,返回修改后的数组长度
arr.unshift("string",1);
效果:在数组最前面,添加一个或多个元素
参数:一个或多个number和string类型都可以,,参数必填,
返回值:修改原来的数组,修改原来的数组,返回修改后的数组长度
删除
arr.pop("string");
效果:在数组最后面,删除元素
参数:一个或多个number和string类型都可以,,参数必填,
返回值:修改原来的数组,修改原来的数组,返回修改后的数组长度
arr.shift("string");
效果:在数组最前面,删除元素
参数:参数是可选的,不填就是第一个,填了就是排最前的指定元素
返回值:修改原来的数组,修改原来的数组,返回修改后的数组长度
数组排序
数组正序
arr.sort();
效果:将数组内元素,排序,数字按数值;字符,按编码
参数:无
返回值:排好序的数组
数组反转
arr.reverse();
效果:将数组内元素,倒序排序,数字按数值;字符,按编码
参数:无
返回值:排好序的数组
注: 以上这些都是响应式的。
arr.forEach( ()=>{} )
效果:用于遍历一个数组,
参数:接收三个参数,
value
,index
,self
,返回值:返回值为
undefined
var array1 = ['a', 'b', 'c'];
array1.forEach(value,key,self) =>{
console.log(value+2);//a2 b2 c2
console.log(key+2);//2 3 4
console.log(self.push(2));//['a', 'b', 'c',2]
});
arr.map( ()=>{} )
效果:用于遍历一个数组,每一项运行给定的函数
参数:接收三个参数,
value
,index
,self
,返回值:返回值是处理完的结果。
var array1 = [1, 4, 9, 16];
const map1 = array1.map((value,key,self) => value * 2); //对数组的每项*2
console.log(map1);// [2, 8, 18, 32]
arr.filter()
效果:用于过滤数组内的符合条件的值,
参数:函数,
返回值:返回值为满足条件的数组对象.
let list = [1, 2, 3];
let res = list.filter(item => item > 1);
console.log(res) // [2, 3]
every和some方法
效果:两个都是用于检测数组所有元素是否都符合指定条件,
参数:函数,
返回值:返回值为
Boolean
, 该方法是数组中必须全部值元素满足条件返回true
,否则false
,every是所有函数的每个回调都返回true的时候才会返回true,当遇到false的时候终止执行,返回false。
// every et list = [1, 2, 3]; let res = list.every(item => item > 0) console.log(res) // true let res1 = list.every(item => item > 1) console.log(res1) // false
some函数是存在有一个函数返回true的时候终止执行并返回true,否则返回false。
//some let list = [1, 2, 3]; let res = list.some(item => item > 0) console.log(res) // true
arr.reduce(fn(),下标)
效果:该方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
参数:我们一般只用前两个就行,
reduce
第一个参数回调函数,第二个参数是初始值
let list = [1, 2, 3];
let res = list.reduce(( prev, cur ) => prev += cur, 0)
console.log(res) // 6
改变原始数组值的有哪些
splice
、reverse
、sort
、push
、pop
、shift
、unshift
、fill
ES6系列 数组方法
- includes
- find
- findIndex
- flat
- fill
- Array.from
- Array.of
最后一句
这是小沉曦自己的学习心得!若有不正,还望斧正。希望渴望正义的你们不要吝啬对我的建议哟。嘻嘻,回见。