JavaScript Array对象使用方法解析
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>
2.数组的遍历
数组遍历可以使用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) }) </script>
3.ES6数组新增方法
<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) // 26
4.查找数组的子元素
查找数组元素的下标
indexOf():返回具体元素在数组中的下标
findIndex(cb):查找符合条件的第一个元素的下标
lastIndexOf()和indexOf()的功能一样,不同的是lastIndexOf()从后往前查找
<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 </script>
判断一个数组是否含有某个子元素 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),每轮循环结束都能保证前面的数据是升序排列的
<script> var arr = [6, 3, 4, 7, 5, 19, 2]; var length = arr.length; // 进行升序排列,大的元素往右边挤,小的元素往左边挤 for (var i = 1; i < length; i++) { // i为当前元素的下标 var temp = arr[i]; // p为比对元素的下标 p = i - 1; // 如果当前元素比目标元素小 while (p >= 0 && temp < arr[p]) { // 将比对元素往右挪一个位置 arr[p + 1] = arr[p]; // 往左一个位置找新的比对元素 p--; } // 将当前元素放到合适的位置 arr[p + 1] = temp; } console.log(arr) // [2, 3, 4, 5, 6, 7, 19] </script>
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排序
<script> var arr = [ {name:"张三",age:18}, {name:"李四",age:16}, {name:"王五",age:10}, {name:"赵六",age:22} ] arr.sort(function(p1,p2){ //p1.age-p2.age就是升序 //p2.age-p1.age就是降序 return p1.age-p2.age }) console.log(arr) // [{name: "王五", age: 10} // {name: "李四", age: 16} // {name: "张三", age: 18} // {name: "赵六", age: 22}] </script>
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:详解简单易懂的 ES6 Iterators 指南和示例