博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2017/5 JavaScript基础7--- 数组
阅读量:6213 次
发布时间:2019-06-21

本文共 6543 字,大约阅读时间需要 21 分钟。

hot3.png

一、创建数组,数组操作

1、数组概述

数组是值的有序集合。每个值叫元素,每个元素在数组中都有数字位置编号,也就是索引,JS中的数组是弱类型的,数组中可以含有不同类型的元素,数组元素甚至可以是对象或其他数组。

var arr = [ 1, true, null ,undefined, { x : 1},[ 1,2,3 ] ];arr[0];     // 1arr[3];     //undefinedarr[4].x;   //1arr[5][1];  //2

2、创建数组

1)字面量

var TAB = ['Alibaba','Tencent','Baidu'];var student = [{name:'Bosn',age:27},{name:'Nunnnly',age:3}];var arrInArr = [[1,2],[3,4,5]];var commasArr1 = [1,,2]; //1,undefined,2var commasArr1 = [ , ,]; //undefined,undefined 理解为两个undefined,最后一个省略

数组大小限制:0 ~ 2的23次幂-1

3)new Array

new可以省略

var arr = new Array();var arrWithLength = new Array(100); //undefined*100--只有一个参数认为是数组大小,数组有100个元素var arr = new Array(true,false,null,1,2,"hi"); //传入多个参数,参数作为传入数组元素。//等价于[true,false,null,1,2,"hi"]

3、数组元素读写

var arr = [1,2,3,4,5];arr[1]; //2arr.length;  //5 长度arr[5] = 6; arr.length; //6delete arr[0]; //最终数组长度还是6 把第一个值改为undefinedarr[0];  //undefined

4、数组元素的增删

1)数组长度是动态的,无需指定大小

var arr = [];arr[0] = 1;arr[1] = 2;arr;//[1,2]

2)增加元素

var arr = [];arr[0] = 1;arr[1] = 2;arr.push(3); //在尾部加入arr;         //[1,2,3]arr[arr.length] = 4; //equal to arr.push(4) --总是从末尾加arr;                 //[1,2,3,4] //在头部加入arr.unshift(0);arr; //[0,1,2,3,4]

3)删除元素

delete arr[2];arr;           // [0,1,undefined,3,4] delete 将第三个元素变为undefined arr.length ;   //52 in arr ;     //false 会占位但,索引不存在,key不存在了,如果arr[2] = undefined in 返回 truearr.length -= 1; //长度减少1 删除尾部元素arr; // [0,1,undefined,3]arr.pop(); //从尾部弹出最后一个,3被删除了arr ;[0,1,undefined]//头部删除arr.shift(); //0删除了arr; //[1,undefined]

5、数组的迭代

var i=0,n=10;var arr = [1,2,3,4,5];for(; i

二、二维数组、稀疏数组

1、二维数组

var arr = [[0,1],[2,3],[4,5]]; //二维数组中有三个元素,每个元素又是一个数组var i =0 ;j =0;var row ;for(;i

2、稀疏数组

稀疏数组并不含有从0开始的连续索引。一半length属性值比实际元素个数大。

//arr1、arr2 都含有一个元素长度为1var arr1 = [undefined]; var arr2 = new Array(1);0 in arr1; //true 第一个有元素值为undefined0 in arr2; //false 长度为1,单第0个元素的 key是不存在的arr1.length = 100;arr1[99] = 123;99 in arr1 ; //true98 in arr1 ; //falsevar arr = [,,]; //也是稀疏数组0 in arr; //false

三、数组方法

{} => Object.prototype[] => Array.prototype

1、数组方法分类

Array.prototype.joinArray.prototype.reverseArray.prototype.sortArray.prototype.contcatArray.prototype.slice //切片Array.prototype.splice //胶接Array.prototype.forEach (ES5)Array.prototype.map (ES5)Array.prototype.every (ES5)Array.prototype.some (ES5)Array.prototype.reduce/reduceRight (ES5)Array.prototype.indexOf/lastIndexOf (ES5)Array.prototype.isArray (ES5)

1)将数组转化为字符串:Arrar.prototype.join(不改变原数组)

var arr = [1,2,3];arr.join();       //"1,2,3" 默认以,分割arr.join('_');    //"1_2_3"//函数:重复某一个字符串n次 ,第一个参数,要重复的字符串,2.要重复几次// 将要重复的字符串作为 分隔符 ,当使用空数组 join时 undefined 会被忽略掉。function repeatString(str,n){   return new Array(n+1).join(str);}repeatString("a",3); //"aaa"repeatString("Hi",5); "HiHiHiHiHi"

2)数组逆序: Array.prototype.reverse (修改原数组)

将数组逆序,会修改原数组,也会返回一个逆序数组

var arr = [1,2,3];arr.reverse();   //返回一个颠倒的结果[3,2,1]arr;      //会修改原数组[3,2,1] /*var b= arr.reverse();   //返回一个颠倒的结果[3,2,1]arr;      //会修改(3) [3, 2, 1]b;(3) [3, 2, 1]*/

2) 排序:Array.prototype.sort (修改原数组)

1.默认按照字母顺序排序

var arr = ["a","b","c"];arr.sort(); //["a","b","c"]

2.数字排序

//会先把数字转化为字符串排序arr = [13,24,51,3];arr.sort();//[13,24,3,51]arr;//[13,24,3,51] 修改原数组//升序排列从小到大arr.sort(function(a,b){  return a-b ;    //传入比较元素返回负数});              //[3,13,24,51] //降序排列从大到小arr.sort(function(a,b){  return b-a ;    //返回正数});

3)数组对象结合

var arr =  [{age:25},{age:39},{age:99}];arr.sort(function(a,b){  return a.age - b.age  //从小打大});//forEach 遍历查看排序结果arr.forEach(function(item){  //item为对象  console.log('age' ,item.age);})//age 25//age 39//age 99

3)数组合并:ArrayPrototype.concat(不改变原数组)

var arr = [1,2,3];var arr2 = arr.concat(4,5); //[1,2,3,4,5]arr; //[1,2,3] 不改变原数组//一维数组会被拉平var arr3 = arr.concat([10,11,12],13); //[1,2,3,10,11,13]//数组只会拉平一次,会保存子数组var arr4 = arr.oncat([1,[2,3]]); // [1,2,3,1,[2,3]]

4)返回数组片段:Array.prototype.slice(不修改原数组)

//不修改原数组var arr = [1,2,3,4,5];//返回  起始索引 到 结束索引-1  的元素 var arr2 = arr.slice(1,3) ; //[2,3]//从起始索引到最后arr.slice(1); //[2,3,4,5]//负数索引,从后往前 -1:最后一个元素arr.slice(1,-1) ; //[2,3,4] -1代表5 -1-1 :4arr.slice(-4,-3) ;//[2]

5)数组拼接: Array.prototype.splice(修改原数组)

1、删除元素

//一个参数,表示从起始到结束var arr = [1,2,3,4,5];var arr1 = arr.splice(2); //return [3,4,5] 返回从第三个元素到最后一个元素,并且删除arr; //[1,2] 修改原数组var arr = [1,2,3,4,5];//从第三个元素开始(包括第三个)删除两个元素var arr2 = arr.splice(2,2); //return [3,4]arr;  //[1,2,5]

2、插入元素

var arr = [1,2,3,4,5];//从第二个元素开始,删除1个 插入 a,bvar arr1 =  arr.splice(1,1,'a','b'); //return[2]返回删除的元素arr; // [1,'a','b',3,4,5]

6)数组遍历:Array.prototype.forEach

IE9及以上可以

//遍历每一个数组元素var arr = [1,2,3,4,5];//forEach接受一个函数作为参数,函数在遍历到每一个元素时调用。//函数有三个参数,1.元素的值 2.元素索引 3.指向数组本身arr.forEach(function(x, index, a){  console.log(x + '|' + index + '|'+ (a === arr))})/*1|0|true2|1|true3|2|true4|3|true5|4|true*/

7)数组映射:Array.prototype.map(不修改原数组)

改变数组中每一个元素

var arr = [1,2,3];var arr2 = arr.map(funcyion(x){  return x+10;}); //[11,12,13] 返回一个新的数组arr;//[1,2,3] 原数组不变

8)数组过滤:Array.prototype.filter(不修改原数组)

筛选特定元素:筛选出索引模3 为 0 或元素值 >=8;

var arr = [1,2,3,4,5,6,7,8,9,10];//参数 :数组元素,索引var arr2 = arr.filter(function(x,index){  return index % 3 ===0 || x>=8;}); //returns [1,4,7,8,9,10]arr; //[1,2,3,4,5,6,7,8,9,10]; //不修改原数组

9)数组判断:Array.prototype.every & some

var arr = [1,2,3,4,5];//检查数组是否是每个元素都小于10//every 每个都符合条件arr.every(function(x){  return x < 10 ;}); // 返回true// 任意一个元素符合即可arr.some(function(x){  return x === 3;}); //true

10)两两操作数组元素:Array.prototype.reduce & reduceRight(不修改原数组)

var arr = [1,2,3];//对元素求和//1.函数中,表示数组中元素,2.可选参数,代表初始 x值,不传就指向第一个元素//首选传入 0,1 求和取得 1,赋值给 x, y=2,继续var sum = arr.reduce(function(x,y){  return x+y;}, 0 ) // 返回和·6arr; //[1,2,3]//比较大小arr = [3,9,6];var max = arr.reduce(function(x,y){  console.log(x +"|" +y);  return x>y ? x :y})//3|9//9|6max;//9//没有穿第二个参数,第一次遍历 x指向 3,y指向 9, 9>3 返回9 ,第二次 x=9,y=6,返回 9

reduceRight:从右到左开始遍历其余一样

10)数组检索:Array.prototype.indexOf & lastIndexOf

//参数1 为要查找的子串 ,参数2 为起始查找位置

var arr = [1,2,3,2,1];//检索子串在数组中位置arr.indexOf(2); //索引为1//从第二个元素开始查找 1  //参数1 为要查找的子串 ,参数2 为起始查找位置arr.indexOf(1,1); //索引为 4//从 倒数第三个(-1为倒数第一个)3开始搜索 1arr.indexOf(1,-3); //索引为 4//从右向左找arr.lastIndexOf(2); //3

11)判断一个对象是否为数组对象:Array.isArray

isArray是 Array构造器上的属性,不可以直接用一个变量调用

Array.isArray([]);//true[] instanceof Array ;//true({}).toString.apply([]) === '[object Array]'; //true[].constructor === Array ; //true

四、数组与其他元素的区别

1、数组与对象区别

1)相同

  1. 都可以继承。
  2. 数组是对象,对象不一定是数组。
  3. 都可以当做对象添加删除属性。

2)不同

  1. 数组自动更新length。
  2. 按索引访问数组,常常比访问一般对象属性迅速。
  3. 数组对象继承Array.prototype上大量数组操作方法

 2、数组与字符串区别

var str = "hello";//可以当做数组来访问,类数组str.charAt(0); //索引为0 的字符"h"str[1];//e//但字符串没有 contact join等数组特有方法,但因为是类数组Array.prototype.join.call(str,"_");//"h_e_l_l_o"

 

转载于:https://my.oschina.net/u/2991733/blog/902818

你可能感兴趣的文章
appium定位h5
查看>>
获取POM.XML依赖的JAR包
查看>>
文本聚类
查看>>
String 类型的值能够被反射改变从而引发的意外事件
查看>>
eMMC之分区管理、总线协议和工作模式【转】
查看>>
VS.NET IDE <Table>使用小技巧
查看>>
电赛菜鸟营培训(四)——STM32F103CB之ADC转换
查看>>
Win8 Metro中文件读写删除与复制操作
查看>>
ZOJ 2320 Cracking' RSA
查看>>
由浅入深探究mysql索引结构原理、性能分析与优化
查看>>
fmplan主页功能设计第一阶段成果
查看>>
Nodejs初阶之express
查看>>
开发版本控制git
查看>>
项目管理学习笔记之五.沟通协调能力I
查看>>
jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作
查看>>
Redis学习-Set
查看>>
MySql取得日期(前一天、某一天)
查看>>
WPF 控件库——轮播控件
查看>>
任正非的艰难时刻的启示
查看>>
Jdbc Url 设置allowMultiQueries为true和false时底层处理机制研究
查看>>