博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS里的Array
阅读量:6115 次
发布时间:2019-06-21

本文共 3914 字,大约阅读时间需要 13 分钟。

Array

写之前巩固一下JS的七种数据类型:number, string, boolean, null, undefined, symbol, object,

由此可见, Array属于object.

Array是JS的原生对象, 同时也是一个构造函数.

构造函数

var arr = new Array(2); // 生成一个两个成员的数组,每个位置都是空值//等同于var arr = Array(2);复制代码

Array构造函数有个很大的缺陷, 就是不同的参数, 会导致不一致性,比如:

var arr = new Array(2); // 第一个参数2代表数组的lengthvar arr = new Array(2,2); // 第一个参数2代表数组的第一个元素var arr = new Array(); // 返回一个空数组var arr = new Array('abc'); // 返回一个数组['abc']复制代码

因此,通常创建数组的时候,不建议使用构造函数创建, 使用数组字面量最好:

var arr = [1,2];复制代码

遍历

// 下面是两个数组 arr 和 objvar arr = [1,2]; // 内存中 __proto__, 指向的是Array.prototypevar obj = {
0:1, 1:2, 'length':2}; // 内存中 __proto__, 指向的是Object.prototype// 遍历arrfor(let i = 0; i < arr.length; i++){ console.log(i, arr[i])}// 0 1// 1 2// 遍历objfor(let i = 0; i < obj.length; i++){ console.log(i, obj[i])}// 0 1// 1 2obj.xxx = 'xxx';// 得到obj为obj = {
0:1, 1:2, 'length':2, xxx:"xxx"}// 再次遍历obj得到// 0 1// 1 2// 换一种方法遍历for(let key in obj){ console.log(key, obj[key])}// 0 1// 1 2// 2 3// length 3// xxx xxx复制代码

由上面的例子可以总计出:

  1. 所以遍历是是遍历, 和是不是数组无关, 有关的是有没有下标.
  2. 数组之所以为数组, 是因为你觉得他是数组, 觉得是数组就使用for(let i = 0;i<obj.length;i++)进行遍历, 觉得不是就使用for(let key in obj)遍历.
  3. 数组本质: proto(原型)指向了Array.prototype.
  4. 伪数组:原型链中____proto___没有指向Array.prototype;(例如:上面的obj,arguments)

静态方法

Array.isArray 方法返回一个bool值, 表示参数是否为数组.

var arr = [1,2,3];typeof arr // 'object'Array.isArray(arr) // true复制代码

实例方法

讲实例方法之前,先看下Array创建之后的内存图:

  • valueOf(), toString()

所有对象都拥有的两个公用方法.

var arr = [1,2,3];arr.valueOf(); // [1,2,3]arr.toString(); // "1,2,3"复制代码
  • push(), pop()

push向数组添加一个或者元素, pop删除数组的最后一个元素, 两个方法都会改变原数组

var arr = ['a', 'b', 'c'];arr.push(1)arr.push('d')arr.push(true)arr // ['a', 'b', 'c', 1, 'd', true]var arr = ['a', 'b', 'c']arr.pop() // ['a', 'b']复制代码

push和pop结合使用, 构成了后进先出的stack结构.

  • shift(), unshift()

shift删除数组的第一个元素, unshift在数组第一个位置添加元素, 两个方法都会改变原数组

var arr = ['a', 'b', 'c'];a.shift() // ['b', 'c']// 使用shift可以清空一个数组var arr = ['a', 'b', 'c'];a.unshift('x', 'd') // ['x', 'd', 'a', 'b', 'c']复制代码

shift和unshift结合使用, 构成了先进先出的queue结构.

  • join()

join数组元素之间用指定参数作为分隔符拼接

var arr = [1,2,3];arr.join(',') // "1,2,3"arr.join() // "1,2,3" 不加参数,默认用逗号拼接arr.toString(arr) // "1,2,3" 与join不同, 只是巧合arr + "" // "1,2,3" 与join不同, 只是巧合复制代码
  • concat()

concat拼接两个数组,生成一个新数组, 原数组不变

var a = [1,2,3];var b = [4,5,6];a.concat(b) // [1,2,3,4,5,6]a.concat([]) // [1,2,3]a.concat([]) !== a复制代码
  • reverse()

reverse颠倒排列数组元素 , 改变原数组

var arr = [1,2,3];arr.reverse(); // [3,2,1]复制代码
  • sort()

sort对数组成员进行排序, 快速排序方法, 需要接受一个函数, 函数返回排序依据, 改变原数组

var a = [1,3,6,2,5];a.sort(function(x,y){ return x-y }) // [1,2,3,5,6] 如果函数返回值小于等于0, 第一个元素排在第二个元素前面a.sort(function(x,y){ return y-x }) // [6,5,3,2,1] 如果该函数的返回值大于0,表示第一个成员排在第二个成员后面var students = ['小明','小红','小花'] ;var scores = { 小明: 59, 小红: 99, 小花: 80 };students.sort(function(x,y){    return scores[x] - scores[y]})复制代码
  • map()

map将所有元素依次传入参数函数, 并将每一次的执行结果组成一个新数组返回, 不改变原数组.

var a = [1, 2, 3];a.map(function(n){    return n + 1''}) // [2, 3, 4]复制代码
  • forEach()

forEachmap方法相似, 也是对数组的所有成员依次执行参数函数, 但是forEach不会有返回值,只用来操作数据.

// forEach 有三个参数, 通常只写两个参数1. 当前值2. 当前位置3. 数组本身var out = [];[1, 2, 3].forEach(function(elem) {  this.push(elem * elem);}, out); // 其中this 就是[1,2,3], 第一个参数是一个函数, 第二个参数是空数组out, 回调函数内部的this指向了outout // [1, 4, 9]复制代码
  • filter()

filter过滤数组元素, 它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

var a = [1,2,3,4,5,6];a.filter(function(value){    return value % 2 === 0})// [2,4,6]a.filter(function(value,index){    return index % 2 !== 0})// [1,3,5]复制代码
  • reduce()

reduce方法依次处理数组的每个成员,最终累计为一个值.下面是四个参数:

  1. 累积变量,默认为数组的第一个成员
  2. 当前变量,默认为数组的第二个成员
  3. 当前位置(从0开始)(可选)
  4. 原数组 (可选)
var a = [1,2,3,4,5];a.reduce(function(a,b){    console.log(a,b);    return a+b;})// 15复制代码
  • 使用reduce表示map
var a = [1,2,3];a.reduce(function(arr,n){    arr.push(n*2);    return arr;},[])// [2,4,6]复制代码
  • 使用reduce表示filter
var a = [1,2,3,4,5,6];a.reduce(function(arr,n){    if(n % 2 === 0){        arr.push(n)    }    return arr}, [])// [2, 4, 6]复制代码

转载于:https://juejin.im/post/5c73b820e51d4564d47eb34b

你可能感兴趣的文章
.Net CLR 中的同步机制(三): AutoResetEvent和ManualResetEvent
查看>>
MapServer WinForm开发成功
查看>>
大型JavaScript应用程序架构模式
查看>>
XDomainRequest object
查看>>
<%=字符串%>回刷技巧(小技巧)
查看>>
ExtAspNet官方示例网站和官方论坛速度归来!
查看>>
android.content.res.Resources$NotFoundException: Resource ID解决办法
查看>>
学习网址
查看>>
[原] insert into … on duplicate key update / replace into 多行数据
查看>>
SQL查询:主从表 报表方式显示
查看>>
JS提取子字符串函数比较
查看>>
[置顶] 程序员学数据库那些事儿
查看>>
C#环境下,文本框翻屏,怎么一直显示当前插入的内容!!!!!!!!!!!!!!!!...
查看>>
Openssl pkey命令
查看>>
迭代接口的IEnumerator
查看>>
Chrome/Chromium HTML5 video 视频播放硬件加速
查看>>
HDU 3622 Bomb Game(2-sat)
查看>>
phpexcel 字符串转码
查看>>
mock server相关解决方案
查看>>
Spring + Spring MVC+Hibernate框架整合详细配置
查看>>