用indexOf找到你想刪除的數組元素的索引,然后用splice刪除該索引。
const array=[2, 5, 9];
console.log(array);
const index=array.indexOf(5);
if (index > -1) {
array.splice(index, 1);
}
// array=[2, 9]
console.log(array);
splice的第二個參數是要移除的元素的數量。注意,splice修改了原地的數組,并返回一個包含被移除的元素的新數組。
為了完整起見,這里有一些函數。第一個函數只刪除單一的出現(即從[2,5,9,1,5,8,5]中刪除5的第一個匹配),而第二個函數則刪除所有出現的情況。
function removeItemOnce(arr, value) {
var index=arr.indexOf(value);
if (index > -1) {
arr.splice(index, 1);
}
return arr;
}
function removeItemAll(arr, value) {
var i=0;
while (i < arr.length) {
if (arr[i]===value) {
arr.splice(i, 1);
} else {
++i;
}
}
return arr;
}
// Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))
在TypeScript中,這些函數可以添加類型參數。
function removeItem<T>(arr: Array<T>, value: T): Array<T> {
const index=arr.indexOf(value);
if (index > -1) {
arr.splice(index, 1);
}
return arr;
}
家好,很高興又見面了,我是"高級前端?進階?",由我帶著大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發,您的支持是我不斷創作的動力。
UnCSS 是一個從樣式表中刪除未使用的 CSS 的工具,可以跨多個文件工作,并支持 Javascript 注入的 CSS。
UnCSS 刪除未使用規則的過程如下:
但是使用 Uncss 需要注意以下幾點:
目前 uncss 在 Github 上通過 MIT 協議開源,有超過 9.3k 的 star,194k 的項目依賴量,是一個值得關注的前端開源項目。
下面是在 Node.js 環境中使用 uncss 的示例:
var uncss=require('uncss');
var files=['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
options={
banner: false,
csspath: '../public/css/',
htmlroot: 'public',
ignore: ['#added_at_runtime', /test\-[0-9]+/],
ignoreSheets: [/fonts.googleapis/],
inject: function (window) {
window.document
.querySelector('html')
.classList.add('no-csscalc', 'csscalc');
},
jsdom: {
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
},
media: ['(min-width: 700px) handheld and (orientation: landscape)'],
raw: 'h1 { color: green }',
report: false,
strictSSL: true,
stylesheets: [
'lib/bootstrap/dist/css/bootstrap.css',
'src/public/css/main.css',
],
timeout: 1000,
uncssrc: '.uncssrc',
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
};
uncss(files, options, function (error, output) {
console.log(output);
});
/* Look Ma, no options! */
uncss(files, function (error, output) {
console.log(output);
});
/* Specifying raw HTML */
var rawHtml='...';
uncss(rawHtml, options, function (error, output) {
console.log(output);
});
值得一提的是,UnCSS 還可以與其他 JavaScript 構建系統結合使用,例如: Grunt、Broccoli 或 Gulp,只需要安裝特定的庫即可。
在 CLI 環境中使用命令如下:
Usage: uncss [options] <file or URL, ...>
e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css
Options:
-h, --help output usage information
-V, --version output the version number
-i, --ignore <selector, ...> Do not remove given selectors
-m, --media <media_query, ...> Process additional media queries
-C, --csspath <path> Relative path where the CSS files are located
-s, --stylesheets <file, ...> Specify additional stylesheets to process
-S, --ignoreSheets <selector, ...> Do not include specified stylesheets
-r, --raw <string> Pass in a raw string of CSS
-t, --timeout <milliseconds> Wait for JS evaluation
-H, --htmlroot <folder> Absolute paths' root location
-u, --uncssrc <file> Load these options from <file>
-n, --noBanner Disable banner
-a, --userAgent <string> Use a custom user agent string
-I, --inject <file> Path to javascript file to be executed before uncss runs
-o, --output <file> Path to write resulting CSS to
請注意,可以將本地文件路徑(由 glob 處理)和 URL 傳遞給程序。
/* uncss:ignore */
.selector1 {
/* this rule will be ignored */
}
.selector2 {
/* this will NOT be ignored */
}
/* uncss:ignore start */
/* all rules in here will be ignored */
/* uncss:ignore end */
https://github.com/uncss/uncss
https://m.youtube.com/watch?v=DX7McYRGJ8o
https://uncss-online.com/
lt;div class="aa">aa</div>
<div class="bb">bb</div>
<div class="aa">aa</div>
<div class="fuClass"><h4 id="Title">jiajia</h4></div>
<ul>
<li><a href="/" class="delete second">11</a></li>
<li>22</li>
<li>33</li>
</ul>
const lis=document.querySelectorAll("li");
const list=document.querySelector("ul");
//第一種刪除方法
//lis[0].remove();
//第二種刪除方法
//list.removeChild(lis[1]);
//class && attr
const firstLi=document.querySelector("li:first-child");
const link=firstLi.children[0];
//a 類
let val;
val=link.className;
val=link.classList;
// val=link.classList[0];
link.classList.add('test');
link.classList.remove('test');
//a 屬性
val=link.getAttribute('href');
val=link.setAttribute('href','http://www.baidu.com');
link.setAttribute('title','百度');
link.removeAttribute('title');
val=link.hasAttribute('title');
console.log(val)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。