js高阶 -- 总结 01（小白）

于 2024-08-19 09:00:00 发布
阅读量217 收藏
点赞数 9
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78949452/article/details/141156914
版权

创建对象

<!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 obj = {
            name: "小红",
            age: 18
        }

        // 2.构造函数创建
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        // 实例化
        var person1 = new Person("小明", 20);

        // 3.Object() 构造器        new Array()   new Function()
        var obj2 = new Object();    // 空对象
        obj2.name = "张三";
        obj2.age = "20";

        // for...in  遍历对象
        // for (var key in obj) {
        //     console.log(key);
        //     console.log(obj[key]);
        // }

        // Object.keys()    该方法会返回一个由一个给定对象的自身可枚举属性组成的数组
        console.log(Object.keys(obj));

        // in  判断属性是否存在
        console.log("hobby" in obj);

        // delete 删除属性
        // delete obj.name;
        // console.log(obj);

        // Object.getOwnPropertyNames(obj)
        // 该方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。
        console.log(Object.getOwnPropertyNames(obj));
    </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 obj = {
            // 数据属性
            myname: "小明",
            myage: 20,
            gender: "男",
            sayHi: function () {
                console.log("hello");
            },

            // 访问器属性
            get name() {
                console.log("获取name");
                return this.myname + "11";
            },

            set setname(value) {
                console.log("修改name");
                this.myname = value;
            }
        }

        // 通过访问器去访问数据属性
        console.log(obj.name);

        // 通过访问器去修改数据属性
        obj.setname = "小红";

        console.log(obj);
    </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 obj = {
            name: "小好",
            age: 20
        }

        var obj2 = {
            age: 18,
        };

        Object.defineProperty(obj2, "name", {
            // 1.是否可枚举
            enumerable: false,
            // 2.是否可修改
            writable: false,
            // 3.是否可配置
            configurable: false,

            // 4.属性的值是什么
            value: "小谷"
        });

        console.log(obj2);

        console.log(Object.keys(obj2));

        // 尝试修改失败
        obj2.name = "zhangsan";
        console.log(obj2);

        delete obj2.name;
        console.log(obj2);

        for (var key in obj2) {
            console.log(key);
        }

        console.log(Object.getOwnPropertyNames(obj2));
    </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>
        // Object.defineProperty()

        // Object.defineProperties()

        var obj = {
            name: "小好"
        }

        // 定义多个属性的特征
        Object.defineProperties(obj, {
            age: {
                // 是否可枚举
                enumerable: false,
                // 是否可修改
                writable: true,
                // 是否可配置
                configurable: false,
                // 值
                value: 18
            },
            gender: {
                // 是否可枚举
                enumerable: false,
                // 是否可修改
                writable: true,
                // 是否可配置
                configurable: false,
                // 值
                value: "男"
            },
            hobby: {
                // 是否可枚举
                enumerable: false,
                // 是否可修改
                writable: true,
                // 是否可配置
                configurable: false,
                // 值
                value: "好好玩"
            }
        })

        console.log(obj);

        // 获取属性特征信息
        console.log(Object.getOwnPropertyDescriptor(obj, "age"));

        // 获取属性特征信息
        console.log(Object.getOwnPropertyDescriptors(obj));
    </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>
        // 开启严格模式
        // "use strict"

        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        var person = new Person("小明", 18, "男");

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

        // 构造函数
        // 1.首字母大写
        // 2.this指向实例化对象
        // 3.没有 return 返回值

        // 普通函数
        // 1.一般首字母小写
        // 2.this指向 window
        // 3.可以有 return 返回值
    </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, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        // 给构造函数添加静态成员
        Person.name2 = "小明";

        // 实例化对象
        var person1 = new Person("小红", 18, "男");     // 实例成员
        console.log(person1);

        console.dir(Person);

        // 通过实例化对象访问实例成员
        console.log(person1.name);

        console.log(person1.name2);     // 无法得到静态成员

        // 通过构造函数访问静态成员
        console.log(Person.name2);

        console.log(Person.age);        // 无法得到实例成员

    </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, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            // 默认方法
            // this.sayHi = function () {
            //     console.log("hello");
            // }
        }

        // 将方法写在构造函数的 prototype（原型对象） 上
        Person.prototype.sayHi = function () {
            console.log("hello");
        }

        Person.prototype.color = "红色";

        // 实例化对象
        var person1 = new Person("小红", 20, "男");
        console.log(person1);

        var person2 = new Person("小明", 21, "男");
        console.log(person2);

        console.dir(Person);

        // 每一个实例化对象都可以访问其构造函数 原型 上的属性和方法
        person1.sayHi();
        person2.sayHi();

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

        //  每一个构造函数都有一个prototype 属性，其属性值为对象，称为原型对象。
        //  原型的作用是什么 ? 共享方法, 节约内存。

    </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, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        Person.prototype.sayHi = function () {
            console.log("hello");
        }

        var person1 = new Person("小红", 20, "男");
        console.log(person1);
        var person2 = new Person("小明", 20, "男");
        console.log(person2);

        // 对象原型 __proto__ (浏览器上显示为 [[Prototype]])

        // 每一个对象都有一个 __proto__ 属性, 成为 对象原型,指向构造函数的 prototype 原型对象
        // 对象身上的 __proto__ 和构造函数上的 prototype 等价的
        // __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，
        // 但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype。

        person1.__proto__.sayHi();
        person1.sayHi();

        console.log(person1.__proto__ === Person.prototype);

        // 构造函数身上 ---- 原型对象 prototype
        // 实例化对象身上 ----- 对象原型  __proto__
    </script>
</body>

</html>

constructor构造函数

<!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, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        Person.prototype.sayHi = function () {
            console.log("nihao");
        }

        console.dir(Person);

        var person1 = new Person("小红", 20, "男");
        console.log(person1);

        var person2 = new Person("小明", 21, "男");
        console.log(person2);

        // constructor 构造函数

        console.dir(Person.prototype.constructor);

        console.dir(person1.constructor);
    </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>
        // 原型链

        // 当访问一个对象的某个属性或方法时，会先在这个对象本身属性上查找，
        // 如果没有找到，则会去它的`__proto__`上查找，即它的构造函数的prototype，
        // 如果还没有找到就会再在构造函数的prototype的`__proto__`中查找，
        // 这样一层一层向上查找就会形成一个链式结构，我们称为原型链.

        function Person(name, age, gender) {
            // this.name = name;
            this.age = age;
            this.gender = gender;
        }

        // Person.prototype.name = "张三";

        console.dir(Person);

        var person1 = new Person("小明", 20, "男");

        console.log(person1.name);  // undefined
    </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, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        Person.prototype.name = "张三";


        var person1 = new Person("小明", 20, "男");

        var obj = {}

        console.log(Person.prototype.hasOwnProperty("name"));
        console.log(person1.hasOwnProperty("name"));

        console.log(Person.prototype.isPrototypeOf(person1));
        console.log(Person.prototype.isPrototypeOf(obj));
    </script>
</body>

</html>

原型对象中的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>
        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        Person.prototype.fun = function () {
            console.log(this.name + "说:你好!");
        }

        var person1 = new Person("小明", 20, "男");

        person1.fun();

        // 构造函数原型中的 this 指向当前实例化对象   原型对象里面的方法也指向实例对象
    </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 = [1, 2, 3, 1, 3, 3, 3, 5, 6, 6, 7, 9, 1, 2, 5, 6];
        console.log(arr);

        var arr2 = new Array();

        // 扩展数组操作方法
        // 数组去重
        Array.prototype.filFun = function () {
            var newArr = [];
            // 构造函数原型上的 this 指向当前实例化对象
            for (var i = 0; i < this.length; i++) {
                if (!newArr.includes(this[i])) {
                    newArr.push(this[i]);
                }
            }

            return newArr;
        }

        console.log(arr.filFun());

        // 数组之和
        Array.prototype.sumFun = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }

        console.log(arr.sumFun());
    </script>
</body>

</html>
柿子来了
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Python实现四阶龙格-库塔（Runge-Kutta）方法求解高阶微分方程.pdf
09-29
它通过一系列近似步骤来逼近微分方程的真实解，尤其适用于高阶微分方程。在Python中实现四阶龙格-库塔方法，可以使用以下步骤： 1. **定义微分方程**：首先，你需要明确你要解决的微分方程。在这个例子中，有两个...
JavaScript高阶第一天.xmind
08-09
js高阶知识总结： 理解Object： 1.返回一个由一个给定对象的自身可枚举属性组成的数组：Object.keys(对象名) 2.in 判断属性是否存在："属性名" in 对象名 3.delete 删除属性 4.返回一个由指定对象的所有自身属性...
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 795
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
javascript高阶函数---filter---map---reduce
weixin_47450807的博客
10-25 855
javascript高阶函数—filter—map—reduce 高阶函数就是给函数传入的参数就是一个函数,例如 filter(function(){.....}) 这里就以数组为例 filter用法 filter的汉语意思就是过滤的意思，在数组中就是将不满足条件的数据过滤掉。过滤后的数组元素存放在新的数组中。 例子： map用法 reduce用法 ...
攻防世界之Web高阶-NaNNaNNaNNaN-Batman
weixin_42075643的博客
06-07 150
是个附件，下载下来： 利用sublime-Text打开： 这里顺便提一下，电脑自带的文本编辑器和notepad打开都会显示乱码… 发现是一段js，右键浏览器打开 F12可以看到： 我们直接把eval函数改为alert函数： 这里还是要看个人的经验，比如xss的时候，alert是经常用来测试是否存在漏洞的，所以可以试一下。。。 将上边的复制到文本，然后对其进行逻辑上的梳理： 这里需要知道js中的正则表达式，^表示开始$表示结尾，要想满足上边的if，则可以进行拼接：去掉重复的字符可以得到be0
JavaScript中数组高阶函数的使用
前端卷王小白的博客
06-27 235
数组高级函数,forEach,map,filter,reduce,some
heyunjiang#Blog#高阶-js解释器1
07-25
背景最近遇到一个问题，我在使用 window.btoa() 方法将普通字符串转成 base64 编码时，如果字符串中有中文，则会报错，提示超出了编码的范围，随着
高等数学ppt课件 3-3高阶导数.ppt
07-09
高等数学ppt课件 3-3高阶导数
高阶函数-函数柯里化- 手写
05-14
一、高阶函数 定义：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数： 1、若 A 函数，接受的参数是一个函数，那么 A 就可以称为高阶函数。 2、若 A 函数，调用的返回值依然是一个函数，那么 A 就...
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 330
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 338
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 990
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1151
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
weixin_42348009的博客
08-14 183
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 582
NVDLA专题4：具体模块介绍——Convolution DMA
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 980
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 704
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 594
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
高阶-1 链表-查找链表最后节点 C语言、
07-11
在C语言中，高阶数据结构如链表是一种动态数据结构，其中每个节点通常包含数据域和指向下一个节点的指针。如果需要查找链表的最后一个节点，由于常规链表没有直接提供这个信息，我们通常会采用迭代或者递归的方式来实现。 **迭代法**： 遍历整个链表直到遇到NULL，这是最后一个节点的前一个节点。因为链表的最后一个节点的next指针通常是NULL，所以它的前一个节点就是最后一个节点。下面是一个简单的示例： ```c struct Node { int data; struct Node* next; }; struct Node* findLastNode(struct Node* head) { if (head == NULL) { return NULL; } struct Node* current = head; while (current->next != NULL) { current = current->next; } return current; } ``` **递归法**： 虽然递归不是寻找链表最后一节点的理想选择，因为它可能会导致栈溢出，但在教学或某些特定场景下可以尝试。以下是递归版本： ```c struct Node* findLastNodeRecursive(struct Node* head) { if (head == NULL || head->next == NULL) { return head; } return findLastNodeRecursive(head->next); } ``` 在这两个函数之后，你可以通过 `lastNode = findLastNode(head);` 获取到链表的最后一个节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值