整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來！
一個小小tips，在網(wǎng)頁中能有意想不到的效果，能很好的引導(dǎo)客戶，說明功能等等。
CSS實現(xiàn)html指令式Tips文字提示
<div class="container"> <div class="top"> <button tooltip="上左">上左</button> <button tooltip="上邊" placement="top">上邊</button> <button tooltip="上右" placement="top-right">上右</button> </div> <div class="left"> <button tooltip="左上" placement="left-top">左上</button> <button tooltip="左邊" placement="left" effect="light">左邊</button> <button tooltip="左右" placement="left-bottom">左下</button> </div> <div class="right"> <button tooltip="右上" placement="right-top">右上</button> <button tooltip="右邊" placement="right" effect="light">右邊</button> <button tooltip="右下" placement="right-bottom">右下</button> </div> <div class="bottom"> <button tooltip="下左" placement="bottom-left">下左</button> <button tooltip="下邊" placement="bottom" effect="light">下邊</button> <button tooltip="下右" placement="bottom-right">下右</button> </div> </div>
由于內(nèi)容較多，只提供主要部分，詳情請點擊最下方“了解更多”
氣泡樣式
[tooltip]::after {
display: none;
content: attr(tooltip);
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 15px;
max-width: 200px;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
z-index: 100;
}
氣泡位置（示例上）
.tooltip-placement-top,
[tooltip]:not([placement])::after,
[tooltip][placement=""]::after,
[tooltip][placement="top"]::after {
bottom: calc(100% + 10px);
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-top-right,
[tooltip][placement="top-right"]::after {
bottom: calc(100% + 10px);
left: 100%;
transform: translate(-100%, 0);
}
.tooltip-placement-top-left,
[tooltip][placement="top-left"]::after {
bottom: calc(100% + 10px);
left: 0;
transform: translate(0, 0);
}
氣泡動畫（示例上）
[tooltip][placement^="top"]::after,
[tooltip][placement^="top"]::before {
animation: anime-top 300ms ease-out forwards;
}
@keyframes anime-top {
from {
opacity: .5;
bottom: 150%;
}
}
三角形樣式
[tooltip]::before {
display: none;
content: '';
position: absolute;
border: 5px solid transparent;
border-bottom-width: 0;
z-index: 100;
}
三角形位置（示例上）
.triangle-placement-top,
[tooltip]:not([placement])::before,
[tooltip][placement=""]::before,
[tooltip][placement="top"]::before {
bottom: calc(100% + 5px);
left: 50%;
transform: translate(-50%, 0);
}
.triangle-placement-top-left,
[tooltip][placement="top-left"]::before {
bottom: calc(100% + 5px);
left: 10px;
}
.triangle-placement-top-right,
[tooltip][placement="top-right"]::before {
bottom: calc(100% + 5px);
right: 10px;
}
css的功能越來越強(qiáng)大，是不是曾經(jīng)以為這樣的效果只能用js實現(xiàn)了，現(xiàn)在用css也可以搞定了，速度上車，試試吧。
喜歡小編的點擊關(guān)注，了解更多知識！
源碼和演示地址，請點擊“了解更多”！
文地址：https://markodenic.com/html-tips/
Marko 2020年4月12日
在這篇文章中，我很興奮地與您分享一些非常有用的HTML小技巧。
*文章會定期更新，假如有新的小技巧的話。
超文本標(biāo)記語言（HTML）是設(shè)計用來在瀏覽器中顯示文檔的標(biāo)準(zhǔn)標(biāo)記語言。它能夠獲得諸如級聯(lián)樣式表（CSS）、JavaScript等腳本語言技術(shù)的支持。
性能小技巧，我們能夠通過使用loading=lazy屬性，去推遲圖片的加載，直到用戶滾動看到它們。
<img src='image.jpg' loading='lazy' alt='Alternative Text'><a href="mailto:{email}?subject={subject}&body={content}">
Send us an email
</a>
<a href="tel:{phone}">
Call us
</a>
<a href="sms:{phone}?body={content}">
Send us a message
</a> 通過使用"start"屬性去改變有序列表的開始點。
您可以使用<meter>元素來顯示數(shù)量，無需JavaScript和CSS。
您可以使用fieldset元素，在一個web表單中對幾個控件和標(biāo)簽(<label>)進(jìn)行分組。
用target="_blank"打開的新頁面，新頁面中可以訪問原始的來源window，通過window.opener。這個可能會有隱含的安全或者性能問題。使用 rel="noopener" 或者 rel="noreferrer"去阻止這種行為。
<a href="https://markodenic.com/" target="_blank" rel="noopener">
Marko's website
</a> 如果您想讓您文檔中的所有鏈接都在新的tab頁打開，您可以使用base標(biāo)簽：
_self: 載入結(jié)果到當(dāng)前瀏覽上下文中。（該值是元素的默認(rèn)值）。
_blank: 載入結(jié)果到一個新的未命名的瀏覽上下文。
_parent: 載入結(jié)果到父級瀏覽上下文（如果當(dāng)前頁是內(nèi)聯(lián)框）。如果沒有父級結(jié)構(gòu)，該選項的行為和_self一樣。
_top: 載入結(jié)果到頂級瀏覽上下文（該瀏覽上下文是當(dāng)前上下文的最頂級上下文）。如果沒有父級，該選項的行為和_self一樣
為了能夠刷新你網(wǎng)站的favicon，你可以強(qiáng)制瀏覽器去下載新文件，通過給文件鏈接后面添加?v=2。
這個在生產(chǎn)環(huán)境特別有用，確保你的用戶使用的是最新的版本。
<link rel="icon" href="/favicon.ico?v=2" />通過spellcheck屬性去定義元素是否應(yīng)該檢查拼寫錯誤。
您可以通過使用<input type="range">來創(chuàng)建一個滑塊
您可以使用details元素去創(chuàng)建原生的HTML手風(fēng)琴
您可以使用<mark>標(biāo)記去高亮文本。
您可以在鏈接上使用download屬性，去下載您的文件，而不是打開鏈接。
<a href='path/to/file' download>
Download
</a> 使用圖片大小更小的.webp格式，同時提升網(wǎng)站性能。
<picture>
<!-- load .webp image if supported -->
<source srcset="logo.webp" type="image/webp">
<!--
Fallback if `.webp` images or <picture> tag
not supported by the browser.
-->
<img src="logo.png" alt="logo">
</picture> 使用poster屬性指定一張在視頻下載時顯示的圖片，或者一直到用戶點擊播放按鈕。
<video poster="path/to/image">對于你的搜索輸入框可以使用type="search",然后你將會免費獲得一個清除的按鈕。
于初學(xué)者，JavaScript 有哪些不為人知卻非常有用的技巧呢？在本文中，我們將一同為大家解密與分享。
作者 | Duomly
譯者 | 彎月，責(zé)編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
數(shù)組是Javascript中最常見的概念，我們有很多辦法來處理數(shù)組中的數(shù)據(jù)。考慮到數(shù)組是Javascript中最基本的概念之一，是初學(xué)者剛剛接觸編程時就學(xué)習(xí)的概念，我想通過本文介紹一些不為人知卻非常有用的技巧。我們開始吧！
從數(shù)組中刪除重復(fù)
在有關(guān)Javascript數(shù)組的面試問題中，有一個問題很常見：怎樣從Javascript數(shù)組中提取不重復(fù)的值。我有一個快捷簡便的方法：只需使用new Set即可。實現(xiàn)的方法有兩種：一種使用.from，另一種使用擴(kuò)展運算符（...）：
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];很容易，是不是？
替換數(shù)組中指定的值
在編程時，有時候需要替換某個特定的值，有個非常簡單的方法來實現(xiàn)這一點。只需使用.split(start, 要刪除的值，要添加的值)，然后設(shè)置好三個參數(shù)，指明希望從哪里修改、要修改幾個值，以及新的值是什么。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]
不使用.map實現(xiàn)映射
大概所有人都知道數(shù)組的.map方法，但還有另一個方法，可以用同樣簡潔的方式實現(xiàn)類似的效果。這種方法就是.from：
var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]
var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]
清空數(shù)組
如果想把一個數(shù)組清空，但不想一個個刪除其中的元素，該怎么辦？其實只需一行代碼即可：將length設(shè)置為0。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits); // returns
將數(shù)組轉(zhuǎn)化為對象
如果有一個數(shù)組，我們希望將其數(shù)據(jù)放到一個對象中，那么最快的方式就是使用擴(kuò)展運算符（...）：
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
用數(shù)據(jù)填充數(shù)組
有時候需要創(chuàng)建一個數(shù)組并用數(shù)據(jù)填充，或者需要一個所有值都相同的數(shù)組，此時可以使用.fill方法簡潔明快地實現(xiàn)：
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
合并數(shù)組
你知道怎樣可以不使用.concat來合并數(shù)組嗎？最簡單的方法只需要一行代碼。你也許猜到了，那就是擴(kuò)展運算符（...），它非常適合處理數(shù)組：
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
求兩個數(shù)組的交集
這也是Javascript面試中最常遇到的問題，因為它能展示出你是否會使用數(shù)組方法，以及邏輯如何。要找出兩個數(shù)組的交集，只需要使用之前使用的技巧，首先保證數(shù)組中的值不重復(fù)，然后利用.filter和.includes方法即可。這樣就能找出同時出現(xiàn)在兩個數(shù)組中的元素。代碼如下：
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]
從數(shù)組中刪除假值
首先我們來定義假值。在Javascript中，假值包括false、0、''、、NaN、undefined。現(xiàn)在可以考慮怎樣從數(shù)組中刪除假值了。只需使用.filter方法即可實現(xiàn)：
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]
從數(shù)組中獲取隨機(jī)值
有時候需要從數(shù)組中隨機(jī)選擇一個值。簡單、快捷、簡短且干凈的方式就是在數(shù)組長度的范圍內(nèi)生成一個隨機(jī)的索引。代碼如下：
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]反轉(zhuǎn)數(shù)組
需要反轉(zhuǎn)數(shù)組時，我們不需要使用復(fù)雜的循環(huán)和函數(shù)來重新創(chuàng)建數(shù)組，因為有一個簡單的數(shù)組方法可以為我們做這件事，只需一行代碼，就能反轉(zhuǎn)數(shù)組。代碼如下：
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse;
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]
.lastIndexOf方法
Javascript中有一個有趣的方法，可以讓我們找出指定元素最后出現(xiàn)的位置。例如，如果數(shù)組中有重復(fù)元素，那么可以找出該元素最后出現(xiàn)的位置。代碼如下：
var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9
對數(shù)組中的所有值求和
另一個Javascript工程師面試中常見的問題就是對數(shù)組中的所有元素求和。這個完全不需要害怕，只需使用.reduce方法，一行代碼就可以實現(xiàn)。代碼如下：
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14總結(jié)
本文向你展示了13個編程技巧，可以保持代碼簡短整潔。同時別忘了，Javascript中還有許多不同的技巧值得探索，不僅是有關(guān)數(shù)組的技巧，也包括許多其他的數(shù)據(jù)類型。希望你喜歡本文的技巧，并能利用這些技巧改善開發(fā)流程。
原文：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo
本文為 CSDN 翻譯，轉(zhuǎn)載請注明來源出處。
【END】
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
