JS基础知识

1.数据类型及其访问方式

数据类型分为基本类型和引用数据类型

1.1 基本类型访问及其判断

<script>
    // 1. 值类型（基本类型）
    // 1.1 数字类型 Number
    let num = 10;
    // 1.2 字符串类型 String
    let str = 'hello';
    // 1.3 布尔类型 Boolean
    let doIt = true;
    // 1.4 对空类型 Null
    let name = null;
    // 1.5 未定义 undefined
    let age = undefined;
    // 访问
    console.log(num);
    console.log(str);
    console.log(doIt);
    console.log(name);
    console.log(age);
    // 类型判断 typeof
    console.log(typeof num,str,doIt,name,age);
</script>

1.2 引用数据类型及其判断

引用数据类型分为：数组、对象、函数

• 数组

// 2. 引用数据类型（在JS中它们也都属于对象）
    // 2.1 数组
    let arr = ['老大','老二','老三','老四','老五'];
    // 2.1.1 访问数组
    console.log(arr);
    // 2.1.2 访问数组中的元素
    console.log(arr[2]);
    // 2.1.3 查看数组的长度
    console.log(arr.length);
    // 2.1.4 判断类型 (typeof 不能判断引用数据类型的具体类型，它判断出的都是object对象)
    console.log(typeof arr);
    // 2.1.5 判断数组类型时使用 Array.isArray()
    console.log(Array.isArray(arr));
    // 2.1.6 遍历数组
    // 方式一：for()
    for (let i=0;i<arr.length;i++) { console.log(arr[i]); }
    // 方式二：forEach()
    arr.forEach (function (item,index) { console.log('index: ',index,'item: ',item); });
    // 使用箭头函数
    arr.forEach((item,index) => console.log( 'index: ',index,'item: ',item ));
    // 方式三：for...of...
    for (let item of arr) { console.log(item); }
    // 2.1.7 获取数组部分元素
    console.log(arr.slice(1,3));
    // 2.1.8 splice()：实现对数组的新增，删除，替换
    // 删除（从第一个元素开始删除，删除3个，最终数组只剩2个元素了）
    arr.splice(1,3);
    console.log(arr);
    // 新增（从第二个元素开始，删除0个，新增2个）
    arr.splice(2,0,'老六','老七');
    console.log(arr);
    // 替换（从第二个元素开始删除2个，再新增2个将删除的元素替换掉，相当于更新了数组元素）
    arr.splice(2,2,'老八','老九');
    console.log(arr);

• 对象

// 2.2 对象
    let obj = {
        name : 'Alice',
        age : 20,
        email : 'alice@php.cn',
        isMarried : false,
        hobby : ['fish','book','film'],
        // 不规则的命名必须加上引号
        'her time' : {
            morning : 'sport',
            afternoon : 'eating',
            evening : 'study',
        },
    };
    // 访问对象
    console.log(obj);
    // 访问对象，以表格的形式控制台输出
    console.table(obj);
    // 访问对象中的元素,以对象的方式访问，加上.号连接
    console.log(obj.email);
    // 访问对象中的元素,以数组的方式访问
    console.log(obj["isMarried"]);
    // 访问对象中的数组元素
    console.log(obj.hobby[1]);
    console.log(obj["hobby"][1]);
    // 访问对象中的对象元素
    console.log(obj["her time"].evening);
    console.log(obj["her time"]["evening"]);
    // 遍历对象，方式一：for...in...
    for ( let key in obj) {
        console.log('索引:',key,'--->',obj[key]);
    }
    // 遍历对象，方式二：先取到对象中的属性名组成数组，再用forEach遍历属性，传入第二参数即对象
    let keys = Object.keys(obj);
    console.log(keys);
    keys.forEach(function (item) {
        // 访问对象中的属性时以数组的方式，因为有的属性命名可能不规则
        console.log(item,'--->',this[item]);
    },obj)

• 对象转为数组

  // 2.3 对象转换为数组
    let obj2 = {
        0 : 'name',
        1: 'age',
        2 : 'email',
        "3" : 'tel',
        4.1 : 'haha',
        "-5" : 'xixi',
        hello : 'world',
        length : 7,
    };
    // 将对象转换为数组Array.from()
    // 使用此函数，想成功转为真正的数组，对象需要满足两个条件：
    // 1. 对象中的属性名必须是正整数数字类型或字符串型的正整数数字
    // 2. 对象中必须有length属性，指定转换后的数组长度
    let arr1= Array.from(obj2);
    console.log(arr1);
    // 属性名不符合规则的，在转换为数组后，都是undefined

• 函数

 // 2.4 函数
    // 2.4.1 命名函数
    function test1 (x,y) {
        console.log(x+y);
    }
    test1(10,10);
    // 2.4.2 匿名函数
    let test2 = function (x,y) {
        console.log(x*y);
    }
    test2(5,5);
    // 2.4.3 立即调用函数 IIFE ：将函数的声明与调用合二为一了
    // 写法一：
    (function (x,y) {
        console.log('写法一：',x+y);
    })(20,20);
    // 写法二：
    (function (x,y) {
        console.log('写法二：',x+y);
    }(30,30));
    // 写法三：在函数前面加上合法运算符
    +function (x,y) {
        console.log('写法三：',x+y);
    }(40,40);
    ~function (x,y) {
        console.log('写法三：',x+y);
    }(40,40);
    // 用立即调用函数的好处是：不会污染全局对象

2. 流程控制

<script>
    // 流程控制
    // 1. 单分支
    let score = 65;
    if (score>=60) {
        console.log('恭喜你，及格了！');
    }
    // 2. 双分支
    score = 50;
    if (score>=60){
        console.log('恭喜你，及格了！');
    }else {
        console.log('准备回去复读把！');
    }
    // 3. 多分支
    score = 88;
    if (score>=90){
        console.log('成绩非常优秀！');
    }else if (score<90 && score>=80){
        console.log('成绩良好！');
    }else if (score<80 && score>=70){
        console.log('成绩中等！');
    }else if (score<70 && score>=60){
        console.log('刚好及格！');
    }else {
        console.log('准备复读把！');
    }
    // 4. 用switch简化多分支
    score = 77;
    // 当 case 判断的不是单值类型，而是范围的时候，switch 中最好传true
    switch (true) {
        case score>=90 : console.log('成绩非常优秀！');
        break;
        case score<90 && score>=80 : console.log('成绩良好！');
        break;
        case score<80 && score>=70 : console.log('成绩中等！');
        break;
        case score<70 && score>=60 : console.log('刚好及格！');
        break;
        default : console.log('准备复读把！');
    }
</script>

3. 循环

<body>
<table border="1" width="500" height="100">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<script>
    let tds = document.querySelectorAll('table tr td:nth-of-type(2)');
    for (let td of tds) {
        td.style.backgroundColor = 'yellow';
    }
    // 1. for 循环
    let tds1 = document.querySelectorAll('table tr td:nth-of-type(3)');
    for (let i=0;i<tds1.length;i++){
        tds1[i].style.backgroundColor = 'green';
    }
    // 2. while 循环
    let tds2 = document.querySelectorAll('table tr td:first-of-type');
    let i=0;
    while (i<tds2.length){
        tds2[i].style.backgroundColor = 'red';
        i++;
    }
    // 3. do...while 循环
    let tds3 = document.querySelectorAll('table tr td:last-of-type');
    let j=0;
    do{
        tds3[j].style.backgroundColor = 'blue';
        j++
    } while(j<tds3.length);
</script>
</body>

4. JS对象序列化为JSON格式字符串

<script>
    /*
    JSON 重要知识点：
    1. JSON中中能有三种数据类型：简单值类型，对象，数组
    1.1 简单值类型：
        数值：15,99
        字符串：aaa,bbb,name,age
        布尔:true,false
        空值：null
        注意：未定义undefined不支持
    2. JSON 只是长的像JS对象，借用了JS对象字面量的语法规则，但和JS没有关系，它就是字符串，只是样式那样而已
    3. JSON 中不存在方法（函数）
    4. 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
    */
    let obj = {
        name : 'Mike',
        age : 20,
        study : {
            "php" : 90,
            "css" : 88,
            "js" : 92,
        },
        hobby : ['basketball','football','smoke'],
        girl : null,
        isMale : true,
        show : function () {
            return '个人信息';
        },
        isHandsome : undefined,
    };
    let json = JSON.stringify(obj);
    console.log(json);
    // 第二个参数传入数组，对输出的结果进行限制
    json = JSON.stringify(obj,["name","study","hobby"],'\t');
    console.log(json);
    // 第二个参数传入回调函数，可进行动态过滤
    json = JSON.stringify(obj,function (key,value) {
        switch (key) {
            case 'study' : return '你无权限访问学生成绩';
            case 'girl' : return '关你什么事';
            // 这里必须加default才能输出其他未处理的属性
            default : return  value;
        }
    },'\t');
    console.log(json);
    // JSON.stringify(value, replacer , space)语法
    // 第三个参数可传入 \t ，可以将输出结果以制表符形式输出
</script>

这里发现一个问题，当第二个参数是传的数组的时候，原JS对象中的study对象没有输出，但是不传第二个参数或第二个参数是回调时能正常输出：

经过一些资料查看了解到，当第二个参数是数组时，它仅处理具有键值的属性，所以不能处理对象，JSON.stringify()这个函数中三个参数的具体意义如下：

JSON.stringify(value, replacer , space)语法 ：

• value：必需，要转换的JS对象或数组

• replacer：可选，若为数组，仅转换该数组中具有键值的成员，如果这个成员在原对象中本身也是一个对象，那么将不能被转换；若为函数，将会传入此JS对象或数组的键和值，然后根据函数的自定义规则进行返回

• space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。