数组的概念:
字面意思上是一组数据,一组(一般情况下相同类型的)的数据(不一定都是数字)
〖注〗数组是一种数据类型
〖注〗数组的作用是:使用单独的变量来存储一系列的值。
数组的创建方式
1 使用new 运算符创建数组
参数:是我们要在数组中存储的数据; 参数:如果当前的参数只有一个,并且这个参数是数字的发,数字长度为该数字,数字中的每个值为空;
var arr=new Array(1,2,true,"hello"); //[1,2,true,"hello"]
var arr1=new Array(5); //[enpty*5 ]
2 省略运算符创建数组
var arr=Array(1,2,true,'hehe')
3.通过字面量来创建数组
〖注〗:
- 在数组中存储的数据,一般情况下叫做数组中的元素;
- 数组元素的访问是通过下表完成的;
var arr=[1,2,true,'hehe']
之前创建数组的方式存在的问题
- 如果没有传递参数,得到的是空数组
- 如果传递一个数字参数,得到是带有长度的空数组
- 如果传递一个非数字参数,得到的带有一个成员的数组
- 如果传递多个参数,得到的是一个多个参数的数组
//之前创建数组的方式
console.log(Array());//[]
console.log(Array(10));// [empty × 10]
console.log(Array("a"));//["a"]
console.log(Array(1,2));//[1, 2]
- ES6 **Array.of()**创建数组(实现将传递的每一个参数,都作为数组的成员)
//ES6中拓展的of方法
console.log(Array.of());//[]
console.log(Array.of(10));//[10]
console.log(Array.of('a'));//["a"]
console.log(Array.of(1,2));//[1, 2]
实现Array.of()的方法
Array.icktOf=function(){
return Array.prototype.slice.call(arguments)
}
console.log(Array.icktOf());//[]
console.log(Array.icktOf(10));//[10]
console.log(Array.icktOf('a'));//["a"]
console.log(Array.icktOf(1,2));//[1, 2]
**arr.length(数组的长度)**访问数组元素的个数
〖注〗: length属性,不只是读的,可以设置的.
var arr=[1,2,true,'hehe'];
console.log(arr.length);//4
arr.length=2 ;
console.log(arr);//[1,2]
数组元素的访问和赋值,都是通过数组的下标完成。(下标可以是变量或者表达式。)
〖注〗下标就是索引,即元素的序号,从0开始,下标最大取值是:数组的长度(length-1) 〖注〗下标可以是变量或者表达式。
数组遍历:数组和循环结合使用。JS中数组和循环是绝配。
var arr=[1,2,true,'hehe']
//for循环遍历
for(var i;i<arr.length;i++){
document.write(arr[i]+"<br>")
}
/*
for...in 进行遍历 快速遍历 将数组的某一个元素从头到位遍历一遍
〖格式〗
for(var 变量 in 数组){
}
*/
for(var i in arr){
//i 每一次遍历的下标
document.write(arr[i]+"<br>")
}
/* 〖注〗 for...in效率比for循环效率高(不需要进行判断)*/
**
栈结构:从一个口进,从同一个口出
特点:先进后出**
数组的栈方法(改变原数组的结构)
push()方法:
功能:在原数组末端添加项,
返回值:len=arr.push() //添加元素以后,数组的长度 `
unshift()方法:
功能:在原数组的前端添加项
返回值:len=arr.unshift() //添加元素以后,数组的长度
pop()方法:
功能:从原数组末端移除项,
返回值:返回被删除的元素
返回值:len=arr.pop() //返回被删除的元素
shift()方法:
功能:从原数组末端移除项,
返回值:返回被删除的元素
返回值:len=arr.shift() //移除数组中的第一项,返回被删除的元素**
<script>
//push()方法:从数组末端添加项
var colors=new Array("red","green");
var len=colors.push("blue","yellow","black");
console.log(colors);//["red","green","blue","yellow","black"]
console.log(len);//5
//unshift()方法:在数组的前端添加项
var nums=[2,6,7,9];
var size=nums.unshift(99,66);
console.log(nums);//[99,66,2,6,7,9]
console.log(size);//6
//pop()方法:从数组末端移除项,返回被删除的元素
var n=nums.pop();
console.log(nums);//[99,66,2,6,7]
console.log(n);//[9]
//shift()方法:移除数组中的第一项,返回被删除的元素
var m=colors.shift();
console.log(colors);//["green","blue","yellow","black"]
console.log(m);//["red"]
</script>
reverse():数组翻转
arr[1,2,3,4,5] —— arr.reverse() ----[5,4,3,2,1]
两个组合在一起:reverse().join() 翻转数组并转为字符串
var nums=[2,4,5];
nums.reverse();
console.log(nums);//[5, 4, 2]
var strs=["a","b","c","d"]
//返回dcba这个字符串
var newstr=strs.reverse().join("")
console.log(newstr);//dcba
sort():数组排序 sort会将数组里的值转成字符串再比较,所以排序数字大小要用函数function来比较
arr.sort(function(a,b) {return b - a}) ——降序
arr.sort(function(a,b) {return a - b}) ——升序
var arr=[9,23,15,-99,88,12,-2];
//降序
// arr.sort((a,b)=>{return b-a});
//console.log(arr);//[88, 23, 15, 12, 9, -2, -99]
//升序
arr.sort((a,b)=>{return a-b});
console.log(arr);// [-99, -2, 9, 12, 15, 23, 88]
splice()方法
arrayObject.splice(index,count,item1,…itemX)
功能:在指定位置插入值,且同时删除任意数量的项
参数:
index:起始位置 ;
count:要删除的项数 ;
item1,…itemX:要插入的项。
var arr=["a","v","c","d","e","f","g"]
//删除
// var delArr=arr.splice(2,3);
// console.log(arr);//["a", "v", "f", "g"]
// console.log(delArr);// ["c", "d", "e"]
//插入,从原始数组中删除的项(如果没有删除任何项,则返回空数组)**
var insertArrarr=arr.splice(3,0,'m','n')
console.log(arr);//["a", "v", "c", "m", "n", "d", "e", "f", "g"]
console.log(insertArrarr);//[]
数组方法(不改变原数组的结构)
join():
把数组转换成字符串,分割字符串默认用 逗号"," 分隔,
指定分隔符号: join("-")表示用 - 进行字符串分割;
var nums=[2,4,5];
var str=nums.join();
console.log(str);//2,4,5
var words=['border','left','color'];
//实现border-left-color
var wordstr=words.join("-");
console.log(wordstr);border-left-color
concat():数组拼接
arrayObject.concat(arrayX, arrayX,…,arrayX)]
用于连接两个或多个数组,返回值,数组
var arr1=["a","b","d"];
var arr2=["e","f"];
var arr3;
//concat
arr3=arr1.concat(arr2,["q",8,"u"])
console.log(arr3);// ["a", "b", "d", "e", "f", "q", 8, "u"]
slice():
arrayObject.slice(start, end)
从已有的数组中返回选定的元素,返回值,数组
start(必需),规定从何处开始选取,如是负数,从数组尾部开始算起(即该数组的索引长度加负数开始算起);
end(可选) 规定从何处结束选取,是数组片段结束处的数组下标
注意:
1. start和end指的是数组中的索引值
2. 截取从start到end(不包含该元素)的元素,即从start到(end-1)的元素
var colors=["red","green","blue","yellow","orange"];
//slice
var newColors=colors.slice(1,3);
console.log(newColors) //["green","blue"]
ES5中的方法 indexOf() lastIndexOf()
indexOf(value,Index); 从数组的 开头 开始向后查找;查找类型需相等,否则返回-1;
lastIndexOf(value,Index); 从数组的 末尾 开始向前查找;查找类型需相等,否则返回-1;
var nums=[1,7,7,4,3,7,8,9]
var pos=nums.indexOf(7,2);// 2
var pot=nums.lastIndexOf(7);// 5
console.log(pos,pot)
//封装一个方法实现indexOf的功能
function ArrayIndexOf(arr,value){
//检测Value在arr中出现的位置
for(var i=0;i<arr.length;i++){
if(arr[i]===value){
return i;
}
}
return -1;
}
console.log(ArrayIndexOf(nums,7)) //1
ES6中拓展了find() findIndex()
允许参数是可以执行的函数,在***查找的过程中,一旦找到立刻停止遍历***
find((item,index,arr)=>{return})查找成员,找到返回成员,没找到返回undefined
findeIndex(((item,index,arr)=>{return})查找成员,找到返回索引值,没找到返回undefined
let arr = ['尼古拉斯赵四', '宋小宝', '刘能', '小沈阳'];
//arr.find(function(item,index,arr){})
let result=arr.find((item,index,arr)=>{
return item==="宋小宝"
})
console.log(result);//宋小宝
let result1=arr.findIndex((item,index,arr)=>{
return item==="宋小宝";
})
console.log(result1);//1
find 方法的实现
let arr = ['尼古拉斯赵四', '宋小宝', '刘能', '小沈阳'];
Array.prototype.icktFind=function(fn){
//遍历数组 就是遍历this
for(let i=0;i<this.length;i++){
//判断并执行fn
//传递三个参数:成员值 this[i] 索引值i 原数组this
if(fn(this[i],i,this)){
//返回成员
return this[i];
}
}
//遍历完成没有找到 则返回undefined
return undefined;
}
let result=arr.icktFind((item,index,arr)=>{
return item==="宋小宝"
})
console.log(result);//宋小宝
自定义实现findeIndex
let arr = ['尼古拉斯赵四', '宋小宝', '刘能', '小沈阳'];
Array.prototype.icktFindIndex=function(fn){
//遍历数组 就是遍历this
for(let i=0;i<this.length;i++){
//判断并执行fn
//传递三个参数:成员值 this[i] 索引值i 原数组this
if(fn(this[i],i,this)){
return i;
}
}
//遍历完成没有找到 则返回undefined
return undefined;
}
let result=arr.icktFindIndex((item,index,arr)=>{
return item==="宋小宝"
})
console.log(result);//1
二维数组 所谓二维数组,在数组中元素还为数组
var arr=[[],[],[],[],[]] //二维数组
通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数,然后输出该数组的左下半三角。试编程。
1, 2, 3, 4, 5
6, 7, 8, 9, 10
11, 12, 13, 14, 15
16, 17, 18, 19, 20
21, 22, 23, 24, 25
如图
6
11 12
16 17 18
21 22 23 24
var count=0;//从1到25累加中间变量
var arr=[];
for(var i=0;i<5;i++){
var newArr=[];
for(var j=0;j<5;j++){
newArr.push(++count)
}
arr.push(newArr)
}
for(var i=0;i<arr.length;i++){
for(var j=0;j<i;j++){
document.write(arr[i][j]+" ")
}
document.write('<br>')
}
数组引用详解
〖注〗声明在当前函数中的变量和当前函数的形参,作用域都限制在该函数内。当函数调用结束以后,这些变量和形参,会被释放。
var a=10;
function show(a){
a=5;
alert(a);
}
alert(a);//10
show(a);//5
alert(a);//10
数组 复合数据类型/引用数据类型
〖注〗所有的复合数据类型都不直接存储在我们的函数中,存储在堆段。
〖注〗函数运行的内存空间是预先分配好的。一旦被分配好内存空间,就不能进行改变了。
〖注〗在堆段,我们可以想要使用内存,就随时分配多少内存。
〖注〗所有的复合数据类型,存储的都是门牌号,也就是地址。所以这类型的数据,我们叫做引用数据类型。
var arr=[10,20];
function show(arr){
arr.push(30,40)
alert(arr)
}
alert(arr);//arr=[10,20];
show(arr);//arr=[10,20,30,40];
alert(arr);//arr=[10,20,30,40];