事件补充；对象操作；字符串类型操作；数组操作；数字类型操作

Posted 2021-02-05 wrqysrt

1.事件绑定函数

var  a=document.querySelector(‘‘)

a.onclick=function h()

先有函数

a.onclick=function h绑定地址

完成事件的绑定后, 绑定的函数由系统来调用, 系统在用户触发事件时来调用
box.onclick = function () {
    alert(this.innerText)

循环绑定的变量污染
for （var i ;i<6;i++）
{a[i].onclick=function h()}
处理办法

for （var i ;i<6;i++） a[i].ad=i
{a[i].onclick=function h()}

/ 循环绑定时. i分别是0,1,2,3, 也就给每一个li进行了点击事件的绑定
lis[i].onclick = function () {
// 在事件绑定时,没有执行事件内部的逻辑体, 在绑定结束后, 激活事件时, 才会执行
// 循环结束后, i值定格在4, 索引在激活事件执行功能时,拿到的i的值全部是4
// 需求1: 打印li的索引
// console.log(i)
// 解决:每一个li都有index属性,取出自己(this)的索引
console.log(this.index)
// 需求2: 打印自身内容
// console.log(lis[i].innerText)
// 解决: this就能唯一指向当前激活事件的那个li对象
console.log(this.innerText)

对象操作
a.

 创建一个对象

// 了解: 面向对象js编程
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.work = function () {
        console.log(this.name + "在工作");
    }
}

var p1 = new Person("egon", 79);
var p2 = new Person("kevin", 78);
var p3 = new Person("jerry", 3);
console.log(p1.name);
console.log(p2["age"]);
p3.work();


var obj = {
    name1: "egon",
    name2: "tank",
    age: 79
}

for (var i = 1; i <=2; i++) {
    console.log(obj["na" + "me" + i])
}

// 对象的key(属性名)就是字符串类型


// 作为字典来使用  *****
var dict = {
    a: "AAA",
    b: "BBB"
}
dict.a

增  dict.a=
删  delete dict.a
改  dict.a=


数字类型

Math .max,min ,random(),floor 向下取整 abs 绝对值

[min, max]
// 公式: parseInt(Math.random() * (max - min + 1)) + min

字符串
.indexof（‘’）
.lastindexof（‘’） 找到最 后一个索引   没有取-1
 .charAt()相对于[]索引取值 
.replace（‘’  ‘’） 后者替换前者
var b=a.slice   （n,m）

从索引n开始截取到索引m之前  形成新字符串

var arr = s.split("c");
console.log(arr)
切分

数组

/ 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);  // [email protected]@[email protected]@1

    // 5.过滤器 (保留符合条件的结果)
    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;
    }
    */

</script>
<script>
    console.log("-----------------------");
    var a = [4, 3, 5, 1, 2];

    a.push(6);
    console.log(a);
    a.unshift(0);
    console.log(a);

    var res = a.pop();
    console.log(a, res);
    res = a.shift();
    console.log(a, res);


    // 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]