JavaScript基础
数组
为什么要学习数组
之前学习的数据类型,只能存储一个值(比如:number/string。我们想存储班级中所有学生的姓名,此时该如何存储?
数组的概念
所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。
数组的定义
数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。
1.利用构造函数的方式声明
var arr1 = new Array();
arr1[0] = 10;
arr1[1] = 10;
arr1[2] = 10;
arr1[3] = 10;
arr1[4] = 10;
2.利用构造函数声明,但是在声明的同时直接赋值(初始化)
var arr2 = new Array(10,20,30,40,50);//下标顺序是从0开始依次递增
console.log(arr2);
//注意!注意!注意!
var arr3 = new Array(10);//这不是初始化,如果只有一个数字,那么此时,是定义数组的长度.
console.log(arr3);
console.log(arr3.length);
3.通过数组字面量创建数组
// 创建一个空数组
var arr1 = [];
// 创建一个包含3个数值的数组,多个数组项以逗号隔开
var arr2 = [1, 3, 4];
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c'];
// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;
4.在使用字面量声明的同时初始化
var arr5 = [10,20,30,40,50];//从下标0开始
console.log(arr5);
//注意
var arr6 = [10];
console.log(arr6);//数组只有一个值
console.log(arr5[1]);
获取数组元素
数组的取值
// 格式:数组名[下标] 下标又称索引
// 功能:获取数组对应下标的那个值,如果下标不存在,则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined
遍历数组
遍历:遍及所有,对数组的每一个元素都访问一次就叫遍历。
数组遍历的基本语法:
for(var i = 0; i < arr.length; i++) {
// 数组遍历的固定结构
}
数组中新增元素
数组的赋值
// 格式:数组名[下标/索引] = 值;
// 如果下标有对应的值,会把原来的值覆盖,如果下标不存在,会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";
*案例
- 求一组数中的所有数的和和平均值
- 求一组数中的最大值和最小值,以及所在位置
- 将字符串数组用|或其他符号分割
- 要求将数组中的0项去掉,将不为0的值存入一个新的数组,生成新的数组
- 翻转数组
- 冒泡排序,从小到大*
简单类型和复杂类型的区别
基本类型又叫做值类型,复杂类型又叫做引用类型
值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。
引用类型:复杂数据类型,在存储是,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。
数组中的一些常用方法总结
-
push
作用:像数组的末尾添加一项或多项元素
参数:要添加的项
返回值:新数组的长度
是否改变原数组:改变var ary = ['a','b','c']; var res = ary.push('d','e'); console.log(ary); // ["a", "b", "c", "d", "e"] console.log(res); // 5
-
pop
作用:删除数组的最后一项
参数:无
返回值:被删除的项
是否改变原数组:改变
var ary = ['1','2','3']; var res = ary.pop(); console.log(ary); // ['1','2'] console.log(res); // 3
- shift
作用:删除数组的首项
参数:无
返回值:被删除的项
是否改变原数组:改变
var ary = ['a','b','c']; var res = ary.shift(); console.log(ary); //['b','c'] console.log(res); // a
- unshift
作用:向数组的开头添加一或多项
参数:要添加的项,多项用’,'隔开
返回值:新数组的长度
是否改变原数组:改变
var ary = ['a','b','c']; var res = ary.unshift('d','e'); console.log(ary); // ["d", "e", "a", "b", "c"] console.log(res); // 5
- splice
作用:增删改
参数:ary.splice(index,howmany,item1,…,itemX)
返回值:删除的项
是否改变原数组:改变
增加的功能
ary.splice(n,0,x,…,y);
从数组的索引n开始,删除0项,在索引n的前边增加新的项,第三个参数开始都是用来填补删除的项目位置的
var ary = [1,2,3,4,5]; var res = ary.splice(1,0,6,7);
console.log(ary); // [1, 6, 7, 2, 3, 4, 5] console.log(res); // []
删除0项,返回一个空数组
删除的功能
ary.splice(n,m);
从数组的索引n开始,删除m项
var ary = [1,2,3,4,5];
var res = ary.splice(1,2);
console.log(ary); // [1,4,5]
console.log(res); // [2,3]
修改的功能
ary.splice(n,m,x);
从数组的索引n开始,删除m项,把x添加到索引n前边
var ary = [1,2,3,4,5];
var res = ary.splice(1,2,6,7);
console.log(ary); // [1, 6, 7, 4, 5]
console.log(res); // [2,3]
//模拟 push(尾部添加) 和push二者返回值不同
ary.splice(ary.length,0,新的项) //因为splice是在索引前添加,所以第一个参数为ary.length
//模拟 pop(尾部删除)
ary.splice(arr.length-1,1);
//模拟 shift(首项删除)
ary.splice(0,1)
//模拟 unshift(首项添加) 和unshilft二者返回值不同
ary.splice(0,0,新的项)
此外
ary.splice(n) // 表示从索引n开始删除到末尾
ary.splice(0) // 删除整个数组 有克隆数组的效果,利用返回值
- slice
作用:截取数组(复制数组)
参数:array.slice(start, end)
返回值:返回一个新数组
是否改变原数组:不改变
var ary = [1,2,3,4,5]; var res = ary.slice(1,3); var res2 = ary.slice(-3,-1) console.log(ary); // [1,2,3,4,5] console.log(res); // [2,3] console.log(res2) //[3,4] slice支持负参数,从最后一项开始算起,-1为最后一项,-2为倒数第二项 slice(n) //从索引n开始复制到最后一项 slice()、 slice(0) //复制整个数组
- join
作用:用指定的分隔符将数组每一项拼接为字符串
参数:指定的分隔符,如果省略该参数,则使用逗号作为分隔符
返回值:拼接好的字符串
是否改变原数组:不改变
var ary = [1,2,3,4,5]; var res = ary.join('-'); console.log(ary); // [1, 2, 3, 4, 5] console.log(res); // 1-2-3-4-5
- concat
作用:用于连接两个或多个数组
参数:参数可以是具体的值,也可以是数组对象。可以是任意多个
返回值:返回连接后的新数组
是否改变原数组:不改变
var ary = [1,2,3,4,5]; var res = ary.concat(6,7); var res2 = ary.concat(6,[7,8]); var res3 = ary.concat(6,[7,[8,9]]); var res4 = ary.concat(); console.log(ary); // [1, 2, 3, 4, 5] console.log(res); // [1, 2, 3, 4, 5, 6, 7] console.log(res2); //[1, 2, 3, 4, 5, 6, 7, 8] console.log(res3) // [1, 2, 3, 4, 5, 6, 7, [8,9]] concat() 如果操作的参数是数组,那么添加的是数组中的元素,而不是数组。 如果是二维(或以上)数组, concat只能'拆开'一层数组 console.log(res4) // [1, 2, 3, 4, 5] 如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的
- sort
作用:对数组的元素进行排序
参数:可选(函数) 规定排序规则 默认排序顺序为按字母升序
返回值:排好序的原数组
是否改变原数组:改变
var ary = [1,5,7,9,12,24,56,87,92]; var ary2 = [1,5,7,9,12,24,56,87,92]; var ary3 = [1,5,7,9,12,24,56,87,92]; var res = ary.sort(); var res2 = ary2.sort(function(a,b){ return a-b; }) var res3 = ary3.sort(function(a,b){ return b-a; }) // sort的参数函数总的形参a,b就是数组排序时候的相邻比较的两项 console.log(res); // [1, 12, 24, 5, 56, 7, 87, 9, 92] console.log(res2); // [1, 5, 7, 9, 12, 24, 56, 87, 92] console.log(res3); // [92, 87, 56, 24, 12, 9, 7, 5, 1]
- reverse
作用:倒序数组
参数:无
返回值:倒序后的原数组
是否改变原数组:改变
var ary = [1,2,3,4,5]; var res = ary.reverse(); console.log(ary); // [5, 4, 3, 2, 1] console.log(res); // [5, 4, 3, 2, 1]
- indexOf
作用:查找指定元素的位置
参数:array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值:返回第一次查到的索引,未找到返回-1
是否改变原数组: 不改变
var ary = [1,2,3,4,5]
var res = ary.indexOf(3);
console.log(ary); // [1,2,3,4,5]
console.log(res); // 2
var ary = [‘a’,‘b’,‘c’,‘d’,‘c’];
var res = ary.indexOf(‘c’,3);
console.log(res) // 4
- lastIndexOf
作用:查找指定元素最后出现的位置
参数:array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值:返回查到的元素的索引,未找到返回-1
是否改变原数组:不改变
var ary = ['a','b','c','d','c']; var res = ary.lastIndexOf('c',3); var res2 = ary.lastIndexOf('c',1); console.log(res); // 2 console.log(res2); // -1
- forEach
作用:循环遍历数组每一项
参数:函数 ary.forEach(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:无
是否改变原数组: 不改变
var ary = ['a','b','c'] var res = ary.forEach(function(item,index,ary){ console.log(item,index,ary); /* a 0 ["a", "b", "c"] b 1 ["a", "b", "c"] c 2 ["a", "b", "c"] */ return item; }) console.log(res) // undefined 无返回值
- map
作用:数组中的元素为原始数组元素调用函数处理后的值
参数:函数 ary.map(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:新数组
是否改变原数组:不改变
var ary = ['a','b','c'] var res = ary.map(function(item,index,ary){ return item+1; }) console.log(res) // ["a1", "b1", "c1"]
- filter
作用:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
参数:函数 ary.filter(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:新数组
是否改变原数组:不改变
var ary = [1,2,3,4,5,6] var res = ary.filter(function(item){ return item<3; }) console.log(res) // [1,2]
16. every
作用:检测数组所有元素是否都符合指定条件
参数:函数 ary.every(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:布尔值
是否改变原数组: 不改变
var ary = [1,2,3,4,5,6]
var res = ary.every(function(item){
return item<3;
})
var res2 = ary.every(function(item){
return item<7;
})
console.log(res) // false;
console.log(res2) // true;
1 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
2 如果所有元素都满足条件,则返回 true。
17. some
作用:检测数组中的元素是否满足指定条件
参数:函数 ary.some(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值:布尔值
是否改变原数组:不改变
var ary = [1,2,3,4,5,6]
var res = ary.some(function(item){
return item<3;
})
console.log(res) // true;
1 如果有一个元素满足条件,则表达式返回 true , 剩余的元素不会再执行检测。
2 如果没有满足条件的元素,则返回 false。