當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例

發(fā)布時(shí)間：2024/9/27 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. ES5新增方法概述
2. 數(shù)組方法
- 2.1 forEach方法
- 2.2 filter 篩選數(shù)組方法
- 2.3 some方法
3. 查詢商品案例
- 3.1 HTML結(jié)構(gòu)和CSS樣式
- 3.2 準(zhǔn)備數(shù)據(jù)
- 3.3 獲取元素并渲染數(shù)據(jù)
- - 3.3.1 獲取tbody
  - 3.3.2 利用forEach渲染數(shù)據(jù)
- 3.4 根據(jù)價(jià)格篩選商品
- - 3.4.1 獲取按鈕和表單
  - 3.4.2 查詢商品
- 3.5 根據(jù)名稱查詢商品
- - 3.5.1 渲染查詢得到的數(shù)組
4. tab欄切換（課后練習(xí)）
- 4.1 tab欄切換案例效果圖
- 4.2 效果實(shí)現(xiàn)
- - 4.2.1 HTML結(jié)構(gòu)
  - 4.2.2 CSS樣式
  - 4.2.3 JavaScript 代碼

1. ES5新增方法概述

ES5中給我們新增了一些方法，可以很方便的操作數(shù)組或者字符串，這些方法主要包括：

數(shù)組方法
字符串方法
對(duì)象方法

2. 數(shù)組方法

迭代（遍歷）方法：forEach()、map()、filter()、some()、every()；

2.1 forEach方法

語法規(guī)范：

array.forEach(function(currentValue,index,arr){})

currentValue：數(shù)組當(dāng)前項(xiàng)的值；
index：數(shù)組當(dāng)前項(xiàng)的索引；
arr：數(shù)組對(duì)象本身

示例：

// 將數(shù)組內(nèi)的值相加var arr = [1, 2, 3];var sum = 0;arr.forEach(function(value, index, array) {// console.log('每個(gè)數(shù)組元素：' + value);// console.log('每個(gè)數(shù)組索引號(hào)：' + index);// console.log('每個(gè)數(shù)組本身：' + array);sum += value})console.log(sum); // 輸出 6

相比for循環(huán)更簡單。相當(dāng)于數(shù)組遍歷的 for循環(huán)，沒有返回值。

2.2 filter 篩選數(shù)組方法

filter() 也是會(huì)迭代（遍歷）目標(biāo)數(shù)組，返回滿足條件的新數(shù)組

語法規(guī)范：

array.filter(function(currentValue,index,arr){})

filter()方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素，主要用于篩選滿足條件的數(shù)組；
currentValue：數(shù)組當(dāng)前項(xiàng)的值；
index“數(shù)組當(dāng)前項(xiàng)的索引；
arr：數(shù)組對(duì)象本身。

注意它直接返回一個(gè)新數(shù)組；對(duì)它的操作不會(huì)影響原來的數(shù)組。

示例：

// filter 篩選數(shù)組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()方法：
用于檢測(cè)數(shù)組中的元素是否滿足指定條件。通俗的說，就是查找數(shù)組中是否有滿足條件的元素。

注：
1）some()的返回值是布爾值，如果找到返回true，反之，則返回false；
2）some()也同樣是執(zhí)行的迭代（循環(huán)）；

語法規(guī)范：

array.some(function(currentValue,index,arr){})

如果找到第一個(gè)滿足條件的元素，則終止循環(huán)，不再繼續(xù)查找；
currentValue：數(shù)組當(dāng)前項(xiàng)的值；
index：數(shù)組當(dāng)前項(xiàng)的索引；
arr：數(shù)組對(duì)象本身。

示例：

// some 查找數(shù)組中是否存在大于等于10的元素var arr = [20, 12, 5];var flag = arr.some(function(value) {return value >= 10;});console.log(flag);

此處return 僅需要返回value，因此回調(diào)函數(shù)中的 index，arr 可省略。

返回值：true (如下圖)

filter( ) 和 some( ) 的區(qū)別：

filter：查找滿足條件的元素，返回的是一個(gè)數(shù)組，并且是返回所有滿足條件的元素
some：也是查找滿足條件的元素是否存在。返回的是一個(gè)布爾值，如果找到第一個(gè)滿足條件的元素，就終止循環(huán)。

3. 查詢商品案例

本案例需要實(shí)現(xiàn)3個(gè)功能：

把數(shù)據(jù)渲染到頁面中；
根據(jù)價(jià)格顯示數(shù)據(jù)；
根據(jù)商品名稱顯示數(shù)據(jù)。

案例效果圖如下：

3.1 HTML結(jié)構(gòu)和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">按照價(jià)格查詢：<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>產(chǎn)品名稱</th><th>價(jià)格</th></tr></thead><tbody></tbody></table> </body> </html>

3.2 準(zhǔn)備數(shù)據(jù)

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 獲取元素并渲染數(shù)據(jù)

3.3.1 獲取tbody

var tbody = document.querySelector('tbody');

3.3.2 利用forEach渲染數(shù)據(jù)

// 遍歷數(shù)組data.forEach(function(value){})

創(chuàng)建行，并放入3個(gè)單元格：

data.forEach(function(value) {// 創(chuàng)建行，并裝入3個(gè)單元格var tr = document.createElement('tr');tr.innerHTML = '<td>1</td><td>2</td><td>3</td>';// 將創(chuàng)建的行追加到tbodytbody.appendChild(tr); })

運(yùn)行后，效果如下：

再將 "< td> 1 < /td>"中的數(shù)字分別替換為數(shù)組中相應(yīng)的屬性：value.id、value.pname、value.price，代碼如下：

// 1、獲取相應(yīng)元素 var tbody = document.querySelector('tbody');// 2、把數(shù)據(jù)渲染到頁面中 data.forEach(function(value) {// 2.1、創(chuàng)建行，并裝入3個(gè)單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';//2.2、將創(chuàng)建的行追加到tbodytbody.appendChild(tr); })

這樣，就把 data 數(shù)據(jù)渲染到了頁面中。效果如圖：

3.4 根據(jù)價(jià)格篩選商品

當(dāng)點(diǎn)擊搜索按鈕后，就可以根據(jù)我們的商品價(jià)格去篩選數(shù)組里面的對(duì)象。

3.4.1 獲取按鈕和表單

var search_price = document.querySelector('.search-price'); var start= document.querySelector('.start'); var end = document.querySelector('.end');

3.4.2 查詢商品

// 3、根據(jù)價(jià)格查詢商品// 當(dāng)點(diǎn)擊按鈕后，就根據(jù)指定商品的價(jià)格范圍去篩選數(shù)組里的對(duì)象search_price.addEventListener('click', function() { //給搜索按鈕綁定點(diǎn)擊事件var newData = data.filter(function(value){return value.price>=start.value && value.price<=end.value;})console.log(newData)；})

用 console.log 輸出，效果如下：

正確的返回了兩個(gè)數(shù)組，接下來，就把篩選完的數(shù)組渲染到頁面中。

在這之前，為簡化代碼，需要將先前原來的渲染程序：

data.forEach(function(value) {// 2.1、創(chuàng)建行，并裝入3個(gè)單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';// 2.2、將創(chuàng)建的行追加到tbodytbody.appendChild(tr); });

~ 封裝為函數(shù)（setData）：

function setData(myData){myData.forEach(function(value) {// 2.1、創(chuàng)建行，并裝入3個(gè)單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';// 2.2、將創(chuàng)建的行追加到tbodytbody.appendChild(tr);}); }

注意，原程序封裝成函數(shù)后，第一次的渲染就失效，這時(shí)需要在最上面先調(diào)用

var search_price = document.querySelector('.search-price'); var start= document.querySelector('.start'); var end = document.querySelector('.end'); setData(data); // 先調(diào)用

再在搜索按鈕的綁定的單擊事件里，調(diào)用渲染函數(shù)

// 3、根據(jù)價(jià)格查詢商品// 當(dāng)點(diǎn)擊按鈕后，就可以根據(jù)商品的價(jià)格去篩選數(shù)組里的對(duì)象search_price.addEventListener('click', function() { //給搜索按鈕綁定點(diǎn)擊事件var newData = data.filter(function(value) {return value.price >= start.value && value.price <= end.value;});// 把篩選完的數(shù)組渲染到頁面中（此處直接調(diào)用自定義函數(shù)）setData(newData);})

運(yùn)行程序后，即可發(fā)現(xiàn)，篩選渲染得到的結(jié)果，包含了原來的所有數(shù)據(jù)。因此，需要在自定義函數(shù)內(nèi)最上面添加清除：tbody.innerHTML="";因此，完整的自定義函數(shù)如下：

function setData(myData) {// 先清空原來的tbody里面的數(shù)據(jù)tbody.innerHTML = "";myData.forEach(function(value) {// 2.1、創(chuàng)建行，并裝入3個(gè)單元格var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';// 2.2、將創(chuàng)建的行追加到tbodytbody.appendChild(tr);}); }

至此，完成搜索按鈕的篩選功能

3.5 根據(jù)名稱查詢商品

根據(jù)商品名稱查找商品

如果查詢數(shù)組中唯一的元素，用some方法列合適，因?yàn)樗业竭@個(gè)元素，就不再進(jìn)行循環(huán)，效率更高。

同樣的，第一步獲取元素：

var product = document.querySelector('.product'); var search_pro = document.querySelector('.search-pro');

3.5.1 渲染查詢得到的數(shù)組

// 4、通過商品名稱查找商品search_pro.addEventListener('click', function() {var arr = [];data.some(function(value) {if (value.pname === product.value) {arr.push(value);return true // 此處必須寫true;}})// 把拿到的數(shù)據(jù)渲染到頁面中setData(arr); })

push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度。

提示：要想數(shù)組的開頭添加一個(gè)或多個(gè)元素，請(qǐng)使用 unshift() 方法。

更多關(guān)于push的說明，請(qǐng)參閱 W3school 技術(shù)文檔：
JavaScript push() 方法

本節(jié)內(nèi)容 要點(diǎn)提示：

如果查詢數(shù)組中唯一的元素，用some更合適，some遇到true就會(huì)終止循環(huán)，效率更高；
而forEach中return不會(huì)終止迭代

4. tab欄切換（課后練習(xí)）

4.1 tab欄切換案例效果圖

4.2 效果實(shí)現(xiàn)

4.2.1 HTML結(jié)構(gòu)

<!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樣式

4.2.3 JavaScript 代碼

上一篇：JavaScript從入門到放棄 -（二）繼承
下一篇：JavaScript從入門到放棄 -（四）E5 新增方法

總結(jié)

以上是生活随笔為你收集整理的JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python3-matplotlib绘制
下一篇： JavaScript-字符串

javascript

JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例

目錄

1. ES5新增方法概述

2. 數(shù)組方法

2.1 forEach方法

2.2 filter 篩選數(shù)組方法

2.3 some方法

3. 查詢商品案例

3.1 HTML結(jié)構(gòu)和CSS樣式

3.2 準(zhǔn)備數(shù)據(jù)

3.3 獲取元素并渲染數(shù)據(jù)

3.3.1 獲取tbody

3.3.2 利用forEach渲染數(shù)據(jù)

3.4 根據(jù)價(jià)格篩選商品

3.4.1 獲取按鈕和表單

3.4.2 查詢商品

3.5 根據(jù)名稱查詢商品

3.5.1 渲染查詢得到的數(shù)組

4. tab欄切換（課后練習(xí)）

4.1 tab欄切換案例效果圖

4.2 效果實(shí)現(xiàn)

4.2.1 HTML結(jié)構(gòu)

4.2.2 CSS樣式

4.2.3 JavaScript 代碼

總結(jié)