JS 数组 学习笔记
什么是数组
数组(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
使用
for
或while
循环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
会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。对于字符串、数字及布尔值来说(不是
String
、Number
或者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()
方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符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]
-
语法:
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 数组 学习笔记的更多相关文章
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- 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 ...
随机推荐
- 使用django 的cache设置token的有效期
from rest_framework.authentication import BaseAuthentication from rest_framework.exceptions import A ...
- Telegraf根据配置文件启动(Influxdb的数据收集)
1.创建一个telegraf.config文件 telegraf -sample-config -input-filter cpu:disk:diskio:net:system:mem -output ...
- Python_002(基础知识)
1.格式化输出 %s:字符串的占位符,可以放置任何内容(数字) 代码展示:%去除法 admin_input1 = input("请输入用户名:") pass_input = inp ...
- 解决webpack打包vue项目后,部署完成后,刷新页面页面404
1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...
- Period POJ - 1961
Period POJ - 1961 时限: 3000MS 内存: 30000KB 64位IO格式: %I64d & %I64u 提交 状态 已开启划词翻译 问题描述 For each ...
- eclipse 4.5 离线安装mybatis generator1.3.6卡在Install New Software的解决方法
转载:https://blog.csdn.net/ssshen14/article/details/80004459 离线插件 下载:https://github.com/mybatis/genera ...
- html简单标签代码
html简单标签代码demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- CSU 1552 Friends(二分图 + 米勒测试)
题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1552 Description On an alien planet, every e ...
- jmeter测试https请求
测试https请求时,需要添加证书 目录 1.下载证书 2.导入 3.执行https请求 1.下载证书 在浏览器中打开要测试的https协议的网站,以谷歌为例打开,下载证书到桌面 4.一直点击下一步 ...
- mvc中@RenderSection()研究 转载https://www.cnblogs.com/rrxc/p/4062827.html
一.@RenderSection定义 HelperResult RenderSection(string name) 但是当如果使用了_Layout.cshtml做母版页的页没有实现Section的话 ...