JavaScript学习笔记

1. 重新声明 JavaScript 变量，该变量的值不会丢失

var name="小明";
var name;
//name的值依然为小明

2. 对象的创建方式

//对象字面量方式
var person = {
    name: "小明",
    sex: "男",
    age: 18
};

//object方式
var person = new Object();
person.name = "小明";
person.sex = "男";
person.age = 18;

//构造函数方式
function Person(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}

var xm = new Person("小明", "男", 18);
var xh = new Person("小红", "女", 18);

new 和不 new的区别(构造函数和普通函数的区别)

1. 如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象
2. 如果不 new 的话函数内的 this 指向的是 window

3. 对象属性的寻址方式

var person = {
    name: "小明",
    sex: "男",
    age: 18,
    sing: function(msg) {
        console.log(msg);
        return msg;
    },
    dance: function(msg) {
        console.log(msg);
        return msg;
    }
};

//sing作为对象person的属性；sing()作为对象person的方法
var name=person.name;
var sex=person["sex"]
var sing=person.sing;//返回方法的定义 function(msg) {console.log(msg);return msg;}
var dance=person.dance();//正常的调用对象的方法

4. 为对象添加属性和方法

function Person(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}

var xm = new Person("小明", "男", 18);

xm.address = "北京市"

xm.sing = function() {
    console.log("sing");
}

xm.sing();

console.log(xm);

//输出
sing
Person {
    name: '小明',
    sex: '男',
    age: 18,
    address: '北京市',
    sing: [Function(anonymous)]
}

5. 对构造函数添加属性和方法

通常使用构造器（函数体）定义属性，使用原型对象（prototype）定义方法。如此，构造器只包含属性定义，而方法则分装在不同的代码块，使代码更具可读性。

//构造函数名.prototype.新属性或者新方法
function Person(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}

var xm = new Person("小明", "男", 18);

console.log(xm);

Person.prototype.address = "上海市"

Person.prototype.sing = function() {
    console.log("sing");
}

var xh = new Person("小红", "女", 18);

console.log(xh.address);

xh.sing();

6. JavaScript的数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（ES6 引入的新原始数据类型，表示独一无二的值）
引用数据类型：对象(Object)、数组(Array)、函数(Function)

5. JavaScript 变量的生存期

1. 局部变量：在函数中通过var声明的变量。局部变量会在函数运行以后被删除
2. 全局变量：在函数外通过var声明的变量。全局变量会在页面关闭后被删除
3. 没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用
4. 全局变量默认为 window 的属性
5. 全局变量，或者函数，可以覆盖 window 对象的变量或者函数

7. 函数的创建方式

//匿名函数
function() {
    //do sth
}

//有名函数
function name() {
    //do sth
}

//有参函数
function name(arg1, arg2) {
    //do sth
}

//返回函数
function name(arg1, arg2) {
    //do sth
    return arg1 + arg2;
}

//退出函数
function name(arg1, arg2) {
    //do sth
    return;
}

//箭头函数
var name = (arg1, arg2) => {
    //do sth
    return arg1 + arg2;
}

//带有默认值的普通函数
function name(arg1 = 1, arg2 = 2) {
    //do sth
}

//带有默认值的箭头函数
var name = (arg1 = 1, arg2 = 2) => {
    //do sth
    return arg1 + arg2;
}

//可以将函数赋值给变量，通过变量来调用函数
var test = function name() {
    //do sth
}

console.log(test());

//函数自调用（有参）
(function name(arg1, arg2) {
    //do sth
    console.log(arg1 + arg2);
})(2, 3)

//函数自调用（无参）
(function name() {
    //do sth
})()

//函数自调用（匿名）
(function() {
    //do sth
})()

8. 使用typeof 判断类型

1. 数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object
2. undefined：表示变量声明过但并未赋过值,是所有没有赋值变量的默认值，自动赋值。
3. null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null
4. 垃圾回收：引擎会定时自动调用垃圾回收期。一个对象不再被任何变量引用时，才会被释放。变量的生命周期，从声明开始，到使用完结束（不再使用的时候）

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

9. 声明提升

1. 函数声明和变量声明总是会被解释器悄悄地被"提升"到运行环境的最顶部，即可以先使用再声明。
2. 函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。

10. ==与===区别

==：比较值相等
===：比较值和类型都相等

11. JavaScript中的var、let及const的区别

1. 使用var关键字声明的全局作用域变量属于window对象。
2. 使用let关键字声明的全局作用域变量不属于window对象。
3. 使用var关键字声明的变量在任何地方都可以修改。
4. 在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。
5. 在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。
6. let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。
7. 在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。
8. 在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量
9. const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:
10. var关键字定义的变量可以先使用后声明，即可以声明提升。
11. let关键字定义的变量需要先声明再使用，即不可以声明提升。
12. const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改，即不可以声明提升。

12. JSON的使用

//将 JSON 字符串转换为 JavaScript 对象
var obj = JSON.parse(text);
//将 JavaScript 对象转换为 JSON 字符串
var json = JSON.stringify(obj);

13. 数组遍历的几种方式

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, ];

//1.普通for循环
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

//2.优化版for循环
for (let i = 0, len = array.length; i < len; i++) {
    console.log(array[i]);
}

//3.比较der的for循环
for (let i = 0; array[i] != null; i++) {
    console.log(array[i]);
}

//4.foreach循环
array.forEach(function(e) {
    console.log(e);
})

array.forEach(e => {
    console.log(e);
})

array.forEach(function(e, index, arr) {
    console.log(e + "," + index + "," + arr);
})

//5.foreach变种，为伪数组提供遍历功能
Array.prototype.forEach.call(array, function(e) {
    console.log(e);
})

//6.for...in循环（会遍历数组的额外添加的属性）
for (let i in array) {
    console.log(array[i]);
}

//7.for...of循环（es6新增）
for (let e of array) {
    console.log(e);
}

//8.map循环
array.map(function(e) {
    console.log(e);
})

array.map(e => {
    console.log(e);
})

14. Map及Set遍历

var set = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9]);

for (let e of set) {
    console.log(e);
}

set.forEach(function(e1, e2, Set) {
    console.log(e1 + "," + e2 + "," + set);
})

var map = new Map();

map.set("key1", "value1");
map.set("key2", "value2");
map.set("key3", "value3");

for (let e of map) {
    console.log(e);
    console.log(e[0] + "=" + e[1]);
}

map.forEach(function(value, key, map) {
    console.log(value);
    console.log(key);
    console.log(map);
})

map.forEach((value, key, map) => {
    console.log(value);
    console.log(key);
    console.log(map);
})

14. JavaScript遍历建议

1. 用for循环遍历数组
2. 用for-in遍历对象
3. 用for-of遍历类数组对象（ES6）
4. 用Object.keys()获取对象属性名的集合

for…of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩

---

15. JavaScript XMLHttpRequest 对象

//Get请求
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 20) {
        console.log(xhr.responseText);
    }
}

xhr.open("GET", "url", true);
xhr.send();

//POST请求
var person = {
    name: "小明",
    sex: "男",
    age: 18
};

var json = JSON.stringify(person);

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 20) {
        console.log(xhr.responseText);
    }
}

xhr.open("POST", "url", true);
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(json);

//兼容IE5 和 IE6
var xhr = null;

if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xhr != null) {
    //do sth
}

xhr.readyState的几种状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

16. JQuery AJAX

$.ajax({
    async: false,
    type: "POST",
    url: "url",
    data: {},
    dataType: "json",
    error: function(err) {
        console.log(err);
    },
    success: function(result) {
        console.log(result);
    }
})

$.get("url", function(result, status) {
    console.log(status);
    console.log(result);
})

$.post("url", data, function(result, status) {
    console.log(status);
    console.log(result);
})

17. 遍历树

//根据条件查找并返回合适的节点
let tree = [{
        "menuId": 1,
        "parentId": null,
        "icon": "el-icon-user",
        "title": "用户管理",
        "path": "/user",
        "nodeList": null
    },
    {
        "menuId": 2,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "角色管理",
        "path": "/role",
        "nodeList": null
    },
    {
        "menuId": 3,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "权限管理",
        "path": "/permission",
        "nodeList": null
    },
    {
        "menuId": 4,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "菜单管理",
        "path": "/menu",
        "nodeList": null
    },
    {
        "menuId": 5,
        "parentId": null,
        "icon": "el-icon-setting",
        "title": "系统设置",
        "path": "/setting",
        "nodeList": [{
            "menuId": 6,
            "parentId": 5,
            "icon": "el-icon-menu",
            "title": "数据库表",
            "path": "/table",
            "nodeList": null
        }]
    },
    {
        "menuId": 7,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "系统首页",
        "path": "/dashboard",
        "nodeList": null
    }
]

let find = (menuList, path) => {
    for (let x = 0; x < menuList.length; x++) {

        if (menuList[x].path === path) {
            return menuList[x];
        }

        let nodeList = menuList[x].nodeList;

        if (nodeList) {
            let menu = find(nodeList, path);

            if (menu) {
                return menu;
            }
        }
    }
}

console.log(find(tree, "/dashboard"));

//根据条件查找并返回合适节点的所有路径
let tree = [{
        "menuId": 1,
        "parentId": null,
        "icon": "el-icon-user",
        "title": "用户管理",
        "path": "/user",
        "nodeList": null
    },
    {
        "menuId": 2,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "角色管理",
        "path": "/role",
        "nodeList": null
    },
    {
        "menuId": 3,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "权限管理",
        "path": "/permission",
        "nodeList": null
    },
    {
        "menuId": 4,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "菜单管理",
        "path": "/menu",
        "nodeList": null
    },
    {
        "menuId": 5,
        "parentId": null,
        "icon": "el-icon-setting",
        "title": "系统设置",
        "path": "/setting",
        "nodeList": [{
            "menuId": 6,
            "parentId": 5,
            "icon": "el-icon-menu",
            "title": "数据库表",
            "path": "/table",
            "nodeList": null
        }]
    },
    {
        "menuId": 7,
        "parentId": null,
        "icon": "el-icon-menu",
        "title": "系统首页",
        "path": "/dashboard",
        "nodeList": null
    }
]

let tabList = [];

let find = (menuList, path) => {

    for (let x = 0; x < menuList.length; x++) {

        tabList.push(menuList[x]);

        if (menuList[x].path === path) {
            return menuList[x];
        }

        let nodeList = menuList[x].nodeList;

        if (nodeList) {
            let menu = find(nodeList, path);

            if (menu) {
                return menu;
            }
        }

        tabList = [];
    }
}

console.log(find(tree, "/dashboard"));

console.log(tabList);

部分笔记参考菜鸟教程