JavaScript的数组教程(最详细,更新至es6新语法)

简介: JavaScript的数组教程(最详细,更新至es6新语法)

创建数组的几种方式,最全面

//第一种 字面量创建
var arr1=[1,23,4];
//第二种 new Array() 这是一个构造函数创建方式
var arr2=new Array(1,223,34);
//第三种 Array 也是构造函数方式创建
var arr3=Array(23,21,333);
//第四种 Array.of()
var arr4= Array.of(2,34,2);
//第五种 Array(数量).fill(value)
var arr5= Array(4).fill(1,233,34,4)

数组方式创建的区别

// new Array() 这是一个构造函数创建方式
var arr2=new Array(1,223,34);
// Array 也是构造函数方式创建
var arr3=Array(23,21,333);
// Array.of()
var arr4= Array.of(2,34,2);
// Array(数量).fill(value)
var arr5= Array(4).fill(1,233,34,4)
通过构造函数方式创建数组,需要确保Array前面没有被更改还有重新定义
new Array()  Array() 这二种方式如果只传一个值,就是数组的长度,值为空
var ar1=new Array(9);
//值为空,长度为9的空数组
Array.of() [] 这俩种方式虽然一个是构造函数创建方式一个是字面量创建方式
但是传一个值就是创建一个值的数组元素
var ar2 =Array.of(1)
var ar3 =[3]
是创建一个值的数组

**注意:**工作中常用的还是字面量创建,因为比较优美,而且还不需要像Array创建的时候还要查看之前是否重新定义以及被更改。

访问数组的方式

通过数组的下标可以进行访问,数组的下标是从零开始的,到数组最大的长度减一,因为数组是从零开始的,但是长度确实从1开始的

var arr=[1,2,3];、
//       0 1  2
//获取数组长度 length方法
console.log(arr.length)
//获取数组中的2
console.log(arr[1])
//因为数组是从零开始的,到达2的时候正好为1
//如果访问超过数组长度的元素
console.log(arr[76])
//因为数组里没有所以返回undefiend

数组添加元素

var arr=[1,343,54,6,5,23,43,2,342];
//如果数组索引下标为3有值的话则会被覆盖掉
arr[3]=45;
//如果数组长度大于当前长度,则会增加到该长度,中间没有值的都为空 empty是空的意思 如果访问则是undefined
arrp[98]=1;
//也可以通过length的方式就行追加

数组删除元素

var ayy1=[12,342,3,2,32,2]
//可以通过length进行删减
arr.length=5;

数组遍历

//采用for循环进行遍历
var arr=[121,34,3,232,23,2]
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
//for..of循环  ele 代表循环出来的每一项 arr代表数组名字
for(let ele of arr){
console.log(ele)
}
//forEach 
arr.forEach((数组每一个元素,索引, 数组本身)=>{})

红色预警好好学这里,重点重点重点 数组的栈模式

//栈是一种后入先出的数据结构,就是说最后一个放进去的元素,是第一个被拿出来的
//JavaScript数组原生支持栈的模式
//定义一个栈,也是字面量创建数组
var arr=[1,23,34]
//入栈,往arr后面添加数组,也可以添加多个,入栈也可以说是添加
arr.push(4)
//出栈 从栈里面删除他并且返回删除的值,删除最后一个值并返回,可以使用变量接受,也可以不用
arr.pop()
//peek操作
//就是通过length长度进行操作

红色预警: 先入先出的数据结构

var var arr=[5,23,34]
//入队
arr.push(2,34,34,4)
//出队 删除第一个元素 返回删除的数组,原数组改变
let ar1=arr.shift()
//头部插入元素unshift()
arr.unshift(12,3,2)

数组方法

//反转数组 reverse()
var arr=[322,2134,3]
arr.reverse()
//返回修改后的数组且改变原数组
//也可以用来分隔字符串 如果split不传参数则进行分隔字符串变成一个数组join是字符串拼接的方法,分隔每个字符串使用
console.log('hello',split().reverse().join())

数组排序

var arr=[1,2,34,3,45,45,1];
//升序排列
arr.sort()
a是数组前一个元素,b是后一个元素 降序排列
arr.sort((a,b)=>{
if(a>b){
return -1;
}else if(a<b){
return 1;
}else{
return 0;
}
})
arr.sort((a,b)=>b-a)

数组链接

var arr1=[1,2,34,56,45,34];
var arr2=[231,2132,12];
//可以传多个数组,进行合并
arr1.concat(arr2)

数组裁切,返回数组的一部分

slice(a,b)方法,从a位置截取到b位置停止,不包含b位置,返回截取的字符串

map方法

map()方法不会改变原数组可以return出去而forEach不行
var arr1=[12,323,34,321,12,332]
//返回新数组
var aww=arr1.map(ele=>ele*2)

reduce方法 累加器

var arr=[1,23,43,3423,321,232]
var res=arr.reduce((tol,curre)=>tol+curre,0)
//第一个是数组中第一个二个参数,第二个参数是初始值,如果不给初始值的情况下,默认是数组中第一个和第二个参数开始相加,给了初始值,就从初始值进行相加

数组过滤,筛选数组中的值 filter

var arr=[12,324,3,44,5,4565]
过滤大于13的值,如果大于13则为true 存储在新数组中
var filte=arr.filter(item=>item>13)

数组检测 every()

俩种方式:检测是否符合某种条件,如果符合就返回true,不符合就返回false
检测是否包含某个参数,如果符合就返回true,不符合就返回false
var arr=[12,23,43,45,45,56,65,6,12]
var res=arr.every(item=> item>0);
所有大于0返回true,判断所有元素
//some判断单个元素
var arr1=arr.some(item=>item>5)
//如果有一项大于5就返回true

结构操作符:把数组的值赋值给变量

var arr=[123,454,23,23123,23]
var [a,b,c,d]=arr;

rest操作符 ,三个点 … 剩余参数的意思

多维数组

let arr=[1,23,[12,2]]
相关文章
|
6天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
13 3
|
12天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
17天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
16 4
|
18天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
16 2
|
21天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
19 3
|
21天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
18 1
|
21天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
27 1
|
17天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
11 0
|
21天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
175 0