JavaScript基础04——数组的创建及方法
数组的概念及定义
数组的概念：
一组数据，数据的组和
哪些数据的组和，只要是数据（所有数据），就可以放在数组中
数组的意义：
可以同时操作多个数据
数组的创建方式
var arr1 = [1,2,3]; //字面量方式
var arr2 = new Array(1,2,3) //构造函数方式 注意：当只有一个数据时，两种创建方式的不同。 var arr1 = [5] //表示有一个数组元素5
var arr2 = new Array(5) //表示有5个数组元素，值全部为undefined
数组的操作-索引
索引操作：
增：给并不存在的索引，赋值
arr[5] = 1;
console.log(arr[5]);
console.log(arr)
删
console.log(arr.length)
arr.length = 1;
console.log(arr)
改
console.log(arr[0]);
arr[0] = "hahahah";
console.log(arr)
查：数组的遍历
console.log(arr[0])
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
数组的操作-方法
增
在末尾添加元素 arr.push
arr.push("gg");
console.log(arr)
var c = arr.push("gg") //返回值是所增值的位置
console.log(c)
在开始添加元素 arr.unshift
var a = arr.unshift("mm");
console.log(a)
删
在末尾删除最后一位 arr.pop
arr.pop()
console.log(arr)
删除第一个 arr.shift
arr.shift()
console.log(arr)
替换
从第n个项目开始删除，一共删除m个，再删除的位置加入a..... arr.splice（n,m,a...）
console.log(arr)
arr.splice(1,2,"pop","mmp") 从第二个数开始，删除两个（第二个和第三个）加入两个
var b = arr.splice(1,2,"pop","mmp") //返回被删除/替换的元素。
console.log(b)
console.log(arr) 截取
返回一个新数组，从下标n的位置取到m"前一个" arr.slice(n,m)
arr.slice(2,4);
console.log(arr); // 不改变原数组
var a = arr.slice(2,4); 截取第三到第四个，不包括第五个
console.log(a)
补充：可从已有的数组中返回选定的元素。
该方法接收两个参数slice(start,end)，strat为必选，表示从第几位开始；
end为可选，表示到第几位结束(不包含end位)，省略表示到最后一位；
start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.slice(1,3)); //["Jack","Lucy"] //返回值是截取的数组
console.log(arr.slice(1)); //["Jack","Lucy","Lily","May"]
console.log(arr.slice(-4,-1)); //["Jack","Lucy","Lily"]
console.log(arr.slice(-2)); //["Lily","May"]
console.log(arr.slice(1,-2)); //["Jack","Lucy"]
console.log(arr); //["Tom","Jack","Lucy","Lily","May"]---原数组未改变
排序
var arr2 = [11,3,25,35,67]
arr2.sort()
console.log(arr2) //按照字符方式排序
arr2.sort(function(a,b){
return a-b
})
var a = arr2.sort(function(a,b){
return a-b
})
console.log(a)
console.log(arr2) //按照数字排序需要函数
toString();
转换成字符串，类似于没有参数的join()。
该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。
var arr = [1,2,3];
console.log(arr.toString()); //1,2,3
console.log(arr); //[1,2,3]---原数组未改变
concat()
用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var arr1 = [1,2,3]
var arr2 = arr1.concat();
console.log(arr1); //[1,2,3]---原数组
console.log(arr1 === arr2); //false
console.log(arr2); //[1,2,3]---原数组的副本 console.log(arr1.concat("hello","world")); //[1,2,3,"hello","world"]
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}])); //[1,2,3,"a","b",[3,4],{"name":"admin"}]
// data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。 console.log(arr1); //[1,2,3]---原数组未改变
join()
根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。
参数：join(str);参数可选，默认为","号，以传入的字符作为分隔符。
var arr = [1,2,3];
console.log(arr.join()); //1,2,3
var a = arr.join();
console.log(a); //1,2,3 返回值是这个字符串
console.log(arr.join("&"))
console.log(arr.join("-")); //1-2-3
console.log(arr); //[1,2,3]---原数组未改变
reverse()
颠倒数组中元素的顺序
var arr = [1,2,3];
console.log(arr.reverse()); //[3,2,1]
console.log(arr); //[3,2,1]---原数组改变
var a = arr.reverse();
console.log(a) //返回值是改变后的数组
valueOf()
返回数组的原始值（一般情况下其实就是"数组自身"），一般由js在后台调用，并不显式的出现在代码中
var arr = [1,2,3];
console.log(arr.valueOf()); //[1,2,3]
console.log(arr); //[1,2,3]
//为了证明返回的是数组自身
console.log(arr.valueOf() == arr); //true
indexOf()
根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
该方法是查询方法，"""不会对数组产生改变"""。
indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，
当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l")); //
console.log(arr.indexOf("l",3)); //
console.log(arr.indexOf("l",4)); //-1
console.log(arr.indexOf("l",-1)); //-1
console.log(arr.indexOf("l",-3)); //
lastIndexOf()
根据指定的数据，从右向左，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
该方法是查询方法，不会对数组产生改变。
lastIndexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，
当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //
console.log(arr.lastIndexOf("l",3)); //
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //
console.log(arr.lastIndexOf("l",-4)); //-1
forEach()
ES5新增方法，用来遍历数组，该方法没有返回值。
forEach接收的回调函数会根据数组的每一项执行，该回调函数默认有三个参数，
分别为：遍历到的数组的数据，对应的索引，数组自身。
forEach(callback);callback默认有三个参数，分别为value，index，self。
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.forEach(function(value,index,self){
console.log(value + "--" + index + "--" + (arr === self));
})
// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true
console.log(a); //undefined---forEach没有返回值
//该方法为遍历方法，不会修改原数组
16.map()
同forEach功能；2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。
map(callback);callback默认有三个参数，分别为value，index，self。
功能1：同forEach
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
console.log(value + "--" + index + "--" + (arr === self))
})
// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true //功能2：每次回调函数的返回值被map组成新数组返回
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
return "hi:"+value;
})
console.log(a); //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变
filter()
1.同forEach功能；2.filter的回调函数需要返回布尔值，当为true时，
将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。
filter(callback);callback默认有三个参数，分别为value，index，self。
功能1：同forEach
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
console.log(value + "--" + index + "--" + (arr === self))
})
// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true //功能2：当回调函数的返回值为true时，本次的数组值返回给filter，被filter组成新数组返回
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
return value.length > 3;
})
console.log(a); //["Jack", "Lucy", "Lily"]
console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变
every()
判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。
every()接收一个回调函数作为参数，这个回调函数需要有返回值，every(callback);
callback默认有三个参数，分别为value，index，self
当回调函数的返回值为true时，类似于forEach的功能，遍历所有；
如果为false，那么停止执行，后面的数据不再遍历，停在第一个返回false的位置。
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
})
打印结果为：
Tom--0--true
因为回调函数中没有return true，默认返回undefined，等同于返回false demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return value.length < 4;
})
打印结果为：
Tom--0--true
abc--1--true
Jack--2--true
因为当遍历到Jack时，回调函数到return返回false，此时Jack已经遍历，但是后面数据就不再被遍历了 demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return true;
})
// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
//因为每个回调函数的返回值都是true，那么会遍历数组所有数据，等同于forEach功能 功能2：当每个回调函数的返回值都为true时，every的返回值为true，只要有一个回调函数的返回值为false，every的返回值都为false demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
return value.length > 3;
})
console.log(a); //false //demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
return value.length > 2;
})
console.log(a); //true
some()
功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
参数：some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);
callback默认有三个参数，分别为value，index，self。 功能1：因为要判断数组中的每一项，只要有一个回调函数返回true，some都会返回true，所以与every正好相反，当遇到一个回调函数的返回值为true时，可以确定结果，
那么停止执行，后面都数据不再遍历，停在第一个返回true的位置；当回调函数的返回值为false时，需要继续向后执行，到最后才能确定结果，所以会遍历所有数据，实现类似于forEach的功能，遍历所有。 demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return value.length > 3;
})
// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true 功能2：与every相反，只要有一个回调函数的返回值都为true，some的返回值为true，所有回调函数的返回值为false，some的返回值才为false
demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
return value.length > 3;
})
console.log(a); //true //demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
return value.length > 4;
})
console.log(a); //false
reduce()
功能：从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。 参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；
第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。
callback返回的任何值都会作为下一次执行的第一个参数。
如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。
demo1:不省略initial参数，回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 打印结果为：
// 2019--10--0--true
// undefined--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined //demo2:省略initial参数，回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
10--20--1--true
undefined--30--2--true
undefined--40--3--true
undefined--50--4--true
此时回调函数没有return，所以从第二次开始，prev拿到的是undefined demo3:不省略initial参数，回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
}, 2019)
打印结果为：
2019--10--0--true
hello--20--1--true
hello--30--2--true
hello--40--3--true
hello--50--4--true
此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值 demo4:省略initial参数，回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
})
// 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 10--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值 //demo5：使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
return prev + now;
})
console.log(sum); //
// 回调函数的最后一次return的结果被返回到reduce方法的身上 //demo6：使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
return prev + now;
}, 8)
console.log(sum); //
// 回调函数的最后一次return的结果被返回到reduce方法的身上
// 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8
reduceRight()
功能：（与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。
参数：同reduce。
demo：同reduce
是否改变原数组
pop,shift; push,unshift; reverse; sort; splice—— yes。
功能方法没有必要关注返回值，但是功能方法可以有返回值
数组的遍历(获取数组中的每个元素)
数组元素的获取：
索引，数组元素的下标，表示数组元素在数组中的顺序，从0开始，到arr.length-1
利用循环，配合索引
整数数组／字符串数组／对象数组／二维数组
整数数组：arr = [1,2,3,4,5,6,7]
数组的元素为整数 字符串数组：arr = ["h","e","l","l","o”]
数组的元素为字符串 json对象数组：arr = [{name:"Lisa"},{name:"Jack"},{name:"Loss"}]
数组的元素为对象
如何获取对象数组内的元素：arr[1].name; //Jack 二维数组：arr = [[1,"a",3],["hello",6,8],["color","width"]]
数组的元素为数组
如何获取而为数组内的元素：arr[2][1]; //width
JavaScript基础04——数组的创建及方法的更多相关文章
- javascript基础04
javascript基础04 1.循环语句 1.While 语句: while (exp) { //statements; } var i = 1; while(i < 3){ alert(i) ...
- JavaScript 基础回顾——数组
JavaScript是无类型语言,数组元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同类型.数组的元素设置可以包含其他数组,便于模拟创建多维数组. 1.创建数组 在JavaScript中, ...
- JavaScript基础之数组常用方法
目录 JS 数组常用API 常用属性 常用方法 常见方法语法解释 from方法 isArray concat every fill filter find forEach indexOf join k ...
- JavaScript中遍历数组和对象的方法
js数组遍历和对象遍历 针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等 JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3 ...
- javascript之判断数组的几种方法
今天和小伙伴一起出去吃饭,有个小伙伴突然问我,你是前端是吧,问一下现在前端判断数组都有哪些方法,哈哈不知道是不是考我,当时没有说全,吃过饭后看了下自己以前的小笔记这里总结一下目前知道的所有对于数组的判 ...
- JavaScript 基础(六) 数组方法 闭包
在一个对象中绑定函数,称为这个对象的方法.在JavaScript 中,对象的定义是这样的: var guagua = { name:'瓜瓜', birth:1990 }; 但是,如果我们给瓜瓜绑定一个 ...
- javascript基础知识-数组
1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...
- JavaScript基础——使用数组
Array对象提供存储和处理一组其他对象的一种手段.数组可以存储数值.字符串或其他JavaScript对象.创建JavaScript数组有几种不同的方法.例如,下面的语句穿件同样的驻足的3个相同的版本 ...
- JAvaScript：JS数组元素去重的方法
在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现. 方案一: 思路: 1.构建一个新的数组存放结果: ...
随机推荐
- c# EF插入数据报错跟踪代码
我们在使用EF进行数据库插入的时候或出现一些插入失败的情况,但是具体是哪个字段不符合数据库设计要求无法得知,普通的try catch 无法捕获加上一下方法就可以 try { ...
- 一文快速入门Docker
Docker提供一种安全.可重复的环境中自动部署软件的方式,拉开了基于与计算平台发展方式的变革序幕.如今Docker在互联网公司使用已经非常普遍.本文用十分钟时间,带你快速入门Docker. Dock ...
- 使用Dapper查询记录是否存在
/// <summary> /// Dapper数据访问抽象基础类 /// </summary> public class DapperHelper { public stat ...
- 通过Logstash由SQLServer向Elasticsearch同步数据
延用上篇ELK所需环境,新增logstash配置文件 需要数据库链接驱动 Microsoft JDBC driver 6.2 for SQL Server 下载地址: https://www.micr ...
- C# vb .net实现装饰边框效果滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的装饰边框效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- 自己使用的jquery公用common.js
/*解决ie8中js数组没有indexOf方法*/ jQuery.extend({ exportResport : function(url, method, params){ var paramCo ...
- nodeJS从入门到进阶一（基础部分）
一.Node.js基础知识 1.概念 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是JavaScript的运行环境 Node.js 使用了一个事件驱动.非阻塞 ...
- Django:实现读写分离
库的配置 1.读写分离 settings配置 #settings.py 配置库信息,生成2个库 DATABASES = { 'default': { 'ENGINE': 'django.db.back ...
- Android选项卡TabHost功能和用法
1.布局文件 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- 直播知识-推流&拉流
推流,指的是把采集阶段封包好的内容传输到服务器的过程.其实就是将现场的视频信号传到网络的过程.“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观众观看直播时就会发生卡顿等现象,观看体验很是 ...