1
0
mirror of https://github.com/Daotin/Web.git synced 2024-10-30 04:24:45 +08:00
Web-main/03-JS基础/05-数组.md
2018-11-02 14:14:54 +08:00

395 lines
8.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

>大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
>
> - githubhttps://github.com/Daotin/Web
> - 微信公众号:[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
> - 博客园http://www.cnblogs.com/lvonve/
>
> 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
![](https://github.com/Daotin/pic/raw/master/fgx.png)
# 一、数组
## 1、数组定义
**通过字面量定义数组**
```js
var arr = [10,20,30];
```
**通过构造函数定义数组**
```js
var arr = new Array(参数);
// 参数位置为一个数值时为数组长度,多个数值时为数组中的元素。
// 如果没有参数的时候 Array后面的括号可以省略。
```
## 2、数组操作
1. 数组长度: `数组名.length; `
> **问:数组中存储的数据类型一定是一样的吗?**
>
> 类型可以不一样。
>
> **问:数组的长度是不是可以改变呢?**
>
> 可以改变。
>
## 3、数组高级API
### 3.1、判断数组和转换数组
```javascript
instanceof // 是一个关键字判断A是否是B类型A instanceof B。
isArray() //HTML5中新增 ,判断是不是数组
toString() //把数组转换成字符串,每一项用,分割
valueOf() //返回数组对象本身
join(变量) //根据每个字符把数组元素连起来变成字符串,变量可以有可以没有。不写变量默认用逗号分隔,无缝连接用空字符串。
```
#### instanceof
```javascript
var str1 = new String("abc");
var str2 = "abc";
console.log(str1 instanceof String); // true
console.log(str2 instanceof String); // false str2不是String对象
```
#### join
```javascript
//join是把数组元素用特殊方式链接成字符串(参数决定用什么链接,无参默认用逗号链接)
var arr = ["关羽","张飞","刘备"];
var str1 = arr.join();
var str2 = arr.join(" ");//如果用空格的话,那么元素之间会有一个空格
var str3 = arr.join("");//用空字符串,链接元素,无缝连接
var str4 = arr.join("&");
console.log(str1); // 关羽,张飞,刘备
console.log(str2); // 关羽 张飞 刘备
console.log(str3); // 关羽张飞刘备
console.log(str4); // 关羽 & 张飞 & 刘备
```
#### arguements
只在函数中使用,代表传入实参的数组。
**arguements 是伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)**
```javascript
fn(1,2);
fn(1,2,3);
fn(1,2,3,4,5);
function fn(a,b){
//只在函数中使用,实参的数组。
arguments[0] = 0; // 可以修改内容
console.log(arguments);
//伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)
arguments.push(1); // 报错arguments是伪数组没有push方法可以用来辨别真伪数组。
console.log(arguments instanceof Array); // false
//形参个数
console.log(fn.length);
//实参个数
console.log(arguments.length);
// 形参和实参个数可以不同,因为实参传入的时候可以形参的个数不一样。
// arguments.callee相当于函数名这里打印整个函数。
console.log(arguments.callee);
}
```
### 3.2、数组增删和换位置(原数组将被修改)
#### push
向数组的**末尾添加一个或更多**元素,并返回**数组的长度**。
**注意:** 新元素将添加在数组的末尾。
**注意:** 此方法改变数组的长度。
> 在数组起始位置添加元素请使用 [unshift()](http://www.runoob.com/jsref/jsref-unshift.html) 方法。
#### pop
删除数组的**最后一个元素**并返回**删除的元素**。
**注意:**此方法改变数组的长度!
> 移除数组第一个元素,请使用 [shift()](http://www.runoob.com/jsref/jsref-shift.html) 方法。
```javascript
push() //在数组最后面插入项,返回数组的长度
//数组1改后的长度 = 数组.push(元素1);
pop() //取出数组中的最后一项,返回最后一项
//被删除的元素 = 数组.pop();
unshift() //在数组最前面插入项,返回数组的长度
//数组1改后的长度 = 数组.unshift(元素1);
shift() //取出数组中的第一个元素,返回第一项
//被删除的元素 = 数组.shift();
```
#### reverse
翻转数组(原数组讲被反转,返回值也是被反转后的数组)
使用方法:反转后的数组 = 数组.reverse();
#### sort
给数组排序(只能通过第一位字母或数字的 unicode 编码进行排列),返回排序后的数组。
```javascript
var arr2 = [7,6,15,4,13,2,1];
console.log(arr2); // 7,6,15,4,13,2,1
console.log(arr2.sort()); // 1,13,15,2,4,6,7
```
**解决sort方法不稳定设计的时候就是这么设计的可以通过回调函数进行规则设置。**
```javascript
console.log(arr2);
console.log(arr2.sort(function (a,b) {
return a-b; //a-b从小到大排序如果是b-a则从大到小排序
}));
```
## 4、迭代方法
作用:代替 for 循环。
### forEach遍历用
特点:无返回值,纯遍历数组中的元素。
```javascript
var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var str = "";
// function (element,index,array)
// element数组元素的值
// index索引
// array调用这个方法的整个数组对象(一般不用)
arr.forEach(function (ele,index,array) {
str+=ele;
});
console.log(str); // 关长张飞赵子龙马超黄忠
```
> 注意:
>
> 只写一个参数就是 element
>
> 写两个参数就是 element 和 index
>
> 写三个参数就是: element 和 index 和 array本身。
### map遍历用
map有返回值返回什么都添加到新数组中。
特点:遍历数组使用。
```javascript
var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var arr2 = arr.map(function (ele,index,array) {
return ele+"你好";
})
console.log(arr2); // (5) ["关长你好", "张飞你好", "赵子龙你好", "马超你好", "黄忠你好"]
```
### every
返回值是一个 boolean 类型值。而参数是一个回调函数。
参数有三个。名字随便起,但是表示的意思还是这样顺序的。
特点只要有一个不满足条件就返回false。
```javascript
var arr = ["青花瓷", "一路向北", "轨迹"];
var flag = arr.every(function (ele, index) { // 只要有一个没满足条件就返回false
return ele.length > 2;
});
console.log(flag); // false
```
### some
特点如果函数结果有一个是true那么some方法结果也是true。
```javascript
var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var flag = arr.some(function (ele,index,array) {
if(ele.length>2){
return true;
}
return false;
})
console.log(flag); // true
```
### filter
filter 返回值是一个新数组。
特点:返回一个返回值为 true 的新数组。
```javascript
var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var arr1 = arr.filter(function (ele,index,array) {
return ele.length > 2;
});
console.log(arr1); // ["赵子龙"]
```
### reduce
reduce()方法对累计器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。
特点:按照某种规律遍历数组。
```js
var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(a,b){
return a-b; // 1-2-3-4-5 = -13
});
```
### reduceRight
特点:从右开始执行某种规律。
```js
var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(a,b){
return a-b; // 5-4-3-2-1 = -5
});
```
## 5、了解方法
### concat()
把参数数组拼接到当前数组。
举个🌰:`新数组 = 数组1.concat(数组2);`
### slice()
从当前数组中截取一个新的数组,**不影响原来的数组**参数start从0开始,end从1开始。
举个🌰:`新数组 = 数组1.slice(startIndexendIndex);`
### indexOf()、lastIndexOf()
查找数组中有没有某个元素,找到了返回这个元素在数组中的索引,如果没找到返回-1。
举个🌰:`索引值 = 数组.indexOf/lastIndexOf(数组中的元素);`
### delete
删除数组中的某个值。
特点:只删除值,不删除位置,删除后原位置的值为 undefined。
### splice() --- 增删改
增加,删除或替换当前数组的某些元素。**影响原来的元素**。
举个🌰:`新数组 = 数组1.splice(起始索引,删除个数 [,替换内容,替换内容,...]);`
```js
var arr = [1, 2, 3, 4, 5];
// 增
arr.splice(1, 0, 'a', 'b', 'c'); // 1,a,b,c,2,3,4,5
// 删
arr.splice(1, 2); // 1,4,5
//改
arr.splice(1, 3, 'a', 'b', 'c'); // 1,a,b,c,5
```
## 6、清空数组
```javascript
var array = [1,2,3,4,5,6];
// 方法一:删除数组中所有项目(替换的内容为空)
array.splice(0,array.length);
// 方法二length属性可以赋值其它语言中length是只读
array.length = 0;
// 方法三:
array = []; //推荐
```