一、js数组

  1、创建数组:

 var arr = new Array();//创建没有元素空数组
var arr1 = new Array("value1","valeu2","value3");//初始化一个具有3个元素的数组
var arr2 = new Array(10);//初始化一个有10个空元素的数组 var arr3 = [];//初始化一个空数组
var arr4 = [10];//初始化一个只有一个元素的数组
var arr5 = ["value1","valeu2","value3"];//初始化一个有三个元素的数组

  其实js创建数组是可变的,一开始创建的数组大小只是一个初始化的空间大小,如果想往数组中添加更多的内容可以直接添加,形如:

 var arr3 = [];//初始化一个空数组
arr3[4] = "新元素"

  如上代码,声明了一个空数组,却在第5个位置上添加了一个新元素,那么这个数组的大小现在就变成了5,前面的4个元素全部内容为空【在js中的类型为:undefined】。可以通过typeof()函数查看数据类型

 document.write("arr3[3]的数据类型: "+typeof(arr3[3])+"<br>")
document.write("arr3[4]的数据类型: "+typeof(arr3[4]))

  结果:

  

  2.数组操作方法:

  2.1 join()

 var arr = ["value1","valeu2","value3"];
var str_ = arr.join(" * ");//将数组内容填整成字符串,并用*分隔开,不会更改数组内容

  2.2 push() 和 pop() 【进栈和出栈:对数组进行类似堆栈操作,遵守先进后出的原则】push和pop都会改变数组的内容

 var arr = ["value1","valeu2","value3"];

 var push_cell = arr.push("123");//返回数组大小(新元素在数组中的位置+1),
document.write(push_cell+"<br>");
document.write(arr+"<br>"); var pop_cell = arr.pop();//取出最后一个元素(栈顶元素出栈)
document.write(pop_cell+"<br>");
document.write(arr+"<br>")

  测试结果:

  

  2.3 shift() 和 unshift() 【和push()、pop()的操作目的相同(一个添加一个删除),,但是操作位置不同,shift是对数组第一个元素进行操作的】

 var arr = ["value1","valeu2","value3"];

     var unshift_cell = arr.unshift("新元素");//返回数组大小,
document.write(unshift_cell+"<br>");
document.write(arr+"<br><br>"); var shift_cell = arr.shift();//取出数组第一个元素
document.write(shift_cell+"=>被删除"+"<br>");
document.write(arr+"<br>")

  结果:

  

  2.4 sort()升序排序

   在排序时,sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值, sort()方法比较的也是字符串,因此会出现以下的这种情况

 var arr = [1, 11, 12, 5, 23];
document.write(arr.sort()+"<br>");

  测试结果:(sort()会改变数组元素位置)

  

  解决办法:自定义一个比较函数

 /*比较函数*/
function compare(v1,v2){
if(v1 > v2){
return 1;
}else if(v1 < v2){
return -1;
}else{
return 0;
}
}

   在sort()函数中传入比较函数:

 var arr = [1, 11, 12, 5, 23];
document.write(arr.sort(compare)+"<br>");

  此函数用数值比较代替字符串比较

  2.5 reverse() 反转数组项顺序

 var arr = [1, 11, 12, 5, 23];
arr.reverse()

  2.6 concat() 数组拼接函数

 var arr = [1, 11, 12, 5, 23];
var arrCopy = arr.concat([9,[10,13]]);
document.write(arr+"<br>")
document.write(arrCopy[6]+"<br>")

  将数组arr的后面添加一个二维数组,然后将新组成的数组赋给arrCopy,此操作不会影响原数组。

  2.7 slice() 单词意思切片【函数用于将数组进行切分,然后返回切分结果】

 /*数组操作:slice()剪切函数*/
var arr = [1, 11, 12, 5, 23];
var arrCopy1 = arr.slice(1, 3);//右边的参数是闭区间,以该参数为下标的值不会被取到
var arrCopy2 = arr.slice(0, 3);//取下标为0,1,2的参数的值
var arrCopy3 = arr.slice(-3, -2);//取下标倒数第三个到倒数第2个的值
document.write(arrCopy1+"<br>")
document.write(arrCopy2+"<br>")
document.write(arrCopy3+"<br>")

  2.8 splice() 

 var arr = [1,2,3,4,5,6];
var arrRemoved = arr.splice(0,2);//表示从下标为0的位置开始删除两个数,将删除的内容以数组的形式赋值给新数组,
console.log('=======')
console.log(arr);
console.log(arrRemoved);
var arrRemoved2 = arr.splice(2,0,'a','b');//表示将从下标为2的位置开始删除0个数(也就是不删除),然后从下标为2的位置开始第3个参数(含第三个参数)以后的数添加到arr数组中。
console.log('=======')
console.log(arr);
console.log(arrRemoved2);
var arrRemoved3 = arr.splice(1,1,'a','b');//跟上一条类似,表示从下标为1的位置开始删除1位数,然后把剩下的参数添加到新数组中,删除的内容以数组的形式作为返回值返回
console.log('=======')
console.log(arr);
console.log(arrRemoved3);

  执行结果:

  

  2.9 lastIndexOf( ) 和 Indexof()

 var arr = [1,2,3,4,5,6];
console.log(arr.lastIndexOf(5, 5));//从下标为5的位置开始,从后向前查找元素为5的值,并返回元素为5的值的数组下标
console.log(arr.indexOf(5, 4));//从下标为4的位置开始,从前往后查找元素为5的值,并返回元素为5的值的数组下标,找不到则返回-1

  2.10 forEach() 遍历数组的每个值并进行相应的函数操作

 var arr = [1, 2, 3, 4, 5];
/*forEach默认给传入的函数三个参数:
1.遍历数组的每个值
2.每个值对应的下标
3.数组本身*/
arr.forEach(function(value, index, arrCopy){
console.log(value + '|' + index + '|' + (arrCopy === arr));
});

  执行结果:

  

  2.11 map()数组映射函数

 var arr = [1, 2, 3, 5, 5];
/*map传入一个回掉函数:返回结果为一个数组传入的参数
1.数组的值
2.数组的下标
当只传入一个参数的时候默认是数组每个值*/
var arrMapResult = arr.map(function(value,index){
console.log(index);
return value*value;
})
console.log(arrMapResult)

  运行结果:

  

  2.12 filter()过滤函数

 var arr = [1, 2, 3, 4, 5];
/*filter传入一个回掉函数:返回结果为一个满足过滤条件的数组
传入的参数:
1.数组的值
2.数组的下标
当只传入一个参数的时候默认是数组每个值*/
var arrFilterResult = arr.filter(function(value,index){
console.log(index)
return value>3;
})
console.log(arrFiltResult)

  测试结果:

  

  2.13 every()判断数组所有值是否符合给定条件

 var arr = [1, 2, 3, 4, 5];
/*every传入一个回掉函数:返回结果为bool型,当数组所有参数符合条件的时候返回true,否则返回false,一旦有一个值不符合,就会结束遍历
传入的参数:
1.数组的值
2.数组的下标
当只传入一个参数的时候默认是数组每个值*/
var result = arr.every(function(value,index){
console.log(index)
return value>0;
})
console.log(result)

  2.14 some()判断数组中是否有符合条件的值有的话则返回true,与every相反

 var arr = [1, 2, 3, 4, 5];
/*every传入一个回掉函数:返回结果为bool型,当数组中有一个值符合给定条件的时候返回true,否则返回false,一旦有一个值符合,就会结束遍历
传入的参数:
1.数组的值
2.数组的下标
当只传入一个参数的时候默认是数组每个值*/
var result = arr.some(function(value,index){
console.log(index)
return value>0;
})
console.log(result)

  2.15  reduce() 和reduceRight()

 var values = [1,2,3,4,5];
/*reduceRight表示从数组的右边(也就是数组最后一个值)开始遍历,返回结果是对数组所有操作的规整结果。该函数可以传入两个参数,一个是回掉函数一个是初始值。
参数介绍:
1 prev:表示遍历的上一个数,当给定初始值的时候,priev一开始的值就是初始值,没给定初始值的时候默认是遍历数组的第一个值(从那开始哪里就是第一个值)
2 cur:表示遍历表示当前遍历的值
3 index:表示档期那遍历值的下标
4 array:表示数组本身
reduce函数除了遍历方向相反外,其余的和reduceRight一样*/
var sum = values.reduceRight(function(prev, cur, index, array){
console.log(prev+" "+cur + " "+index)
return prev + cur;
},0);
console.log(sum); console.log('======分割线===========') var sum2 = values.reduce(function(prev, cur, index, array){
console.log(prev+" "+cur + " "+index)
return prev + cur;
},0);
console.log(sum2);

  测试结果:

  

    

========分割线=========

javaScript数组操作整理的更多相关文章

  1. JavaScript 数组操作函数--转载+格式整理

    JavaScript 数组操作函数(部分)--转载+格式整理 今天看了一篇文章,主要讲的对常用的Js操作函数:push,pop,join,shift,unshift,slice,splice,conc ...

  2. RX学习笔记:JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  3. javascript数组操作(创建、元素删除、数组的拷贝)

    这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...

  4. javascript数组操作汇总

    javascript之数组操作 - 不悔的青春 - 博客园 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array( ...

  5. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  6. Javascript数组操作(转)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  7. JavaScript 数组操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript 数组操作 转

    javascript之数组操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一 ...

  9. 吃透Javascript数组操作的正确姿势—再读《Js高程》

    Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...

随机推荐

  1. ps删除或覆盖内容

    除了选区删除.复制选区内容覆盖之外另外一种方法. 删掉字母"PS": 1. 矩形框选工具在字母上方画出选区 2. Ctrl+T,并拖拽底部以覆盖字母 3. 完成

  2. 手把手教你用.NET Core写爬虫

    写在前面 自从上一个项目58HouseSearch从.NET迁移到.NET core之后,磕磕碰碰磨蹭了一个月才正式上线到新版本. 然后最近又开了个新坑,搞了个Dy2018Crawler用来爬dy20 ...

  3. 【netty这点事儿】ByteBuf 的使用模式

    堆缓冲区 最常用的 ByteBuf 模式是将数据存储在 JVM 的堆空间中. 这种模式被称为支撑数组(backing array), 它能在没有使用池化的情况下提供快速的分配和释放. 直接缓冲区 直接 ...

  4. CentOS 6安装Oracle报错解决方案

    1. Preparing to launch Oracle Universal Installer from /tmp/OraInstall2017-05-23_04-18-48AM. Please ...

  5. java 中对对象的调用

    java程序设计语言对对象采用的不是引用的调用,实际上对象引用进行的是值得传递.(from:核心卷1  page:123)

  6. springboot2.0(一):【重磅】Spring Boot 2.0权威发布

    就在昨天Spring Boot2.0.0.RELEASE正式发布,今天早上在发布Spring Boot2.0的时候还出现一个小插曲,将Spring Boot2.0同步到Maven仓库的时候出现了错误, ...

  7. PHP页面间的参数传递

    我们定义page01.php和page02.php两个php文件,将page01中的内容想办法传递到page02,然后供我们继续使用.--------------------------------- ...

  8. PHP秒杀系统全方位设计(二)

    商品页面开发 静态化展示页面[效率要比动态PHP高很多,PHP程序需要解析等步骤,本身就需要很多流程,整个下来PHP的处理花的时间和资源要多] 商品状态的控制 开始前.进行中.库存不足.结束 数据逻辑 ...

  9. hihoCoder 1513 : 小Hi的烦恼 位运算好题

    思路:考虑第i个同学,第一门课排名比他靠前的同学的集合是S1,第二门课是S2...第五门课是S5,很明显比这个同学每门课程都优秀的同学就是S1&S2&S3&S4&S5, ...

  10. UVA 816 bfs

    算法入门经典上面的题.题目链接 uva816 大致题意 有一个最多包含9*9个交叉点的迷宫.输入起点.离开起点时的朝向和终点,求一条最短路(多解时任意输出一个即可).详细题意请看原题 思路 其实就是b ...