JavaScript数组总汇

Posted 独行的心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript数组总汇相关的知识,希望对你有一定的参考价值。

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

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

数组的构造函数

Array是原生JS对象,包含了三个静态方法,同时也是JS数组的构造器函数,作为数组的构造函数,语法如下:

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操作:

     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"]

 

sort()可以对对象进行排序:

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数组总汇的主要内容,如果未能解决你的问题,请参考以下文章

如何将此 JavaScript 代码片段翻译成 Parenscript?

JavaScript单行代码,也就是代码片段

JavaScript 片段

javaScript基础知识总汇

JavaScript 代码片段

10个JavaScript代码片段,使你更加容易前端开发。