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 = ...
随机推荐
- 【混合背包】CDOJ1606 难喝的饮料
#include<cstdio> #include<algorithm> using namespace std; int n,V,op[20010],c[20010],w[2 ...
- 【构造】Tinkoff Challenge - Final Round (Codeforces Round #414, rated, Div. 1 + Div. 2) D. Labelling Cities
考试的时候想的是,将所有的完全子图缩起来,然后如果剩下的是一条链,依次对其进行标号即可. 看了官方题解,发现完全子图这个条件太强了,缩点的条件仅仅需要保证原本两个点的“邻接表”相同即可.(注意这里的“ ...
- Idea集成svn
Idea集成svn 既然要使用svn,首先需要下载一个 svn的客户端,到这里下载对应的安装程序:http://subversion.apache.org/packages.html#windows ...
- 一步一步搭建springCloud
一.spring cloud简介Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...
- ucenter创始人密码忘记了,修改方法
简单的:1.在UCenter/data/下找到config.inc.php,打开找到下面2行代码: define('UC_FOUNDERPW', '3858cdf66b0794bfd435af8c0c ...
- 通过现有数据导出新表SQL
Date: 20140217 Auth: JIN 需求: 导出一个表的两个列的表的SQL语句(包含数据) 方法:创立一个临时表 mysql> desc kw_keywords;+-------- ...
- Adaptive Query Optimization in Oracle Database 12c (12.1 and 12.2)
https://oracle-base.com/articles/12c/adaptive-query-optimization-12cr1
- mybatis查询日期时间数据得到long类型数据的问题
使用mybatis查询数据时,如果数据库存储的是timestamp.datetime.date.time等时间类型,而Java bean也使用的是date类型,mybatis会自动将date类型转换为 ...
- linux安装配置redis
redis是支持linux的,所以linux安装redis非常简单,按照官网的提示操作即可. 下载 $ wget http://download.redis.io/releases/redis-3.2 ...
- redis节点管理-新增从节点
原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg12.html 新增从节点 新增一个节点7008节点,使用add-node --slave命令. [pl ...