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()方法以参数作为分隔符,将所有数组成员组成一个字符串返回。如果不提供参数,默认用逗号分隔。

如果数组成员是undefinednull或空位,会被转成空字符串

[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方法用于删除数组的第一个元素,并返回该元素。pushshift结合使用,就构成了“先进先出”的队列结构(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

  someevery方法还可以接受第二个参数,用来绑定函数中的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日常笔记之数组的更多相关文章

  1. js日常笔记

    写在前面: 在工作中,有时候会遇到一些零零碎碎的小知识点,虽然这些网上都可以查询到,但还是想把一些自己不是很熟悉的当做笔记记录下来,方便以后查询. 1.按钮隐藏/显示/可用/不可用 $("# ...

  2. Js日常笔记之变量删除

    在Javascript是可以使用delete来手动删除变量,通过这样的方法让GC来回收内存,但在JS中并不是所有的对象都可以被删除的 JS中通过 var\function 声明因含有DontDelet ...

  3. ember.js:使用笔记4 数组数据的分组显示

    除了之前介绍的将数组数据在一个页面中输出的方法,还可以将数组数据分组,按照点击,在不同页面中分别显示,方法为: Model: 例如:Table Router: 设置一个父对象和子对象设置: this. ...

  4. [前端JS学习笔记]JavaScript 数组

    一.JavaScript数组的奇葩 大多数语言会要求数组的元素是同个类型, 但是JavaScript允许数组元素为多种类型. var arr = ["羽毛球", 666, {&qu ...

  5. 【学习】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]]; ...

  6. 【学习】js学习笔记:数组(一)

    1.创建数组并赋值 //对象方式 var arr=new Array(1,2,3,4); //隐形声明方式 var arr2=[5,6,7,8]; 2.数组可以存储任何类型的数据 3.访问数组,是用下 ...

  7. JS学习笔记 (四) 数组进阶

    1.基本知识 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始. 2.数组是无类型的.数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的 ...

  8. Js日常笔记之this

    在javascript中自己创建构造函数时可以利用this来指向新创建的对象上.这样就可以避免函数中的this指向全局了,如下 var x = 2; function test(){ this.x = ...

  9. js学习笔记之:数组(一)

    今天来学习一下js中的一维数组.二维数组,以及数组的赋值.遍历.删除.排序等操作:    1 数组的声明 js提供了一个数组对象Array,默认是一维数组,其申明的方法如下: var aCity = ...

随机推荐

  1. 【强连通分量缩点】【DFS】【动态规划】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem B. British Menu

    有向图,不经过重复点的最长链,强连通分量大小不超过5. 每个强连通分量内部暴力预处理任意两对点之间的最长路,外面DAG上dp. 不是很好写,但是预处理完了之后,可以重构每个强连通分量内部的结构,然后整 ...

  2. 【Miller-Rabin算法】

    存个板子,应该是对的吧……没太试 http://www.cnblogs.com/Norlan/p/5350243.html Matrix67写的 根据wiki,取前9个素数当base的时候,long ...

  3. [PKUSC2018]真实排名

    [PKUSC2018]真实排名 题目大意: 有\(n(n\le10^5)\)个人,每个人有一个成绩\(A_i(0\le A_i\le10^9)\).定义一个人的排名为\(n\)个人中成绩不小于他的总人 ...

  4. hdu 4074 Darts

    思路:p[n][m][0]表示A为n,B为m,A为先手胜的概率:          p[n][m][1]表示A为n,B为m,B为先手胜的概率.          d[i]表示圆盘上数字的大小. 容易得 ...

  5. express路由和中间件

    路由 简单来说,express路由就是用来处理一些请求,响应一些url地址. var express = require('express'); var app = express(); app.ge ...

  6. [转][Navicat for MySQL系列]Navicat如何使用(二)

    上一篇经验已经建立了数据连接,这篇我介绍一下Navicat for MySQL的“增删改查”功能是如何操作的. 工具/原料 Navicat for MySQL 10.1.7 数据库操作(基本) 1 远 ...

  7. [原创]MyEclipse2014全手动实现反向工程---解决手动整合ssh时发生的、在hibernate反向工程的时候找不到项目名的问题

    1.在MyEclipse2014中新建两个Web Project项目,名字分别为:Hibernate_manual和Hibernate_auto. 2.单击选中新建的Web项目Hibernate_au ...

  8. Apache静态编译与动态编译详解

    Apache拥有4层结构,从核心到外层的module.而外层的module可以用通过静态和动态两种方式与Apache共同工作.这也就引入下文的“动态”和“静态”两种编译安装方式: 静态编译: 编译的时 ...

  9. Unity3D 手游开发中所有特殊的文件夹

    这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor  和 /Edi ...

  10. leetCode(45):Min Stack

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...