Javascript(数组)

已于 2023-04-03 10:07:48 修改
阅读量150 收藏
点赞数
分类专栏： 基础 文章标签： javascript
于 2022-06-30 17:37:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55086255/article/details/125541604
版权

创建：

1、Array 构造函数 

var arr1 = new Array();  

var arr3 = new Array(“lily”,“lucy”,“Tom”)

2、数组字面量

var arr4 = [];

var arr6 = [“lily”,“lucy”,“Tom”];

数组的访问：数组名[角标]   二维数组：数组名[角标][角标]

数组的更改 ：数组名[角标]=新值

数组的属性：length 直接返回数组的长度

3、isArray() 这个方法用来判断一个对象是不是数组，是的话返回true，否则返回false

var arr=[1,2,5,8,7]
Array.isArray(arr)//true

4、split() 方法用于把一个字符串分割成字符串数组。

方法：

方法用例

join()

不传默认用逗号分隔

var arr = [1,2,3];

console.log(arr.join("-")); // 1-2-3

function repeatString(str, n) { return new Array(n + 1).join(str); } console.log(repeatString("abc", 3)); // abcabcabc

push()和pop()

push()返回修改后数组的长度

pop()返回移除的项

var arr = ["Lily","lucy","Tom"];

var count = arr.push("Jack","Sean");

console.log(count); // 5

console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

var item = arr.pop();

console.log(item); // Sean

console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

shift()和unshift()

shift()返回删除元素的值；如果数组为空则返回undefined 

unshift()返回数组的长度

var arr = ["Lily","lucy","Tom"];

var count = arr.unshift("Jack","Sean");

console.log(count); // 5

console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

var item = arr.shift();

console.log(item); // Jack

console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

sort()

sort()调用每个数组项的 toString()转型方法，然后比较得到的字符串

var arr1 = ["a", "d", "c", "b"];

console.log(arr1.sort()); // ["a", "b", "c", "d"]

console.log(arr1); // ["a", "b", "c", "d"]（原数组改变）

function sortNumber(a,b){return a - b};

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(sortNumber)); // [3, 13, 24, 51]

reverse()

var arr = [13, 24, 51, 3];

console.log(arr.reverse()); //[3, 51, 24, 13]

console.log(arr); //[3, 51, 24, 13](原数组改变)

concat()

concat()没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1,3,5,7];

var arrCopy = arr.concat(9,[11,13]);

console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]

console.log(arr); // [1, 3, 5, 7](原数组未被修改)

var arrCopy2 = arr.concat([9,[11,13]]);

console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]

console.log(arrCopy2[5]); //[11, 13]

slice()

slice()当出现负数时，将负数加上数组长度的值（6）来替换该位置的数

var arr = [1,3,5,7,9,11];

var arrCopy = arr.slice(1);

var arrCopy2 = arr.slice(1,4);//[1,4)

var arrCopy3 = arr.slice(1,-2);

var arrCopy4 = arr.slice(-4,-1);

console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)

console.log(arrCopy); //[3, 5, 7, 9, 11]

console.log(arrCopy2); //[3, 5, 7]

console.log(arrCopy3); //[3, 5, 7]

console.log(arrCopy4); //[5, 7, 9]

splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）

arr.splice(index , howmany , item1,.....,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX：可选。向数组添加的新项目。

返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。

var arr = [1,3,5,7,9,11];

var arrRemoved = arr.splice(0,2);

console.log(arr); //[5, 7, 9, 11]

console.log(arrRemoved); //[1, 3]

var arrRemoved2 = arr.splice(2,0,4,6);

console.log(arr); // [5, 7, 4, 6, 9, 11]

console.log(arrRemoved2); // []

var arrRemoved3 = arr.splice(1,1,2,4);

console.log(arr); // [5, 2, 4, 4, 6, 9, 11]

console.log(arrRemoved3); //[7]

indexOf()和 lastIndexOf()

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。

lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符

array.indexOf(item,start)

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]开始检索。

var arr = [1,3,5,7,7,5,3,1]; console.log(arr.indexOf(5)); //2 console.log(arr.lastIndexOf(5)); //5 console.log(arr.indexOf(5,2)); //2 console.log(arr.lastIndexOf(5,4)); //2 console.log(arr.indexOf("5")); //-1
forEach()

没有返回值

参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];

arr.forEach(function(x, index, a){ console.log(x + '|' + index + '|' + (a === arr)); });

// 输出为： // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true

map()

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.map(function(item){ return item*item; });

console.log(arr2); //[1, 4, 9, 16, 25]

filter()

返回一个新数组, 包含通过所提供函数实现的测试的所有元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var arr2 = arr.filter(function(x, index) { return index % 3 === 0 || x >= 8; }); console.log(arr2); //[1, 4, 7, 8, 9, 10]

every()判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.every(function(x) { return x < 10; }); console.log(arr2); //true var arr3 = arr.every(function(x) { return x < 3; }); console.log(arr3); // false
some()判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.some(function(x) { return x < 3; }); console.log(arr2); //true var arr3 = arr.some(function(x) { return x < 1; }); console.log(arr3); // false
reduce()和 reduceRight()

参数：前一个值、当前值、项的索引和数组对象。

不给函数传递迭代初始值时初始值为数组第一项，函数从数组第二项开始迭代；若我们给函数传递迭代初始值，则函数从数组第一项开始迭代。

reduceRight()语法：arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)

total ：必需。初始值, 或者计算结束后的返回值。

cur ：必需。当前元素。

index ：可选。当前元素的索引。

arr：可选。当前元素所属的数组对象。

initialValue：可选。传递给函数的初始值。

var values = [1,2,3,4,5];

var sum = values.reduceRight(function(prev, cur, index, array){

return prev + cur; },10);

console.log(sum); //25

Array.from()

用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组

let json ={

'0':'卢',

'1':'本',

'2':'伟',

length:3

}

let arr = Array.from(json);

console.log(arr); // ["卢", "本", "伟"]

Array.of()

将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组
let arr1 = Array.of(1,2,3);    
let arr2 = Array.of([1,2,3]);
let arr3 = Array.of(undefined);
let arr4 = Array.of();
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [[1, 2, 3]]
console.log(arr3); // [undefined]
console.log(arr4); // []

find()

方法返回通过测试（函数内判断）的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

回调函数可以接收3个参数，依次为当前的值（currentValue）、当前的位置（index）、原数组（arr）

注意：find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。

let Arr = [1,2,5,7,5,9];
let result1 = Arr.find(function(currentValue,index,arr){            
    return currentValue>5;
});
let result2 = Arr.find(function(currentValue,index,arr){            
    return currentValue>9;
});
console.log(result1); // 7
console.log(result2); // undefined
   let Arr = [
        {
            id:1,
            name:"张三"
        },
        {
            id:2,
            name:"李四"
        }        
    ];
    let obj = Arr.find(function(currentValue,index,arr){            
        return currentValue.id===1;
    });
    console.log(obj.name); // 张三

findIndex ()

默认返回的是索引，如果没有符合条件的元素返回 -1
    let Arr = [1,2,5,7,5,9];
    let result1 = Arr.findIndex(function(currentValue,index,arr){            
        return currentValue>5;
    });
    let result2 = Arr.findIndex(function(currentValue,index,arr){            
        return currentValue>9;
    });
    console.log(result1); // 3
    console.log(result2); // -1

fill()

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

array.fill(value,  start,  end)

value：必需。填充的值。

start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

    let arr = [1,2,3,4,5,6];
    arr.fill(0);  // [0, 0, 0, 0, 0, 0]
    arr.fill(0,1);  // [1, 0, 0, 0, 0, 0] 
    arr.fill(0,1,2);  // [1, 0, 3, 4, 5, 6]
    arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
    arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]
for...ofkeys()是对键名的遍历
    let arr = ["a","b","c","d"];
    for(let i of arr.keys()){
        console.log(i);
    }
    //打印：
    // 0
    // 1
    // 2
    // 3
values()对键值的遍历
<script>
    let arr = ["a","b","c","d"];
    for(let i of arr.values()){
        console.log(i);
    }
    //打印：
    // a
    // b
    // c
    // d
</script>
entries()是对键值对的遍历
<script>
    let arr = ["a","b","c","d"];
    for(let i of arr.entries()){
        console.log(i);
    }
    //打印：
    // [0, "a"]
    // [1, "b"]
    // [2, "c"]
    // [3, "d"]
    for(let [idx,item] of arr.entries()){
        console.log(idx+":"+item);
    }
    //打印：
    // 0:a
    // 1:b
    // 2:c
    // 3:d
</script>

includes()

判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

arr.includes(searchElement ,  fromIndex)

searchElement ： 必须。需要查找的元素值。

fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

    let arr = ["a","b","c","d"];
    let result1 = arr.includes("b");
    let result2 = arr.includes("b",2);
    let result3 = arr.includes("b",-1);
    let result4 = arr.includes("b",-3);
    console.log(result1);  // true
    console.log(result2);  // false
    console.log(result3);  // flase
    console.log(result4);  // true

copyWithin()

用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员

array.copyWithin(target ,  start ,  end)

target ：必需。从该位置开始替换数据。

start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。

end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

let arr = [1,2,3,4,5,6];
let result1 = [1,2,3,4,5,6].copyWithin(0);
let result2 = [1,2,3,4,5,6].copyWithin(0,1);
let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);
let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);
let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);
console.log(result1);  // [1, 2, 3, 4, 5, 6]
console.log(result2);  // [2, 3, 4, 5, 6, 6]
console.log(result3);  // [1, 4, 5, 4, 5, 6]
console.log(result4);  // [1, 3, 4, 5, 5, 6]
console.log(result5);  // [1, 3, 4, 5, 6, 6]

小可爱的笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript数组
m0_72313625的博客
08-05 2316
JavaScript 数组用于在单一变量中存储多个值，数组是一种特殊的变量，它能够一次存放一个以上的值。数组当中首先就是数组的创建方式，然后就是遍历数组中的元素，根据要求生成新的数组，最后就是增加数组元素，以及熟练掌握和理解冒泡排序的思路和书写方法...
JavaScript（数组）
An_1999的博客
11-26 231
创建数组的两种方式 var arr = [1, 2, 3] // 利用数组字面量创建 var arr1 = new Array(); // 利用new Array() 使用new Array()创建注意： var arr1 = new Array(); // 创建了一个空数组 var arr1 = new Array(2); // 这个2等于 数组长度为2 ...
JavaScript 数组【详解】
Jin_Xiang123的博客
12-25 3598
在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。数组中的元素可以通过索引来访问和修改，索引从0开始。JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。操作示例描述创建数组。
JavaScript 数组
qq_55503600的博客
03-16 1409
数组是由对象发展而来，对象包含数组； 数组是一种有序的数据集合，数组中各个成员之间使用逗号进行分隔，它们被称为数组元素。 ['数组元素1','数组元素2','数组元素3','数组元素4'] 1、创建数组 （1）构造函数创建数组 语法格式：var 变量名 = new Array(元素 0，元素 1，...，元素 n); var array = new Array(1,2,3,4); （2）数组直接量创建数组 语法格式：var 变量名 = [元素 0，元素 1，...，元素 n]; va
javascript基础之(数组)
YANGMENGZHENG的博客
11-30 1050
目录 一、初识数组 1、创建数组 2、访问数组元素 3、数组的遍历 4、举例 (1.)获取数组元素中的最大值 (2.) 数组转为字符串 5、数组元素的操作 二、数组排序算法 1、冒泡排序算法 2、插入排序算法 ​ 三、二维数组 1、创建二维数组 2、元素的访问 3、二维数组求和 4、二维数组的转置 一、初识数组 类型相同的数据的集合。 1、创建数组 (1.)使用'[]'字面量创建 var 变量名 = [1,2,3,4]; (2.)使用'new Arr...
JavaScript数组详解
09-20
JavaScript 数组详解 JavaScript 数组是有序列表，是存放多个值的集合。数组的大小是可以动态调整的，每一项都可以保存任何类型的数据。 数组创建 数组可以通过 Array 构造函数创建，也可以使用数组字面量方式...
Javascript数组Array方法解读
10-22
是Javascript数组Array系列文章的第二篇，主要给大家讲解的是javascript数组arrayd的所有方法，希望大家能够喜欢。
javascript数组详解
10-25
JavaScript中的数组是一种特殊的数据结构，它允许我们在单个变量中存储多个值，并通过索引来访问这些值。数组的创建可以通过`new`关键字配合数组构造函数完成，也可以使用数组字面量表示法。这两种方法分别是： 1. ...
JavaScript 数组详解
10-26
学习js就不得不学他的数组，这篇文章是由色拉油整理下，需要学习js数组的朋友可以参考下
Vue基础
weixin_55086255的博客
07-10 4935
1. Vue的基本原理 当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。 2. 双向数据绑定的原理 Vue.js 是采用数据劫持结合发布
javaScript基础
weixin_55086255的博客
06-29 1452
1.javaScript:负责网页功能的 ECMAScript(核心) + DOM(页面操作) + BOM(浏览器操作相关的) script需要放在body的结束标签之前 2.编程语言 c ：操作系统、嵌入式、驱动开发 c++ ：桌面软件、游戏 (英雄联盟) c# ：Windows桌面软件、.NET Web、服务器 java:企业级应用，web开发、服务器后端 python php javaScript 3.程序员 变量：内存中专门用来存储数据的空间 程序: 处理数据的 ...
面试题（更新中）
weixin_55086255的博客
07-23 1276
1、面向对象和面向过程的区别 面向对象=》 组件（方法1，方法2，方法3） 面向过程=》 顺序 2、this指向 谁调用指向谁 方式不同指向不同 function Person(name){ this.name=name //Person console.log(this) } let p=new Person(); let obj={ print:Person } Person() //window obj.print() //object setInterval(P
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
weixin_55086255的博客
06-29 625
1、输入网址 当你开始输入网址比如www.cnblogs.com时游览器就可以在书签或者历史记录里面去搜索相关的网址推荐给你。 2、游览器查找域名的IP地址 ① 请求发起后，游览器首先会解析这个域名，首先它会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。 ② 如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS(域名分布系统)服务器 。本地DNS服务器一般都是你的网络接
HTML CSS
weixin_55086255的博客
06-29 499
互联网行业 1.产品经理：提需求的 2.UI设计师：把产品经理的线框图转化为设计稿 3.前端开发工程师实现为一个真正的程序跟浏览器打交道的 4.后端开发工程师操作数据的跟服务器打交道的 5.测试工程师找bug的 6.运维工程师项目上线的维护 工作范畴 pc端： 网站：电商网站企业站 后台管理系统：互联网办公的 移动端： app:ios开发工程师和安卓开发工程师 小程序： h5：webapp 世界上五大浏览器 chrome(...
浏览器（http）缓存机制
weixin_55086255的博客
10-25 396
浏览器（http）缓存机制机制是根据HTTP报文的缓存标识进行的； http报文： HTTP请求(Request)报文，报文格式为：请求行 – HTTP头(通用信息头，请求头，实体头) – 请求报文主体(只有POST才有报文主体) HTTP响应(Response)报文，报文格式为：状态行 – HTTP头(通用信息头，响应头，实体头) – 响应报文主体 缓存过程： 浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决
react基础
weixin_55086255的博客
08-25 258
生命周期
TS基础知识
weixin_55086255的博客
07-26 233
ts
小可爱的整理啊
weixin_55086255的博客
04-26 188
当前时间前半小时时间： formatDate(Number(new Date()) - 0.5 * 60 * 60 * 1000); 排序： .sort((a: any, b: any) => a.code - b.code) 时间戳： new Date(start)).getTime()/1000 时间： new Date(transdate(start) * 1000).toLocaleString().replace(/:\d{1,2}$/,’ ')) ...
javascript 数组
最新发布
05-26
JavaScript 数组是用于存储多个值的变量，它们可以存储字符串、数字和对象等数据类型。JavaScript 数组是动态的，意味着您可以随时添加或删除元素。数组的元素可以通过索引号（下标）来访问和修改，而索引号从0开始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值