页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

页面循环绑定（变量污染问题）

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]