什么是数组

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。本质上数组属于一种特殊的,由Array构造出来的对象,typeof运算符返回数组的类型是 object,任何类型的数据都可以放入数组。

var arr = ['a', 'b', 'c']
typeof arr // 'object' var arr2 = [
{a: 1},
[1, 2, 3],
function(){ return true; }
]
arr2[0] // {a: 1}

数组的赋值和读取

var arr = []
// 赋值
arr[0] = 'a'
arr[1] = 'b'
arr[2] = 'c'
// 读取数组中编号是 2 的值
arr[2] // c

多维数组

var a = [[1, 2], [3, 4]]
a[0][0] // 1
a[1][1] // 4

数组的键名

由于数组成员的键名是固定的(默认总是0、1、2...),因此数组不用为每个元素指定键名,而对象的每个成员都必须指定键名。JavaScript 语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串。

var arr = ['a', 'b', 'c']
arr['0'] // 'a'
arr[0] // 'a' //赋值的时候,编号值先转成字符串,再进行赋值
var a = [];
a[1.00] = 6;
a[1] // 6

length 属性

数组的length属性,返回数组的成员数量。

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

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

清空数组的一个有效方法,就是将length属性设为 0

如果设置的 length 大于当前元素的个数,那么数组中新增的空位的值都是 undefined

数组的遍历

  • 使用 for...in循环,for...in不仅会遍历数组所有的数字键,还会遍历非数字键

    var a = [1, 2, 3];
    a.foo = true; for (var key in a) {
    console.log(key);
    }
    // 0
    // 1
    // 2
    // foo
  • 使用 forwhile循环

    var a = [1, 2, 3];
    
    // for循环
    for(var i = 0; i < a.length; i++) {
    console.log(a[i]);
    } // while循环
    var i = 0;
    while (i < a.length) {
    console.log(a[i]);
    i++;
    }
  • 使用 数组的forEach方法

    var a = [1, 2, 3];
    a.forEach(function(item){
    console.log(item)
    })

什么是伪数组

var obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
obj[0] // 'a'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

上面代码中的obj对象就是一个伪数组,虽然它有数组的 length 属性,编号也是从 0 开始,但是它并没有数组特有的 push 方法,它的原型链上没有 Array.prototype,这样的对象我们就称之为 伪数组

典型的“伪数组”是函数中的arguments对象。

function fn1(){
return arguments;
}
var arrayLike = fn1(1, 2, 3)
arrayLike[0] // 1
arrayLike.length // 3
arrayLike instanceof Array // false

如何将伪数组转成真正的数组?

使用数组的slice方法

var arr = Array.prototype.slice.call(arrayLike);

常见数组方法

  • forEach

    var colors = ['red', 'green', 'blue'];
    colors.forEach(function (color) {
    console.log(color);
    });
  • slice

    将数组切片,slice 不修改原数组,只是返回一个浅复制了原数组中元素的一个新数组。原数组的元素会按照下述规则拷贝:

    • 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。

    • 对于字符串、数字及布尔值来说(不是 StringNumber 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

    var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
    var citrus = fruits.slice(1, 3);
    console.log(fruits) // 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango'
    console.log(citrus) // 'Orange', 'Lemon', 'Apple' fruits.slice(1) // 'Orange', 'Lemon', 'Apple', 'Mango'
  • join

    join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符

    var elements = ['Fire', 'Air', 'Water'];
    console.log(elements.join()); // 'Fire,Air,Water'
    console.log(elements.join('-'));/ / 'Fire-Air-Water' var test = ['a']
    console.log(test) // 'a'
  • contact

    concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

    var array1 = ['a', 'b', 'c'];
    var array2 = ['d', 'e', 'f']; console.log(array1.concat(array2));
    // expected output: Array ["a", "b", "c", "d", "e", "f"]
  • push / pop

    pop()方法从数组中删除最后一个元素,并返回该元素的值,此方法更改数组的长度。

    push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

    var arr = [1, 2, 3]
    arr.push(4) // 4
    console.log(arr) // 1,2,3,4
    arr.pop() // 4
    arr.length // 3
    console.log(arr) // 1,2,3
  • filter ,滤网

    筛选符合条件的元素,然后合并返回一个新数组

    // 返回偶数
    var arr = [1, 2, 3, 4, 9]
    var newArr = arr.filter(function(value){
    return value % 2 === 0
    })
    console.log(newArr) // [2,4]
    // 上面的等价于下面的,使用箭头函数
    var newArr1 = arr.filter(value => value % 2 === 0)
  • map ,可以想象成 LOL映射小地图

    map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。

    // 求每个元素的平方
    var arr = [1, 2, 3, 4, 9]
    var newArr = arr.map(function(value){
    return value * value ;
    })
    console.log(newArr) // [1, 4, 9, 16, 81]
  • reduce

    语法:

    arr.reduce(function(累计容器, 数组中正在处理的元素[, 元素索引[, array]])[, 初始值])

    可以想象成土匪打劫,最开始土匪身上的钱是 0元,通过去打劫每一个人来累加自己身上的钱让自己富起来,腰藏万贯。

      // 求和示例
    var arr = [1, 2, 3, 4, 5]
    var newArr = arr.reduce(function(sum, n){
    return sum += n
    }, 0)
    console.log(newArr) // 15 // 使用 reduce 实现 map
    var newArr1 = arr.reduce(function(arr, n){
    arr.push(n*n);
    return arr
    }, [])
    console.log(newArr1) // [1, 4, 9, 16, 25] // 使用 reduce 实现 filter
    var newArr2 = arr.reduce(function(arr, n){
    if(n % 2 === 0){
    arr.push(n)
    }
    return arr
    }, [])
    console.log(newArr2) // [2,4] // 求所有奇数的和
    var a = [1,2,3,4,5,6,7,8,9]
    a.reduce(function(sum, n){
    return n % 2 === 1 ? sum += n : sum;
    }, 0); // 25

JS 数组 学习笔记的更多相关文章

  1. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  2. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  3. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  4. Knockout.js快速学习笔记

    原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...

  5. handlebars.js基础学习笔记

    最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

  6. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  7. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  8. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  9. Node.js API 学习笔记

    常用 API 学习笔记 url 函数 url.parse: 解析 url 地址 url.resolve: 向 url 地址添加或替换字段 url.format: 生成 url 地址 querystri ...

随机推荐

  1. bzoj5518 & loj3046 「ZJOI2019」语言 线段树合并+树链的并

    题目传送门 https://loj.ac/problem/3046 题解 首先问题就是问有多少条路径是给定的几条路径中的一条的一个子段. 先考虑链的做法. 枚举右端点 \(i\),那么求出 \(j\) ...

  2. Java 逻辑运算符相关解析

    问:定简单说说 Java 中 & 与 && 有什么区别?| 与 || 呢? 答:& 是位运算符,&& 是布尔逻辑运算符,| 与 || 类似同理.在进行逻 ...

  3. JSP和Servlet及浏览器与tomcat交互过程

    JSP与SERVLET区别 JSP在本质上就是Servlet,但是两者的创建方式不一样. JSP由HTML代码和JSP标签构成,可以方便地编写动态网页.因此在实际应用中采用Servlet来控制业务流程 ...

  4. python 脚本编译成可执行二进制(exe)

    本文python3,pyinstaller也支持py2 cmd下载模块pyinstaller 首先: pip install pyinstaller 其次: cmd下进入需要编译的xxx.py文件目录 ...

  5. 卷积神经网络(Text--cnn)(知识点整理)

    参考:http://www.wildml.com/2015/12/implementing-a-cnn-for-text-classification-in-tensorflow/ 独热编码(one- ...

  6. 027:for标签使用详解

    for标签使用详解: for...in... 标签: for...in... 类似于 Python 中的 for...in... .可以遍历列表.元组.字符串.字典等一切可以遍历的对象.示例代码如下: ...

  7. win10下配置多个mysql数据库

    mysql正常安装步骤:下载安装参考: 我配置的时8.0.13和5.7.27这两个版本: 配置完第一个数据库之后:复制ini文件给第二个数据库注意修改文件的端口时,先确认端口是否被占用 [mysql] ...

  8. AI 一体机,满足新时代的新需求

    AI 变革带来哪些 IT 的新要求? 深度学习的突破和硬件的突飞猛进,使得人工智能“第n春”焕发蓬勃生机.这是历史上第一次,机器可以在如人脸识别等‘人类’工作上做得比我们人类更好. 人工神经网络有许多 ...

  9. 按照MySQL

    转载自:https://mp.weixin.qq.com/s?__biz=MzIwNzk0NjE1MQ==&mid=2247484200&idx=1&sn=6eed12242c ...

  10. spring boot整合WebSocket示例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...