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. 20162318 2016-2017-2《Java程序设计》课堂实践项目

    20162318 2016-2017-2<Java程序设计>课堂实践项目 String类的使用 在String类中有一种split的方法.它可以把字符串分割为好几个小的字符串. 实践内容: ...

  2. lightoj 1052 - String Growth & uva 12045 - Fun with Strings 矩阵

    思路:很容易发现规律,数列和Fib数列一样的. 记开始的时候啊a的个数为Y,b的个数为X.建立矩阵. 代码如下: #include<iostream> #include<cstdio ...

  3. NServiceBus入门:启程(Introduction to NServiceBus: Getting started)

    原文地址:https://docs.particular.net/tutorials/intro-to-nservicebus/1-getting-started/ 侵删. 最好的学习NService ...

  4. [Java]利用javax.swing.Timer类在窗口上实现动画效果

    javax.swing.Timer类在创建时需要指定时间间隔和定时器到时间需要执行的动作,即ActionListener. Timer timer = new Timer(100, taskPerfo ...

  5. iOS: 状态栏、导航栏、标签栏、工具栏

    三种项目栏总结: 工具栏:UIToolBar 导航栏:UINavigationBar 标签栏:UITabBar   UIToolBar的按钮单元为:UIBarButtonItem UINavigati ...

  6. iOS:quartz2D绘图(显示绘制在PDF上的图片)

    quart2D既可以用来绘制图像到pdf上,也可以从pdf上读取图像并显示出来.在使用这种方式之前,还有一种方式可以用来读取显示pdf上的图像,即使用UIWebView网页视图控件- (void)lo ...

  7. 【Todo】机器学习系列

    看了这篇文章很好,有很多指导性思想: http://www.cnblogs.com/tornadomeet/p/3395593.html 另外这个人的系列文章里面也有很多干货. 就看这个系列的吧: h ...

  8. 阅读ARm芯片手册 阅读方法

    一 overview 1 table of contents -*** 2 product overview -***  芯片概述 3 feature  ***    每一个功能的特点 4 block ...

  9. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  10. DevExpress中的lookupedit的使用方法详解

    摘自: http://***/zh-CN/Info/catalog/17631.html 概述:本文详细介绍了DevExpress中的lookupedit的使用方法. 绑定数据源:   1 2 3 l ...