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()，除非先转换成数组