些元素默認帶有padding, 比如ul標簽。
*{margin:0;padding:0;}
讓所有的標簽內外邊距是都 0 ;
*的執(zhí)行效率不高, 所以我們使用并集選擇器, 羅列出所有的標簽(不用背, 有專業(yè)的清除默認樣式的樣式表, 以利于今后學習)
當然, 以上的寫法是我們練習的寫法。
真正的工作我們如下寫法:
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
最常用
常扒別人網站文章的坑們;我是指那種批量式采集的壓根不看內容的;少不了都會用到刪除html標簽的函數(shù);這里介紹3種不同用途上的方法;
$str='<div><p>這里是p標簽</p><img src="" alt="這里是img標簽"><a href="">這里是a標簽</a><br></div>';
1:刪除全部或者保留指定html標簽php自帶的函數(shù)strip_tags即可滿足要求,使用方法:strip_tags(string,allow);string:需要處理的字符串;allow:需要保留的指定標簽,可以寫多個;
echo strip_tags($str,'<p><a>');//輸出:<p>這里是p標簽</p><a href="">這里是a標簽</a>
此函數(shù)的優(yōu)點是簡單粗暴;但是缺點也很明顯;如果有一大堆標簽;而我只是想刪除指定的某一個;那要寫很多需要保留的標簽;所以有了第二個方法;
2:刪除指定的html標簽使用方法:strip_html_tags($tags,$str);$tags:需要刪除的標簽(數(shù)組格式)$str:需要處理的字符串;
function strip_html_tags($tags,$str){
$html=array();
foreach ($tags as $tag) {
$html[]="/(<(?:\/".$tag."|".$tag.")[^>]*>)/i";
}
$data=preg_replace($html, '', $str);
return $data;
}
echo strip_html_tags(array('p','img'),$str);
//輸出:<div>這里是p標簽<a href="">這里是a標簽</a><br></div>;
3:刪除標簽和標簽的內容使用方法:strip_html_tags($tags,$str);$tags:需要刪除的標簽(數(shù)組格式)$str:需要處理的字符串;
function strip_html_tags($tags,$str){
$html=array();
foreach ($tags as $tag) {
$html[]='/<'.$tag.'.*?>[\s|\S]*?<\/'.$tag.'>/';
$html[]='/<'.$tag.'.*?>/';
}
$data=preg_replace($html,'',$str);
return $data;
}
echo strip_html_tags(array('a','img'),$str);
//輸出<div><p>這里是p標簽</p><br></div>
很多網站文章里面會帶上網站名和鏈接;這個函數(shù)就是專治這種;別拿這個函數(shù)采集本站啊;不然保證不打死你;4:終極函數(shù),刪除指定標簽;刪除或者保留標簽內的內容;使用方法:strip_html_tags($tags,$str,$content);$tags:需要刪除的標簽(數(shù)組格式)$str:需要處理的字符串;$ontent:是否刪除標簽內的內容 0保留內容 1不保留內容
本指南中,我們將介紹:
.reduce() 函數(shù)是什么?
創(chuàng)建我們的 .reduce() 函數(shù)版本
計算電子商務購物車的商品總數(shù)和價格
為餐廳菜單創(chuàng)建一組獨特的類別
從數(shù)組中刪除重復的對象
用 .reduce() 替換 .filter().map()
按鍵分組對象(類似于 SQL GROUP BY 或 C# 的 .GroupBy())
乍一看似乎很混亂
如果您曾經為理解 .reduce() 函數(shù)而苦苦掙扎,那么您并不孤單。 要真正了解它的工作原理并自信地使用它,需要多花幾次功夫。
大多數(shù)例子都使用一個簡單的數(shù)字或字符串數(shù)組,但現(xiàn)實是我們通常使用很少涉及的復雜對象。
但在我們跳進去之前。
以下是如何從這些內容中獲得更多信息。
打開您的代碼編輯器并親自嘗試示例
修改它(更改值,向數(shù)組添加或從數(shù)組中刪除元素等)
如果您發(fā)現(xiàn)自己迷失在其中一個示例中,請使用筆和紙或在您的代碼編輯器上追蹤變量的值。
讓我們開始吧!
.reduce() 函數(shù)是什么?
它是一種對數(shù)組的每個元素執(zhí)行回調函數(shù)的方法。
計算的返回值傳遞給下一個元素。
在第一次迭代中,沒有“上一次計算的返回值”,如果傳入,可以用一個初始值代替。
否則,數(shù)組的第一個元素被用作初始值,迭代從下一個元素開始。
簡單的說,就是一個變量和一個循環(huán)。
變量保存新值
循環(huán)遍歷數(shù)組,因此我們可以從每個元素中獲取我們想要的內容
這個:
實現(xiàn)與此相同:
幾乎每次需要使用變量和循環(huán)時,都可以用 reduce 函數(shù)替換它。
由于沒有比實際嘗試更好的學習方法,讓我們構建我們的 .reduce() 方法版本,以便我們真正理解它。
構建我們自己的 .reduce()
讓我們通過解決一個簡單的問題來做到這一點:
我們有一個數(shù)字數(shù)組,我們想要所有數(shù)字的總和。
就像上面的變量和循環(huán)的例子一樣。
我們需要三樣東西:
數(shù)組
保存總值 total 的變量(通常稱為累加器)
遍歷數(shù)組的循環(huán)
假設你想把它變成一個函數(shù),這樣你就可以很容易地使用它,你會怎么做?
也許沿著這些路線:
我們將數(shù)組作為參數(shù)傳遞給我們的函數(shù)
我們最后返回總數(shù)。
這看起來不錯,但是如果我們想要設置變量總計初始值的選項怎么辦?
我們可以將選項添加為另一個參數(shù)并將總計設置為它的值。
像這樣:
但是這個函數(shù)還有2個問題。
我們無法在循環(huán)內添加要執(zhí)行的不同邏輯(它只會將當前元素添加到 sum 變量)
它僅適用于簡單數(shù)組(其中每個項目都是值類型,而不是對象)
我會告訴你我的意思。
這次讓我們創(chuàng)建一個對象數(shù)組
讓我們調用傳入對象數(shù)組的 myReducer 函數(shù)
它不起作用,因為我們要添加的值在對象內部而不是對象本身。
我們必須以 total += arr[i].number 的形式訪問它
但是這個函數(shù)沒有考慮到這一點。
但是,如果我們添加一個回調函數(shù)作為第二個參數(shù),我們可以:
對數(shù)組的每個元素執(zhí)行回調函數(shù)
創(chuàng)建我們需要的任何自定義邏輯
讓我們修改我們的 myReducer 函數(shù)。
讓我們用對象數(shù)組再次測試它。
首先,聲明回調函數(shù)并調用傳入它的 myReduce。
請注意,我們根據 total 的值添加了 if 和 else 條件,這是我們的 initialValue 選項。
如果未給出初始值
它不會在第一次迭代時執(zhí)行回調
沒有什么要補充的,initialValue 是未定義的。
只需將 total 設置為當前元素的值
如果給出初始值
它在所有迭代中執(zhí)行回調
這幾乎就是原始 Array.prototype.reduce() 所做的。
主要區(qū)別在于不需要將數(shù)組作為參數(shù)傳遞,因為原始 .reduce() 綁定到 Array.prototype,因此數(shù)組始終是調用 .reduce() 的數(shù)組。
計算電子商務購物車的總項目數(shù)和價格
假設你有一個像這樣的數(shù)組:
您需要將此數(shù)組縮減為這樣的對象 { totalItems: 0, totalPrice: 0 } 以便我們可以在結帳頁面上顯示正確的信息。
這是我們可以做到的:
為餐廳菜單創(chuàng)建一組獨特的類別
給定這個數(shù)組:
我們需要將其縮減為一系列獨特的類別,例如 ['Appetizer','Entree','Main']
這是我們可以做到的:
從數(shù)組中刪除重復的對象
與上面的示例類似,但這次我們需要返回僅使用唯一對象過濾的相同對象數(shù)組。
這是具有重復對象的數(shù)組:
注意:你必須有一個類似于 id 的屬性,它對每個對象都是唯一的
這就是我們如何創(chuàng)建另一個僅包含唯一元素的數(shù)組:
將 .filter().map() 替換為 .reduce()
過濾數(shù)組然后修改過濾后數(shù)組的元素是很常見的。
我們將使用上面菜單類別的相同數(shù)組
但是這次我們想得到一個數(shù)組,其中只有類別為“Entree”的項目的 itemName
我們可以使用 .filter() 數(shù)組,然后使用 .map() 來完成它
或者我們可以用 .reduce() 來做
使用 .reduce() 的優(yōu)點是您只迭代數(shù)組一次。
按鍵分組對象(類似于 SQL GROUP BY 或 C# 的 .GroupBy())
這是我最喜歡的。 這是一個非常方便的函數(shù),可能會在下一次更新時包含在 JavaScript 的數(shù)組方法中(目前處于第 3 階段以供批準)
這個 groupBy 函數(shù)也可以用作解決更復雜問題的中間步驟。
我們將再次使用菜單類別數(shù)組:
這是我們的 groupBy 函數(shù):
如果我們添加將密鑰作為函數(shù)傳遞的選項,它會變得更加方便。
只需替換這一行:
有了這個:
這樣我們就可以調用它并傳遞一個返回鍵的函數(shù),而不是自己編寫字符串,避免拼寫錯誤。
結論
在這篇文章中,我們了解到:
什么是 .reduce() 函數(shù)
如何創(chuàng)建我們的 .reduce() 函數(shù)版本
計算電子商務購物車的總項目數(shù)和價格
為餐廳菜單創(chuàng)建一組獨特的類別
從數(shù)組中刪除重復的對象
將 .filter().map() 替換為 .reduce()
如何按鍵對對象進行分組(類似于 SQL GROUP BY 或 C# 的 .GroupBy())
謝謝閱讀!
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。