JS的数据类型和常用方法

数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 数据类型
        // 1.原始类型
        // 数值类型（number）
        var age = 18;
        // 字符串类型（string）
        var name = 'admin';
        // 布尔类型（bool）
        var flag = true;
        // 类型查看（typeof）
        console.log(typeof age, typeof name, typeof flag);
        // 2.特殊类型
        // 空对象（null）
        var title = null;
        // 未定义（undefined）
        var role = undefined;
        // null和undefined值相等但类型不同
        console.log(typeof title, typeof role);
        // 3.对象（object array function）
        // 数组
        var fruits = ['西瓜', '苹果', '梨', '樱桃', '水蜜桃'];
        // 查看是否是数组
        console.log(Array.isArray(fruits))
        // 遍历数组
        for (i = 0; i < fruits.length; i++) {
            console.log(fruits[i]);
        }
        fruits.forEach(function (value, key) {
            console.log('key:' + key + ',' + 'value:' + value);
        })
        // 获取数组部分元素
        console.log(fruits.slice(0, 2));
        // 删除，插入，新增元素
        console.log(fruits.splice(3, 2));//返回删除的元素
        // 新增
        console.log(fruits.splice(2, 0, '芒果', '哈密瓜'))
        console.log(fruits);
        // 替换
        console.log(fruits.splice(0, 2, '杨桃', '火龙果'));
        console.log(fruits);
        // 对象
        // 对象字面量
        var obj = {
            id: 1,
            name: 'admin',
            arr: [10, 20, 30],
            "my obj": {
                html: 70,
                css: 80,
                php: 90,
            },
        };
        console.log(obj);
        // 访问对象成员
        console.log(obj.name);
        console.log(obj.arr[1]);
        console.log(obj["my obj"].php);
        // 遍历对象
        for (key in obj) {
            console.log(obj[key]);
        }
        // 也可以获取键值数组用forEach遍历对象
        var arr = Object.keys(obj);
        arr.forEach(function (item) {
            console.log(this[item]);
        }, obj);
        // 函数
        // 1.命名函数
        function f1(a, b) {
            console.log(a + b);
        }
        f1(10, 20);
        // 2.匿名函数
        var f2 = function (a, b) {
            console.log(a + b);
        }
        f2(30, 40);
        // 3.立即执行函数(可以避免污染全局)
        (function (a, b) {
            console.log(a + b);
        })(50, 60);
    </script>
</body>
</html>

流程控制

// 流程控制
// 单分支
var age = 18;
if (age <= 22) {
   console.log('人生才刚刚开始呢');
 }
// 双分支
age = 30;
if (age <= 22) {
   console.log('人生才刚刚开始');
} else {
    console.log('好好感受人生的精彩吧');
}
// 多分支
 age = 60;
if (age <= 22) {
  console.log('人生才刚刚开始');
} else if (age > 22 && age <= 50) {
   console.log('好好感受人生的精彩吧');
} else {
   console.log(age + '岁了人生也就这样了');
}
age = 800;
 // switch流程控制(如果case的条件是范围的话，那么switch的条件最好是true，保证进入流程控制中)
switch (true) {
   case (age <= 20):
       console.log('人生才刚刚开始');
    break;
    case (age > 22 && age <= 50):
       console.log('好好感受人生的精彩吧');
    break;
    case (age > 50 && age <= 70):
       console.log('儿孙满堂的幸福啊');
     break;
     default:
       console.log(age + '岁了有此一生我也满足了');
}

循环

// 循环
// 获取li
 var lis = document.querySelectorAll('ul:first-of-type>li');
// for循环
 for (var i = 0; i < lis.length; i++) {
       lis[i].style.backgroundColor = 'lightgreen';
}
        // while循环
var lis1 = document.querySelectorAll('ul:last-of-type>li');
var i = 0;
while (i < lis1.length) {
    lis1[i].style.backgroundColor = 'lightblue';
    i++;
}

JSON

// JSON
// JSON中只有三种类型（简单值，对象，数组）
// 简单值类型（数值，字符串，布尔值，空值，----注意不支持undefined）
var obj = {
    name: "admin",
    age: 20,
    marriage: false,
    course: {
        name: "php",
        grade: 90,
    },
    getName: function () {
        return this.name;
    },
    hobby: undefined,
    toString: function () {
         return "继承属性";
     },
};
// 将js对象转为JSON格式字符串
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 也可传入第二个参数对结果进行静态过滤
var jsonStr1 = JSON.stringify(obj, ["name", "age", "marriage"]);
console.log(jsonStr1);
// 也可以通过回调进行动态过滤
var jsonStr2 = JSON.stringify(obj, function (k, v) {
     switch (k) {
        case 'age':
          return '年龄保密';
        // 可通过返回undefined进行过滤相关成员
        case 'marriage':
          return undefined;
         default:
          return v;
       }
});
console.log(jsonStr2);