页面循环绑定(变量污染问题),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]
上一篇:Delphi TRect函数例子


下一篇:简单代码JS随机,数组操作,延时执行