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