JavaScript数组的push（）等方法的使用

数组是值得有序集合。每个值在数组中有一个位置，用数字表示，叫做索引。JavaScript数组是无类型的：数组元素可以是任何类型，而且同一个数组中可以存在不同类型元素，甚至可以是对象或是其他数组，这就可以创建复杂的数据结构。JavaScript数组的索引基于2的32次方的位数值：第一个元素的索引为0，最大的索引可以是4294967294【(2)32-2】,数组最大可以容纳4294967295个元素。JavaScript数组是动态的：根据需要它们会自动增长或缩减。JavaScript数组是JavaScript对象的特殊形式。

JavaScript数组可以归纳为：一个构造函数、三个静态方法、一个length属性和数组实例方法。掌握着这些知识点，就可以把玩JavaScript数组了 ?

JavaScript数组的相关知识：一个构造函数、一个扩展运算符、三个静态方法、一个length属性和一数组实例方法。掌握这些知识点，就可以把玩JavaScript数组了 ~_~

Array是原生JS对象，包含了三个静态方法。同事Array也是JS数组的构造函数，Array作为数组的构造函数，语法如下：

let list = new  Array(1,2,3,4);

一般是使用字面量来初始化数组：

let list = [1,2,3,4];

数组的扩展运算符，是ES6+新增的。这三个点可以使用在JS的数组和对象上，把数组或对象展开，一般是结合其他表达式一起使用。

1、使用扩展运算符实现数组的浅拷贝：

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

2、函数快捷传参：

//实例 let params = ['读心',20,'前端开发工程师']; printInfo(...params); //等同于printInfo('读心',20,'前端开发工程师') //实例 let params = [98,58,69,78,2,53]; Math.max(...params); //等同于 Math.max(98,58,69,78,2,53)

3、解构赋值：


let [leader,...apprentices] = ['赵', '钱', '李', '周', '吴', '郑','王','冯']; console.log(leader); console.log(apprentices); //['钱', '李', '周', '吴', '郑','王','冯']

4、数组合并：

let arr = [25,36,15,24,10]; let str = [0,02]; let params = [...arr,...str]; console.log(params); //[25,36,15,24,10,0,02]

三个静态方法，一般场景中用不到。

Array.isArray()：用来判断一个变量是否为数组，

在ES5之前的写法：

var arr = ["读心",18,"前端开发"]; console.log(Object.prototype.toString.call(arr) === "[object Array]"); // true

现在可以这样写：

var arr = ["读心",18,"前端开发"]; console.log(Array.isArray(arrr)); // true

Array.from()：把类数组转化为数组。类数组就是包含length属性的对象。

let str = { "0":"duxin", "1":"25", "2":"8000", length:3 } let arr = Array.from(str); console.log(arr); //["duxin","25","8000"]

函数中的预置变量arguments也是类数组对象

function f(){ var args = Array.from(arguments); }

DOM 节点也是一个类数组对象

Array.from(document.querySelectorAll("div"))

Array.from()的第二个参数接收一个函数回调，生成数组后再进行一次map操作：

let str = { "0":"duxin", "1":"25", "2":"8000", length:3 } Array.from(str,val=>console.log(val)); //等同于Array.from(str).map(val=>console.log(val))

Array.of()：用来生成数组，与Array构造函数一样，但是行为和字面量声名模式一致。

let ar = Array.of("duxin",25,8000); //等同于 let ar = ["duxin",25,8000];

数组的length属性：length属性代表着数组的长度，可以给length赋值，从而修改数组的长度，遵循多空少删的原则（赋的值小于数组原来的长度，则是删除多余的；赋值大于数组原来长度，多出的留空白）

数组实例方法：用于操作数组，可以归类为三种类型：

1、改变当前数组变量

push()：向数组的尾部添加元素（接受多的参数）

pop()：从数组尾部删除元素

unshift()：向数组的头部添加元素（接受多个参数）

shift()：从头部删除元素

reverse()：反转数组，导致数组本身发生变化

splice(初始位置<负数时从尾部开始计数>,需要删除的元素<可选，不设置则默认为删到数组尾部>,插入元素<可选>，插入元素<>......)

sort()：对数组进行排序，默认是字典排序（按照ASCII的顺序来排序），把元素转换成字符串形式，按位排序。sort()也可以接受一个函数，该函数安顺比较前后两个元素，如果返回的值大于0，则前者排在后者之后；否则相反。

let arr = ["duxin",28,1000]; console.log(arr.sort());//[1000,28,"duxin"]; console.log(arr.sort(function (prev,next) { return prev-next })) //[28,1000,"duxin"]

可以对对象元素进行排序：

let str = [{name:"duxin",age:18}, { name: "清风", age: 12 }, { name: "明月", age: 19 }];console.log(str.sort(function(prev,next){ return prev.age-next.age; }));//[{ name: "清风", age: 12 },{name:"duxin",age:18},{ name: "明月", age: 19 }];

copyWithin()：把数组当前的元素复制到该数组的其他位置

arr.copyWithin(被替换的位置,复制元素的起点,复制元素的终点<可选，不设置则默认是从起点位置到数组尾部>))

fill()：指定某个值来填充整个数组

2、生成新的返回值，对当前的变量没有任何的影响

valueOf()：返回数组本身，不是拷贝

toString()：把数组展开，并且返回当前数组的字符串形式

join()：指定分隔符，把数组转化为字符串，默认分隔符为逗号

concat()：合并数组，就是浅拷贝

slice()：用来截取数组，数组本身不变

arr.slice(截取的起始位置<负数则从数组尾部开始计数>,截取终点位置<可选，默认是数组长度，不设置的话就是从起始位置到数组结尾>)

indexOf()：返回指定元素第一次出现的位置下标

lastIndexOf()返回指定元素最后一次出现的位置下标

***NaN永远返回-1

entrise()：返回当前数组完整结构遍历器

keys()：返回当前数组的索引

values()：返回当前数组的值

includes()：搜索指定元素是否在数组中，若在，则返回true，否则返回false。第二个参数指定开始搜索的位置。

flat()：拉平数组，接受一个参数表示拉平的层数，默认是一层

参数为Infinity 都拉平。

3、对数组做迭代遍历操作，并且返回相应的值，迭代的入参是回调函数

map()：操作数组每个元素，最终返回一个新的数组

forEach()：操作数组的每个参数，没有返回值

filter()：操作数组的每个元素，每次操作的结果为true的元素插入最终返回的数组（过滤）

some()：判断当前数组中是否有符合条件的元素，没有返回false，，否则返回true

every()：判断当前数组中是否含有所有元素都符合条件，都符合则返回true，否则返回false

reduce()：对当前数组从左到右依次执行函数，最后返回最终的值

reduceRight()：与reduce()相反

find()：寻找第一个符合条件的元素，并且返回该元素，没有则返回undefined

findIndex()：寻找第一个反符合条件的元素返回该元素的下标。没有则返回-1

flatMap()：对原数组进行map操作，把得到的数组进行拉平，只能拉平一层。

JavaScript数组的push（）等方法的使用相关推荐

创建零填充JavaScript数组的最有效方法？
在JavaScript中创建任意长度的零填充数组的最有效方法是什么? #1楼使用对象符号 var x = []; 零填充? 喜欢... var x = [0,0,0,0,0,0]; 充满" ...
javascript数组的属性、方法和清空-最全！！！(必看)
今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...
JavaScript数组遍历5 every方法
数组的every方法也可以对数组进行遍历,every方法也接上两个参数,第一个参数是一个函数,第二个参数是传入值:其中第一个参数函数可以接收3个参数,第一个参数是当前值,第二个参数是当前值的索引值,第 ...
17个实用的JavaScript数组和对象的方法
原文:Useful Javascript Array and Object Methods 作者:Robert Cooper 译者:Jim Xiao 前段时间,我收听了一个很棒的Syntax FM播客 ...
3种JavaScript 数组转换为字符串的方法
英文 | https://javascript.plainenglish.io/how-to-convert-a-javascript-array-into-a-string-f066c8839a1d ...
JavaScript 数组中的 indexOf 方法详解
最近项目遇到一个小问题代码我会简化成小例子展示给大家. 用心看到最后会有收获哈,基础扎实的童鞋可以直接跳到数组类型使用. 说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用(正则 ...
史上最全JavaScript数组去重的十种方法（推荐）
一.前言: 我们在实际工作中,或者在面试找工作时,都会用到或者被问到一个问题,那就是"数组如何去重".是的,这个问题有很多种解决方案,看看下面的十种方式吧! 二.数组去重方式大汇总 ...
JavaScript数组去重6种方法
数组去重涉及基础知识较多,总结了以下6个方法: 双重for循环,push新数组: 双重for循环,splice原数组: 单个for循环,遍历对象属性: 单个for循环,sort排序后遍历: ES5,i ...
JavaScript数组(2)---遍历/迭代方法 8种
最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历.转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询. 数组常用的方法 ECMAScript5为 ...

JavaScript数组的push（）等方法的使用

JavaScript数组的push（）等方法的使用相关推荐

最新文章

热门文章