持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
Array.from() 补充内容
即上文讲解 Array.from 的作用就是将伪数组 转为 真数组,补充一点:伪数组的本质是对象
<script>
let obj = {
0 : 20,
1 : 10,
2 : 30,
3 : 8,
length : 4
}
//let arr = Array.from(obj)
//console.log(arr);
console.log(obj);
</script>
<script>
let obj = {
0 : 20,
1 : 10,
2 : 30,
3 : 8,
length : 4
}
let arr = Array.from(obj)
console.log(arr);
//console.log(obj);
</script>
reverse()
翻转数组: 将数组元素方向反转
<script>
let arr = [1,2,3,4,5]
arr.reverse()
console.log(arr); // 5,4,3,2,1
</script>
substr(起始下标,长度)
从起始下标截取指定长度的字符
<script>
let str = '最帅的人非我莫属,嘿嘿'
console.log(str.length); // 11
console.log(str.substr(0,8)); //最帅的人非我莫属
</script>
toLocaleLowerCase()
转换为小写
console.log('npmNPMwzdWZD'.toLocaleLowerCase()); //npmnpmwzdwzd
//转换为小写
console.log('npmNPMwzdWZD'.toLocaleUpperCase()); // NPMNPMWZDWZD
// 转换为大写
toLocaleUpperCase
转换为大写
以下五种方法都常用来迭代数组的方法(都不改变原数组)
数组迭代就是对数组的每一项都进行相应的操作
五种数组迭代方法都有三个参数 item:当前元素(必填) index:当前元素的索引值 array:当前数组
渲染数据 map
遍历数组 forEach
筛选数组 filter
some()
判断数组中是否有满足条件的元素(逻辑或||,有任意一个满足即可)
常用非空判断,判断表单数组中,value值是否为空
<script>
// 判断数组中有没有奇数 some 返回值只有 true/false
**let arr = [2,4,8]**
// 标准写法
// let res = arr.some((item,index,array) => {
// if ( item % 2 == 1) {
// return true
// } else {
// return false
// }
// })
// 简写
//== 1 可以省略,默认为true 取反相当于 ==0
let res = arr.some(item => !(item % 2))
console.log(res); //true 偶数
let res1 = arr.some(item => item %2)
console.log(res1); //false 奇数
</script>
every()
判断数组中是否 所有元素 都满足条件(逻辑非&&,全部满足) 常用于开关思想:购物车是否全选
<script>
// 判断数组中有没有奇数 every 返回值只有 true/false
let arr = [2,3,8]
// 标准写法 item:当前元素 index:当前元素的索引值,数组本身
// let res = arr.every((item,index,array) => {
// if ( item % 2 == 1) {
// return true
// } else {
// return false
// }
// })
// 简写 == 1 可以省略,默认为true 取反相当于 ==0
let res = arr.every(item => !(item % 2)) //看偶数
console.log(res); //false
let res1 = arr.every(item => item %2) // 看奇数
console.log(res1); //false
</script>
forEach()
遍历数组 没有返回值
<script>
// 没有返回值
let arr = [2,3,8]
const str = []
arr.forEach((item,index) => {
if (item%2 === 0) {
str.push(item)
}
});
console.log(str); // [2,8]
filter()
根据条件,筛选数组
常用于商品价格筛选
<script>
// 筛选数组中的偶数 返回筛选后的新数组
let arr = [2,3,8]
// 基本写法
// let str = arr.filter((item,index) =>{
// if (item % 2 == 0) {
// return true
// } else {
// return false
// }
// })
//简写
const str = arr.filter(item => !(item %2) ); // [2,8]
console.log(str);
</script>
map()
按照某种规则,对数组每一个元素进行处理 返回值:映射后的新数组 (1)数组中所有的元素 *0.8
<script>
// 返回映射后的新数组
let arr = [2,5,8]
// 基本写法
// let str = arr.map((item,index) =>{
// console.log(item,index)
// return item * 0.8
// })
//简写
const str = arr.map(item => item *.8 ); // [2,8]
console.log(str); // [1.6, 4, 6.4]
</script>
这个是基本写法得到的结果
(2)将数组中的js对象 映射成html字符串
<script>
/*
const goodsList = [{}]
(1) 把对象数组 映射成 html字符串数组
let arr = goodsList.map(item=> {
console.log(item)
return `
<div class="item">
<img src=" ${item.picture}" alt="">
</div>
`
})
console.log(arr)
(2)使用arr.join('') 把数组每个元素拼接成一个html字符串
let htmlStr = arr.join('')
(3) 渲染html字符串
document.querySelector('.list').innerHTML = htmlStr
*/
//简写语法 常用简写
document.querySelector('.list').innerHTML = goodsList.map(item=>`
<div class="item">
<img src=" ${item.picture}" alt="">
</div>
`).join('')
</script>
findIndex
找元素下标 返回值:没有就返回 -1 有的话,返回下标 (1)如果数组中是值类型(数字类型,字符串类型,布尔类型,未定义类型,null),找元素下标就用 arr.indexOf() (2)如果数组中是引用类型(object,function,array),找元素下标就用: arr.findIndex()
let arr = [
{ name:'张三',age:20},
{ name:'李四',age:30},
{ name:'王五',age:40},
]
let index = arr.findIndex( item=>item.name == '李四' )
console.log( index )
reduce
为每一个元素执行一次回调,返回最后一次回调的结果 常应用于:求数组累加和
<script>
let arr = [10, 20, 30, 8];
let res = arr.reduce((sum, item, index) => {
console.log(sum, item, index);
return sum + item;
}, 0);
console.log(res); // 68
// sum : 0 10 30 60
// item : 10 20 30 8
// index : 0 1 2 3
/*
第一个参数:回调函数 (sum,item,index)=>{}
sum : 上一次回调return 返回值
item: 当前元素
index: 当前下标
第二个参数 : sum初始值。 一般给0, 如果不给,遇到空数组reduce就会报错
reduce自身返回值： 最后一次sum的结果
*/
</script>
