ES5 知道这些操作数组的方法还怕不够用?

吐槽君 分类:javascript

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( ()=>{} )

效果:用于遍历一个数组,

参数:接收三个参数,valueindexself

返回值:返回值为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( ()=>{} )

效果:用于遍历一个数组,每一项运行给定的函数

参数:接收三个参数,valueindexself

返回值:返回值是处理完的结果。

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

 

改变原始数组值的有哪些

splicereversesortpushpopshiftunshiftfill

ES6系列 数组方法

  • includes
  • find
  • findIndex
  • flat
  • fill
  • Array.from
  • Array.of
最后一句

这是小沉曦自己的学习心得!若有不正,还望斧正。希望渴望正义的你们不要吝啬对我的建议哟。嘻嘻,回见。

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容