js 笔记

js 学习笔记

json 遍历的方法

json 采用 for...in...进行遍历，和数组的遍历方式不同。如下：

<script>
    var myJson = {
        "name": "xx",
        "aaa": 111,
        "bbb": 222,
    };

    //json遍历的方法：for...in...
    for (var key in myJson) {
        console.log(key); //获取 键
        console.log(myJson[key]); //获取 值（第二种属性绑定和获取值的方法）
    }
</script>

js对象遍历的方法

json 采用 for...in...进行遍历，和数组的遍历方式不同。如下：

<script>
    const obj = {
        name: 'name',
        age: 28,
        gender: '男',
        sayHi: function () {
            console.log(this.name);
        },
    };

    // 遍历对象中的属性
    for (const key in obj) {
        console.log('属性名:' + key);
        console.log('属性值:' + obj[key]); // 注意，因为这里的属性名 key 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
    }
</script>

深拷贝和浅拷贝

浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。
深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。

    // 浅拷贝
    Object.assign(obj2, obj1);

    // 深拷贝 重新复制到新的内存空间
    let obj1 = {
        name: 'demo',
    };
    let obj2 = {};
    obj2["name"] = obj1.name
    console.log(obj2);
    obj1.name = 'github';
    console.log(obj2);

正则


    // 匹配模式 `i` 忽略大小写。这里的 i 指的是 ignore。
    // 匹配模式 `g` 全局匹配模式。这里的 g 指的是 global。
    // 如果在正则表达式中同时使用`^`和`$`符号，则要求字符串必须完全符合正则表达式。
    
	var 变量 = /正则表达式/;  // 注意，这个语法里没有引号

	var 变量 = /正则表达式/匹配模式;  // 注意，这个语法里没有引号

DOM事件

事件传播的三个阶段是：事件捕获、事件冒泡和目标。

事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。

addEventListener可以捕获事件：

    box1.addEventListener("click", function () {
        alert("捕获 box3");
    }, true);

上面的方法中，参数为true，代表事件在捕获阶段执行。

重点：捕获阶段，事件依次传递的顺序是：window –> document –> html–> body –> 父元素、子元素、目标元素。

事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

    //事件冒泡
    box3.onclick = function () {
        alert("child");
    }

    box2.onclick = function () {
        alert("father");
    }

    box1.onclick = function () {
        alert("grandfather");
    }

    document.onclick = function () {
        alert("body");
    }

阻止冒泡的方法

w3c的方法：（火狐、谷歌、IE11）

    event.stopPropagation();

定时器的常见方法

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）清除定时器
定时器的返回值是作为这个定时器的唯一标识，可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是参数1，那么clearInterval(参数1)就可以清除定时器,setTimeout()的道理是一样的。

JSON 对象

1、js对象(数组) –> json对象(数组)：

	JSON.stringify(obj/arr)

2、json对象(数组) –> js对象(数组)：

	JSON.parse(json)

给左边的变量自定义命名

对象的结构赋值里，左边的变量名一定要跟右边的属性名保持一致么？答案是不一定。我们可以单独给左边的变量自定义命名。

举例如下：

const person = { name: 'dd', age: 28 };
let { name: myName, age: myAge } = person; // 对象的结构赋值

console.log(myName); // 打印结果：dd
console.log(myAge); // 打印结果：28

console.log(name); // 打印报错：Uncaught ReferenceError: name is not defined
console.log(age); // 打印报错：Uncaught ReferenceError: age is not defined

上方的第 2 行代码中

等号左边的属性名 name、age 是对应等号右边的属性名。
等号左边的 myName、myAge 是左边自定义的变量名。

Set 数据结构

ES6 提供了新的数据结构 Set。Set 类似于数组，但成员的值都是唯一的，没有重复的值。

Set 的应用有很多。比如，在 H5 页面的搜索功能里，用户可能会多次搜索重复的关键字；但是在数据存储上，不需要存储重复的关键字。此时，我们就可以用 Set 来存储用户的搜索记录，Set 内部会自动判断值是否重复，如果重复，则不会进行存储，十分方便。

生成 Set 数据结构

Set 本身就是一个构造函数，可通过 new Set() 生成一个 Set 的实例。

const set1 = new Set([1,2,2]);
console.log(set1.size); // 打印结果：2

async/await

async/await 相比原来的Promise的优势在于处理 then 链，不必把回调嵌套在then中，只要await 即可，如

    function sing() {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve(`来一首好听的歌吧~~~`);
            }, 1000);
        });
    }
    async function demo() {
        try {
            const s = await sing();
            console.log(s) // 来一首好听的歌吧~~~
        } catch (e) {
            console.log(e)
        }
    }
    demo();