数组是值得有序集合。每个值在数组中有一个位置,用数字表示,叫做索引。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之前的写法:

  1. var arr = ["读心",18,"前端开发"];
  2. console.log(Object.prototype.toString.call(arr) === "[object Array]"); // true
    现在可以这样写:
    var arr = ["读心",18,"前端开发"];
    console.log(Array.isArray(arrr)); // true 
    Array.from(): 把类数组转化为数组。类数组就是包含length属性的对象。
  1.  let str = { "0":"duxin", "1":"25", "2":"8000", length:3 }
  2.  let arr = Array.from(str);
  3.  console.log(arr); //["duxin","25","8000"]

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

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

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

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

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

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

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

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

数组的length属性:length属性代表着数组的长度,可以给length赋值,从而修改数组的长度,遵循多空少删的原则(赋的值小于数组原来的长度,则是删除多余的;赋值大于数组原来长度,多出的留空白)

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

1、改变当前数组变量

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

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

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

shift():从头部删除元素

reverse():反转数组,导致数组本身发生变化

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

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

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

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

  1.  let str = [{name:"duxin",age:18}, { name: "清风", age: 12 }, { name: "明月", age: 19 }];
  2.  console.log(str.sort(function(prev,next){
  3.  return prev.age-next.age;
  4.  }));//[{ 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()等方法的使用的更多相关文章

  1. javascript数组常用的遍历方法

    本篇文章给大家带来的内容是关于javascript数组常用的遍历方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 本文主要介绍数组常见遍历方法:forEach.m ...

  2. JavaScript 数组(Array)对象的方法

    JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...

  3. Javascript数组(1)--基本属性及方法

    数组Array是Javascript语言中非常重要的两种引用类型数据之一,另外一种为对象Object.Array的数据模型可分为两种进行存储:堆栈结构.队列结构. 昨天,确切说是前天了,去和大学同学见 ...

  4. JavaScript数组的22种方法

    原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法   前面的话 数组总共有22种方法,本文将其分为对象继 ...

  5. javascript数组的属性、方法和清空-最全!!!(必看)

    今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...

  6. 合并JavaScript数组的N种方法

    这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: var a = [ 1, 2, 3 ...

  7. Javascript数组Array的forEach方法

    Javascript数组Array的forEach扩展方法 forEach是最常用到的数组扩展方法之一,相当于参数化循环数组,它简单的在数组的每一个元素上应用传入的函数,这也意味着只有存在的元素会被访 ...

  8. <JavaScript>数组的sort()方法中比较函数是怎么工作的

    sort()函数比较时调用的是每个数组项的toString()方法,并非按数值大小进行比较,所以往往得不到我们想要的结果. 比如: ,,,,]; values.sort( ); alert(value ...

  9. JavaScript 数组中的 indexOf 方法

    let arr = ['orange', '2016', '2016']; arr.indexOf('orange'); //0 arr.indexOf('o'); //-1 arr.indexOf( ...

随机推荐

  1. Apache ShardingSphere 5.0.0 内核优化及升级指南

    经过近两年时间的优化和打磨,Apache ShardingSphere 5.0.0 GA 版终于在本月正式发布,相比于 4.1.1 GA 版,5.0.0 GA 版在内核层面进行了大量的优化.首先,基于 ...

  2. nginx反向代理出错:proxy_pass

    问题描述: 一台服务器代理访问另一台服务器,代码如下图所示: 重新加载nginx后不会跳到该域名,而是出现error的页面. 查看error.log日志为以下报错: 2021/03/09 23:07: ...

  3. 快速入门上手Markdown

    第一次接触Markdown是写代码初期看很多大佬的github,他们的项目一定会有一份文件叫Readme.md的文件 他们由一些简单美观的符号和汉字字母组成,编译之后成为一篇简单直观的文档 深入了解之 ...

  4. SPOJ 1557 GSS2 - Can you answer these queries II (线段树+维护历史最值)

    都说这题是 GSS 系列中最难的,今天做了一下,名副其实 首先你可以想到各种各样的在线乱搞想法,线段树,主席树,平衡树,等等,但发现都不太可行. 注意到题目也没有说强制在线,因此可以想到离线地去解决这 ...

  5. JS设计模式之建造者模式

    建造者模式(builder pattern)属于创建型模式的一种,提供一种创建复杂对象的方式.它将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式是一步一步的创建 ...

  6. 网站性能调优实战-学相伴KuangStudy

    面对并发我们是如何优化KuangStudy网站性能的? 每个项目都会随着用户和数据的增长调整架构,来面对未来的问题,我们也不例外,在1月5号我们平台正式公测后,引起了很多观众的热烈反响,仅仅4天,注册 ...

  7. 零基础学习java------23---------动态代理,ip,url案例

    1. 动态代理 2. ip,url案例 给定的access.log是电信运营商的用户上网数据,第一个字段是时间, 第二个字段是ip地址,第三个字段是访问的网站,其他字段可以忽略不计. 第一个字段是网段 ...

  8. eclipse上安装 windowBuilder方法

    最近因为需要用java Swing做一些组件设计,但想想以前在大学时候为了布局组件和位置设计花了很多时间.所以再网上查了一些带有可视化的设计插件用来提高工作效率. 其中一个是 windowBuilde ...

  9. 【J-Link】J-Link不支持(版本太低)

    事情起因,我原本可以烧录和仿真的(版本6.3.4),但是后来安装另一个东西,这个东西里面包含旧的J-Link驱动(版本5.1.2) 它把Keil文件夹下的JLinkARM.dll覆盖了,导致出现下面的 ...

  10. 100个Shell脚本——【脚本5】数字求和

    [脚本5]数字求和 编写shell脚本,要求输入一个数字,然后计算出从1到输入数字的和,要求,如果输入的数字小于1,则重新输入,直到输入正确的数字为止,示例: 一.脚本 #!/bin/bash whi ...