页面循环绑定（变量污染问题）
var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis.length ; i++ ) { // 绑定事件时，没有执行事件内部的逻辑体 lis[i].onclick = function () { console.log(i) # 变量污染导致 i 一直为 4 console.log( lis[i].innerText ) } }
解决变量污染问题
for ( var i = 0 ; i < 4 ; i++ ) { lis[i].index = i; //为对象设置一个属性用来保存索引，这样解决了变量污染问题 lis[i].onclick = function () { console.log(this.index) } }
js面向对象编程
function Person( name,age ) { this.name = name; this.age = age; } var p1 = new Person("egon",79) var p2 = new Person("lxx",78) console.log(p1.name) // 以对象的形式编程 console.log(p1["name"]) // 以字典的形式
js对象属性的增删改查
var dic { a:"aaa", b;"bbb", } 查 console.log(dic.a) 改 dict.a = "AAAAA" 有这个属性改掉 增 dict.c = "CCCC" 没有这个属性增加属性 删 delete dict.b
js数学类操作
abs(x)：返回 x 的绝对值 ceil(x)：向上取整 floor(x)：向下取整 max(...n)：求最大值 min(...n)：求最小值 pow(x,y)：返回 x 的 y 次幂 random()：返回 0 ~ 1 之间的随机数 [0,1)
随机数与随机区间
Math.abs(-10) 10 Math.random() [0,1) 产生随机区间 [ mim,max ] parseInt( Math.random() * (max - min + 1) + min )
封装随机区间:
function randoNam(min,max) {
parseInt( Math.random() * (max - min + 1) + min )
}
js字符串操作
chartAt(n)：指定索引字符，同[n] concat(str)：将目标字符串拼接到指定字符串之后 indexOf(str)：指定字符串第一次出现的位置 lastIndexOf(str)：指定字符串最一次出现的位置 match(re)：匹配指定正则，结果为数组(可全文匹配) replace(re, str)：将正则匹配到的字符串替换为指定字符串 search(re)：匹配指定正则，结果为匹配的索引，反之-1 substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后) substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后) slice(n, m)：同substring(n, m) split(re)：以指定正则将字符串拆分为数组 toUpperCase()：转换为大写 toLowerCase()：转换为小写 trim()：去除首尾空白字符
// 1.指定索引下的字符 var s = "abcdef123456呵呵哈哈"; console.log(s.charAt(3)); // 2.判断是否存在: 呵呵是否在字符串中 // -1代表不存在, 反正就是存在(的索引) console.log(s.indexOf("呵")); // 12 console.log(s.lastIndexOf("呵")); // 13 // 3.替换 var newS = s.replace("abc", "ABC"); console.log(s); console.log(newS); // 总结: 字符串为不可变类型, 如果某操作要改变字符串, 该操作一定拥有返回值 // 4.裁剪 slice(n, m) 从索引n开始截取到索引m之前 newS = s.slice(0, 3); console.log(newS); // 5.拆分数组 var ss = "123 456 abc def"; var arr = ss.split(" "); console.log(arr)
js数组操作
indexOf(ele)：指定元素第一次出现的位置 lastIndexOf(ele)：指定元素最一次出现的位置 reverse()：反转数组 join(str)：以指定字符串连接成字符串 sort(): 排序 filter(function(value, index){ return true | false})：过滤器 增删改查 push(ele)：从尾加 unshift(ele)：从头加 pop()：从尾删 shift()：从头删 splice(begin, length, ...eles)：完成增删改 // begin开始索引 // length长度 // 新元素们(可以省略)
var arr = [3, 5, 1, 2, 4]; console.log(arr); // [3, 5, 1, 2, 4] // 1.反转 arr.reverse(); console.log(arr); // [4, 2, 1, 5, 3] // 2.排序 arr.sort(); console.log(arr); // [1, 2, 3, 4, 5] console.log(arr.reverse()); // [5, 4, 3, 2, 1] // 3.判断元素是否存在 (不等于-1就是存在) console.log(arr.indexOf(5)); // 4.拼接成字符串 var ss = arr.join("@"); console.log(ss); // 5@4@3@2@1
过滤器（回调函数）
var newArr = arr.filter(function (ele) { // 回调函数的回调次数有数组的个数决定 // filter回调了三个参数: ele, index, sourcerr // 偶数 if (ele % 2 == 0) { // 满足过滤条件 return true; } // 不满足过滤条件 return false; }); // 满足过滤条件的就会添加到新数组中保留 console.log(newArr) // [4, 2] 原理 arr.filter(fn) { var newArr = []; for (var i = 0; i < this.length; i++) { var res = fn(this[i], i, this); if (res == true) { newArr.push(res) } } return newArr; }
数组的增删改查
// 查 // arr[index] // 改 // arr[index] = newDate; // 增 // 从尾加: push() // 从头加: unshift() // 删 // pop()：从尾删 // shift()：从头删 // splice(begin, length, ...eles); // begin开始的索引 // length操作的长度 // 替换为的新元素们(可以省略) // 增 // 从索引3之前操作0位,替换为10 => 在索引3插入10 a.splice(3, 0, 10); // [4, 3, 5, 10, 1, 2] console.log(a); // 在索引0之前操作0位,替换为1,2 => 在首位添加1和2 a.splice(0, 0, 1, 2); console.log(a); // [1, 2, 4, 3, 5, 10, 1, 2] // 改 // 在索引末尾之前操作1位,替换为20 => 在末位修改为20 a.splice(a.length - 1, 1, 20); // [1, 2, 4, 3, 5, 10, 1, 20] console.log(a); // [1, 2, 4, 3, 5, 10, 1, 20] // 删 a.splice(2, 3); console.log(a); // [1, 2, 10, 1, 20]