JS-day06-1

2201_75449897

已于 2024-07-27 14:00:41 修改

阅读量272

点赞数 2

文章标签： javascript 前端开发语言

于 2024-07-27 13:56:10 首次发布

本文链接：https://blog.csdn.net/2201_75449897/article/details/140734476

版权

01-对象

<!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>
        // 变量
        var num = 10;
        var user = "zhangsan";

        // 数组
        var arr = ["", "", "", ""];
        var arr2 = ["", "男", 20];

        // 对象
        // 属性  方法
        var person = {
            // 无序的相关属性和方法的集合
            // 属性
            name: "",
            sex: "男",
            age: 20,

            // 方法
            // 方法名
            play: function () {
                console.log("植物大战僵尸杂交版 2.2");
            }
        }

        // 访问对象
        // .形式
        // 访问属性
        console.log(person.name);
        console.log(person.age);
        // 访问方法
        person.play();    // arr.push()

        // []形式 []中是字符串
        console.log(person["name"]);
        person["play"]();

        var str = "age";
        console.log(person[str]);
    </script>
</body>

</html>

02-创建对象

<!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.字面量形式
        var person = {
            // 无序的相关属性和方法的集合
            // 属性
            name: "路文龙",
            sex: "男",
            age: 20,

            // 方法
            // 方法名
            play: function () {
                console.log("植物大战僵尸杂交版 2.2");
            }
        }

        console.log(person);

        // 2.new Object() 创建空对象        obj = {}
        var obj = new Object();
        // 给空对象添加属性和方法
        obj.name = "zhangsan";
        obj.age = 20;
        obj["sex"] = "男";
        obj.sayHi = function () {
            console.log("hello");
        }
        console.log(obj);

        // 3.构造函数创建对象
        // 构造函数
        function Person(name,age,sex) {
            // this 这 当前实例化对象
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        // 通过 new 关键字进行实例化
        // person1.name = name
        // person1.age = age 
        // person1.sex = sex 
        var person1 = new Person("zhangsan", 18, "男");
        console.log(person1);
    </script>
</body>

</html>

03-构造函数

<!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>
        function Person(name, age, sex) {
            // this 指向实例化对象
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.eat = function () {
                console.log(this.name + "吃饭");
            }
        }

        // 实例化对象 new
        var person1 = new Person("zhangsan", 20, "男");
        var person2 = new Person("cuihua", 18, "女");

        console.log(person1);
        console.log(person2);

        person1.eat();
        person2.eat();
    </script>
</body>

</html>

04-this指向

<!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.构造函数 this 指向实例化对象
        // 2.普通函数 this 指向 window
        function fun(){
            console.log(this);
        }
        fun();

        // 3.对象中方法 this 指向对象本身
        var obj = {
            name:"abc",
            fun: function(){
                console.log(this);
            }
        }

        obj.fun();
    </script>
</body>
</html>

05-构造函数和普通函数的区别

<!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>
        // 构造函数
        function Person(name, age, sex) {
            // this 指向实例化对象
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.eat = function () {
                console.log(this.name + "吃饭");
            }
        }

        // 普通函数
        function fun(a, b) {
            var sum = a + b;
            return sum;
        }

        // 构造函数: 首字母大写, this 指向实例化对象, 没有 return 返回值, new Person() 构造函数要通过 new 关键字调用

        // 普通函数: 首字母小写, this 指向window, 可以进行 return 返回, fun() 直接调用
    </script>
</body>

</html>

06-new关键字

<!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>
        // new 
        // new Array()//创建数组
        // new Object()
        // new Person()//创建对象

        // 构造函数
        function Person(name, age, sex) {
            // this 指向实例化对象
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.eat = function() {
                console.log(this.name + "吃饭");
            }
        }

        function fun(a, b) {
            return a + b;
        }

        var sum = fun(1, 2);
        var person = new Person();

        // person.name = name;

        // 1. 创建一个新对象；
        // 2. this指向该对象；
        // 3. 执行代码，通过this给新对象添加属性或方法；
        // 4. (隐式)返回对象；
    </script>
</body>

</html>

07-遍历对象

<!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>
        var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];

        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        console.log("---------------------------");

        var obj = {
            name: "张三",
            age: 20,
            sex: "男"
        }

        // 遍历对象  for...in
        for (var key in obj) {
            console.log(key);
            // console.log(obj.key);
            // 注意 key 是字符串
            console.log(obj[key]);
        }
    </script>
</body>

</html>

08-对象分类

<!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.内部对象
        // 1.1本地对象 Number、String、Boolean、Array、Function、Date(日期)、Object、RegExp(正则), 都要使用 new 关键字
        // 1.2内置对象 Math 不需要new关键字

        // 2.宿主对象 Window Document
    </script>
</body>

</html>

09-数组对象

<!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>
        var arr = new Array(1, 2, 3, 4, 5);
        console.log(arr);
    </script>
</body>

</html>

10-字符串对象

<!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.基本数据类型
        // string number boolean undefined null

        // 2.引用数据类型
        // object function array

        // 基本包装类型

        var str = new String("abc");
        console.log(str);

        var str2 = "abc";

        // 长度
        console.log("长度" + str2.length);
        // 索引
        console.log(str2[0]);
    </script>
</body>

</html>

11-字符串操作方法

<!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>
        // 数组的操作方法: 参数/返回值/是否改变原数组

        // 字符串的操作方法: 都不会改变原字符串

        var str = " a-a-a-d-e-f-g ";
        var str2 = "hijk";
        // 1.charAt()//返回指定位置的字符
        console.log(str.charAt(0));

        // 2.charCodeAt() 返回对应字符 Unicode 编码
        console.log(str.charCodeAt(0));

        // 3.fromCharCode()  //根据 Unicode 编码返回字符
        console.log(String.fromCharCode(97));

        // 4.concat()   链接字符串
        console.log(str.concat(str2));
        console.log(str + str2);

        // 5.slice()  根据索引下标切取字符串 [ , )
        console.log(str.slice(0, 2));

        // 6.substring() 用于提取两个指定下标之间的字符,非负数
        console.log(str.substring());

        // 7.substr() 从谁开始,抽取几个
        console.log(str.substr(4, 2));

        // !!!8.split()  将字符串分割成字符串数组
        console.log(str.split("-", 10));

        // 9.includes() 检索字符串中是否包含某个子字符串
        console.log(str.includes("a", 3));

        // !!!10.indexOf() 返回内容中元素第一次出现的位置
        console.log(str.indexOf("f"));

        // 11.search() 查找相匹配的子字符串
        console.log(str.search("e-f"));

        // !!!12.replace() 字符串替换
        console.log(str.replace("a", "A"));

        // 13.trim() 去除首尾空白
        console.log(str.trim());

        // !!!14.toUpperCase()
        console.log(str.toUpperCase());

        // !!!15.toLowerCase()
    </script>
</body>

</html>

12-总结

<!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.创建对象 
        // 2.构造函数 this指向 与普通函数的区别
        // 3.new 关键字的作用
        // 4.遍历对象

        // 5.对象分类
        // 6.数组对象
        // 7.字符串对象 字符串的操作方法
    </script>
</body>

</html>