数组的常用方法
-
数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了
-
比如我们想改变一个数组
// 创建一个数组 var arr = [1, 2, 3] // 我们想把数组变成只有 1 和 2 arr = [1, 2]- 这样肯定是不合理，因为这样不是在改变之前的数组
- 相当于心弄了一个数组给到
arr这个变量了 - 相当于把
arr里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改 - 所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了
push() 后面添加
-
push是用来在数组的末尾追加一个元素,返回添加以后的长度var arr = [1, 2, 3] // 使用 push 方法追加一个元素在末尾 arr.push(4) console.log(arr) // [1, 2, 3, 4] var res = arr.push(1,2,3,34); res//8
pop() 后面删除
-
pop是用来删除数组末尾的一个元素,返回删除的元素var arr = [1, 2, 3] // 使用 pop 方法删除末尾的一个元素 var res = arr.pop() console.log(arr) // [1, 2]
unshift() 前面添加
-
unshift是在数组的最前面添加一个元素var arr = [1, 2, 3] // 使用 unshift 方法想数组的最前面添加一个元素 arr.unshift(4) console.log(arr) // [4, 1, 2, 3]
shift() 前面删除
-
shift是删除数组最前面的一个元素var arr = [1, 2, 3] // 使用 shift 方法删除数组最前面的一个元素 arr.shift() console.log(arr) // [2, 3]
splice() 截取并添加
-
splice是截取数组中的某些内容，按照数组的索引来截取 -
语法：
splice(从哪一个索引位置开始，截取多少个，替换的新元素)（第三个参数可以不写）
var arr = [1, 2, 3, 4, 5]
// 使用 splice 方法截取数组
var res = arr.splice(1, 2)
console.log(arr) // [1, 4, 5]
console.log(res)//[2,3] 返回被删除的元素
- `arr.splice(1, 2)` 表示从索引 1 开始截取 2 个内容
- 第三个参数没有写，就是没有新内容替换掉截取位置
```javascript
var arr = [1, 2, 3, 4, 5]
// 使用 splice 方法截取数组
arr.splice(1, 2, '我是新内容')
console.log(arr) // [1, '我是新内容', 4, 5]
arr.splice(1, 2, '我是新内容')表示从索引 1 开始截取 2 个内容- 然后用第三个参数把截取完空出来的位置填充
reverse() 反转
-
reverse是用来反转数组使用的var arr = [1, 2, 3] // 使用 reverse 方法来反转数组 arr.reverse() console.log(arr) // [3, 2, 1]
sort() 排序
-
sort是用来给数组排序的（默认按照字典排序 先按照第一位排序-如果第一位相等就按照第二位）var arr = [2, 3, 1] // 使用 sort 方法给数组排序 arr.sort() console.log(arr) // [1, 2, 3]- 这个只是一个基本的简单用法
// 升序 arr4.sort(function (a, b) { return a - b }) // 降序 arr4.sort(function (a, b) { return b - a })let arr5 = [{ username: 'zhangsan', age: 19 }, { username: 'lisi', age: 10 }, ] // 按照对象的年龄 降序 // a ，b 数组的元素 arr5.sort(function (a, b) { return b.age - a.age })
以上7个都会改变原始数组
join() 数组连接为字符串
语法：.join(连接符)
作用：将数组用连接符连接成为一个字符串
返回值：连接好的字符串
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.join('~') //用'~'连接
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
1~2~3~4~5
concat() 拼接数组
语法：数组.concat(其他数组)
作用：将两个数组拼接为一个数组
返回值：拼接好的新数组
<script>
let arr = [1,2,3,4,5];
console.log(arr); //第一次打印
let res = arr.concat([6,7,8]) //拼接新的数组
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
(8) [1, 2, 3, 4, 5，6，7，8]
slice() 截取数组
语法：.slice(开始索引，结束索引)
开始索引：默认是0
结束索引：默认是数组长度
作用：截取数组中的某些数据
返回值：以新数组的形式返回截取出来的数据内容
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.slice() //不写参数，代表从头截取至末尾
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
- 括号内填写一个参数
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.slice(2) //一个参数，代表从索引2的位置截取至末尾
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
(5) [3, 4, 5]
- 括号内填写两个参数 特点：包前不包后（包含开始索引，不包括结束索引）
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.slice(2,4) //两个参数，代表从索引2的位置截取至结束索引的前一个
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
(5) [3, 4]
indexOf() 查找数据在数组中的索引位置
语法：数组.indexOf(数据)
作用：查找数据在数组中的索引位置（第一次出现时的索引位置）
返回值：有该数据，返回第一次出现的索引位置
没有该数据，返回-1（用来去重）
- 输入存在的数据时
<script>
let arr = [1,2,3,4,3]
console.log(arr); //第一次打印
let res = arr.indexOf(3) //查找数组中3第一次出现时的索引位置
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 3]
(5) [1, 2, 3, 4, 3]
2
- 输入不存在的数据时
<script>
let arr = [1,2,3,4,3]
console.log(arr); //第一次打印
let res = arr.indexOf(5) //查找数组中5第一次出现时的索引位置
console.log(arr); //第二次打印
console.log(res); //结果打印
</script>
运行结果：
(5) [1, 2, 3, 4, 3]
(5) [1, 2, 3, 4, 3]
-1
forEach() 遍历数组
语法：数组.forEach ( function ( item , index , arr ) { } )
传递一个函数作为参数，函数会根据数组的长度来执行，数组有多长，函数执行多少次
接受三个形参：item：每一项；index：数组的索引；arr：原始数组
作用：遍历数组
返回值：无
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
arr.forEach(function ( item , index , arr ) { } )
console.log(item); //形参item：数组中那一项
console.log(index); //形参index：数组那一项的索引
console.log(arr); //形参arr：原始数组
consloe.log('----------') //分割线，方便查看，无实际意义
</script>
运行结果：
(5) [1, 2, 3, 4, 5] //第一次打印
1 //形参item：数组中那一项
0 //形参index：数组那一项的索引
(5) [1, 2, 3, 4, 5] //形参arr：原始数组
---------- //分割线
2
1
(5) [1, 2, 3, 4, 5]
----------
3
2
(5) [1, 2, 3, 4, 5]
----------
4
3
(5) [1, 2, 3, 4, 5]
----------
5
4
(5) [1, 2, 3, 4, 5]
----------
//共输出5次。
map() 映射数组
语法：数组.map ( function ( item , index , arr ) { } )
传递一个函数作为参数，函数会根据数组的长度来执行，数组有多长，函数执行多少次
接受三个形参：item：每一项；index：数组的索引；arr：原始数组
作用：映射数组
返回值：映射后的新数组
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.map(function ( item , index , arr ) {
return item * 10 //每一项*10
} )
console.log(res);
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [10, 20, 30, 40, 50]
filter() 过滤数组
语法：数组.filter ( function ( item , index , arr ) { } )
作用：过滤数组
返回值：过滤后的新数组
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.filter(function ( item , index , arr ) {
return item > 3 //输出大于3的元素
} )
console.log(res);
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
(5) [4，5]
every() 判断是否全满足条件
语法：数组.every ( function ( item , index , arr ) { } )
作用：判断数组是不是每一项都满足条件
返回值：一个布尔值
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.every(function ( item , index , arr ) {
return item > 3 //判断所有元素是否都大于3
} )
console.log(res);
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
false
some() 判断是否有满足条件的项
语法：数组.some ( function ( item , index , arr ) { } )
作用：判断数组是不是有某一项满足条件
返回值：一个布尔值
<script>
let arr = [1,2,3,4,5]
console.log(arr); //第一次打印
let res = arr.every(function ( item , index , arr ) {
return item > 3 //判断是否有元素大于3
} )
console.log(res);
</script>
运行结果：
(5) [1, 2, 3, 4, 5]
true