(1)知识点
- (1.1)将数组转化为字符串
- (1.2)连接数组 concat
- (1.3)获取子数组 slice
- (1.4)splice:删除 插入 替换
- (1.5)reverse:颠倒数组中所有元素的位置
- (1.6)sort():排序
- (1.7)栈和队列
(2)细化
(2.1)将数组转化为字符串
有两种方式:
var str=arr.toString(); //返回数组中元素的内容,用逗号分隔
var str=arr.join("连接符"); //可自定义连接符
- 无缝拼接数组每个元素:var str=arr.join("")
如果不加"",等效于toString,用逗号 - 将单词拼接为句子: var str=arr.join(" ");
- 将数组拼接为html元素:
优化:数组的拼接比字符串拼接效率更高!
建议:今后凡是频繁的字符串拼接,都要2步:
(1)先将要拼接的子字符串放入一个数组中
(2)调用数组的join方法,一次性生成结果字符串
(2.2)连接数组
var newArr=arr1.concat(arr2,值1,值2,......)
强调:concat不修改原数组,总是返回一个新数组
(2.3)获取子数组
var subArr=arr.slice(starti,endi+1);
starti: 开始获取的下标位置
endi:表示获取截止到的下标位置
** 含头不含尾 **
slice方法支持倒数参数:其实负数下标不存在,假定的负数下标从-1开始
(2.4)删除 插入 替换
splice() 方法 向/从 数组中添加/删除项目,然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
- 删除: arr.splice(starti,n)
从starti位置开始,删除n个元素 - 插入: arr.splice(starti,0,新值1,新值2,......)
在starti位置插入新值1,新值2,......
原starti位置及其之后的元素,被向后顺移 - 替换: arr.splice(starti,n,新值1,新值2,......)
新元素的个数和n不一定相等
数组会自动调整元素的位置和长度
(2.5)颠倒数组中所有元素的位置
arr.reverse();
(2.6)sort()
arr.sort();
sort() 方法用于对数组的元素进行排序;数组在原数组上进行排序,不生成副本。
特点:默认按升序排列,默认一切都转为字符串,再按字符串比大小
如果想要自定义排序规则,那么需要2步:
第一步. 定义比较器函数:专门比较任意两值大小的函数
规定:两个参数(a , b),必须返回数字:
如果a>b,就要返回正数
如果a<b,就要返回负数
如果a=b,就要返回0
第二步. 将比较器函数对象作为参数传入sort方法中
arr.sort(比较器函数名); //函数名不加圆括号
tips:升序改降序: 只要给比较器的逻辑*-1
(2.7)栈和队列
其实都是数组,只不过使用了不同的方法
- 栈
一端封闭,只能从另一端进出的数组
何时使用栈:只能从数组一端进出
LIFO ---->last in first out
a. 结尾出入栈:
入栈:
arr.push(新值); ==>arr[arr.length]=新值;
出栈:
var last=arr.pop();
** 无论出入栈都不影响已有元素的位置——效率高 **
b. 开头出入栈:
入栈:
arr.unshift(新值);
出栈:
var first=arr.shift()
** 每次出入栈都会影响所有剩余元素的位置发生顺移——效率低 **
- 队列
只能从一端进入,必须从另一端出
何时使用:只要先到的先得
FIFO---->first in first out
结尾入队列:
arr.push(新值);
开头出队列:
var first=arr.shift();
(3)实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组API</title>
</head>
<body>
<p>var arr1 = [1, 2, 3, 'a', 'b', 'c'];</p>
<p>var arr2 = ['a', 'b'];</p>
<p>var del = [1, 2, 3, 4, 5, 6];</p>
<p>var insert = [1, 2, 3, 4, 5, 6];</p>
<p>var replace = [1, 2, 3, 4, 5, 6];</p>
<p>var sortArray = [6,3,5,44,22,1];</p>
<script type="text/javascript">
init();
function init() {
var arr1 = [1, 2, 3, 'a', 'b', 'c'];
arrToString(arr1); //(1)数组转为字符串
//(2)连接两个或多个数组:concat
var arr2 = ['a', 'b'];
concatArr(arr1, arr2);
//(3)获取子数组 slice
childArr(arr1);
//(4)删除 插入 替换 splice,然后返回被删除的项目
var del = [1, 2, 3, 4, 5, 6];
delArr(del);
var insert = [1, 2, 3, 4, 5, 6];
insertArr(insert);
var replace = [1, 2, 3, 4, 5, 6];
replaceArr(replace);
//(5)颠倒数组中所有元素的位置
reverse(arr1);
//(6)sort排序
var sortArray = [6, 3, 5, 44, 22, 1];
sort(sortArray);
sort2(sortArray);
sort3(sortArray);
}
function arrToString(arr) {
var str = arr.toString(); //1,2,3 返回数组中的元素内容,用逗号分隔
var str2 = arr.join(""); //123 无缝拼接数组中的元素内容,可自定义连接符
console.log('数组转字符串,用“,”分隔:');
console.log(str);
console.log('数组转字符串,无缝拼接:');
console.log(str2);
}
function concatArr(arr1, arr2) {
var newArr = arr1.concat(arr2);
console.log('连接数组:');
console.log(newArr); //[1, 2, 3, "a", "b"] concat不修改原数组,总是返回一个新数组
}
function childArr(arr) {
var newArr = arr.slice(0, 4); //[1, 2, 3, "c"]
var newArr1 = arr.slice(-1, 4); //[]
console.log('获取子数组0-4:');
console.log(newArr);
console.log('获取子数组(-1)- 4:');
console.log(newArr1);
}
function delArr(arr) {
var delArr = arr.splice(2, 1); //从位置2开始,删除1个元素
console.log('splice删除的元素:');
console.log(delArr);
console.log('返回新的数组:');
console.log(arr);
}
function insertArr(arr) {
var insetArr = arr.splice(2, 0, 'c', 'd', 'e'); //从2的位置开始,插入新值'c','d','e'
console.log('splice插入的元素:');
console.log(insetArr);
console.log('返回新的数组:');
console.log(arr);
}
function replaceArr(arr) {
var replaceArr = arr.splice(2, 2, 'r', 'e', 'p', 'l', 'a', 'c', 'e'); //新元素的个数和n不一定相等,数组会自动调整元素的位置和长度
console.log('splice替换的元素:');
console.log(replaceArr);
console.log('返回新的数组:');
console.log(arr);
}
function reverse(arr) {
var reverse = arr.reverse();
console.log('reverse颠倒数组中所有元素的位置:');
console.log(reverse);
}
function sort(arr) {
var sortArr = arr.sort();
console.log('sort对数组进行排序,默认按升序排列:');
console.log(sortArr); //[1, 22, 3, 44, 5, 6]
}
/**
* 默认一切转为字符串,按升序排列
* 自定义排序,按数字大小升序排列
* (1)先定义一个排序函数
* (2)将排序函数对象作为参数传入sort方法中
*/
function sort2(arr) {
var sortArr = arr.sort(sortNum);
console.log('sort自定义排序,按大小升序排列:');
console.log(sortArr); //[1, 3, 5, 6, 22, 44]
}
function sortNum(a, b) {
return a - b;
}
/**
* 自定义排序,按降序排列
* 给比较器的逻辑*-1
* @param arr
*/
function sort3(arr) {
var sortArr = arr.sort(sortNumDown);
console.log('sort自定义排序,按大小降序排列:');
console.log(sortArr); //[44, 22, 6, 5, 3, 1]
}
function sortNumDown(a, b) {
return (a - b) * (-1);
}
/**
* 结尾出入栈
*/
var bottomStack = new Array();
//入栈 push
for (var i = 1; i <= 10; i++) {
bottomStack.push(i);
}
console.log(bottomStack);
//出栈 pop
//如果使用栈的时候,length的实时发生变化的
//for(var i = 1; i < bottomStack.length; i++) {
for (var i = 1; i <= 10; i++) {
console.log("出栈:" + bottomStack.pop());
console.log("当前栈:" + bottomStack.toString());
console.log("_____");
}
/**
* 开头出入栈
*/
//入栈 unshift
var headStack = [];
for (var i = 1; i <= 10; i++) {
headStack.unshift(i)
}
console.log(headStack);
//出栈 shift
for (var i = 1; i <= 10; i++) {
console.log("开头出栈:" + headStack.shift());
console.log("当前栈:" + headStack.toString());
console.log("*****")
}
/**
* 队列:只能从一端进入,从另一端出去
*/
//进:push
var lineArr = [];
for (var i = 1; i <= 10; i++) {
lineArr.push(i);
}
console.log(lineArr);
//出:shift
for (var i = 1; i <= 10; i++) {
console.log("队列:" + lineArr.shift());
console.log("当前队列:" + lineArr.toString());
console.log("*****")
}
</script>
</body>
</html>