JavaScript -- 总结 6（小白）

最新推荐文章于 2024-08-08 23:04:40 发布

柿子来了

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量195

点赞数 4

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140885320

版权

对象

<!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("植物大战僵尸");
            }
        }
        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>

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

<!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>

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.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>

遍历对象

<!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]);
        }

        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>

对象分类

<!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


        // 数组对象
        var arr = new Array(1, 2, 3, 4, 5);
        console.log(arr);


        // 字符串对象

        // 数据类型
        // 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>

字符串操作方法

<!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() 返回指定索引处的字符。索引范围为从 0 到 length- 1
        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() 所有大写字符全部被转换为小写字符
        console.log(str.toLowerCase());
    </script>
</body>

</html>