[TOC]
> Tip 数组可以 是二维的或三维的n维的
## 1. 数组遍历（暂定四种）
### 1.1 for 循环
```
var arr = [1,2,3];
for(let i = 0; i<arr.length ; i++){
console.log(arr[i])
}
```
### 1.2 for in
```
var arr = [1,2,3];
for(let k in arr){
console.log(arr[k]);
}
```
### 1.3 for of
```
var arr = [1,2,3];
for(let n of arr){
// console.log(arr[n]); 此时n已经有值了，当获取下标0时，n为1，arr[1]就为2；
console.log(n);
}
```
### 1.4 forEach
```
arr.forEach((v,k)=>{
console.log(v); //值
console.log(k); //下标
})
```
### 1.5 arr.map/Array.from
```
var arr = [1,2,3];
// Array.from(arr,(value,index)=>{
// console.log(index);
// })
/*
arr.map((value,index)=>{
console.log(index);
})
*/
arr.map(function(value,index){
console.log(index)
})
```
## 2.增加数组
### 2.1 `push/unshift`增加数组内容
* push/unshift 改变数组内容，不可接数组
* 1. push 从后增加 push(para1,para2)
* 2. unshift 从头增加 unshift(para1,para2) 可以用展开语法传数组
```
var arr = [1,2,3,4];
arr.unshift(-1,0)
arr.push(5,6);
console.log(arr); //-1，0，1，2，3，4，5，6
arr.unshift(...["h","p"]);
console.log(arr) //"h","p",-1，0，1，2，3，4，5，6
```
### 2.2 `concat`
* 可以接数组，不会改变数组内容
* concat(para1,para2)
* concat([para1,para2]) //传数组和值效果一样，都是增加数组内容
```
var arr = [1,2,3,4];
var n = arr.concat(7,8)
var m = arr.concat([1,2])
console.log(m) //1，2，3，4，1，2
console.log(n) //1，2，3，4，7，8
console.log(arr); //1，2，3，4
```
### 2.3 复制数组
#### 2.3.1 方法1 push
```
var arr = [1,2,3,4];
var b = [];
for(let i = 0;i<arr.length;i++){
b.push(arr[i]);
}
var b = [].concat(arr);
```
#### 2.3.2 方法二 slice
```
console.log(b);
var b = arr.slice(0);
console.log(b);
```
## 3 删除数组
### 3.1 shift/pop 删除单个
> shift() -->方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
> pop() --> 方法用于删除数组的最后一个元素。
```
var arr = [1,2,3,4];
arr.shift();
arr.pop();
console.log(arr);
```
### 3.2 splice 删除多个定点删除
* splice(index,howmany)
* index -->从哪里开始 删除下标 1 splice(1,1)
howmany --> 删除几个
```
var arr = [ 1,2,3,4,5];
arr.splice(0,2)
console.log(arr); // 3，4，5
```
## 4 改
### 4.1 splice
* splice(index,howmany,item1,item2....)
index -->从哪里开始 //在下标为 1 的值 后面加入2.3 //splice(1,0,23)
howmany --> 删除几个
item -->在删除的地方添加的值
```
var arr = [ 1,2,3,4,5];
arr.splice(0,2,8,9)
console.log(arr); //8，9，3，4，5
```
### 4.2 arr[1] = 20 直接将下标为1的改为20
### 4.3 将一维数组改成二维数组
> arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
#### 第一种 找到二维数组的一维下标 newArr[ [0],[1] ]
```
function slice_arr(arr, n) {
var newArr = [];
for (let i = 0; i < arr.length / n; i++) {
newArr[i] = arr.slice(n * i, n * (i + 1))
}
return newArr
}
var newArr = slice_arr(arr, 5)
console.log(newArr)
```
#### 第二种 找到二维数组中起始值的对应的下标 一维下标 arr[0,1,2]
```
var newArr = slice_arr(arr,3)
console.log(newArr)
function slice_arr(arr,len){
var arr_len = arr.length ;
var pages= [];
for(i=0;i<arr_len;i+=len){
pages.push(arr.slice(i,len+i))
}
return pages
}
```
#### 第三种
```
var pages=[];
arr.forEach((ele,index)=>{
var page = Math.floor(index/3);
if(!pages[page]){
pages[page]=[]
}
pages[page].push(ele)
})
console.log(pages)
```
## 5.查
### 5.1 `indexOf ` 查询数组中值的下标
* arr.indexOf(value)
```
var arr = [1,2,3,4,5,6];
var index = arr.indexOf(5);
console.log(index); //5
```
### 5.2 `slice `--截取(不改变数组)
* arr.slice(startIndex,lastIndex) -->不包含lastIndex
```
var arr = [1,2,3,4,5,6];
var b = arr.slice(1,3); //查找下标1-3的值
console.log(b); // 2，3
console.log(arr);
```
### 5.3 join 分隔符 将数据转成字符串
* join -->通过特定的分割符，把数组拼接成字符串
arr.join(separate)
```
var arr = ["green" , "yellow" , "red"];
var str = arr.join(",") // " " "/"
var str1 = arr.join("|");
console.log(str)
console.log(str1)
```
### 5.4 `max` 查找最大值
#### 方法一
> JavaScript内部封装的函数 Math
```
<script>
var arr = [1,2,3,4,0];
function getMax(arr){
var max = arr[0];
for(let i = 0;i<arr.length;i++){
if(max<arr[i]){
max = arr[i];
}
}return max;
}
console.log(getMax(arr));
// ... 展开语法
/*var max = Math.max(...arr);
var min = Math.min(...arr);
console.log(min);
console.log(max); */
</script>
```
#### 方法二
```
var arr = [44,66,3,7];
var max = Math.max.apply(null,arr)
console.log(max);
console.log(arr.constructor == Array);
```
#### 方法三 向数组中添加一个方法
```
var arr = [1,3,34,2]
/* Array.prototype.max = function(arr){
return Math.max(...arr);
} */
Array.prototype.max = (arr=>Math.max(...arr))
console.log(arr.max(arr));
```
#### 拓展 展开语法 `...`
```
function go(x,y,z){
console.log(x+y+z);
}
var arr = [1,2,3];
// go(arr[0],arr[1],arr[2]);
go(...arr);
console.log(...arr);
```
```
/* var arr = [1,2,3];
var b = [...arr,..."hello"];
console.log(b); */
//对象的展开
var obj = {
name:"cheng",
age:19
}
var wang = {...obj};
console.log(wang);
```
## 6数组升/降序
```
var arr = [33,22,14,4,6,88,77];
var copyArr = [...arr];
/* var d = arr.sort((a,b)=>{
return a-b;
}) */
var d = arr.sort((a,b)=>{
return b-a;
});
var e = copyArr.sort((a,b)=>a-b);
console.log(d);
console.log(e);
```
## 7.求和
```
var arr = [1, 2, 3, 4];
/*
var sum = arr.reduce(function(a,b){
return a+b;
})
*/
var sum = arr.reduce((a, b) => a + b);
console.log(sum);
```
## 8. reverse
```
/* reverse 颠倒，反向输出 */
let arr = [1,2,3,4];
arr.reverse();
console.log(arr);
```
- 效果实例
- 1.点击增加高度
- 2.tab页面切换
- 3. 列表切换
- 4. 隔行变色
- 5. swiper 轮播
- 6.vue
- 7.定时器
- 8. 向表格中添加数据
- 9 瀑布流
- 1.JavaScript基础
- 1. 变量
- 2. 调试
- 3.数据类型
- 4.转换
- 5.控制语句
- 6.运算
- 7. this
- 8 JSON对象和javascript对象的相互转换
- 2.JavaScript的控制语句
- 1. 基本控制语句
- 2.节点
- 2.1DOM补充
- 3. 函数
- js的模块化如何解决
- 不知道有什么用的
- 4.数组
- 5. String
- 补充
- 6.Ajax
- 1. 原生Ajax
- 2. HTTP/get/post
- 3.jQuery-Ajax
- 4.跨域
- 5.axios
- 6.封装
- Ajax效果
- ajax补充
- 7. 正则
- 1.创建正则表达式
- 2. 正则的api
- 3.正则语法
- 4.例子
- 量词
- 8.面向对象
- 1.原型
- ES6
- 模块化
- 1.回调地狱
- 什么是回调地狱
- 简单封装
- promise解决回调地狱
- generator解决回调地狱
- async解决回调地狱
- 2.封装
- Ajax，promise
- JavaScript难点
- 1. 闭包/作用域
- 2.原型链
- 3. 兼容性
- 适配
- JavaScript小效果
- 字符串截取