js数组常用的方法

js数组的相关语法

一、数组的声明

1. 标准式写法

  • var arr = new Array();
  • new关键字:实例化,也就是创建
  • Array():数组的类对象(构造函数)
  • 数组为引用类型,唯一属性为length属性(长度属性)
  • js中数组属于内置对象
  • 数组是存储一系列值的(任意类型的值)
  • 数组存储值是以key:value的方式储存

2. 白话式写法

    var arr=[1,2,3,4];
    console.log(arr);//Array(4) 

二、数组的赋值

1. 在建立数组的时候直接赋值

  • 若是只有一个参数,参数为length属性,若是多个值,则参数就为赋值,有几个参数length就为几。
	var arr1 = new Array(5);
	console.log(arr1);
	var arr2 = new Array(1,2,3,4);
	console.log(arr2);

在这里插入图片描述

2. 根据键值进行赋值

  • 数组里面存在索引和值
   var arr3 = new Array();
   arr3[0] = 1;
   arr3[1] = "a";
   arr3[2] = true;
   arr3[3] = function(){};
   console.log(arr3);

在这里插入图片描述

三、数组的取值

	console.log(arr3[2]);//true

四、concat()—数组拼接方法

   var a = [1,2];
   var b = [3,4];
   console.log(a.concat(b));

在这里插入图片描述

五、join()—数组转化为字符串

  • 参数:separator—可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
   //字符串转化为数组
   var str = "abcdef";
   var strarr = str.split("");
   console.log(strarr);
   //数组转化为字符串
   console.log(strarr.join(""));

在这里插入图片描述

六、reverse()—数组翻转

  • 无参,对原数组有影响。
	var s = [1,2,3,4];
	//翻转成[4,3,2,1]
	console.log(s.reverse());

在这里插入图片描述

七、sort()—数组自带的排序方法

  • 参数:sortfunction—可选。规定排序顺序。必须是函数。
  • 直接调用sort方法,默认是从小到大排序。
	var f1 = [1,5,2,3,6,4];
	console.log(f1.sort());//默认:从小到大
	//改变sort的排序方式
    var f2 = f1.sort(function(n1,n2){
		return n2-n1;//n2-n1<0:从大到小排序;n2-n1>0:从小到大排序
	});
	console.log(f2);

在这里插入图片描述

八、数组追加的方法

1. 根据长度直接追加

	var f3 = [1,2,3];
	f3[f3.length] = 10;

2. push() —使用方法追加(往数组后面追加)

  • 对原数组有影响
  • 参数:item1, item2, …, itemX—必需。要添加到数组的元素。
	var f3 = [1,2,3];
	console.log(f3.push(20));//4---方法返回值为数组追加之后的长度
	console.log(f3);//[1, 2, 3, 20]

3. unshift()—往数组之前追加

  • 对原数组有影响
  • 参数:item1,item2, …, itemX—可选。向数组起始位置添加一个或者多个元素。
	var f3 = [1,2,3];
	console.log(f3.unshift(0));//4---方法返回值为数组追加之后的长度
	console.log(f3);//[0,1,2,3]

九、删除数组的方法

1. pop()—删除数组最后面的值

  • 对原数组有影响
	var f3 = [1,2,3];
	console.log(f3.pop());//3---返回删除后的值
	console.log(f3);//[1, 2]

2. shift()—删除数组最前面的值

  • 对原数组有影响
	var f3 = [1,2,3];
	console.log(f3.shift());//1--返回删除后的值
	console.log(f3);//[2,3]

在这里插入图片描述

十、数组检测的方法

1. every()------检测数组元素的每个元素是否都符合条件

  • 参数1:function(currentValue, index,arr)—必需。数组每个元素需要执行的函数。
  • (1) currentValue—必须。当前元素的值
  • (2) index—可选。当前元素的索引值
  • (3) arr—可选。当前元素属于的数组对象
  • 参数2:thisValue—可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
   var f3 = [1,2,3];
   var has = f3.every(function(val,index,item){
       console.log(item);//[1,2,3]
       return val%2 == 0;
   });
   console.log(has);//false

2. filter()--------检测数值元素,并返回符合条件所有元素的数组

  • 根据条件过滤数组中的元素
  • 参数1:function(currentValue, index,arr)—必需。数组每个元素需要执行的函数。
  • (1) currentValue—必须。当前元素的值
  • (2) index—可选。当前元素的索引值
  • (3) arr—可选。当前元素属于的数组对象
  • 参数2:thisValue—可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
   var f3 = [1,2,3];
   var has1 = f3.filter(function(value){
       return value%2!=0;
   });
   console.log(has1);//[1,3]

3. find()---------查找符合传入测试(函数)条件的数组元素

  • 根据条件开始查找每一位,只要满足条件的值,直接返回,后面的值就不看了,即返回符合条件的第一个值。
  • 参数1:function(currentValue, index,arr)—必需。数组每个元素需要执行的函数。
  • (1) currentValue—必需。当前元素
  • (2) index—可选。当前元素的索引值
  • (3) arr—可选。当前元素所属的数组对象
  • 参数2:thisValue—可选。 传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值
   var f3 = [1,2,3];
   var has2 = f3.find(function(value){
       //如果没有传给定的值,函数内部的this由undefined代替
       return value>1;
   });
   console.log(has2);//2

4. findIndex()—返回符合传入测试(函数)条件的数组元素索引。

  • 参数1:function(currentValue, index,arr)—必需。数组每个元素需要执行的函数。
  • (1) currentValue—必需。当前元素
  • (2) index—可选。当前元素的索引值
  • (3) arr—可选。当前元素所属的数组对象
  • 参数2:thisValue—可选。 传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值.
    var f3 = [1,2,3];
    var index=f3.findIndex(function(value){
        return value%3==0;
    });
    console.log(index);//2 

5. includes()—判断一个数组是否包含一个指定的值

  • 数据类型必须一致,返回值为boolean类型值。
  • 参数1:searchElement—必须。需要查找的元素值。
  • 参数2:fromIndex—可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
	var f3 = [1,2,3];
	console.log(f3.includes(2));//true

6. indexOf() lastIndexOf()----查找数组中的值,并返回索引值,没有返回-1

  • indexOf()—搜索数组中的元素,并返回它所在的位置。
  • lastIndexOf()—搜索数组中的元素,并返回它最后出现的位置。
  • 参数1:item—必须。查找的元素。
  • 参数2:start—可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
    var b=[1,2,3,4,5];
    console.log(b.indexOf(3));//2
    console.log(b.indexOf(3,3));//-1
    console.log(b.lastIndexOf(4));//3
    console.log(b.lastIndexOf(4,3));//3
    console.log(b.lastIndexOf(4,2));//-1 

7. isArray()-----判断对象是否为数组

  • 使用方法:Array.isArray(),不能直接使用对象.isArray()
    返回值为boolean类型值
	console.log(Array.isArray(f3));

8. some()— 检测数组元素中是否有元素符合指定条件

  • 参数1:function(currentValue, index,arr)—必需。数组每个元素需要执行的函数。
  • (1) currentValue—必须。当前元素的值
  • (2) index—可选。当前元素的索引值
  • (3) arr—可选。当前元素属于的数组对象
  • 参数2:thisValue—可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
  • 参数为回调函数,满足条件返回true,否则返回false
    var m = [1,2,3,4,'a','b'];
    var fk= m.some(function(value){
        if(typeof value==="string"){
            return value;
        }
    });
    console.log(fk);//true 

十一、数组截取的方法

1.slice()----从哪开始截,截几个,返回值是截取的值

  • 参数1:start—可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
  • 参数2:end—可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。
  • 截取之后原数组不受影响
   var m1 = [1,2,3,4];
   console.log(m1.slice(0, 3));//[1,2,3]
   console.log(m1);//[1,2,3,4]

2.splice()----从哪开始删,删几个,返回值是截取的值

  • 参数1:index—必需。规定从何处添加/删除元素。
    该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
  • 参数2:howmany—可选。规定应该删除多少元素。必须是数字,但可以是 “0”。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
  • 参数3:item1, …, itemX—可选。要添加到数组的新元素
  • 返回值是截取的值
  • 截取之后,元素受影响
   var m1 = [1,2,3,4];
   console.log(m1.splice(0, 2));
   console.log(m1);

十二、copyWithin()—从数组的指定位置拷贝元素到数组的另一个指定位置中

  • 参数1:target—必需。复制到指定目标索引位置
  • 参数2:start—可选。元素复制的起始位置。
  • 参数3:end—可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
  • 若是一个参数,表示从这个索引的位置开始全部复制,若是有两个参数,则表示从第二个索引的位置开始后面的全部复制到第一个索引的位置。
  • 操作数组完成以后对原数组有影响
    var a1=[1,2,3,4,5,6];
    console.log(a1.copyWithin(0, 1, 4));// [2, 3, 4, 4, 5, 6] 

十三、数组的其他方法

1.toString()----把数组转换为字符串

	console.log(m1.toString());//3,4

2.valueOf()----返回数组的原始值

   var h1 = new Array('a','b');
   console.log(h1.valueOf());
   console.log(h1);
   var h2 = ['a','b'];
   console.log(h2.valueOf());
   console.log(h2);
   var sf = new String("abcdef");
   console.log(sf.valueOf());
   console.log(sf);

在这里插入图片描述

3.keys()—返回数组的可迭代对象,包含原始数组的键(key)

  • 用于从数组创建一个包含数组键的可迭代对象
  • 如果对象是数组,返回true,否则返回false
   var m1 = [1,2,3,4];
   var inter = m1.keys();
   console.log(inter.next());
   console.log(inter.next());
   console.log(inter.next());

在这里插入图片描述

4.entries()—返回数组的可迭代对象

  • 该对象包含数组的键值(key/value)
  • 迭代对象中数组的索引值作为key,数组元素作为value
    var m1 = [1,2,3,4];
    var en = m1.entries();
    console.log(en.next());
    console.log(en.next());
    console.log(en.next());
    console.log(en.next());
    console.log(en.next()); 

在这里插入图片描述

5. fill()—使用一个固定值来填充数组

  • 参数1:value—必需。填充的值。
  • 参数1:start—可选。开始填充位置。
  • 参数1:end—可选。停止填充位置 (默认为 array.length)
  • 填充完成后对原数组有影响。
    var a=[1,2,3,4,5,6];
    console.log(a.fill('a'));//["a", "a", "a", "a", "a", "a"]
    console.log(a);//["a", "a", "a", "a", "a", "a"] 

6. map()映射—通过指定函数处理数组的每个元素,并返回处理后的数组。

  • 参数1:function(currentValue, index,arr)—必需。数组每个元素需要执行的函数。
  • (1) currentValue—必须。当前元素的值
  • (2) index—可选。当前元素的索引值
  • (3) arr—可选。当前元素属于的数组对象
  • 参数2:thisValue—可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。
  • map映射–一个数组映射为一个新的数组
    var o=[1,2,3,4,5,6];
    //map映射返回值是映射之后一个新的数组
    var m= o.map(function(value,index){
        return value*=value;
    });
    console.log(m);//[1, 4, 9, 16, 25, 36] 
  • map映射方法内部匿名函数不写返回值,可以当遍历使用
    o.map(function (value,index) {
        console.log(value);//1 2 3 4 5 6
    }) 

6. reduce()—叠加器

  • 参数1:function(total,currentValue, index,arr)—必需。用于执行每个数组元素的函数。
  • (1) total 必需。初始值, 或者计算结束后的返回值。
  • (2) currentValue—必需。当前元素
  • (3) currentIndex—可选。当前元素的索引
  • (4) arr—可选。当前元素所属的数组对象。
  • 参数2:initialValue—可选。传递给函数的初始值
   var num = [1,2,3,4];
   var number = num.reduce(function(all,value){
       return all+value;
   });
   console.log(number);
  • all为之前相加的值,value为下一个值
    在这里插入图片描述
	var num = [1,2,3,4];
	var number = num.reduce(function(all,value){
		return all*value;
	});
	console.log(number);

在这里插入图片描述

  • 8
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南初️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值