07-JavaScript对象

马铃薯1 / 2024-03-21 / 原文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-对象-Array</title>
</head>
<body>
<script>
    // 第一种方法，定义数组
    var arr = new Array(1,2,3,4);

    // 第二种方法，定义数组
    var arr2 = [1,2,3,4];

    console.log("arr:",arr);
    console.log("arr2:",arr2);

    // 数组遍历
    console.log("================第一种数组遍历================");
    for(let i = 0; i < arr.length; i++){
        console.log(arr[i]);
    }

    // foreach遍历
    console.log("================第二种数组遍历================");
    arr.forEach(function(item){
        console.log(item);
    });

    // 箭头函数遍历，ES6之后的箭头函数，简化了函数的定义
    console.log("================第三种数组遍历================");
    arr.forEach((item) => {
        console.log(item);
    });
   

    // 添加元素
    arr.push(5);
    console.log("添加后的arr:",arr);

    // 删除元素
    arr.pop();
    console.log("删除后的arr:",arr);

    // 修改元素
    arr[0] = 0;
    console.log("修改后的arr:",arr);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-对象-String</title>
</head>
<body>
<script>
    // 第一种方法，定义字符串
    var str = new String("hello world");

    // 第二种方法，定义字符串
    var str2 = "hello world";

    console.log("str:",str);
    console.log("str2:",str2);

    // charAt() 获取指定位置的字符
    console.log("charAt(0):",str.charAt(0));

    // indexOf() 获取指定字符的位置
    console.log("indexOf('o'):",str.indexOf('o'));

    // trim() 去掉字符串两端的空格
    var str3 = "  hello world  ";
    console.log("str3:",str3);
    console.log("str3.trim():",str3.trim());

    // toUpperCase() 转换为大写
    console.log("toUpperCase():",str.toUpperCase());

    // toLowerCase() 转换为小写
    console.log("toLowerCase():",str.toLowerCase());

    // split() 字符串分割
    var str4 = "hello,world";
    console.log("str4:",str4);
    var list = str4.split(',');
    console.log("str4.split(','):",list);

    // substring() 截取字符串，含头不含尾
    console.log("substring(0,5):",str.substring(0,5));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>JS-对象-JSON</title>
</head>
<body>
<script>
    // JavaScript对象的定义
    var user = {
        name: "马铃薯",
        age: 25,
        gender: "male",
        eat: function () {
            console.log("吃饭");
        }
    };

    // JavaScript对象的访问
    console.log("user:",user);
    console.log("user.name:",user.name);
    // 调用JavaScript对象中的方法
    user.eat();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>JS-对象-JSON</title>
</head>
<body>
<script>
    // JSON对象(JSON字符串)的定义
    var json = '{"name":"马铃薯","age":25,"gender":"male"}';

    // JSON.parse() 方法,用于将一个 JSON字符串 转换为 JavaScript对象
    var jsObj = JSON.parse(json);
    console.log("jsObj:",jsObj);

    // JSON.stringify() 方法,用于将 JavaScript对象 转换为 JSON字符串
    var jsonStr = JSON.stringify(jsObj);
    console.log("jsonStr:",jsonStr);

</script>
</body>
</html>