JavaScript内置对象-1Array(数组)
学习目标
1.掌握任何创建数组
2.掌握数值元素的读和写
3.掌握数组的length属性
如何创建数组
创建数组的基本方式有两种：
1.使用Array构造函数
语法：new Array（）
小括号（）说明：
（1）预先知道数组要保存的项目数量
（2）向Array构造函数中传递数组应包含的项
2.使用数组字量表示法:由一对包数组项的方括号[]表示，多个数组项之间以逗号隔开。
数组元素的读写
读取和设置值时，使用方括号[]并提供相应的索引
说明：索引是从0开始的正整数
数组长度
语法：array.length
功能：获取数组array的长度
返回值：number
说明：
1.通过设置legth可以从数组的末尾移除项或向数组中添加新项。
2.当一个值放在超出当前数组大小的位置上时，数组就会重新计算其长度值，长度值等于最后一项的索引加1.
<script>
// 创建一个保存颜色的数组
/* var colors=new Array(3);
colors[0]="#f00";
colors[1]="#0f0";
colors[2]="#00f";
console.log(colors);
var nums=new Array(1,3,6,9);
//console.log(nums);
var cols=["red","yellow","green"];
//console.log(cols);
var infos=[6,"marry",true];
//console.log(infos);
console.log(cols[5]); // 读取cols这个数组中索引为1的值*/
var arr=["a","b","c","d"];
//console.log(arr.length); // 4
//arr.length=2;
//arr[99]="z";
//console.log(arr.length); // 100
// 数组的遍历
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
</script>
<script>
// filter()
var nums=[1,2,5,8,10,9,3,6];
// 将nums这个数组中所有大于3的值都取出来存到一个新数组
function filterArray(arr){
var newArr=[],i,len=arr.length;
for(i=0;i<len;i++){
if(arr[i]>3){
newArr.push(arr[i]);
}
}
return newArr;
}
var newNums=filterArray(nums);
//newNums.sort(function(a,b){return a>b});
//console.log(newNums);
var newNums2=nums.filter(function(item,index,arr){
return item>3;
})
// 将nums这个数组中所有的偶数打印出来
var newNums3=nums.filter(function(item,index,arr){
if(item%2==0) return item;
})
console.log(newNums3);
</script>
<script>
var nums=[1,6,8,9,11];
var sum=nums.reduce(function(prev,cur,index,array){
return prev+cur; // prev 2
})
console.log(sum);
</script>
<script>
var nums=[3,8,5,7,6];
var newNums=nums.map(function(item,index,array){
return item*2;
})
console.log(nums);
var strs=["display","transform","transition"];
var newstrs=strs.map(function(item,index,array){
return "-webkit-"+item;
})
console.log(newstrs);
var colors=["red","green","blue"];
colors.forEach(function(item,i,array){
console.log(item);
})
</script>
学习目标
掌握数组的栈方法：
1.push()
2.unshift()
3.pop()
4.shift()
push()
语法：arrayObject.push(newele1,newele2,...,neweX)
功能：把它的参数顺序添加到arrayObject的尾部。
返回值：把指定的值添加到数组后的新长度。
unshift()
语法：arrayObject.unshift(newele1,newele2,...neweX)
功能：把它的参数顺序添加到arrayObject的开头。
返回值：把指定的值添加到数组后的线长度。
pop()
语法：arrayObject.pop()
功能：删除arrayObject的最后一个元素
返回值：被删除的那个元素
Shift()
语法：arrayObject.shift()
功能：删除arrayObject中的第一个元素
返回值：被删除的那个元素
<script>
// push
var colors=new Array("red","green");
var len=colors.push("blue","yellow","blank");
console.log(len);
// unshift
var nums=[2,7,8,6];
var size=nums.unshift(99,66);
// pop
var n=nums.pop();
console.log(nums);
// unshift
var m=colors.shift();
console.log(m);
</script>
学习目标
1.掌握数组的转换方法
2.掌握数组的重排序方法
Join()
语法：arrayObject.join(separator)
功能：用于把数组中所有元素放入一个字符串。
返回值：字符串。
Reverse()
语法：stringObject.reverse()
功能：用于颠倒数组中元素的顺序。
返回值：数组
Sort()
语法：arrayObject.sort(sortby)
功能：用于对数组元素进行排序。
返回值：数组
说明：
1.即使数组中的每一项都是数值，sort()方法比较的也是字符串。
2.Sort（）方法可以接受一个比较函数作为参数。
<script>
// join
var nums=[2,4,5];
var str=nums.join(); //2,4,5
var words=["border","left","color"];
// border-left-color
var wordstr=words.join("-");
console.log(wordstr);
// reverse
nums.reverse();
console.log(nums);
var strs=["a","b","c","d"];
// 返回dcba这个字符串
var newstr=strs.reverse().join("")
console.log(newstr);
// 29,5,24,17,32
var arr=[9,23,15,-99,88,12,-2];
// 降序 return 参数1<参数2
//arr.sort(function(a,b){return a<b});
// 升序 return 参数1>参数2
arr.sort(function(a,b){return a>b});
console.log(arr);
</script>
<script>
// 写一个函数，返回某个值在这个数组中出现了多少次
var nums=[8,2,5,6,8,6,7,9];
function getTimes(arr,num){
// 次数
var times=0,i;
// 遍历数组
for(i=0;i<arr.length;i++){
// 比较数组中的每一值是否和num相等
if(arr[i]==num){
// 次数+1
times+=1;
}
}
return times;
}
var times1=getTimes(nums,99);
var times2=getTimes(["a","c","a","d"],"a");
console.log(times1);
console.log(times2);
// 封装一个方法，实现reverse()的功能
// 数组翻转
function reverseArr(arr){
// 新数组
var newArr=[];
// 遍历数组，从最后一个值开始取
/* for(var i=arr.length-1;i>=0;i--){
// 将每一个值追加到新数组的最后
newArr.push(arr[i]);
}*/
for(var i=0;i<arr.length;i++){
newArr.unshift(arr[i])
}
return newArr;
}
var newArr1=reverseArr([1,2,4,9,6]);
var newArr2=reverseArr(["o","l","l","e","h"]);
console.log(newArr1);
console.log(newArr2.join(""));
</script>
学习目标
1.掌握数组的操作方法：
concat()
Slice()
concat()
语法：arrayObject.concat(arrayX,arrayX,...,arrayX)
功能：用于链接两个或多个数组。
返回值：数组
slice（）
语法：arrayObject.slice(start,end)
功能：从已有的数组中返回选定的元素。
参数：Start（必需）规定从何处开始选取，如果是负数，那么它规定从数组尾部开
算起的位置。
End（可选）规定从何处结束选取，该参数是数组怕片断结束的数组下标。
说明：1.如果没有指定end，那么切分的数组包含从start到数组结束的所有元素。
2.如果slice()方法的参数中有一个负数，则用数组长度加上数来确定相应的位置。
返回值：数组。
<script>
var arr1=["a","b","c"],
arr2=["d","e",1,3],
arr3;
// concat
arr3=arr1.concat(arr2,["m",99,8]);
console.log(arr3);
// slice(start,end) end下标
var colors=["red","green","blue","yellow","orange"];
//var newColors=colors.slice(1,3);
//var newColors2=colors.slice(2,4);
var newColors3=colors.slice(-4,3); // 1,3
console.log(newColors3);
// 完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
var a=[1,"yes",3],
b;
// 1、数组遍历,push
/*b=new Array();
for(var i=0;i<a.length;i++){
b.push(a[i]);
}*/
// 2、concat()
b=[].concat(a);
// 3、slice();
b=a.slice(0);
console.log(b);
</script>
学习目标
1.掌握使用splice()方法删除数组项
2.掌握使用splice()方法插入数组项
3.掌握使用splice()方法替换数组项
删除
语法：arrayObject.splice(index,count)
功能：删除从index处开始的零或多个元素。
返回值：含有被删除的元素数组。
说明：count是要删除的项目数量，如果设置为0，则不会删除项目。
如果不设置，则删除从index开始所有值。
插入
语法：arrayObject.splice(index0,item1,.....,itemX)
功能：在指定位置插入值
参数：Index:起始位置
0：要删除的项数
Item1....itemX:要插入的项
返回值：数组
替换
语法：arrayObject.splice(index,count,item1,....,itemX)
功能：在指定位置插入值，且同时删除任意数量的项
参数：Index:起始位置
count:要删除的项数
Item1,...itemX：要插入的项
返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）
<script>
var arr=["a","b","c","d","e","f"];
// 删除
//var delArr=arr.splice(2,3);
// 插入
//var insertArr=arr.splice(3,0,"m","n",88);
// 替换
var replaceArr=arr.splice(1,2,"x","y","z");
console.log(arr);
console.log(replaceArr);
</script>
学习目标
1.掌握ECMAScript为数组实例添加的两个位置方法：
IndexOf()
lestIndexOf()
indexOf()
语法：arrayObject.indexOf(searchvalue,startIndex)
功能：从数组的开头（位置0）开始向后查找。
参数：searchvalue:必须，要查找的项；
startIndex:可选，起点位置索引。
返回值：number,查找的项在数组中的位置，没有找到的情况下返回-1.
lastIndextOf()
语法:arrayObject.lastIndexOf(searchvalue,startIndex)
功能：从数组的末尾开始向前查找。
参数：searchvalue：必须，要查找的项
startIndex:可选，起点位置的索引。
返回值：number,查找的项在数组中的位置，没有找到的情况下发回-1.
说明：1.在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等。
2.数组的位置方法是ECMAScript为数组实例新增的，所以支持的浏览器只有：
IE9+、Firefox2+、Safari3、Opera9.5、Chrome。
<script>
var nums=[1,7,5,7,8,1,6,9];
//var pos=nums.indexOf(7,2);
//var pos=nums.lastIndexOf(1);
var pos=nums.indexOf("7");
console.log(pos);
// 封装一个方法实现indexOf的功能
function ArrayIndexOf(arr,value){
// 检测value在arr中出现的位置
for(var i=0;i<arr.length;i++){
if(arr[i]===value){
return i;
}
}
return -1;
}
var pos2=ArrayIndexOf(nums,"1");
console.log(pos2);
</script>