<script>
var arr = [1, 2, 3, 4]
// 假如或往数组里再添加一项
arr.push(5)
console.log(arr)
// Array.prototype arr.__proto__ 存储着很多我们操作数组的方法
// 它俩 指向的是同一块内存 存储着很多操作数组的方法
console.log(Array.prototype === arr.__proto__)
</script>
复制代码
1.添加删除
<script>
// 从以下几个方面研究数组方法
// 1.作用
// 2.数组返回值
// 3.原数组是否改变
// 数组的添加 push unshift
// push
// 作用 向数组末尾添加一项或者多项
// 返回值 添加后的数组长度
// 原数组发生了改变
// var arr = [10, 20, 30]
// var result = arr.push('hello')
// console.log(arr) // [10, 20, 30, "hello"]
// console.log(result) // 4
// unshift
// 作用 向数组开头添加一项或者多项
// 返回值 添加后的数组长度
// 原数组发生了改变
// var arr = [10, 20, 30]
// var result = arr.unshift(100, 200)
// console.log(arr) // [100, 200, 10, 20, 30]
// console.log(result) // 5
// 数组的删除 pop shift
// pop
// 作用 删除数组中的最后一项
// 返回值 删除的那一项(最后一项)
// 原数组发生了改变
// var arr = [10, 20, 30, 100]
// var result = arr.pop()
// console.log(arr) // [10, 20, 30]
// console.log(result) // 100
// shift
// 作用 删除数组中的开头第一项
// 返回值 删除的那一项(第一项)
// 原数组发生了改变
var arr = [10, 20, 30]
var result = arr.shift()
console.log(arr) // [20, 30]
console.log(result) // 10
</script>
复制代码
2.splice添加删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// splice
// 向数组中删除 插入
// 返回值 新数组(删除内容组成的新数组) 如果没删除 就返回一个新的空数组[]
// 情况一 无参数
// 一项都不删除
// 原数组没有变化
// 返回值 一个新的空数组
// var arr = [10, 20, 30]
// var result = arr.splice()
// console.log(arr) // [10, 20, 30]
// console.log(result) // []
// 情况二 一个参数
// splice(x) 从索引x处开始 一直删除到数组末尾
// 返回值 删除后的内容 组成的新数组
// x删除的起始索引
// var arr = [10, 20, 30, 40, 50]
// var result = arr.splice(1)
// console.log(arr) // [10]
// console.log(result) // [20, 30, 40, 50]
// 支持负数作为索引
// splice(-x) => splice(arr.length + (-x)) => splice(arr.length - x)
// 倒着删除x项
// var arr = [10, 20, 30, 40, 50]
// // arr.splice(-1)
// var result = arr.splice(-2) // splice(3)
// console.log(arr) // [10, 20, 30]
// console.log(result) // [40, 50]
// 情况三 两个参数
// splice(x, y) 从索引x处开始 删除y个
// 返回值 删除的内容 组成的新数组
var arr = [10, 20, 30, 40, 50]
// var result = arr.splice(2, 2)
// console.log(arr) // [10, 20, 50]
// console.log(result) // [30, 40]
// 第二项为0 一个都不删除 (删除0个)
// var result = arr.splice(2, 0)
// console.log(arr) // [10, 20, 30, 40, 50]
// console.log(result) // []
// 情况三 两个以上参数
// splice(x, y, ...z)
// 从索引x处开始 删除y个 将第三个实参以及后面的内容插入到索引x处
// 删除再插入 (从哪儿开始删除 就从哪开始插入)
// 返回值 删除后的内容组成新数组
// var arr = [10, 20, 30, 40, 50]
// var result = arr.splice(2, 2, 100, 200)
// console.log(arr) // [10, 20, 100, 200, 50]
// console.log(result) // [30, 40]
// 两个以上参数 第二项为0
// 只插入不删除(添加)
// splice(x, 0, ...z) 将第三个实参以及后面的内容插入到索引x处
var arr = [10, 20, 30, 40, 50]
// arr.splice(1, 0, 'hello', 'world')
// console.log(arr) // [10, "hello", "world", 20, 30, 40, 50]
// 相当于unshift 向开头添加一项或多项
// arr.splice(0, 0, 1000, 2000)
// console.log(arr) // [1000, 2000, 10, 20, 30, 40, 50]
// 相当于push 向末尾添加一项或多项
arr.splice(arr.length, 0, 2018) // splice(5, 0, 2018)
console.log(arr) // [10, 20, 30, 40, 50, 2018]
</script>
</body>
</html>
复制代码
3.indexOf lastIndexOf查询
<script>
// indexOf lastIndexOf
// indexOf
// 查找某一项 在数组中的索引位置
// 从前向后查找
// 原数组 不会发生改变
// var arr = [10, 20, 30, 40]
// var result = arr.indexOf(20) // 1
// console.log(result)
// console.log(arr) // [10, 20, 30, 40]
// 如果查找不到 返回 -1
// console.log(arr.indexOf(200)); // -1
// lastIndexOf
// 从后向前查找
// 查找某一项 在数组中的索引位置
// var arr = [20, 10, 30, 10, 40]
// console.log(arr.indexOf(10)) // 1 前面的10 索引位置
// console.log(arr.lastIndexOf(10)) // 3 后面的10 索引位置
var arr = [20, 10, 30, 10, 40]
// 说明我们这个数组里 只有一个30 没有重复项
// console.log(arr.indexOf(30)) // 2
// console.log(arr.lastIndexOf(30)) // 2
var arr = [NaN, '2', 1 , 3]//绝对比较,数据类型不相等,就返回-1
// console.log(arr.indexOf(NaN))
// console.log(arr.indexOf(2))
// 扩展 indexOf实现原理
// function myIndexOf(arr, val) {
// for (var i = 0; i < arr.length; i++) {
// if (val === arr[i]) {
// console.log('return', i)
// return i // 将找到索引返回
// }
// }
// return -1
// }
// // [NaN, '2', 1 , 3]
// console.log(myIndexOf(arr, 1))
// ary 查找的数组 val要查找的值
// function hasVal(ary, val) {
//
// if (ary.indexOf(val) > -1) {
// return true
// } else {
// return false
// }
// }
// console.log(hasVal(arr, 200)) // false
// var a = [1, 2, 3]
// console.log(hasVal(a, 3)) // true
// console.log(hasVal(a, 10)) // false
</script>
复制代码
4.slice截取
<script>
// slice 截取 复制
// 不会改变原数组
// slice()/slice(0) 克隆
// 将原数组内容 完全克隆一份 作为一个新数组返回
// var arr = [10, 20, 30, 40]
// var result = arr.slice(0)
// console.log(arr)
// console.log(result) // 返回的新数组里面内容 跟原数组一模一样
// console.log(result == arr) // false
// console.log(result === arr) // false
// 一个参数
// slice(x) 从索引x处开始 一直截取到末尾
// 原数组不会改变
// 将截取到的内容 组成新数组 返回
var arr = [10, 20, 30, 40, 50]
var result = arr.slice(2)
// console.log(result) // [30, 40, 50]
// 支持负数 相当于倒着截取x个
// slice(-x) => slice(arr.length + (-x)) => slice(arr.length - x)
// console.log(arr.slice(-3)) // [30, 40, 50]
// 两个参数
// x 起始索引 y结束索引
// slice(x, y) 从索引x处开始截取 截取到索引y处(不包含索引y这项)
var arr = [10, 20, 30, 40, 50]
var result = arr.slice(1, 3)
console.log(result) // [20, 30]
// slice(-x, -y)
console.log(arr.slice(-3, -1)) // slice(2, 4) [30, 40]
// 参数不合理 返回一个新的空数组
console.log(arr.slice(3, 1)) // []
</script>
复制代码
5.排序和排列
<script>
// 排序
// 原数组改变
// 返回值 就是排好序的原始数组
// 如果有字母就按字母顺序排列
// sort() 默认从小到大排序
// var arr = [4, 'c', 2, 'a', 'b', 1, 6]
// var result = arr.sort()
// console.log(arr) // [1, 2, 4, 6, "a", "b", "c"]
// console.log(result === arr)
// sort() 只能排序10以内 (ascii)
var arr = [4, 2, 30, 7, 10, 20]
// console.log(arr.sort()) // [10, 2, 20, 30, 4, 7]
// 从小到大
arr.sort(function(a, b) {
return a - b // 从小到大
})
console.log(arr) // [2, 4, 7, 10, 20, 30]
// 从大到小
arr.sort(function(a, b) {
return b - a
})
console.log(arr) // [30, 20, 10, 7, 4, 2]
// reverse 倒着排列
var arr = [1, 2, 3, 4]
console.log(arr.reverse()) // [4, 3, 2, 1]
</script>
复制代码
6.数组转成字符串
<script>
// 将数组转换成字符串 原数组不改变
// toString()
// var arr = [1, 2, 3, 4]
// var result = arr.toString()
// console.log(result) // "1,2,3,4"
// console.log(arr) // [1, 2, 3, 4]
// join()
// 根据指定连接符(分隔符) 将数组转换成字符串
var arr = [1, 2, 3, 4]
console.log(arr.join()) // "1,2,3,4"
arr.join('+') // "1+2+3+4"
arr.join('*') // "1*2*3*4"
// 将字符串当做js代码来执行
eval("1+2+3+4")
// 纯数字数组 求和
var ary = [11, 20, 12, 9]
var str = ary.join('+')
eval(str) // 52
console.log(eval(ary.join('+'))) // 52
</script>
复制代码
7.数组拼接
<script>
// concat 合并
// 不会影响原数组
var arr1 = [100, 200]
var arr2 = [300]
var result = arr1.concat(arr2)
console.log(result) // [100, 200, 300]
console.log(arr2.concat(arr1)) // [300, 100, 200]
var ary1 = [1]
console.log(ary1.concat(100, ['hello'], 'nihao'))
// [1, 100, "hello", "nihao"]
console.log([1].concat([2, 3, 4])) // [1, 2, 3, 4]
// concat 拼接时 只能展开一层数组
var n = [[2, 1]]
// console.log([1].concat(n)) // [1, [2, 1]]
// 原数组
var arr = [3, 1, 2]
arr.sort()
console.log(arr) // [1, 2, 3]
var a1 = [100]
var a2 = [200]
var result = a1.concat(a2)
console.log(result) // [100, 200]
</script>
复制代码