|
前言：
在使用任何一門語言之前的語法結構/函數等之前，都建議先將手冊詳細看下~~ //有針對性，邊看邊實踐
1.位運算
|
位運算符直接處理每一個比特位（bit），所以是非常底層的運算，好處是速度極快，缺點是很不直觀，許多場合不能使用它們，否則會使代碼難以理解和查錯。
有一點需要特別注意，
位運算符只對整數起作用，如果一個運算子不是整數，會自動轉爲整數後再執行。另外，雖然在 JavaScript 內部，數值都是以64位浮點數的形式儲存，但是做位運算的時候，是以32位帶符號的整數進行運算的，並且返回值也是一個32位帶符號的整數。
1.1 取整
![]()
1.2 互換值
![]()
1.3 查看一個負整數在計算機內部的儲存形式
![]()
|
2.字符串
|
1.拼接字符串
如: 使用'-'拼接字符串'hello'爲 "h-e-l-l-o"
方法一:
通用方法[不論是數組/對象/字符串均可使用遍歷做法]
var str = 'hello';
var newStr = '';
for(var i = 0; i < str.length; i++){
newStr += str[i] + '-';
}
newStr = newStr.substring(0, newStr.length -1);
console.log(newStr);
方法二: //更推薦 通過call方法，這個方法也可以用於字符串或類似數組的對象。
var str = 'hello';
var newStr = Array.prototype.join.call(str, '-');
console.log(newStr);
截圖:
![]()
2.生成隨機字符串 //可用於測試
function random_str(length) {
var ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
ALPHABET += 'abcdefghijklmnopqrstuvwxyz';
ALPHABET += '0123456789-_';
var str = '';
for (var i = 0; i < length; ++i) {
var rand = Math.floor(Math.random() * ALPHABET.length);
str += ALPHABET.substring(rand, rand + 1);
}
return str;
}
random_str(6) // "NdQKOr"
3.正則的使用 //推薦 正則字面量方式
![]()
4. 循環完成全部匹配 //利用g修飾符允許多次匹配的特點
var reg = /a/g;
var str = 'abc_abc_abc'
while(true) {
var match = reg.exec(str);
if (!match) break;
console.log('#' + match.index + ':' + match[0]);
}
// #0:a
// #4:a
// #8:a
或者:
var s = 'abba';
var r = /a/g;
s.match(r) // ["a", "a"]
r.exec(s) // ["a"]
備註：//20200515
關於字符串的正則匹配可以使用字符串對象本身自帶的函數，見下面鏈接
https://wangdoc.com/javascript/stdlib/regexp.html#字符串的實例方法
5.字符換去除首尾兩端的空格【或者其他的】
方法一： //replace方法的一個應用，就是消除字符串首尾兩端的空格。
var str = ' #id div.class ';
str.replace(/^\s+|\s+$/g, '')
// "#id div.class"
方法二：//推薦使用，執行速度上，幾乎正則是沒有自帶函數快，不論哪種語言~~
str.trim();
// "#id div.class"
6.交換兩段字符串
如：hello world
方式一：//推薦使用，簡潔很多
var str = 'hello world';
str.replace(/(\w+)\s(\w+)/, '$2 $1')
# "world hello"
方式二：//太過於麻煩， 而且如果原字符串，首位兩端有空格，處理起來會更麻煩一些
var str = 'hello world';
var split = ' ';
var ret = str.split(split);
var newStr = '';
var i = ret.length - 1;
while(i > -1){
newStr += ret[i] + split;
i--;
}
newStr = newStr.trim(split);
console.log(newStr);
# "world hello"
補充：
![]()
7.去除多餘的空格 //擇適而取
方式一：replace函數
'a, b,c, d'.replace(/\s+/g, '');
"a,b,c,d"
方式二:
// 非正則分隔
'a, b,c, d'.split(',')
// [ 'a', ' b', 'c', ' d' ]
// 正則分隔，去除多餘的空格
'a, b,c, d'.split(/, */)
// [ 'a', 'b', 'c', 'd' ]
// 指定返回數組的最大成員
'a, b,c, d'.split(/, */, 2)
[ 'a', 'b' ]
8. 正則匹配的html標籤
用到: 組匹配
var tagName = /<([^>]+)>[^<]*<\/\1>/;
tagName.exec("<b>bold</b>")[1]
// 'b'
優化：
上面代碼略加修改，就能捕獲帶有屬性的標籤。
var html = '<b class="hello">Hello</b><i>world</i>';
var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g;
var match = tag.exec(html);
match[1] // "b"
match[2] // " class="hello""
match[3] // "Hello"
match = tag.exec(html);
match[1] // "i"
match[2] // ""
match[3] // "world"
詳見：https://wangdoc.com/javascript/stdlib/regexp.html#字符串的實例方法
如果爬取數據， 推薦可使用專門的爬蟲框架/工具去做~~
|
3.數組
|
1.替換數組元素
如：替換數組中最後兩個元素
方法一：//推薦， 代碼簡潔
splice()方法用於刪除原數組的一部分成員，並可以在刪除的位置添加新的數組成員，返回值是被刪除的元素。
注意，該方法會改變原數組
![]()
2.提取目標數組的一部分
方法一：
slice()方法用於提取目標數組的一部分，返回一個新數組，原數組不變。
arr.slice(start, end);
var a = ['a', 'b', 'c'];
a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"] slice()沒有參數，實際上等於返回一個原數組的拷貝。
方法二：
map() //map方法將數組的所有成員依次傳入參數函數，然後把每一次的執行結果組成一個新數組返回。
map方法還可以接受第二個參數，用來綁定回調函數內部的this變量
var arr = ['a', 'b', 'c'];
[1, 2].map(function (e) {
return this[e];
}, arr)
// ['b', 'c']
上面代碼通過map方法的第二個參數，將回調函數內部的this對象，指向arr數組
3.根據一個數組循環來得到另外一個數組
方法一：//也是最常見的寫法
var out = [];
[1, 2, 3].forEach(function(elem) {
out.push(elem * elem);
});
out //[1, 4, 9]
方法二：//看起來更加專業
var out = [];
[1, 2, 3].forEach(function(elem) {
this.push(elem * elem);
}, out);
out // [1, 4, 9]
3.過濾數組
filter方法的參數函數可以接受三個參數：當前成員，當前位置和整個數組。
var arr = [1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
arr // [4, 5]
如果是過濾布爾值，常見用法
ar arr = [0, 1, 'a', false];
arr = arr.filter(function(ele){
return !!ele;
});
arr // [1, "a"]
簡寫: //以前沒用過這種寫法
var arr = [0, 1, 'a', false];
arr = arr.filter(Boolean)
arr // [1, "a"]
4.數組鏈式調用
![]()
|
4.對象
|
1.對象的拷貝
如果要拷貝一個對象，需要做到下面兩件事情。
確保拷貝後的對象，與原對象具有同樣的原型。
確保拷貝後的對象，與原對象具有同樣的實例屬性。
下面就是根據上面兩點，實現的對象拷貝函數。
ES5:
function copyObject(orig) {
var copy = Object.create(Object.getPrototypeOf(orig));
copyOwnPropertiesFrom(copy, orig);
return copy;
}
function copyOwnPropertiesFrom(target, source) {
Object
.getOwnPropertyNames(source)
.forEach(function (propKey) {
var desc = Object.getOwnPropertyDescriptor(source, propKey);
Object.defineProperty(target, propKey, desc);
});
return target;
}
另一種更簡單的寫法，是利用 ES2017 才引入標準的Object.getOwnPropertyDescriptors方法。
function copyObject(orig) {
return Object.create(
Object.getPrototypeOf(orig),
Object.getOwnPropertyDescriptors(orig)
);
}
|
後續補充
...
|
