目录
JavaScript 学习笔记
日常练习案例
Number.prototype.toString() 的使用
进制的转换,默认 十进制 ----> 10
createDocumentFragment 虚拟节点对象的使用
document.createDocumentFragment() // 虚拟节点 --- 充当文档占位符
VConsole 的使用
todo
字符串的替换
/**
* 正则表达式
* 非贪婪模式 .+? 尽可能少的匹配结果
* 贪婪模式:.+ 尽可能多的匹配结果
* 字符串
* 替换 : str.replace(regexp|substr, newSubStr|function) String.prototype.replace()方法返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数,当是callback 回调函数的时候,有两个参数(分别是匹配的完整结果和pattern)。如果pattern是字符串,则仅替换第一个匹配项; 原字符串不会改变
*/
// function demo(string) {
// let regx = /\@(.+?)\@/g;
// return string.replace(regx, function (_, g) {
/**
callback 回调函数的参数:
match 匹配的子串
p1, p2, ...该参数代表正则表达式中的分组序号,eg: p1 代表 第一个分组,以此类推
*/
// console.log(_, g)
// return ' ' + _ + ' ';
// }).split(' ').filter(item => item);
// }
function demo(string) {
let regx = /\@(.+?)\@/g;
return string.replace(regx, function (_, g) {
return ' ' + _ + ' ';
}).split(' ')
}
console.log("113@a.b@123cdasd@c.d@wee@k.l@123", demo("113@a.b@123cdasd@c.d@wee@k.l@123"))
查看测试结果
字符串的切割
/**
* 字符串切割练习
* 输入字符串
* 返回值:数组
*
*/
function customStrSplit() {
var val = [],
targetStr,
operations
if (arguments.length != 0) {
targetStr = arguments[0]
operations = arguments[1] || ''
if (typeof targetStr === 'string') {
val = targetStr.split(operations)
}
}
return val
}
function customStrSplit2() {
var val = [],
targetStr,
operations
if (arguments.length != 0) {
targetStr = arguments[0]
operations = arguments[1] || ''
if (typeof targetStr === 'string') {
val = targetStr.split(operations)
}
var num = 0
for (let item of val) {
if (num % 2 != 0) {
val[num] = operations + item + operations
}
num++
}
}
return val
}
console.log('113@a.b@123cdasd@c.d@wee@k.l@123', customStrSplit2("113@a.b@123cdasd@c.d@wee@k.l@123", "@"))
查看测试结果
void 0
function Toast(options) {
if (options === void 0) { // 用来替代 arguments.length 的判断
options = {}; // 没有入参,设置默认值
}
String类型的方法兼容
/**
* String原型的 trim 方法兼容性处理 eg: IE7/8
* 功能:去除首尾空格
*
*/
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "")
}
}
console.log(String.prototype.trim.call(" hello world "))
字符串操作
// 'abcEFG' 重新排序 ---> 规则是 把大写字母放前面,小写字母放后面
// realization
/**
explain:
operationStr 操作字符串
应用了: String.split() 切割字符串返回数组、
Array.join() 将数组中的元素以某种操作符连接起来、
正则表达式的使用
*/
function operationStr(str)
{
return str.split(/[a-z]/g).join('') + str.split(/[A-Z]/g).join('')
}
// Test
var str = 'abcEFG', // expect output: 'EFGabc'
result = operationStr(str)
console.log(result) // output: 'EFGabc'
查看测试结果
Boolean 类型学习练习
/**
explain:
test 自定义变量名称
Boolean类型
new Boolean() 实例化,默认 返回 false
document 文档
document.write() 向页面打印信息,会覆盖页面原有的内容
document.write("<br />") 向页面输出一个换行
*/
var test
test = new Boolean()
document.write(test)
document.write("<br />") // output: false
test = new Boolean(null)
document.write(test)
document.write("<br />") // output: false
test = new Boolean('') // '' 或 ""
document.write(test)
document.write("<br />") // output: false
test = new Boolean(undefined)
document.write(test)
document.write("<br />") // output: false
test = new Boolean(NaN)
document.write(test)
document.write("<br />") // output: false
test = new Boolean(0)
document.write(test)
document.write("<br />") // output: false
test = new Boolean(false)
document.write(test)
document.write("<br />") // output: false
test = new Boolean(true)
document.write(test)
document.write("<br />") // output: true
查看测试结果
动画帧
/**
explain:
for( ; ; ) { ... } for循环
let 具有块级作用域
requestAnimationFrame(() => console.log(...)) HTML5 API
*/
for (let i = 0; i < 3; ++i) {
requestAnimationFrame(() => console.log(i))
}
// expected outputs:
0
1
2
查看测试结果
函数、闭包应用
函数入参定义默认值
function (a = []) {}
// alert 弹窗4次 helloworld ,每次间隔3秒
/*
函数 、 箭头函数的使用
延时器的使用
*/
function repeat(func, times, wait) {
return (args) => {
for (let i = 1; i <= times; ++i) {
setTimeout(() => {
func(args)
}, i * wait)
}
}
}
const repeatFunc = repeat(alert, 4, 3000)
repeatFunc('helloworld')
查看测试结果
键盘事件
/*
取消默认事件,按下以下键
onkeydown 键盘按下事件
event 事件对象
keyCode 键盘码
*/
document.onkeydown = function (event) {
if ((event.keyCode == 112) || //屏蔽 F1
(event.keyCode == 113) || //屏蔽 F2
(event.keyCode == 114) || //屏蔽 F3
(event.keyCode == 115) || //屏蔽 F4
// (event.keyCode == 116) || //屏蔽 F5
(event.keyCode == 117) || //屏蔽 F6
(event.keyCode == 118) || //屏蔽 F7
(event.keyCode == 119) || //屏蔽 F8
(event.keyCode == 120) || //屏蔽 F9
(event.keyCode == 121) || //屏蔽 F10
(event.keyCode == 122) || //屏蔽 F11
(event.keyCode == 123)) //屏蔽 F12
{
return false;
}
}
函数的应用
函数Function、日期Date
/*
定义一个服务变量 serv
实例化 new Date()
时间显示格式化
*/
var d = new Date()
serv.showtime=function(d) {
var hours = d.getHours()
var minutes = d.getMinutes()
var timeValue = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+((hours >= 12)?"下午":"上午")
timeValue += ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
return timeValue
}
窗口大小变化事件
/**
窗口重置, 触发事件
窗口可视区域:window.innerHeight
*/
window.onresize = function () {
if ((window.outerHeight - window.innerHeight) > 100)
//判断当前窗口内页高度和窗口高度
// code
}
Object.values 方法的兼容性实现
当浏览器不支持values()方法,使用原生js模拟实现该方法
IE 不支持该方法
/**
*/
if (!Object.values) Object.values = function(obj) {
if (obj !== Object(obj))
throw new TypeError('Object.values called on a non-object');
var val=[],key;
for (key in obj) {
if (Object.prototype.hasOwnProperty.call(obj,key))
val.push(obj[key])
}
return val;
}