JS数组学习笔记
原文:JS数组学习笔记
最近在备课数组,发现很多ES5的方法平时很少用到。细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助。
概念
数组是值的有序集合。每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引。JS中的数组是弱类型的,数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。
JS引擎一般会优化数组,按索引访问数组常常比访问一般对象属性明显迅速。
数组长度范围 from 0 to 4,294,967,295(2^23 - 1)
数组创建
var BAT = ['Alibaba', 'Tencent', 'Baidu'];
var students = [{name : 'Bosn', age : 27}, {name : 'Nunnly', age : 3}];
var arr = ['Nunnly', 'is', 'big', 'keng', 'B', 123, true, null];
var arrInArr = [[1, 2], [3, 4, 5]];
var commasArr1 = [1, , 2]; // 1, undefined, 2
var commasArr2 = [,,]; // undefined * 2
var arr = new Array();
var arrWithLength = new Array(100); // undefined * 100
var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi");
// 等价于[true, false, null, 1, 2, "hi"];
数组读写
var arr = [1, 2, 3, 4, 5];
arr[1]; //
arr.length; //
arr[5] = 6;
arr.length; //
delete arr[0];
arr[0]; // undefined
数组 VS. 一般对象
相同点
- 数组是对象,对象不一定是数组
- 都可以继承
- 都可以当做对象添加删除属性
不同点
- 数组自动更新length
- 数组操作通常被优化
- 数组对象继承Array.prototype上的大量数组操作方法
稀疏数组
稀疏数组并不含有从0开始的连续索引。一般length属性值比实际元素个数大。
var arr1 = [undefined];
var arr2 = new Array(1);
0 in arr1; // true
0 in arr2; // false
arr1.length = 100;
arr1[99] = 123;
99 in arr1; // true
98 in arr1; // false
var arr = [,,];
0 in arr; // false
数组的length属性
var arr = [1, 2, 3, 4, 5]
arr.length = 2;
arr; // [1, 2];
元素增删
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3);
arr; // [1, 2, 3] arr[arr.length] = 4; // equal to arr.push(4);
arr; // [1, 2, 3, 4] arr.unshift(0);
arr; // [0, 1, 2, 3, 4];
delete arr[2];
arr; // [0, 1, undefined, 3, 4]
arr.length; //
2 in arr; // false arr.length -= 1;
arr; // [0, 1, undefined, 3, 4], 4 is removed arr.pop(); // 3 returned by pop
arr; // [0, 1, undefined], 3 is removed arr.shift(); // 0 returned by shift
arr; // [1, undefined]
数组迭代
var i = 0, n = 10;
var arr = [1, 2, 3, 4, 5];
for (; i < n; i++) {
console.log(arr[i]); // 1, 2, 3, 4, 5
} for(i in arr) {
console.log(arr[i]); // 1, 2, 3, 4, 5
} Array.prototype.x = 'inherited'; for(i in arr) {
console.log(arr[i]); // 1, 2, 3, 4, 5, inherited
} for(i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(arr[i]); // 1, 2, 3, 4, 5
}
}
二维数组
var arr = [[0, 1], [2, 3], [4, 5]];
var i = 0, j = 0;
var row;
for (; i < arr.length; i++) {
row = arr[i];
console.log('row ' + i);
for (j = 0; j < row.length; j++) {
console.log(row[j]);
}
}
// result:
// row 0
//
//
// row 1
//
//
// row 2
//
//
数组方法
Array.prototype.join
var arr = [1, 2, 3];
arr.join(); // "1,2,3"
arr.join("_"); // "1_2_3" function repeatString(str, n) {
return new Array(n + 1).join(str);
}
repeatString("a", 3); // "aaa"
repeatString("Hi", 5); // "HiHiHiHiHi"
Array.prototype.reverse
[1, 2, 3].reverse(); // [3, 2, 1]
Array.prototype.sort
var arr = ["a", "d", "c", "b"];
arr.sort(); // ["a", "b", "c", "d"] arr = [13, 24, 51, 3];
arr.sort(); // [13, 24, 3, 51]
arr; // [13, 24, 3, 51] arr.sort(function(a, b) {
return a - b;
}); // [3, 13, 24, 51] arr = [{age : 25}, {age : 39}, {age : 99}];
arr.sort(function(a, b) {
return a.age - b.age;
});
arr.forEach(function(item) {
console.log('age', item.age);
});
// result:
// age 25
// age 39
// age 99
Array.prototype.concat
var arr = [1, 2, 3];
var result = arr.concat(4, 5); // [1, 2, 3, 4, 5]
arr; // [1, 2, 3] arr.concat([10, 11], 13); // [1, 2, 3, 10, 11, 13] arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]
Array.prototype.slice 切片
var arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]
arr.slice(1); // [2, 3, 4, 5]
arr.slice(1, -1); // [2, 3, 4]
arr.slice(-4, -3); // [2]
Array.prototype.splice 胶接
var arr = [1, 2, 3, 4, 5];
arr.splice(2); // returns [3, 4, 5]
arr; // [1, 2]; arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); // returns [3, 4]
arr; // [1, 2, 5]; arr = [1, 2, 3, 4, 5];
arr.splice(1, 1, 'a', 'b'); // returns [2]
arr; // [1, "a", "b", 3, 4, 5]
Array.prototype.forEach (ES5)
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
Array.prototype.map (ES5)
var arr = [1, 2, 3];
arr.map(function(x) {
return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]
Array.prototype.filter (ES5)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Array.prototype.every (ES5)
var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {
return x < 10;
}); // true arr.every(function(x) {
return x < 3;
}); // false
Array.prototype.some (ES5)
var arr = [1, 2, 3, 4, 5];
arr.some(function(x) {
return x === 3;
}); // true arr.some(function(x) {
return x === 100;
}); // false
Array.prototype.reduce/reduceRight (ES5)
var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {
return x + y
}, 0); // arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {
console.log(x + "|" + y);
return x > y ? x : y;
});
// 3|9
// 9|6
max; // max = arr.reduceRight(function(x, y) {
console.log(x + "|" + y);
return x > y ? x : y;
});
// 6|9
// 9|3
max; //
Array.prototype.indexOf/lastIndexOf (ES5)
var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); //
arr.indexOf(99); // -1
arr.indexOf(1, 1); //
arr.indexOf(1, -3); //
arr.indexOf(2, -1); // -1
arr.lastIndexOf(2); //
arr.lastIndexOf(2, -2); //
arr.lastIndexOf(2, -3); //
Array.isArray (ES5)
Array.isArray([]); // true
字符串和数组
strings的行为像是只读数组
var str = "hello world";
str.charAt(0); // "h"
str[1]; // e Array.prototype.join.call(str, "_");
// "h_e_l_l_o_ _w_o_r_l_d"
JS数组学习笔记的更多相关文章
- JS 数组 学习笔记
什么是数组 数组(array)是按次序排列的一组值.每个值的位置都有编号(从0开始),整个数组用方括号表示.本质上数组属于一种特殊的,由Array构造出来的对象,typeof运算符返回数组的类型是 o ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- Knockout.js快速学习笔记
原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...
- handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- Node.js API 学习笔记
常用 API 学习笔记 url 函数 url.parse: 解析 url 地址 url.resolve: 向 url 地址添加或替换字段 url.format: 生成 url 地址 querystri ...
随机推荐
- Python3.4 邮件(包含附件与中国)
import smtplib import os from email.mime.text import MIMEText from email.mime.multipart import MIMEM ...
- 【夸QT十一】外来物品:通用脚本帮助Web运行基础Linux命令
需求分析: 需要注意的是在这里第一次,这个人是不是QT系列文章,它是关于Web的,之所以写这篇文章.这是因为碍着Web相关开发时间,而且往往涉及linux与底层指令处理.例如,创建一个文件夹,删除一个 ...
- 做web项目时对代码修改后浏览器端不生效的应对方法(持续更新)
做web项目时,经常会遇到修改了代码,但浏览器端没有生效,原因是多种多样的,我会根据我遇到的情况逐步更新解决办法 1.运行的时候采用debug模式,一般情况下使用项目部署按钮右边那个按钮下的tomca ...
- [文学阅读] METEOR: An Automatic Metric for MT Evaluation with Improved Correlation with Human Judgments
METEOR: An Automatic Metric for MT Evaluation with Improved Correlation with Human Judgments Satanje ...
- 2048 Puzzle游戏攻略
2048 Puzzle这是目前手机游戏的很火. 在地铁上经常看到的人玩这个游戏. 首先,简介2048 Puzzle游戏. 游戏界面是4X4广场格,每一方格可以放置在数字. 有四种移动数字的方法,向左. ...
- 复制360于Launcher浮动窗口的屏幕显示内存使用情况(基本版)
MainActivity如下面: package cc.cc; import android.os.Bundle; import android.view.View; import android.v ...
- windows Azure平台开发
rest api 和SDK power shell azure pack
- VC档(夹)文件夹路径的经营方针和代码
***********************************************声明*************************************************** ...
- EL字符串表达式和常用功能用途拦截
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> ${wj ...
- c++输入密码以星号代替
#include <iostream> #include <string>//注意这里的头文件! #include<conio.h> using namespace ...