1.数组的常用方法
push(val)：数组的末尾添加新的元素,返回操作完成后数组的长度
pop()：删除数组最后一个元素，返回被删除的元素
shift()：删除数组的第一个元素，返回被删除的元素
unshift(val)：数组的开头添加新的元素,返回操作完成后数组的长度
<script>
var arr = [1,2,3,4]
// 在数组末尾添加元素
arr.push(5)
console.log(arr) // [1, 2, 3, 4, 5]
// 删除数组最后一个元素
arr.pop()
console.log(arr) // [1, 2, 3, 4]
// 在数组最前面添加元素
arr.unshift(0)
console.log(arr) // [0, 1, 2, 3, 4]
// 删除数组的第一个元素
arr.shift()
console.log(arr) // [1, 2, 3, 4]
</script>3.数组的遍历
数组遍历可以使用for循环和foreach
<script>
var arr = [1,2,3,4]
// for循环
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
// foreach
arr.forEach(function(val,index){
console.log(val,index)
})
</script3.ES6数组新增方法
- map(cb)：映射
<script>
var arr = [1,2,3,4]
var newArr = arr.map(function(val){
return val*2
})
console.log(newArr) // [2, 4, 6, 8]
</script>- filter(cb)：过滤
<script>
var arr = [1,2,3,4]
var newArr = arr.filter(function(val){
// 只保留 >2 的元素
return val>2
})
console.log(newArr) // [3, 4]
</script>- some(cb) ：检测数组中是否有元素满足条件，只有有一个满足就返回true，否则返回false
<script>
var arr = [1,2,3,4]
var flag = arr.some(function(val){
return val>2
})
console.log(flag) // true
var flag2 = arr.some(function(val){
return val>5
})
console.log(flag2) // false
</script>- every(cb)：所有元素都满足才会返回true，否则返回false
<script>
var arr = [1,2,3,4]
var flag = arr.every(function(val){
return val>2
})
console.log(flag) // false
var flag2 = arr.every(function(val){
return val>0
})
console.log(flag2) // true
</script>- reduce(cb)：累加器
reduce()对数组元素进行遍历，每次遍历就进行依次累加计算，遍历结束后返回累加的最终值
语法：arr.reduce((要累加并返回的数，数组元素) => {},初始值)
var list = [
{name:'西瓜',price:2,num:2},
{name:'香蕉',price:4,num:1},
{name:'玉米',price:2,num:5},
{name:'苹果',price:8,num:1}
]
var totalPrice = list.reduce((total,item) => {
return total + item.price * item.num
},0)
console.log(totalPrice) // 264.查找数组的子元素
- 查找数组元素的下标
indexOf()：返回具体元素在数组中的下标
findIndex(cb)：查找符合条件的第一个元素的下标
lastIndexOf() 和indexOf()的功能一样，不同的是从后往前查找
<script>
var arr = [1,2,3,4]
var index = arr.indexOf(1)
console.log(index) // 0
var index2 = arr.indexOf(5) // 没有这个元素
console.log(index2) // -1
var index3 = arr.findIndex(function(val){
return val>2
})
console.log(index3) // 2
var index4 = arr.findIndex(function(val){
// 没有一个元素符合条件
return val>5
})
console.log(index4) //-1
</script>- find(cb)：查找符合条件的第一个数组元素
这个方法跟filter()差不多，只是这个只查找一个。而filter()会查找所有符合条件的数组元素
<script>
var arr = [1,2,3,4]
var result = arr.find(function(val){
// 查找第一个大于3.5的子元素
return val>3.5
})
console.log(result) // 4
</scr- includes()：判断一个数组是否含有某个子元素
<script>
var arr = [1,2,3,4]
// 数组是否含有 1
var flag = arr.includes(2)
// 数组是否含有 5
var flag2 = arr.includes(5)
console.log(flag) // true
console.log(flag2) // false
</script>5.数组转换
- 数组与字符串间的转换 split()/join()
<script>
var str = "hello world"
// 根据标识将字符串分割成数组
var arr = str.split(" ")
console.log(arr) //["hello", "world"]
// 将数组的子元素拼接成字符串
var str2 = arr.join("-")
console.log(str2) // "hello-world"
</script>- 伪数组转化为数组(一个对象，如果可以通过下标的形式访问属性值，那么它就属于伪数组)
Array.from() 推荐
Array.prototype.slice()
通过某些方法获取到的Dom元素是一个伪数组，不能正常使用foreach()，除非先转换成数组
<script>
var lis = document.getElementsByTagName('li')
// 伪数组，不能使用foreach()
console.log(lis) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
// 已经转化为数组，但是是个空数组，依然无法遍历
console.log(Array.prototype.slice(lis)) // []
// 已经转化为数组，且可以遍历
console.log(Array.from(lis)) // [li.test, li.test, li.test, li.test]
Array.from(lis).forEach(function(item){
console.log(item.innerHTML)
})
</script>6.数组排序
- 1.插入排序
从第二个元素开始，拿他前面的元素与它比较，如果它前面的元素比它大，则这个元素往后挪一个位置（实际上是arr[p + 1] = arr[p]），直到找到最后一个或者比它小的元素位置，此时将这个元素放到这个相应的位置（arr[p + 1] = temp），每轮循环结束都能保证前面的数据是升序排列的
//升序
var arr = [4, 3, 6, 7, 5, 19, 2];
var length = arr.length;
for (var i = 1; i < length; i++) {
var temp = arr[i];
p = i - 1;
while (p >= 0 && arr[p] > temp) {
arr[p + 1] = arr[p];
p--;
}
arr[p + 1] = temp;
}
console.log(arr);- 2.快速排序
将一个数组的中间元素取出（splice，这个方法会改变原数组，同时将将截取的元素以数字的形式返回），然后定义两个左右空数据，遍历这个原数组，将小于被取出元素值的元素放入左边的数组，反之放入右边的数组，一轮循环之后将这左右两个数组和中间元素拼接起来，同时对左右数组进行递归调用
var arr = [4, 3, 6, 7, 5, 19, 2];
var newArr = quickSort(arr);
console.log(newArr);
function quickSort(arr) {
if (arr.length <= 1) return arr;
else {
var center = parseInt((arr.length - 1) / 2);
var centerValue = arr.splice(center, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] <= centerValue) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat(centerValue, quickSort(right));
}
}- 3.sort排序
//以数组元素中的age属性为基准进行排序
list.sort(function(p1,p2){
//p1.age-p2.age就是升序
//p2.age-p1.age就是降序
return p1.age-p2.age;
})7.其他方法
- 数组反转 reverse() 将当前数组反转，会改变当前数组
<script>
var arr = [1,2,3,4]
arr.reverse()
console.log(arr) // [4, 3, 2, 1]
</script>- 剪接数组 splice() 会改变当前数组
可以删除任意数组元素，还可以向数组添加元素
语法：arr.splice(index,num,item1,item2...)
index：规定从何处添加/删除元素
num：删除多少元素
后面的参数可以是0个也可以是多个，表示要添加的数组元素
<script>
var arr = [1,2,3,4]
// 在下标3的位置添加数组元素
arr.splice(3,0,5)
console.log(arr) // [1, 2, 3, 5, 4]
// 删除下标为1的数组元素
arr.splice(1,1)
console.log(arr) // [1, 3, 5, 4]
// 从下标1的位置开始删除3个元素，并添加2个元素
arr.splice(1,3,"life","good")
console.log(arr) // [1, "life", "good"]
</script>- 数组剪切 slice() 根据给定的下标，将两个下标之间的元素以数组形式返回，不会改变原数组
语法：arr.slice(n,m) 将arr[n]到arr[m-1]之间的元素以数组形式返回
<script>
var arr = [1,2,3,4]
// 不包含参数二对象的下标元素
var newArr = arr.slice(1,3)
console.log(newArr) // [2, 3]
// 默认剪切到最后一个元素
var newArr2 = arr.slice(1)
console.log(newArr2) //[2, 3, 4]
// 可接受负数
var newArr3 = arr.slice(0,-1)
console.log(newArr3) //[1, 2, 3]
</script>- 拼接2个数组 concat()
不会改变原数组，而是将拼接后的新数组返回
<script>
var arr = [1,2,3,4]
var arr2 = [5,6,7,8]
var newArr = arr.concat(arr2)
console.log(arr) // [1,2,3,4]
console.log(arr2) // [5,6,7,8]
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8]
</script>