① 《web前端筆記7》js字元—獲取、查找、遍歷、提取、替換方法總結
（1）字元串就是零個或多個排在一起的字元。
（2）放在單引號或雙引號之中。 'abc' "abc"。
（3）單引號字元串的內部，可以使用雙引號。
（4）雙引號字元串的內部，可以使用單引號。
（5）反引號`` ：反引號允許跨行。
反引號允許字元串跨越多行並可以使用
${…} 在字元串中嵌入表達式。
（1）charAt 方法返回指定位置的字元，參數是從0開始編號的位置。
找一個字元串中的某個位置是那個字元串。
charCodeAt：返回字元串指定位置的 Unicode 碼點（十進製表示）
（2）[]
字元串可以被視為字元串數組，因此可以用數組的方括弧運算符，用來返回某個位置的字元
但是字元串只是數組的相似性而已實際上、沒辦法改變字元串中的某個字元
length 只是返回了字元串的長度，該屬性沒辦法改變
字元串使用Unicode字元集，js內部所有的都是Unicode表示的。
JavaScript中的字元串使用的是 UTF-16 編碼。
toLowerCase() 和 toUpperCase()方法可以改變大小寫。
String對象是js原生提供的三個包裝對象之一。用來生成字元串對象。
（1）構造函數
字元串對象是一個類數組對象，很像數組，但不是真正的數組。
（2）將任意的值轉成字元
用於連接兩個字元串，返回一個新字元串，不改變原字元串。
從原字元串取出子字元串並返回，不改變原字元串。
它的第一個參數是子字元串的開始位置，
第二個參數是子字元串的結束位置（不含該位置）。
如果省略第二個參數，則表示子字元串一直到原字元串結束。
用於從原字元串取出子字元串並返回，不改變原字元串，跟slice方法很相像。
它的第一個參數表示子字元串的開始位置，
第二個位置表示結束位置（返回結果不含該位置）
如果省略第二個參數，則表示子字元串一直到原字元串結束。
區別：slice 和 substring的區別？
slice：
如果參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字元串長度。
如果第一個參數大於第二個參數（正數情況下），slice()方法返回一個空字元串。
substring：
如果第一個參數大於第二個參數，substring方法會自動更換兩個參數的位置。
如果參數是負數，substring方法會自動將負數轉為0。
由於這些規則違反直覺，因此不建議使用substring方法，應該優先使用slice。
總結：獲取子字元串，使用 slice 或 substring。
用於確定一個字元串在另一個字元串中第一次出現的位置，
返回結果是匹配開始的位置。如果返回-1，就表示不匹配。
indexOf方法還可以接受第二個參數，表示從該位置開始向後匹配。
lastIndexOf
lastIndexOf方法的用法跟indexOf方法一致，主要的區別是lastIndexOf從尾部開始匹配，indexOf則是從頭部開始匹配。
總結：查找子字元串時，使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。
endsWith 用來判斷當前字元串是否是以另外一個給定的子字元串「結尾」的，根據判斷結果返回 true 或 false。
用於去除字元串兩端的空格，返回一個新字元串，不改變原字元串。
toLowerCase方法用於將一個字元串全部轉為小寫，
toUpperCase則是全部轉為大寫。
它們都返回一個新字元串，不改變原字元串
split方法按照給定規則分割字元串，返回一個由分割出來的子字元串組成的數組。
如果分割規則為空字元串，則返回數組的成員是原字元串的每一個字元。
如果省略參數，則返回數組的唯一成員就是原字元串。
split方法還可以接受第二個參數，限定返回數組的最大成員數。
返回一個新字元串，表示將原字元串重復n次。
字元串補全長度的功能。如果某個字元串不夠指定長度，
會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。
trimStart()消除字元串頭部的空格，
trimEnd()消除尾部的空格。
返回一個由替換值（replacement）替換部分或
所有的模式（pattern）匹配項後的新字元串。
模式可以是一個字元串或者一個正則表達式，
替換值可以是一個字元串或者一個每次匹配都要調用的回調函數。
如果pattern是字元串，則僅替換第一個匹配項.
web前端筆記4-有講 如果感興趣、請參考之前文章
② 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue，從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：
callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，
數組去重：
常用對象方法
1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化，讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊（包）
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等