前言：并不是什么高深算法邏輯之類的，只是一些普通常用的代碼片段，設置到vs code里面，減少工作時間成本，還有其他常用的代碼塊，歡迎評論給我建議。

設置用戶代碼片段方法 點這里

1.單行文字超出隱藏并顯示省略號

"css1": {

"scope": "css,scss,less,stylus",

"prefix": "sld",

"body": [

"width:200rpx;",

"white-space: nowrap;",

"overflow: hidden;",

"text-overflow: ellipsis;",

"$1"

],

"description": "文字超出隱藏并顯示省略號 單行 必須有寬度"

},

復制代碼

2.多行文字超出隱藏并顯示省略號

"css2": {

"scope": "css,scss,less,stylus",

"prefix": "slm",

"body": [

"word-break: break-all;",

"display: -webkit-box;",

"-webkit-line-clamp: 2;",

"-webkit-box-orient: vertical;",

"overflow: hidden;",

"$1"

],

"description": "文字超出隱藏并顯示省略號 多行"

},

復制代碼

3.純css畫三角形

"css3": {

"scope": "css,scss,less,stylus",

"prefix": "sjx",

"body": [

"width: 0;",

"height: 0;",

"border-width: 20px;",

"border-style: solid;",

"border-color: transparent transparent red transparent;",

"$1"

],

"description": "純css畫三角形"

},

復制代碼

4.絕對定位元素居中

"css4": {

"scope": "css,scss,less,stylus",

"prefix": "jz",

"body": [

"position: absolute;",

"left: 50%;",

"top: 50%;",

"transform: translate(-50%,-50%);",

"$1"

],

"description": "絕對定位元素居中(水平和垂直方向)"

},

復制代碼

5.塊狀元素居中

"css5": {

"scope": "css,scss,less,stylus",

"prefix": "jz2",

"body": [

"position: absolute;",

"top: 0;",

"left: 0;",

"bottom: 0;",

"right: 0;",

"margin: auto;",

"$1"

],

"description": "塊狀元素居中(水平和垂直方向)"

},

復制代碼

6.合并參數

"js1": {

"scope": "javascript,typescript",

"prefix": "hbcs",

"body": [

"const arrayConcat = (arr, ...args) => arr.concat(...args);",

"// arrayConcat([1], 2, [3], [[4]]) -> [1,2,3,[4]]",

"$1"

],

"description": "合并參數"

},

復制代碼

7.取數組不同項

"js2": {

"scope": "javascript,typescript",

"prefix": "qbtx",

"body": [

"const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };",

"// difference([1,2,3], [1,2]) -> [3]",

"$1"

],

"description": "取數組不同項"

},

復制代碼

8.取數組相同項

"js3": {

"scope": "javascript,typescript",

"prefix": "qtx",

"body": [

"const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x)); };",

"// intersection([1,2,3], [4,3,2]) -> [2,3]",

"$1"

],

"description": "取數組相同項"

},

復制代碼

9.合并數組去重

"js4": {

"scope": "javascript,typescript",

"prefix": "hbqc",

"body": [

"const union = (a, b) => Array.from(new Set([...a, ...b]));",

"// union([1,2,3], [4,3,2]) -> [1,2,3,4]",

"$1"

],

"description": "合并數組去重"

},

復制代碼

10.數組取平均值

"js5": {

"scope": "javascript,typescript",

"prefix": "qpjz",

"body": [

"const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;",

"// average([1,2,3]) -> 2",

"$1"

],

"description": "數組取平均值"

},

復制代碼

11.過濾掉假值

"js6": {

"scope": "javascript,typescript",

"prefix": "gljz",

"body": [

"const compact = (arr) => arr.filter(v => v);",

"// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]",

"$1"

],

"description": "過濾掉假值(false, null, 0, '', undefined 和 NaN)"

},

復制代碼

12.過濾掉數組中重復的值

"js7": {

"scope": "javascript,typescript",

"prefix": "glcfz",

"body": [

"const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));",

// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]",

"$1"

],

"description": "過濾掉數組中重復的值"

},

復制代碼

13.計算數組中重復值出現的次數

"js8": {

"scope": "javascript,typescript",

"prefix": "jscfz",

"body": [

"const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);",

"// countOccurrences([1,1,2,1,2,3], 1) -> 3",

"$1"

],

"description": "計算數組中重復值出現的次數"

},

復制代碼

14.滾動至頂部

"scroll to top": {

"scope": "javascript,typescript",

"prefix": "gotop",

"body": [

"const scrollToTop = _ => {",

" const c = document.documentElement.scrollTop || document.body.scrollTop;",

" if (c > 0) {",

" window.requestAnimationFrame(scrollToTop);",

" window.scrollTo(0, c - c / 8);",

" }",

"};",

"// scrollToTop()"

],

"description": "滾動至頂部"

},

復制代碼

15.獲取兩個日期間的差距

"Get days difference between dates": {

"scope": "javascript,typescript",

"prefix": "datecj",

"body": [

"const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);",

"// getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')) -> 9",

"$1"

],

"description": "獲取兩個日期間的差距"

},

復制代碼

16.指定范圍內的隨機整數

"Random integer in range": {

"scope": "javascript,typescript",

"prefix": "sjzs",

"body": [

"const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;",

"// randomIntegerInRange(0, 5) -> 2",

"$1"

],

"description": "指定范圍內的隨機整數"

},

復制代碼

17.URL參數

"URL parameters": {

"scope": "javascript,typescript",

"prefix": "urlcs",

"body": [

"const getUrlParameters = url =>",

" url.match(/([^?=&]+)(=([^&]*))/g).reduce(",

" (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}",

");",

"// getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}",

"$1"

],

"description": "URL參數"

},

復制代碼

18.后續更新

總結

以上是生活随笔為你收集整理的js获得相同css的第几个,vue,css,js用户代码片段（vs code）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。