些元素默認帶有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()）

謝謝閱讀！