页面循环绑定（变量污染问题）
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("呵")); //
console.log(s.lastIndexOf("呵")); // // 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]