数组

数组

1 什么是数组

1) 数组是值的有序集合。
2) 每个值叫做一个元素。
3) 每个元素在数组中有一个位置, 以数字表示,称为索引 (有时也称为下标)。
4) 数组的元素可以是任何类型。
5) 数组索引从 0 开始,数组最大能容纳 4294967295 个元素。

2 创建数组

2.1 使用数组直接量

// 定义所有的姓名组成的集合
var nameList = ['曹操', '诸葛亮', '刘备'];
//定义由数字组成的数组
var numList = [112,232,34,34234,3434,3434,121,112,112,112];
//数组的元素各种类型都有
var list = ['孙悟空', 100, true, false, '猪八戒', [1, 2, 3]];

3 读写数组元素

使用操作符 [] 来读写数组的每一个元素, []中是数组的索引。

// 读取数组中元素的值
nameList[12];

// 给数组中的元素赋值
nameList[2] = 100;

数组可以通过 length 属性获取数组的长度，也就是数组中元素的个数。

nameList.length; // 获取数组 nameList 的长度

如果数组[大于元素个数的索引]

var ary=[1,2,3];
ary[3]=200;//相当于新增一个
ary[5]=300;
console.log(ary);//[1, 2, 3, 200, empty, 300]
console.log(ary[4]);//undefined

数组length属性的特别之处（他不是只读的，通过修改length，可以从数组末尾删除或添加元素）

let colors=['red','blue','green'];
colors.length=2;
console.log(colors[2])//undefined
ary.length=7;//新增的元素都用undefined填充
ary[ary.length]='black';//数组最后添加一个

4 遍历数组（迭代）

// for 循环遍历
for (var i = 0; i < arr.length; i ++) {
    arr[i]
}

//for in 循环
for (var i in arr) {
    arr[i]
}

6 多维数组

// 创建多维数组
var cityList = [
  ['广州', '深圳', '佛山', '东莞', '惠州'],
  ['南京', '苏州', '徐州', '无锡', '南通'],
  ['济南', '青岛', '烟台', '潍坊', '淄博'],
  ['杭州', '宁波', '温州', '绍兴', '湖州']
];

// 多维数组取值
cityList[2][1];

7 字符串具有数组的特性

字符串可以通过 [] 取到指定的字符，只能取值无法修改。
2）字符串属性 .length 可获取字符串的长度（字符的个数）。
3）字符串可以向数组那样遍历。

8 数组方法

1）push：

作用：向数组末尾追加某一项
参数：添加的具体项，可以是一项,也可以是多项
返回值：新数组的长度

是否改变原数组：改变

var colors = ['red', 'pink'];
var res = colors.push('blue');
// 原数组
console.log(colors);//['red', 'pink', 'blue']
// 返回值
console.log(res);//3

2）pop：

作用：删除数组的最后一项
参数：无
返回值：删除的项

是否改变原数组：改变

var colors = ['red', 'pink'];
var res = colors.pop();
// 原数组
console.log(colors);//['red']
// 返回值
console.log(res);//pink

3）shift：

作用：删除数组的第一项
参数：无
返回值：删除的项

是否改变原数组：改变

var colors = ['red', 'pink'];
var res = colors.shift();
// 原数组
console.log(colors);//['pink']
// 返回值
console.log(res);//red

4）unshift：

作用：向数组的开头添加内容
参数：添加的内容
返回值：新数组的长度

是否改变原数组：改变

var colors = ['red', 'pink'];
var res = colors.unshift('blue', 'green');
// 原数组
console.log(colors);//['blue', 'green', 'red', 'pink']
// 返回值
console.log(res);//4

5)reverse 倒序

作用：把数组元素反向排列
参数：无
返回值：返回值是排序后的新数组
是否改变原数组：改变 ```javascript var ary=[1,2,3]; var res=ary.reverse(); console.log(res);//[3,2,1]; console.log(ary);//[3,2,1];

<a name="YTUZa"></a>
#### 6) sort 排序

- 作用：把数组进行排序
- 参数：无或者是一个函数
- 返回值：排序后的新数组
- 是否改变原数组：改变
```javascript
//----------------------不传参的时候

//=====>10 以内的可以排
var ary=[3,2,1,6,8];
ary.sort();

[1, 2, 3, 6, 8]

//=====> 超出10
 var ary2=[1,21,5,33,26]
 ary2.sort();
 [1, 21, 26, 33, 5];

 //---------------------------传参的时候
 var ary2=[1,21,5,33,26]
 ary2.sort(function(a,b){
    return a-b; // 升序
    return b-a; //降序
 })

7）splice（增删改一体化）

作用：删除/新增/修改
参数：splice（n,m,…x）不能传负数
返回值：删除的元素
是否改变原数组：是

@1、删除

删除需要给splice传递两个参数
第一个参数：要删除的第一个元素的位置
第二个参数：要删除的元素数量

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 2);
console.log(nums);// [3, 4, 5, 6]
console.log(res);// [1,2]

@2、新增

新增需要传递3个参数
第一个参数：开始的位置
第二个参数：0（要删除的元素数量）
第三个参数: 要插入的元素（任意个）

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(3, 0, 7, 8, 9);
console.log(nums);//[1, 2, 3, 7, 8, 9, 4, 5, 6] 
console.log(res);// []

@3、修改

修改也需要传递3个参数
第一个参数：开始的位置
第二个参数：要删除的元素数量
第三个参数: 要插入的元素（任意个）
注意：删除的个数和新增的个数可以不一致

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 3, 7, 8, 9);
console.log(nums);//[7, 8, 9, 4, 5, 6] 
console.log(res);// [1, 2, 3]

小节

思考一：删除数组最后一项，你有几种方法？

ary.pop()
ary.splice(ary.length-1,1);
ary.length—

思考二：在数组末尾追加新内容，你有几种方法？

ary.push(x);
ary.splice(ary.length，0，x)；
ary[ary.length]=x;
8）slice
- 作用：从原有的数组中选中特定的内容
- 参数：可以有一个或者两个
- 返回值：返回值是一个数组，返回的每一项是复制的项
- 是否改变原数组：不改变

@1、如果只有一个参数，slice()会返回该索引到数组末尾的所有元素

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5, 6]

@2、如果有两个参数，slice()返回从开始索引到结束索引对应的所有元素
但是不包含结束索引nums.slice(n,m),包含n，不包含m

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1, 5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]

@3、如果slice()的参数有负值，那么就以数组长度加上这个负数来确定位置，案例如下
长度为6，slice（-5，-1）就相当于slice(1，5)

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-5, -1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]

@4、如果结束位置小于开始位置，则返回空数组

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-1, -5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// []

9）concat

作用：实现多个数组或者值的拼接
参数：数组或者值
返回值：返回值是拼接后的新数组
是否改变原数组：不改变
```
var ary1 = [1, 2, 3];
var ary2 = [4, 5, 6];
var res = ary1.concat(ary2, "珠峰", "同学");
console.log(ary1);//[1, 2, 3]
console.log(res);//[1, 2, 3, 4, 5, 6, '珠峰', '同学']
```
10）toString
- 作用：可以把一个数组转换为字符串
- 参数：无
- 返回值：返回值是转换后的字符串
- 是否改变原数组：不改变
数组中每一个元素转为字符串，然后是使用逗号连接输出显示。
```
var ary1 = [1, { a: 1 }, null, undefined, 3];
var res = ary1.toString();
console.log(ary1);//[1, {a:1},null, undefined, 3]
console.log(res)//1,[object Object],,,3
```
alert方法最终体现的是字符串，会调用toString()，所以alert([1,2])结果是1，2

11）join
作用：把数组通过指定的连接符，转换为字符串
参数：连接符
返回值：返回值是转换后的字符串

是否改变原数组：不改变

var ary1 = [1, 2, undefined, 3, { a: 1 }];
var res = ary1.join("|");
console.log(ary1);//[1, 2, undefined, 3, { a: 1 }]
console.log(res)// 1|2||3|[object Object]  
eval(res) //==> eval  执行计算

12)indexOf/ lastIndexOf

不兼容ie6-ie8；

作用：获取某项在数组中(首次出现/最后出现的) 索引（也可以用来是否包含某项）
参数：（n,m）
参数：
- n:检测的项
- m:如果是indexOf 的话，就是从索引m开始检索。如果是lastIndexOf 的话，就是从索引m停止检索
返回值：-1或者具体的索引值
是否改变原数组：不改变 ```javascript

作用：检测数组中的某项在数组中（首次indexOf/最后lastIndexOf）出现的位置

var ary=[1,2,3,4,1,55,1]; //检测1这个项目在数组ary 中首次出现的位置 ary.indexOf(1); //0 //从索引2开始，检测1这个项目在数组中首次出现的位置 ary.indexOf(1,2); //4

// 检测1这个项目在数组中最后一次出现的索引 ary.lastIndexOf(1); // 检测1这个项目在数组中最后出现的索引，在索引5的位置停止检测 ary.lastIndexOf(1,5)

//如果此项在数组中没有出现，返回值就是-1 ary.indexOf(66)===>-1

<a name="lgUNa"></a>
#### 13）includes 

- 作用：检测数组中是否包含某一项
- 参数：具体项
- 返回值：布尔值
- 是否修改原数组：否

<a name="DN3Za"></a>
### 数组迭代方法
迭代、循环、遍历
<a name="vYam2"></a>
#### 14）forEach
> - 作用：遍历数组中的每一项
> - 参数：函数
> - 返回值：undefined
> - 是否修改原数组：否

- foreach方法 用来遍历数组的每一项 forEach方法没有返回值
```javascript
// 使用forEach迭代数组，计算数组元素的和

//一个家庭的年龄 过年了  每个人长1岁
//方法1 创建一个新数组
var userAages = [19,21,18,34,32,25,45];
var newUserAges = [];
userAages.forEach(function (item,index,array) {
    newUserAges[index] = item + 1;
})
console.log(newUserAges);
//方法2 直接改变原来数组
var re = userAages.forEach(function (item,index,array) {
    userAages[index] = item + 1;
})
console.log(userAages);
console.log(re);

15）map(结束)

作用：把一个数组可以映射成一个新的数组
参数：函数
返回值：映射后的新数组

是否修改原数组：否

// 有一个数组装着2021年所有人的年龄，2022年以后，每个人的年龄都增加1岁
var allAge = [19,15,,2,30,32,43,45];
var age2020 = allAge.map(function (item,index,arr) {
  return item+1;
})
console.log(age2020);

JAVASCRIPT前三周内容

JS-第二周day01

数组

1 什么是数组

2 创建数组

2.1 使用数组直接量

3 读写数组元素

4 遍历数组（迭代）

6 多维数组

7 字符串具有数组的特性

8 数组方法

1）push：

2）pop：

3）shift：

4）unshift：

5)reverse 倒序

7）splice（增删改一体化）

@1、删除

@2、新增

@3、修改

小节

8）slice

9）concat

10）toString

11）join

12)indexOf/ lastIndexOf

15）map(结束)