[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
生活随笔
收集整理的這篇文章主要介紹了
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
課程來源：后盾人
上一篇的內容：[JavaScript] JavaScript數組挖掘，不只是講數組喲
數組引用類型分析，多維數組，用Array.of為數組創建細節，類型檢測與轉換，在一個數組后面加一個新的數組，解構賦值，多種添加元素的方式，在數組中增刪改，小函數：移動數組里的一部分，清空數組的方式，split和join的使用，find和findIndex的使用，自定義find函數，神奇的排序。
數組的循環操作
- 首先我們定義一個數組，命名為lessons
let lessons = [{ name: 'js基礎', catagory: 'js' },{ name: 'flex彈性盒子模型', catagory: 'css' },{ name: 'html基礎', catagory: 'html' },{ name: '數據庫查詢', catagory: 'mysql' },{ name: 'C語言YYDS', catagory: 'c' },
]
- 普通的for循環
for (let i = 0; i < lessons.length; i++) {lessons[i].name = `Dust喜歡的${lessons[i].name}`
}
console.log(lessons)
運行結果：
2. for-in循環
for (let key in lessons) {lessons[key].name = `Dust喜歡的${lessons[key].name}`
}
3. for-of循環
- 注意這里傳值和傳址的區別，傳值的時候改變不了原數組的。
let arr = [1, 2, 3, 4, 5]
for (let value of arr) {//開辟一個新的內存空間賦值給它value += 10//此時arr表示：關我什么事？這種方法是改變不了原數組的。
}
console.log(arr) //[ 1, 2, 3, 4, 5 ]let a = [{ n: 1 }, { n: 2 }]
for (let value of a) {value.n += 10//這次是引用類型，所以可以改變到里面的內容。//這次在let的時候不是開辟一個新的空間，而是直接拿來它的地址用。
}
console.log(a) //[ { n: 11 }, { n: 12 } ]
運行結果：
- forEach循環
forEach還可以直接操作dom元素
lessons.forEach(function (item, index, lessons) {item.title = item.name.substr(0, 2)
})
console.log(lessons)
運行結果：
迭代器
- 首先來看看next里都有些啥？
let arr = ['dust1', 'dust2', 'hahaha']
let values = arr.values()
console.log(values.next())
-
運行結果：
-
看懂了嗎？明白了next()里都有些啥了不？
-
來看看迭代器是怎么寫的了把~
let arr = ['dust1', 'dust2', 'hahaha']
let values = arr.values()
while (({ value, done } = values.next()) && done === false) {console.log(value)
}
- 運行結果：
every和some的使用
- every：一旦有就不行
let user = [{ name: '李四', js: 89 },{ name: '張三', js: 99 },{ name: '馬六', js: 55 },
]
let res = user.every(function (item) {return item.js >= 60
})
console.log(res ? '全都及格' : '有人不及格') //有人不及格
- some：有一個就行
let arr = ['dust1', 'dust2', 'hahaha']
let res1 = arr.some(function (value, index, arr) {console.log(value)//有一個為真就行return true
})
console.log(res1) //dust1 true
- some配合DOM的實戰
- test.html
- 達到效果：如果不輸入指定的關鍵字就有提示消息
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="text" name="title" /><span></span><script defer>let keywords = ['js', 'php']let title = document.querySelector('[name="title"]')title.addEventListener('keyup', function () {const res = keywords.some((keyword) => {return this.value.indexOf(keyword) != -1})if (res == false) {document.querySelector('span').innerHTML = '必須包含' + keywords.join(',') + '關鍵詞'} else {document.querySelector('span').innerHTML = ''}})</script></body>
</html>
運行結果：
filter過濾器的使用
let lessons = [{ name: 'js基礎', catagory: 'js' },{ name: 'flex彈性盒子模型', catagory: 'css' },{ name: 'html基礎', catagory: 'html' },{ name: '數據庫查詢', catagory: 'mysql' },{ name: 'C語言YYDS', catagory: 'c' },{ name: '響應式媒體查詢', catagory: 'css' },
]
const cssLessons = lessons.filter(function (lesson) {return lesson['catagory'] == 'css'
})
console.log(cssLessons)
map的使用
- map是一個值類型，相當于一個復印機，不會改變原來的值。
let lessons = [{ name: 'js基礎', catagory: 'js' },{ name: 'flex彈性盒子模型', catagory: 'css' },{ name: 'html基礎', catagory: 'html' },{ name: '數據庫查詢', catagory: 'mysql' },{ name: 'C語言YYDS', catagory: 'c' },{ name: '響應式媒體查詢', catagory: 'css' },
]const myLessons = lessons.map((item) => {return (item.name = `Dust喜歡的${item.name}`)
})
console.log(myLessons)
運行結果：
神奇的reduce
- reduce是一個神奇的迭代方法，每次都會把上一次的返回值傳給下一次，理解一下什么叫遞歸很重要。
- 首先通過一個輸出來感受一下這個語法：
let arr = [1, 2, 3, 4, 5]
arr.reduce((pre, value, index, array) => {console.log(pre, value)return 99
})
接下來介紹兩個有點繞的reduce示例
統計一個數組中某個數出現的次數。
- 比如這里統計1在a數組中出現的次數。
- 老師的簡寫寫法簡直讓人嘆為觀止啊！
let arr = [1, 2, 3, 4, 5, 1, 2, 3, 1]
function arrayCount(array, item) {return array.reduce((total, cur) => {total += item == cur ? 1 : 0return total}, 0)
}
console.log(arrayCount(arr, 1))
輸出數組中的最大值
function arrayMax(array) {return array.reduce((pre, cur) => {return pre > cur ? pre : cur})
}
console.log(arrayMax(arr)) //5
總結
以上是生活随笔為你收集整理的[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 牛客网里刷题：JS获取输入的数组
- 下一篇： [JavaScript] 好用的 Jav