资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/你不知道的数组

你不知道的数组

beita / 2700人阅读

摘要：数组定义数组是按次序排列的一组值每个值都有编号，从开始可以在定义时赋值，也可以先定义后赋值任何类型的数据都可以存入数组数组的本质本质上，数组属于一种特殊的对象，它的键名是按次序排列的一组整数数组成员的键名是固定的，因此不用为每个元素指定键名

数组定义

数组是按次序排列的一组值

每个值都有编号，从0开始

可以在定义时赋值，也可以先定义后赋值

任何类型的数据都可以存入数组

       
   const arr = [
       {a: 1},
       [1, 2, 3],
       function(){}
   ];

数组的本质

本质上，数组属于一种特殊的对象，它的键名是按次序排列的一组整数（0,1,2...）

typeof [1, 2, 3] //"object"

数组成员的键名是固定的，因此不用为每个元素指定键名，而对象的每个成员都必须指定键名

const arr = ["a", "b", "c"];
Object.keys(arr) //["0", "1", "2"]

JavaScript语言规定，对象的键名一律为字符串

const arr=["a", "b", "c"];
arr["0"] //"a"
arr[0] //"a"

之所以可以用数值读取，是因为非字符串的键名会被转为字符串

注意：这一点在赋值时也成立！

let a = [];
a[1.00] = 6;
a[1] // 6

“1.00”转成字符串是“1”

读取数组成员的方法

object.key

object[key]

length属性

该属性是一个动态的值，等于键名中的最大整数加1

该属性是可写的，如果人为设置一个小于当前成员个数的值，该数组的成员就会自动减少到length设置的值

   let arr = ["a", "b", "c"];
   arr.length // 3
   arr.length = 2;
   arr // ["a", "b"]

如果人为设置一个大于当前成员个数时，新增的位置都是空位，读取新增的位置都会返回undefined

   let arr = ["a"];
   arr.length = 3;
   arr[1] // undefined

数组本质是一种对象，所以可以为数组添加属性，但并不影响length属性的值

   let arr = [];
   arr["p"] = "abc";
   arr.length // 0
   arr[2.1] = "abc";
   arr.length // 0
   arr["1"] = "a";
   arr.length // 2

in运算符

检查某个键名是否存在，适用于对象，也适用于数组

键名都是字符串，数值会自动转成字符串

   const arr = ["a", "b", "c"];
   2 in arr // true
   "2" in arr // true
   4 in arr // false

如果数组的某个位置是空位，in运算符返回false

   let arr = [];
   arr[100] = "a";
   100 in arr // true
   1 in arr // false

for...in循环和数组的遍历

可以遍历对象，也可以遍历数组（数组是一种特殊对象）

   const arr = [1, 2, 3];
   for(let i in arr) {
       console.log(arr[i]);
   }
   // 1
   // 2
   // 3

不仅会遍历数组所有的数字键，还会遍历非数字键

   let arr = [1, 2, 3];
   arr.foo = true;
   for(let key in arr) {
       console.log(key);
   }
   // 0
   // 1
   // 2
   // foo

数组的空位 
当数组的某个位置是空元素（两个逗号之间没有任何值），我们称该数组存在空位
const a = [1, , 1];
a.length // 3

数组的空位不影响length属性

如果最后一个元素后面有逗号，并不会产生空位

数组的空位是可以读取的，返回undefined

使用delete删除一个数组成员，会形成空位，但并不会影响length属性

   let arr = [1, 2, 3];
   delete arr[1];
   arr[1] // undefined
   ar.length // 3

length属性不过滤空位

如果是空位，使用数组的forEach方法、for...in结构、Object.keys方法进行遍历，空位都会被跳过

const a = [, , ,];
a.forEach(function (con, key) {
    console.log(key + "." + con);
})
// 不输出任何内容

for(let key in a) {
    console.log(key);
}
// 不输出任何内容

Object.keys(a)
// []

如果是undefined，遍历时不会被跳过

const a = [undefined, undefined, undefined];
a.forEach(function (con, key) {
    console.log(key + "." + con);
});
// 0.undefined
// 1.undefined
// 2.undefined

for(let key in a) {
    console.log(key);
}
// 0
// 1
// 2

Object.keys(a)
// ["0", "1", "2"]

也就是说，空位是数组没有这个元素，不会被遍历到，但是undefined表示数组有这个元素，它的值是undefined，所以会被遍历到

map() 
将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回
let numbers = [1, 2, 3];
numbers.map(n => n+1); // [2, 3, 4]
console.log(numbers); // [1, 2, 3]
map方法接受一个函数作为参数，该函数调用时，map方法向它传入三个参数：当前成员、当前位置、数组本身
[1, 2, 3].map((elem, index, arr) => elem * index );
// [0, 2, 6]
map还可以接受第二个参数，用来绑定回调函数内部的this变量
const arr = ["a", "b", "c"];
[1, 2].map(function(e) {
    return this[e];
}, arr);
// ["b", "c"]
如果数组有空位，map方法的回调函数在这个位置不会执行，会跳过数组的空位，但是不会跳过undefined和null
let f = (n) => "a";
[1, undefined, 2].map(f) // ["a", "a", "a"]
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"]
forEach() 
对数组的所有成员依次执行参数函数，但是不返回值，只用来操作数据
forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组


forEach方法也可以接受第二个参数，绑定参数函数的this变量


forEach方法也会跳过数组的空位，但是不会跳过undefined和null

如果数组的遍历是为了得到返回值，就使用map()，不然就使用forEach()方法

类似数组的对象 
如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，称为“类似数组的对象”
const obj = {
    0: "a",
    1: "b",
    2: "c",
    length: 3,
}
obj[0] // "a"
obj[1] // "b"
obj.length // 3
obj.push("d") // TypeError: obj.push is not a function

类似数组的对象的根本特征是具有length属性，但是这个length属性不是动态值，不会随着成员的变化而变化

let obj = {

length: 0,

};
obj[3] = "d";
obj.length // 0
obj.foo = "hhh";
obj // {3: "d", length: 0, foo: "hhh"}

类似数组的对象不具备数组特有的方法

典型的“类似数组的对象” 1、arguments对象 
function args() { return arguments }
const arrayLike = args("a", "b");

arrayLike[0] // "a"
arrayLike.length // 2
arrayLike instanceof Array // false
2、大多数DOM元素集 
const elts = document.getElementsByTagName("p");
elts.length // 3
elts instanceof Array // false
3、字符串 
"abc"[1] // "b"
"abc".length // 3
"abc" instanceof Array // false
类数组变成真正的数组 slice方法 
let arr = Array.proptotype.slice.call(arryLike);
类数组使用数组的方法 通过call()把数组的方法放到对象上 
function print(value, index) {
    console.log(index + ":" + value);
}
Array.prototype.forEach.call(arrayLike, print);

// 等同于for循环
function example() {
    for(let i=0; i< arguments.length; i++) {
        console.log(i + "." + arguments[i])"
    }
}

通过call()，把forEach()方法放到arrayLike上面调用

云服务器 服务器托管 你不知道的 你不知道的javascript 你不知道的javascript上卷 你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107832.html

相关文章

  • 你不知道的Virtual DOM（四）：key的作用

    摘要：最后里面没有第四个元素了，才会把苹果从移除。四总结本文基于上一个版本的代码，加入了对唯一标识的支持，很好的提高了更新数组元素的效率。 欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的两大前端框架，React和Vue，都不约而同的借助Virtual DOM技术提高页面的渲染...

    DirtyMind 评论0 收藏0

  • 你不知道的JavaScript

    摘要：第二章值的数组不需要预设数组大小，可以直接向数组添加任何类型的值，如果形成了稀疏数组，那么未赋值的部分将会是。某些不是数组的对象，如果其有属性，就是类数组，例如元素列表，，通常用这个将其转化为数组，而为我们提供了一种新途径。 从名字上看可能会觉得JS应该和Java是有很紧密的联系的吧，实际上它们是两种完全不同的语言，JS是ECMAScript的浏览器规范，是一种弱类型的语言，不同于Ja...

    2i18ns 评论0 收藏0

  • 你不知道的Virtual DOM（一）：Virtual Dom介绍

    摘要：不同的框架对这三个属性的命名会有点差别，但表达的意思是一致的。它们分别是标签名属性和子元素对象。我们先来看下页面的更新一般会经过几个阶段。元素有可能是数组的形式，需要将数组解构一层。 欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的两大前端框架，React和Vue，都不约...

    lavor 评论0 收藏0

  • js 你不知道的 Array

    摘要：删除数组的第一个元素，返回值是删除的元素对数组中的元素进行排序添加或删除数组中的一个或多个元素。循环迭代方法对数组中的每一个元素调用参数中指定的过滤函数，并将对于过滤函数返回值为的那些数组元素集合为新的数组返回。 一、在类数组对象上复用通用的数组方法 类数组有：arguments, NodeList, 字符串 什么是类数组？ 两个条件 具有 length 属性 length 属性大于...

    yintaolaowanzi 评论0 收藏0

  • 你不知道的JavaScript ：值

    摘要：你不知道的系列第二章值值数组里面的数组可以容纳任何类型的值。数字中，没有真正意义上的整数，目前只有数字类型。较小的数值二进制浮点数最大的问题从数学的角度来说，此处应该是，但是二进制浮点数中与并不是十分准确，他们相加等于，所以结果为。 你不知道的JavaScript系列---第二章：值 值 2.1 数组 JavaScript里面的数组可以容纳任何类型的值。 稀疏数组（含有空白或空缺单...

    0x584a 评论0 收藏0

  • 你不知道的jQuery

    摘要：不要恨我这个标题党，且看下面的分享。字符串函数数组字符串函数数组为所匹配到的表单元素赋值。函数返回值作为当前元素要设置的值。你好如果是没有属性的对象，则返回，否则返回，这里的属性包括从继承下来的属性。说明返回的不是数组，这我们早就知道。 不要恨我这个标题党，且看下面的分享。最近做业务发现jquery的一些方法有其他的用法，可以帮助我解决一些问题，下面我就说说吧。大家共同进步，欢迎大家斧...

    Jochen 评论0 收藏0

发表评论

登陆后可评论

0条评论

beita

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<