當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例
生活随笔
收集整理的這篇文章主要介紹了
JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 1. ES5新增方法概述
- 2. 數組方法
- 2.1 forEach方法
- 2.2 filter 篩選數組方法
- 2.3 some方法
- 3. 查詢商品案例
- 3.1 HTML結構和CSS樣式
- 3.2 準備數據
- 3.3 獲取元素并渲染數據
- 3.3.1 獲取tbody
- 3.3.2 利用forEach渲染數據
- 3.4 根據價格篩選商品
- 3.4.1 獲取按鈕和表單
- 3.4.2 查詢商品
- 3.5 根據名稱查詢商品
- 3.5.1 渲染查詢得到的數組
- 4. tab欄切換（課后練習）
- 4.1 tab欄切換案例效果圖
- 4.2 效果實現
- 4.2.1 HTML結構
- 4.2.2 CSS樣式
- 4.2.3 JavaScript 代碼
1. ES5新增方法概述
ES5中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括：
- 數組方法
- 字符串方法
- 對象方法
2. 數組方法
迭代（遍歷）方法：forEach()、map()、filter()、some()、every()；
2.1 forEach方法
語法規范：
array.forEach(function(currentValue,index,arr){})- currentValue：數組當前項的值；
- index：數組當前項的索引；
- arr：數組對象本身
示例：
// 將數組內的值相加var arr = [1, 2, 3];var sum = 0;arr.forEach(function(value, index, array) {// console.log('每個數組元素：' + value);// console.log('每個數組索引號：' + index);// console.log('每個數組本身：' + array);sum += value})console.log(sum); // 輸出 6相比for循環更簡單。相當于數組遍歷的 for循環，沒有返回值。
2.2 filter 篩選數組方法
filter() 也是會迭代（遍歷）目標數組，返回滿足條件的新數組
語法規范：
array.filter(function(currentValue,index,arr){})- filter()方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素，主要用于篩選滿足條件的數組；
- currentValue：數組當前項的值；
- index“數組當前項的索引；
- arr：數組對象本身。
注意它直接返回一個新數組；對它的操作不會影響原來的數組。
示例：
// filter 篩選數組var arr = [32, 12, 55, 3]// 把大于20的元素篩選出來var NewArr = arr.filter(function(value, index, array) {// 返回條件return value >= 20;});console.log(NewArr);返回值 32、55
2.3 some方法
some()方法：
用于檢測數組中的元素是否滿足指定條件。通俗的說，就是查找數組中是否有滿足條件的元素。
注：
1）some()的返回值是布爾值，如果找到返回true，反之，則返回false；
2）some()也同樣是執行的迭代（循環）；
語法規范：
array.some(function(currentValue,index,arr){})- 如果找到第一個滿足條件的元素，則終止循環，不再繼續查找；
- currentValue：數組當前項的值；
- index：數組當前項的索引；
- arr：數組對象本身。
示例：
// some 查找數組中是否存在大于等于10的元素var arr = [20, 12, 5];var flag = arr.some(function(value) {return value >= 10;});console.log(flag);此處return 僅需要返回value，因此回調函數中的 index，arr 可省略。
返回值：true (如下圖)
filter( ) 和 some( ) 的區別：
- filter：查找滿足條件的元素，返回的是一個數組，并且是返回所有滿足條件的元素
- some：也是查找滿足條件的元素是否存在。返回的是一個布爾值，如果找到第一個滿足條件的元素，就終止循環。
3. 查詢商品案例
本案例需要實現3個功能：
- 把數據渲染到頁面中；
- 根據價格顯示數據；
- 根據商品名稱顯示數據。
案例效果圖如下：
3.1 HTML結構和CSS樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 400px;border: 1px solid #000;border-collapse: collapse;margin: 0 auto;} td,th {border: 1px solid #000;text-align: center;} .search {width: 600px;margin: 200px auto 20px;} button {width: 60px;} input {width: 50px;}</style> </head> <body><div class="search">按照價格查詢：<input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名稱查詢：<input type="text" class="product"> <button class="search-pro">查詢</button></div><table><thead><tr><th>id</th><th>產品名稱</th><th>價格</th></tr></thead><tbody></tbody></table> </body> </html>3.2 準備數據
var data=[{id:1,pname:'小米',price:3888},{id:2,pname:'oppo',price:888},{id:3,pname:'榮耀',price:1288},{id:4,pname:'華為',price:1888}];3.3 獲取元素并渲染數據
3.3.1 獲取tbody
var tbody = document.querySelector('tbody');3.3.2 利用forEach渲染數據
// 遍歷數組data.forEach(function(value){})創建行，并放入3個單元格：
data.forEach(function(value) {// 創建行，并裝入3個單元格var tr = document.createElement('tr');tr.innerHTML = '<td>1</td><td>2</td><td>3</td>';// 將創建的行追加到tbodytbody.appendChild(tr); })運行后，效果如下：
再將 "< td> 1 < /td>"中的數字分別替換為數組中相應的屬性：value.id、value.pname、value.price，代碼如下：
這樣，就把 data 數據渲染到了頁面中。效果如圖：
3.4 根據價格篩選商品
當點擊 搜索 按鈕后，就可以根據我們的商品價格去篩選數組里面的對象。
3.4.1 獲取按鈕和表單
var search_price = document.querySelector('.search-price'); var start= document.querySelector('.start'); var end = document.querySelector('.end');3.4.2 查詢商品
// 3、根據價格查詢商品// 當點擊按鈕后，就根據指定商品的價格范圍去篩選數組里的對象search_price.addEventListener('click', function() { //給搜索按鈕綁定點擊事件var newData = data.filter(function(value){return value.price>=start.value && value.price<=end.value;})console.log(newData)；})用 console.log 輸出，效果如下：
正確的返回了兩個數組，接下來，就把篩選完的數組渲染到頁面中。
在這之前，為簡化代碼，需要將先前原來的渲染程序：
data.forEach(function(value) {// 2.1、創建行，并裝入3個單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';// 2.2、將創建的行追加到tbodytbody.appendChild(tr); });~ 封裝為函數（setData）：
function setData(myData){myData.forEach(function(value) {// 2.1、創建行，并裝入3個單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';// 2.2、將創建的行追加到tbodytbody.appendChild(tr);}); }注意，原程序封裝成函數后，第一次的渲染就失效，這時需要在最上面先調用
var search_price = document.querySelector('.search-price'); var start= document.querySelector('.start'); var end = document.querySelector('.end'); setData(data); // 先調用再在搜索按鈕的綁定的單擊事件里，調用渲染函數
// 3、根據價格查詢商品// 當點擊按鈕后，就可以根據商品的價格去篩選數組里的對象search_price.addEventListener('click', function() { //給搜索按鈕綁定點擊事件var newData = data.filter(function(value) {return value.price >= start.value && value.price <= end.value;});// 把篩選完的數組渲染到頁面中（此處直接調用自定義函數）setData(newData);})運行程序后，即可發現，篩選渲染得到的結果，包含了原來的所有數據。因此，需要在自定義函數內最上面添加清除：tbody.innerHTML="";因此，完整的自定義函數如下：
function setData(myData) {// 先清空原來的tbody里面的數據tbody.innerHTML = "";myData.forEach(function(value) {// 2.1、創建行，并裝入3個單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';// 2.2、將創建的行追加到tbodytbody.appendChild(tr);}); }至此，完成 搜索 按鈕的篩選功能
3.5 根據名稱查詢商品
根據商品名稱查找商品
如果查詢數組中唯一的元素，用some方法列合適，因為它找到這個元素，就不再進行循環，效率更高。
同樣的，第一步獲取元素：
var product = document.querySelector('.product'); var search_pro = document.querySelector('.search-pro');3.5.1 渲染查詢得到的數組
// 4、 通過商品名稱查找商品search_pro.addEventListener('click', function() {var arr = [];data.some(function(value) {if (value.pname === product.value) {arr.push(value);return true // 此處必須寫true;}})// 把拿到的數據渲染到頁面中setData(arr); })更多關于push的說明，請參閱 W3school 技術文檔：
JavaScript push() 方法
本節內容 要點提示：
- 如果查詢數組中唯一的元素，用some更合適，some遇到true就會終止循環，效率更高；
- 而forEach中return不會終止迭代
4. tab欄切換（課后練習）
4.1 tab欄切換案例效果圖
4.2 效果實現
4.2.1 HTML結構
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> </head> <body><div class="tab"><ul><li class="couser">前端<ul></ul></li><li class="couser">Python<ul></ul></li><li class="couser">JavaEE<ul></ul></li></ul></div> </body> </html>4.2.2 CSS樣式
<style>* {margin: 0;padding: 0;font-weight: 400;list-style: none;}.tab {width: 400px;height: 30px;line-height: 30px;text-align: center;margin: 100px auto;}.tab li {width: 120px;height: 30px;float: left;color: #fff;background: #139DFF;cursor: pointer;}.tab li:hover {background: #FF345F;font-weight: 700;color: #fff;}</style>4.2.3 JavaScript 代碼
<script>var data = ["就業班", "精品微課", "學員福利"];$('.couser').mouseenter(function() {var that = $(this).first();data.forEach(function(value, index) {var li = $("<li>" + value + "</li>");$(that).append(li).css("display", "block")})});$('.couser').mouseleave(function() {var $li = $(this).first().children();$li.remove().css("display", "block");}); </script>上一篇：JavaScript從入門到放棄 -（二）繼承
下一篇：JavaScript從入門到放棄 -（四）E5 新增方法
總結
以上是生活随笔為你收集整理的JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3-matplotlib绘制
- 下一篇： JavaScript-字符串