|
前言：
在使用任何一门语言之前的语法结构/函数等之前，都建议先将手册详细看下~~ //有针对性，边看边实践
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)
);
}
|
后续补充
...
|
