JavaScript数组

栏目: JavaScript · 发布时间: 4年前

内容简介:在使用构造函数创建数组时如果传入一个数字参数,则会创建一个长度为参数的数组,如果传入多个,则创建一个数组,参数作为初始化数据加到数组中数组(JS理解:数据就是原型链中有

在使用构造函数创建数组时如果传入一个数字参数,则会创建一个长度为参数的数组,如果传入多个,则创建一个数组,参数作为初始化数据加到数组中

var a1 = new Array(5);
console.log(a1.length);//5
console.log(a1); //会生成一个length为5,每一个都是undefined的数组

var a2 = new Array(5,6);
console.log(a2.length);//2
console.log(a2); //[5,6]
复制代码

数组的定义

数组( array )是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。

JS理解:数据就是原型链中有 Array.prototype 的对象

当我们声明一个 var a1 = [1, 2, 3]; 的时候,会生成一个有四个 key 数组对象。为什么 a1 它有 push 函数呢 因为我们连接到了一个公用对象,可以在公用对象中找到,它的 __proto__ 指向 Array.prototype

JavaScript数组
var a = [1, 2, 3]

var obj = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
}
复制代码

这两个声明其实不是同一个对象,为什么呢?

因为它们的公用属性是不一样的。 a.__proto__ 指向的是数组的公用属性 Array.prototype ,这个公用属性有 pushpop 等函数, Array.__proto__ 指向的是 Object.prototype 。而 obj.__proto__ 并没有指向 Array.prototype ,它是 Object 构造出来的,直接指向 Object.prototype 。也就是说这两个对象本身的内存是没有区别的,它的区别在于原型是不一样的。数组之所以为数组,是因为它拥有数组的特点,对象之所以为对象,是因为它没有数组的特点。所以数组和对象本质的区别就是它们的 __proto__ 有没有指向 Array.prototype

JavaScript数组

数组的索引与长度

数组的值可以通过自然数索引访问进行读写操作,下标也可以是一个得出非负整数的变量或表达式

var a1 = [1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3
复制代码

数组也是对象,我们可以使用索引的奥秘在于,数组会把索引值转换为对应字符串 (1 => '1') 作为对象属性名

console.log(1 in a1);//true,确实是一个属性
复制代码

这样我们可以看出所有的索引都是属性名,但只有自然数(有最大值)才是索引。数组的索引可以不是连续的,访问 index 不存在的元素的时候返回 undefined

var a = new Array(1,2,3);
a[100] = 100;
console.log(a.length); //101
console.log(a[3]); //undefined
console.log(a[100]); 100
复制代码

上面的例子中,虽然直接对 a[100] 赋值不会影响 a[4]a[99] ,但数组的长度却受到影响,数组 length 属性等于数组中最大的 index+1 ,我们知道数组的 length 属性同样是个可写的属性,当强制把数组的 length 属性值设置为小于等于最大 index 值时,数组会自动删除 indexd 大于等于 length 的数据,在刚才代码中追加几句

a.length = 2
console.log(a);//[1,2]
复制代码

这时候会发现 a[2]a[100] 被自动删除了,同理,如果把 length 设置为大于最大 index+1 的值的时候,数组也会自动扩张,但是不会为数组添加新元素,只是在尾部追加空空间

a.length=5;
console.log(a); //[1,2] //后面没有3个undefined    
复制代码

数组的 API

  1. splice()

splice 方法用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。方法有三个参数,开始索引,删除元素的位移和插入的新元素,当然也可以写多个。

  • 删除 splice 的第一个参数是删除的起始位置(从 0 开始),第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
复制代码
  • 添加 如果只是单纯地插入元素, splice 方法的第二个参数可以设为 0
var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]
复制代码
  1. slice()

slice 方法用于提取目标数组的一部分,返回一个新数组,原数组不变。

var a = [1,2,3,4,5];
a.slice(1,2);//2 从 a 下标为1开始,到下标为2结束(不包括2),做为新数组,原数组不变
复制代码
  1. reverse()

reverse 方法用于将数组逆序,与之前不同的是它会修改原数组

var a = [1,2,3,4,5];
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]
复制代码
  1. join()

join 方法是把数组元素(对象调用其 toString() 方法)使用参数作为连接符连接成一字符串,不会修改原数组内容。如果不提供参数,默认用逗号分隔。

var a = [1, 2, 3];

a.join(' ') // '1 2 3'
a.join(' . ') // "1 . 2 . 3"
a.join() // "1,2,3"
复制代码
  1. concat()

看起来像是剪切,但这个真不是形声字, concat 方法用于拼接数组, a.concat(b) 返回一个 a 和 b 共同组成的新数组,同样不会修改任何一个原始数组,也不会递归连接数组内部数组。

var a = [1,2,3,4,5]; 
var b = [6,7,8,9]; 
console.log(a.concat(b));    //[1, 2, 3, 4, 5, 6, 7, 8, 9] 
console.log(a);     //[1, 2, 3, 4, 5] 
console.log(b);     //[6, 7, 8, 9]
复制代码
  1. forEach()

forEach 方法对数组的所有成员依次执行参数函数,该函数接受三个参数: valuekey 、整个数组。

var a = ['a', 'b', 'c'];
a.forEach(function(q, w, e){
    console.log(q, w, e)
})

// a 0 (3) ["a", "b", "c"]
// b 1 (3) ["a", "b", "c"]
// c 2 (3) ["a", "b", "c"]
复制代码
JavaScript数组
  1. sort()

sort 方法对数组成员进行排序,默认是按照转换为的字符串的诸个字符的 Unicode 位点进行排序。排序后,原数组将被改变。

[4, 3, 2, 1].sort()
// [1, 2, 3, 4]
复制代码

如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数。

var items = [
    { name: 'Edward', value: 37},
    { name: 'Sharpe', value: 24},
    { name: 'And', value: 45 }
];
items.sort(function (a, b) {
    return (a.value - b.value)
});

// {name: "Sharpe", value: 24}
// {name: "Edward", value: 37}
// {name: "And", value: 45}
复制代码
JavaScript数组
sort

的参数函数本身接受两个参数,表示进行比较的两个数组成员。如果该函数的返回值大于 0,表示第一个成员排在第二个成员后面;其他情况下,都是第一个元素排在第二个元素前面。

  1. map()

map 方法对数组中每一元素进行处理,函数返回值组成一个新数组返回,新数组索引结构和原数组一致,原数组保持不变。

var arr = [1, 2, 3, 4, 5, 6]
arr.map(function(val){
     return val*val

// [1, 4, 9, 16, 25, 36]
复制代码
  1. filter()

filter 方法用于过滤数组成员,接受一个函数,所有数组成员依次执行该函数,返回结果为 true 的成员组成一个新数组返回。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.filter(function (val) {
  return (val > 5);
})
// [6, 7, 8, 9]
复制代码
  1. reduce()

reduce 方法依次处理数组的每个成员,两元素(或参数)执行操作,数组元素返回组合成一个值,遍历数组,继续和数组中 其他元素组合,最终得出结果。

var arr = [1, 2, 3, 4, 5]
arr.reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 15
复制代码
  • map 可以用 reduce 表示
var a = [1, 2, 3]
a.reduce(function(arr, n){
    arr.push(n * 2)
    return arr
}, [])

// [2, 4, 6]
复制代码
  • filter 可以用 reduce 表示
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a.reduce(function(arr, n){    if(n % 2 === 0){
        arr.push(n)
    }
    return arr
}, [])

// [2, 4, 6, 8, 10]
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web信息架构(第3版)

Web信息架构(第3版)

[美] Peter Morville、Louis Rosenfeld / 陈建勋 / 电子工业出版社 / 2013-10 / 99.00元

本书内容涵盖了信息架构基本原理和实践应用的方方面面。全书共7个部分,包括信息架构概述、信息架构的基本原理、信息架构的开发流程和方法论、信息架构实践、信息架构与组织、两个案例研究,以及参考资料清单。 本书兼具较高的理论价值和实用价值,曾被Web设计领域多本书籍重点推荐,是信息架构领域公认的经典书籍,不论新手还是专家都能各取所需。本书可供Web设计与开发者、Web架构师、网站管理者及信息管理相关......一起来看看 《Web信息架构(第3版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换