mirror of
https://github.com/Daotin/Web.git
synced 2024-10-30 04:24:45 +08:00
395 lines
8.9 KiB
Markdown
395 lines
8.9 KiB
Markdown
>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
|
||
>
|
||
> - github：https://github.com/Daotin/Web
|
||
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
|
||
> - 博客园：http://www.cnblogs.com/lvonve/
|
||
>
|
||
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
|
||
|
||
|
||
|
||
|
||
|
||
# 一、数组
|
||
|
||
## 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(startIndex，endIndex);`
|
||
|
||
|
||
|
||
### 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 = []; //推荐
|
||
```
|
||
|
||
|