Js日常笔记之数组
1、Array
构造函数有一个很大的问题,就是不同的参数,会导致它的行为不一致,es6好像专门为此对数组有升级
因此,不建议使用new Array生成新数组,直接使用数组字面量[...]是更好的做法。
2、Array.isArray
方法用来判断一个值是否为数组。它可以弥补typeof
运算符的不足
var a = [1, 2, 3]; typeof a // "object"
Array.isArray(a) // true
3、push()和pop() 结合使用,就构成了“后进先出”的栈结构(stack)
push
方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度,
pop
方法用于删除数组的最后一个元素,并返回该元素。
4、join()方法以参数作为分隔符,将所有数组成员组成一个字符串返回。如果不提供参数,默认用逗号分隔。
如果数组成员是undefined
或null
或空位,会被转成空字符串
[undefined, null].join('#')
// '#' ['a',, 'b'].join('-')
// 'a--b'
通过call
方法,这个方法也可以用于字符串
Array.prototype.join.call('hello', '-')
// "h-e-l-l-o"
5、concat()方法用于多个数组的合并。返回一个新数组,原数组不变。
concat
也可以接受其他类型的值作为参数。它们会作为新的元素,添加数组尾部。
[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6] // 等同于
[1, 2, 3].concat(4, [5, 6])
[1, 2, 3].concat([4], [5, 6])
注意:concat
方法返回当前数组的一个浅拷贝,如果数组中存在复合类型数据(比如对象),原数据改变,数组元素也会随之改变;
let d={a:1}
a=a.concat(d)
//(8) [{…}, 2, "a", "b", true, 4, 5, {…}] a[7]//{a: 1}
d.a=3//3
a[7]//{a: 3}
6、shift()和unshift()
shift
方法用于删除数组的第一个元素,并返回该元素。push
和shift
结合使用,就构成了“先进先出”的队列结构(queue)
unshift
方法用于在数组的第一个位置添加一个或多个元素,并返回添加新元素后的数组长度
var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]
7、slice()和splice()
slice
方法用于提取原数组的一部分,返回一个新数组,原数组不变。
// 格式
arr.slice(start_index, upto_index); // 用法
var a = ['a', 'b', 'c']; a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice() // ["a", "b", "c"] ///如果slice方法的参数是负数,则表示倒数计算的位置。
var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]
splice
方法用于删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员,返回值是被删除的元素。
splice
的第一个参数是删除的起始位置,第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]//从e开始删除2个元素,再插入后面的参数
a // ["a", "b", "c", "d", 1, 2] ///起始位置如果是负数,就表示从倒数位置开始删除。
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(-4, 2) // ["c", "d"] ///常见用法,第二个参数给0,在指定位置插入新元素
var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]
8、reverse()和sort(),之所以两个一起说,是因为二者都是封装了一个常用的遍历算法
reverse
方法用于颠倒数组中元素的顺序,返回改变后的数组。
sort
方法对数组成员进行排序,默认是按照字典顺序排序。数值会被先转成字符串,再按照字典顺序进行比较
sort
方法可以传入一个函数作为参数,表示按照自定义方法进行排序
[
{ name: "张三", age: 30 },
{ name: "李四", age: 24 },
{ name: "王五", age: 28 }
].sort(function (o1, o2) {
return o1.age - o2.age;//a>b则调换位置,实现从小到大的排序
})
// [
// { name: "李四", age: 24 },
// { name: "王五", age: 28 },
// { name: "张三", age: 30 }
// ]
9、forEach()和map()
相同点:都是遍历数组的所有成员,依次调用一个函数,执行某种操作
区别:map
方法会根据函数结果返回一个新数组,而forEach没有返回值
注意:forEach
方法无法中断执行,总是会将所有成员遍历完
///map用法
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6] ///forEach用法
function log(element, index, array) {
console.log('[' + index + '] = ' + element);
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9
map
方法还可以接受第二个参数,表示回调函数执行时this
所指向的对象。
var arr = ['a', 'b', 'c']; [1, 2].map(function(e){
return this[e];
}, arr)
// ['b', 'c']
对应的,forEach
方法也可以接受第二个参数,用来绑定回调函数的this
关键字。这个参数对于多层this
非常有用,因为多层this
通常指向是不一致的
var obj = {
name: '张三',
times: [1, 2, 3],
print: function () {
this.times.forEach(function (n) {
console.log(this.name);
}, this);//如果不加this参数,函数内部的this会指向全局而不是obj对象本身
}
}; obj.print()
// 张三
// 张三
// 张三
10、filter(),过滤出满足某种条件的元素
参数是一个函数,所有数组成员依次执行该函数,返回结果为true
的成员组成一个新数组返回
[1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
// [4, 5]
11、some()和every()这两个方法类似“断言”(assert),用来判断数组成员是否部分或者全部符合某种条件。
它们接受一个函数作为参数,所有数组成员依次执行该函数,返回一个布尔值
some
方法是只要有一个数组成员的返回值是true
,则整个some
方法的返回值就是true
,否则false
。
every
方法则是所有数组成员的返回值都是true
,才返回true
,否则false
。
var arr = [1, 2, 3, 4, 5]; arr.some(function (elem, index, arr) {
return elem >= 3;
});
// true
arr.every(function (elem, index, arr) {
return elem >= 3;
});
// false
some
和every
方法还可以接受第二个参数,用来绑定函数中的this
关键字。
12、reduce()和reduceRight()
依次处理数组的每个成员,最终累计为一个值。
它们的差别是,reduce
是从左到右处理(从第一个成员到最后一个成员),reduceRight
则是从右到左(从最后一个成员到第一个成员),其他完全一样。
[1, 2, 3, 4, 5].reduce(function(x, y){
console.log(x, y)
return x + y;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15 [1, 2, 3, 4, 5].reduce(function(x, y){
return x + y;
}, 10);
// 25
13、indexOf()和lastIndexOf()
分别返回给定元素在数组中第一次和最后一次出现的位置,如果没有出现则返回-1
['a', 'b', 'c'].indexOf('a', 1) // -1
//indexOf方法还可以接受第二个参数,表示搜索的开始位置
注意,如果数组中包含NaN
,这两个方法不适用,即无法确定数组成员是否包含NaN
这是因为这两个方法内部,使用严格相等运算符(===
)进行比较,而NaN
是唯一一个不等于自身的值
Js日常笔记之数组的更多相关文章
- js日常笔记
写在前面: 在工作中,有时候会遇到一些零零碎碎的小知识点,虽然这些网上都可以查询到,但还是想把一些自己不是很熟悉的当做笔记记录下来,方便以后查询. 1.按钮隐藏/显示/可用/不可用 $("# ...
- Js日常笔记之变量删除
在Javascript是可以使用delete来手动删除变量,通过这样的方法让GC来回收内存,但在JS中并不是所有的对象都可以被删除的 JS中通过 var\function 声明因含有DontDelet ...
- ember.js:使用笔记4 数组数据的分组显示
除了之前介绍的将数组数据在一个页面中输出的方法,还可以将数组数据分组,按照点击,在不同页面中分别显示,方法为: Model: 例如:Table Router: 设置一个父对象和子对象设置: this. ...
- [前端JS学习笔记]JavaScript 数组
一.JavaScript数组的奇葩 大多数语言会要求数组的元素是同个类型, 但是JavaScript允许数组元素为多种类型. var arr = ["羽毛球", 666, {&qu ...
- 【学习】js学习笔记:数组(二)
二维数组 例子:矩形反转: <script> var arr=[[1,1,1,1,1],[2,2,2,2,2],[3,3,3,3,3],[4,4,4,4,4],[5,5,5,5,5]]; ...
- 【学习】js学习笔记:数组(一)
1.创建数组并赋值 //对象方式 var arr=new Array(1,2,3,4); //隐形声明方式 var arr2=[5,6,7,8]; 2.数组可以存储任何类型的数据 3.访问数组,是用下 ...
- JS学习笔记 (四) 数组进阶
1.基本知识 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始. 2.数组是无类型的.数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的 ...
- Js日常笔记之this
在javascript中自己创建构造函数时可以利用this来指向新创建的对象上.这样就可以避免函数中的this指向全局了,如下 var x = 2; function test(){ this.x = ...
- js学习笔记之:数组(一)
今天来学习一下js中的一维数组.二维数组,以及数组的赋值.遍历.删除.排序等操作: 1 数组的声明 js提供了一个数组对象Array,默认是一维数组,其申明的方法如下: var aCity = ...
随机推荐
- 【强连通分量缩点】【DFS】【动态规划】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem B. British Menu
有向图,不经过重复点的最长链,强连通分量大小不超过5. 每个强连通分量内部暴力预处理任意两对点之间的最长路,外面DAG上dp. 不是很好写,但是预处理完了之后,可以重构每个强连通分量内部的结构,然后整 ...
- 【Miller-Rabin算法】
存个板子,应该是对的吧……没太试 http://www.cnblogs.com/Norlan/p/5350243.html Matrix67写的 根据wiki,取前9个素数当base的时候,long ...
- [PKUSC2018]真实排名
[PKUSC2018]真实排名 题目大意: 有\(n(n\le10^5)\)个人,每个人有一个成绩\(A_i(0\le A_i\le10^9)\).定义一个人的排名为\(n\)个人中成绩不小于他的总人 ...
- hdu 4074 Darts
思路:p[n][m][0]表示A为n,B为m,A为先手胜的概率: p[n][m][1]表示A为n,B为m,B为先手胜的概率. d[i]表示圆盘上数字的大小. 容易得 ...
- express路由和中间件
路由 简单来说,express路由就是用来处理一些请求,响应一些url地址. var express = require('express'); var app = express(); app.ge ...
- [转][Navicat for MySQL系列]Navicat如何使用(二)
上一篇经验已经建立了数据连接,这篇我介绍一下Navicat for MySQL的“增删改查”功能是如何操作的. 工具/原料 Navicat for MySQL 10.1.7 数据库操作(基本) 1 远 ...
- [原创]MyEclipse2014全手动实现反向工程---解决手动整合ssh时发生的、在hibernate反向工程的时候找不到项目名的问题
1.在MyEclipse2014中新建两个Web Project项目,名字分别为:Hibernate_manual和Hibernate_auto. 2.单击选中新建的Web项目Hibernate_au ...
- Apache静态编译与动态编译详解
Apache拥有4层结构,从核心到外层的module.而外层的module可以用通过静态和动态两种方式与Apache共同工作.这也就引入下文的“动态”和“静态”两种编译安装方式: 静态编译: 编译的时 ...
- Unity3D 手游开发中所有特殊的文件夹
这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor 和 /Edi ...
- leetCode(45):Min Stack
Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...