《JavaScript 学习笔记 之 日常练习案例》

---

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;
}