一、基本概念

1、什么是数组

数组就是一组数据的集合

其表现形式就是内存中的一段连续的内存地址

数组名称其实就是连续内存地址的首地址

2、关于js中的数组特点

数组定义时无需指定数据类型

数组定义时可以无需指定数组长度

数组可以存储任何数据类型的数据(比如说一个元素保存整型,一个元素保存字符串型,这个在JS中是可以的)

创建数组的语法:

var arr=[值1,值2,值3];                     //隐式创建

var arr=new Array(值1,值2,值3);      //直接实例化

var array=new Array(size);           //创建数组并指定长度

3、关于数组长度

数组对象.length

在js中,每一个数组对象都可以调用length属性,它表示数组对象下共有几个数组元素

示例:

1 var row = ['zhangsan','lisi','wangwu'];
2 doucument.write('共有'+row.length+'个人<br>');
3
4 var length = row.length;//对数组进行遍历
5 for (var i=0;i<length;i++){
6 doucument.write(row[i]+'<br>');
7 }

4、for...in语句

在js中,数组不是数据类型,数组的数据类型其实就是对象

Js中的For.....in语句可以实现对一个对象的所有属性的遍历

也可以使用for...in语句实现对一个数组的所有元素的遍历

语法:

for( var i in array ){

}

原理:数组中有几个元素,for..in语句就循环执行多少次

每次执行时,将当前数组元素的下标存放到变量i中

1 var row = ['zhangsan','lisi','wangwu','xiaoqiang'];
2
3 for (var i in row){
4 document.write(i + ':' + row[i] + '<br>');
5 }

结果:

  0:zhangsan
  1:lisi
  2:wangwu
  3:xiaoqiang

5、文本下标

格式:

arr['key'] = value;

在js中,文本下标的数组元素,不计入数组长度

以文本下标形式添加到数组,实际是以属性形式添加到数组对象中的

1 var arr = [1,2,3];
2 arr['first'] = 'zhangsan';
3 arr['second'] = 'lisi';
4
5 document.write(arr.length + '<br>');
6 document.write(arr.first + '<br>');
7 document.write(arr.second + '<br>');

结果:

  3
  zhangsan
  lisi

遍历带有文本下标的数组:

1 var arr = [1,2,3];
2 arr['first'] = 'zhangsan';
3 arr['second'] = 'lisi';
4
5 for(var i in arr){
6 document.write(i + ':' + arr[i] + '<br>');
7 }
 

结果:

  0:1
  1:2
  2:3
  first:zhangsan
  second:lisi

6、多维数组    

 
 1 var arr = [
2 [10,'zhangsan','male'],
3 [11,'lisi','female'],
4 [12,'wangwu','male']
5 ];
6 for (var i in arr){
7 for(var j in arr[i]){
8 document.write(arr[i][j]);
9 }
10 document.write('<br>');
11 }

二、常用方法

(一)会改变原数组

1.移除数组末尾最后一项.pop(),返回删除的元素
 如果你在一个空数组上调用 pop(),它返回  undefined
2.在数组末尾添加一个或多个元素.push(),返回修改后数组长度
3.移除数组第一项.shift(),返回移除的元素
4.在数组头部添加一个或多个元素.unshift(),返回修改后数组长度
5.对数组元素排序.sort(),返回排序后的数组
6.颠倒数组元素.reverse(),返回颠倒后的数组
7.删除或插入元素.splice(),返回数组删除的项,没有删除的项,返回空数组

var word = ['a', 'b', 'c', 'd'];
//删除,前闭后开
var newArr = word.splice(0,2);
console.log(word); //["c", "d"]
console.log(newArr); //["a", "b"]

//插入,当前数组索引1处插入hello
var newArr = word.splice(1,0,'hello');
console.log(word); //["c", "hello", "d"]
console.log(newArr); //[]

//替换
var newArr = word.splice(1,1,'world');
console.log(word); //["c", "world", "d"]
console.log(newArr); //["hello"]

(二)不会改变原数组

1.合并两个或多个数组.concat(),返回新数组
2.将数组所有元素连接成一个字符串.join(),返回连接后的字符串
3.截取数组元素到新数组中.slice(),返回新数组
4.获取查询元素第一次出现的索引.indexOf(),找不到查询元素,则返回-1
5.获取查询元素最后一次出现的索引.lastIndexOf(),找不到查询元素,则返回-1
6.toString()返回有数组每个元素的字符串形式拼接而成的以逗号分隔的字符串
7.toLocaleString()返回一个字符串表示数组中的元素

(三) 迭代方法

每个方法接受含有三个参数的函数,三个参数为:数组中的项,元素索引,数组本身
            1.every(),数组所有元素都满足要求则返回true,否则返回false
            2.some(),只要有满足要求的就返回true
            3.filter(),返回过滤后的结果数组
            4.map(),返回在函数中处理过的数组
            5.forEach(),遍历整个数组

var number = [1,2,3,4,5,6,7,8];
var res = number.every(function(item, index, array) {
return (item > 2);
})
console.log(res); //false var res = number.some(function(item, index, array) {
return (item > 2);
})
console.log(res); //true var res = number.filter(function(item, index, array) {
return (item > 2);
})
console.log(res); //[3, 4, 5, 6, 7, 8] var res = number.map(function(item, index, array) {
return (item * 2);
})
console.log(res); //[2, 4, 6, 8, 10, 12, 14, 16] var res = number.forEach(function(item, index, array) {
//执行某些操作
})

(四) 归并方法

迭代数组所有项,构建最终返回值,每个方法接受两个参数:调用的函数和作为归并基础的初始值。函数接受4个参数:前一个值,当前值,项索引,数组本身。函数返回的值都会作为第一个参数自动传给下一项,第一次迭代从数组第二项开始,当前值为数组第二项。

1.reduce(),从数组第一项开始遍历到最后
             2.reduceRight(),从数组最后一项开始遍历到第一项

/*
开始执行回调函数cur为2,prev为1,
第二次执行回调函数,在之前的基础上加1
函数返回的值都会作为一个参数传给下一项,
最后执行函数时就是28+8
*/
var number = [1,2,3,4,5,6,7,8];
var res = number.reduce(function(prev, cur, index, array) {
return prev + cur;
})
console.log(res); //1+2+3+4+5+6+7+8=36 var res = number.reduceRight(function(prev, cur, index, array) {
return prev + cur;
})

javascript中Array常用方法的更多相关文章

  1. javascript中数组常用方法总结

    原文:javascript中数组常用方法总结 在javascript的基础编程中,数组是我们最常遇到的,那么数组的一些常用方法也是我们必须要掌握的,下面我们总结一下数组中常用的方法. toString ...

  2. JavaScript原生Array常用方法

    JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...

  3. Javascript中Array(数组)对象常用的几个方法

    Javascript中Array数组的几个常用方法 pop()  --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice()  --按照下 ...

  4. Javascript 中 Array的 sort()和 compare()方法

    Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...

  5. JavaScript 中Array数组的几个内置函数

    本文章内容均参考<JavaScript高级程序设计第三版> 今天在看JavaScript书籍的时候,看到之前没有了解过的JavaScript中Array的几个内置函数对象,为了之后再开发工 ...

  6. JavaScript中Math常用方法

    title: JavaScript中Math常用方法 toc: false date: 2018-10-13 12:19:31 Math.E --2.718281828459045,算数常量e Mat ...

  7. JavaScript中Array方法总览

    title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...

  8. JavaScript中Array(数组) 对象

    JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

  9. javascript 中Array.prototype.sort 函数的用法

    来源:http://www.jb51.net/article/5769.htm JavaScript中对变量的操作都是通过引用方式,而对数组也一样. 前两天想要对一个数组进行复制,一直苦于找不到办法( ...

随机推荐

  1. 洛谷P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper

    P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper 题目描述 A little known fact about Bessie and friends is ...

  2. C语言经典算法100例(三)

    1.河内之塔 说明河内之塔(Towers of Hanoi)是法国人M.Claus(Lucas)于1883年从泰国带至法国的,河内为越战时北越的首都,即现在的胡志明市:1883年法国数学家 Edoua ...

  3. [Xcode 实际操作]四、常用控件-(4)UILabel文本标签的自动换行

    目录:[Swift]Xcode实际操作 本文将演示标签控件的换行功能, 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class Vie ...

  4. EL表达式的语法介绍及九大隐含对象

    一. 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > 使用EL表达式来代 ...

  5. java.lang.ClassCastException: java.util.ArrayList cannot be cast to com.github.pagehelper.Page

    出现这个错误,首先看配置mybatis-config.xml中的<plugins> <plugin interceptor="com.github.pagehelper.P ...

  6. [HNOI2011]数学作业 矩阵快速幂 BZOJ 2326

    题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 NNN 和 MMM ,要求计算Concatenate(1..N) Concatenate (1 .. N) ...

  7. Kipmi0 占用CPU 100%

    查看当前正在运行的进程发现kipmi0进程占用率达到100% kipmi -% of the CPUs, %/% comes when the machine is idle? A second is ...

  8. Luogu P2183 [国家集训队]礼物 扩展卢卡斯+组合数

    好吧学长说是板子...学了之后才发现就是板子qwq 题意:求$ C_n^{w_1}*C_{n-w_1}^{w_2}*C_{n-w_1-w_2}^{w_3}*...\space mod \space P ...

  9. 弹层组件文档 - layui.layer

    http://www.layui.com/doc/modules/layer.html

  10. Domain Model

    VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来. DTO(Data Transfer Object):数据传输对象,这个概念来源于J2EE的 ...