前端 js 基础对象 （3）

js 对象定义

<!DOCTYPE html>
<html>
<body><h1>JavaScript 对象创建</h1><p id="demo1"></p>=======================
<p>new</p>
<p id="demo"></p><script>
// 创建对象：
var persona = {firstName : "Bill",lastName  : "Gates",age       : 62,eyeColor  : "blue"
};// 显示对象中的数据：
document.getElementById("demo1").innerHTML =
persona.firstName + " 已经 " + persona.age + " 岁了。";//==========================var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue"; document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";</script></body>
</html>

js 对象属性

<!DOCTYPE html>
<html>
<body><h1>JavaScript 对象属性</h1><p>访问对象属性有两种不同的方法：</p><p>您可以使用 .property 或 ["property"]。</p><p id="demo"></p>
//======================
<p id="demo1"></p><script>
var person = {firstname:"Bill",lastname:"Gates",age:62,eyecolor:"blue"
};
person.nationality = "English";  //添加数据delete person.age; //删除 age数据
//======================
document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";//======================document.getElementById("demo1").innerHTML =  " I like  " +person.eyecolor  +" My name "+ person.lastname ;
</script></body>
</html>

js 对象方法 

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var person = {firstName: "Bill",lastName : "Gates",id     : 678,
};
person.name = function() {return this.firstName + " " + this.lastName;
};document.getElementById("demo").innerHTML =
"My friend is " + person.name(); 
</script></body>
</html>

 js 对象显示

<!DOCTYPE html>
<html>
<body><h1>JavaScript 对象</h1><p>显示对象属性：</p>
<p id="demo1"></p><p id="demo"></p><script>
const person = {name: "Bill",age: 19,city: "Seattle"
};
document.getElementById("demo1").innerHTML = person;
document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script></body>
</html>

 

js  set  get 对象访问 

<!DOCTYPE html>
<html>
<body><h1>JavaScript Getter 和 Setter</h1><p>Getter 和 Setter 允许您通过方法获取和设置属性。</p><p>此示例使用 lang 属性设置语言属性的值。</p>========== set ==========
<p id="demo"></p>========== get ==========
<p id="demo1"></p><script>//========== set ==========
// Create an object:
var person = {firstName: "Bill",lastName : "Gates",language : "en",set lang(value) {this.language = value;}
};
// 使用 set 设置属性：
person.lang = "zh";
// 显示对象的数据：
document.getElementById("demo").innerHTML = person.language;// ========== get ==========
// 创建对象：
var person1 = {firstName: "Bill",lastName : "Gates",language : "en",get lang1() {return this.language;}
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo1").innerHTML = person1.lang1;
</script></body>
</html>

js 对象构造器

<!DOCTYPE html>
<html>
<body><h1>JavaScript 对象构造器</h1><p id="demo"></p>
//====================<p id="demo1"></p>
<script>
// Person 对象的构造器函数
function Person(firstName,lastName,age,eyeColor) {this.firstName = firstName;this.lastName = lastName;this.age = age;this.eyeColor = eyeColor;this.changeName = function (name) {this.lastName = name;}
}
// 创建 Person 对象
var myFriend = new Person("Bill","Gates",62,"green");// 修改姓氏
myFriend.changeName("Jobs");// 显示姓氏
document.getElementById("demo").innerHTML =
"My friend's last name is " + myFriend.lastName;//====================// Person 对象的构造器函数
function Person1(first, last, age, eye) {this.firstName = first;this.lastName = last;this.age = age;this.eyeColor = eye;
}// 创建两个 Person 对象
var myFriend1 = new Person1("Bill", "Gates", 62, "blue");
var myBrother1 = new Person1("Steve", "Jobs", 56, "green");// 向第一个对象添加 name 方法
myFriend1.name = function() {return this.firstName + " " + this.lastName;
};// 显示全名
document.getElementById("demo1").innerHTML =
"My friend is " + myFriend1.name(); 
</script></body>
</html>

js 可迭代对象

可迭代对象（Iterables）是可以使用 for..of 进行迭代的对象。

从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。

<!DOCTYPE html>
<html>
<body><h1>JavaScript 可迭代对象</h1><p>迭代字符串：</p><p id="demo"></p>
========================<p>遍历数组：</p><p id="demo1"></p><script>
// 创建字符串
const name = "W3School";// 列出所有元素
let text = ""
for (const x of name) {text += x + "<br>";
}document.getElementById("demo").innerHTML = text;//=================
// 创建数组
const letters = ["a","b","c"];// 列出所有元素
let text1 = "";
for (const x of letters) {text1 += x + "<br>";
}document.getElementById("demo1").innerHTML = text1;
</script>
</body>
</html>

自制迭代器 

参考JavaScript 可迭代对象 (w3school.com.cn)

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 可迭代对象</h1><p>自制的可迭代对象：</p><p id="demo"></p><script>
// 自制的可迭代对象
function myNumbers() {let n = 0;return {next: function() {n += 10;return {value:n, done:false};}};
}//n.next 是向下执行一共执行了三次 返回状态是true
// 三次执行之后 第四次就变成了false // 创建可迭代对象
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30document.getElementById("demo").innerHTML = n.next().value;
</script>
</body>
</html>

js map

Map.size

size 属性返回 Map 中元素的数量：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Map 对象</h1>
<p>使用 Map.set()：</p><p id="demo"></p>
====================
// 创建 Map
<p id="demo1"></p>==========
删除 size 属性返回 Map 中元素的数量：
<p id="demo2"></p><script>
// 创建 Map
const fruits = new Map();// 设置 Map 的值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);document.getElementById("demo").innerHTML = fruits.get("apples");
//=========================
// 创建 Map
const fruits1 = new Map([["apples", 500],["bananas", 300],["oranges", 200]
]);document.getElementById("demo1").innerHTML = fruits1.get("apples");
//=======================
// 创建 Map
const fruits2 = new Map([["apples", 500],["bananas", 300],["oranges", 200]
]);// Delete an Element
fruits2.delete("apples");document.getElementById("demo2").innerHTML = fruits2.size;</script></body>
</html>

js  call

call() 方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过 call()，您能够使用属于另一个对象的方法。

本例调用 person 的 fullName 方法，并用于 person1：

<!DOCTYPE html>
<html>
<body><h1>JavaScript 函数</h1><p>此例调用 person 的 fullName 方法，在 person1 上使用它：</p><p id="demo"></p><script>
var person = {fullName: function(city, country) {return this.firstName + " " + this.lastName + "," + city + "," + country;}
}
var person1 = {firstName:"Bill",lastName: "Gates"
}
var person2 = {firstName:"Steve",lastName: "Jobs"
}
var x = person.fullName.call(person1, "Seatle", "USA"); 
document.getElementById("demo").innerHTML = x; 
</script></body>
</html>

 

js apply

 参考 JavaScript 函数 Apply (w3school.com.cn)

JavaScript apply() 方法

apply() 方法与 call() 方法非常相似

<!DOCTYPE html>
<html>
<body><h1>JavaScript 函数</h1><p>在此示例中，person 的 fulllName 方法在 person1 上<b>应用</b>：</p><p id="demo"></p><script>
var person = {fullName: function(city, country) {return this.firstName + " " + this.lastName + "," + city + "," + country;}
}
var person1 = {firstName:"Bill",lastName: "Gates"
}
var x = person.fullName.apply(person1, ["Seatle", "USA"]); 
document.getElementById("demo").innerHTML = x; 
</script></body>
</html>

 

js 闭包 

<!DOCTYPE html>
<html>
<body><h1>JavaScript 闭包</h1><p>使用局部变量计数。</p><button type="button" onclick="myFunction()">计数！</button><p id="demo">0</p><script>
var add = (function () {var counter = 0;return function () {counter += 1; return counter;}
})();function myFunction(){document.getElementById("demo").innerHTML = add();
}
</script></body>
</html>

js 类继承

 参考 JavaScript 类继承 (w3school.com.cn)

super() 方法引用父类。

通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。

<!DOCTYPE html>
<html>
<body><h1>JavaScript Class 继承</h1><p>请使用 "extends" 关键字从另一个类继承所有方法。</p>
<p>使用 "super" 方法调用父级的构造函数。</p><p id="demo"></p><script>
class Car {constructor(brand) {this.carname = brand;}present() {return 'I have a ' + this.carname;}
}class Model extends Car {constructor(brand, mod) {super(brand);this.model = mod;}show() {return this.present() + ', it is a ' + this.model;}
}let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script></body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/314007.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024孙多勇®跨年演讲，重塑医美增长力，开启璀璨华章！

2024孙多勇®跨年演讲，重塑医美增长力，开启璀璨华章！

不谋万事者&#xff0c;不足谋一时&#xff1b;不谋全局者&#xff0c;不足谋一域。明者因时而变&#xff0c;智者随时而制。 12月31日-1月3日由汇成医美集团主办的&#xff0c;以“重塑医美增长力”为主题的第七届孙多勇跨年演讲暨「英雄2024」年度战略规划案&#xff0c;在中…
阅读更多...
SELinux 安全模型——MLS

SELinux 安全模型——MLS

首发公号&#xff1a;Rand_cs BLP 模型&#xff1a;于1973年被提出&#xff0c;是一种模拟军事安全策略的计算机访问控制模型&#xff0c;它是最早也是最常用的一种多级访问控制模型&#xff0c;主要用于保证系统信息的机密性&#xff0c;是第一个严格形式化的安全模型 暂时无…
阅读更多...
AI模型私人订制

AI模型私人订制

使用AI可以把你的脸换成明星的脸&#xff0c;可以用于直播、录播。 AI换脸1 也可以把视频中明星的脸换成你的脸 AI换脸2 之所以能够替换成功&#xff0c;是因为我们有一个AI人物模型&#xff0c;AI驱动这个模型就可以在录制视频的时候替换指定人物的脸。AI模型从哪里来&…
阅读更多...
SELinux 基本原理

SELinux 基本原理

本文讲述 SELinux 保护安全的基本原理 首发公号&#xff1a;Rand_cs 安全检查顺序 不废话&#xff0c;直接先来看张图 当我们执行系统调用的时候&#xff0c;会首先对某些错误情况进行检查&#xff0c;如果失败通常会得到一些 error 信息&#xff0c;通过查看全局变量 errno …
阅读更多...
2.2 设计FMEA步骤二：结构分析

2.2 设计FMEA步骤二：结构分析

2.2.1 目的 设计结构分析的目的是将设计识别和分解为系统、子系统、组件和零件，以便进行技术风险分析。其主要目标包括： 可视化分析范围结构化表示：方块图、边界图、数字模型、实体零件识别设计接口、交互作用和间隙促进顾客和供应商工程团队之间的协作（接口责任）为功能分…
阅读更多...
微服务（11）

微服务（11）

目录 51.pod的重启策略是什么&#xff1f; 52.描述一下pod的生命周期有哪些状态&#xff1f; 53.创建一个pod的流程是什么&#xff1f; 54.删除一个Pod会发生什么事情&#xff1f; 55.k8s的Service是什么&#xff1f; 51.pod的重启策略是什么&#xff1f; 可以通过命令kub…
阅读更多...
【熔断限流组件resilience4j和hystrix】

【熔断限流组件resilience4j和hystrix】

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容起因resilience4j落地实现pom.xml依赖application.yml配置接口使用 hystrix 落地实现pom.xml依赖启动类上添加注解接口上使用 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟…
阅读更多...
BLP模型

BLP模型

本篇文章是调研了许多资料后对 BLP 模型的一个总结 首发公号&#xff1a;Rand_cs MLS&#xff0c;Multi-level Security&#xff0c;主要关心的是数据机密性 D. Elliott Bell 和 Leonard J. LaPadula 在 1996 年提出了基本的 BLP 模型&#xff0c;主要有两个性质&#xff1a;…
阅读更多...
【形式语言与自动机/编译原理】CFG--＞Greibach--＞NPDA（2）

【形式语言与自动机/编译原理】CFG--＞Greibach--＞NPDA（2）

本文将详细讲解《形式语言与自动机》&#xff08;研究生课程&#xff09;或《编译原理》&#xff08;本科生课程&#xff09;中的上下文无关文法&#xff08;CFG&#xff09;转换成Greibach范式&#xff0c;再转成下推自动机&#xff08;NPDA&#xff09;识别语言是否可以被接受…
阅读更多...
机器学习部分相关概念

机器学习部分相关概念

数据集(Data Set)即数据的集合&#xff0c;每一条单独的数据被称为样本(Sample)。 对于每个样本&#xff0c;它通常具有一些属性(Attribute)或者特征(Feature)&#xff0c; 特征所具体取得值被称为特征值(Feature Value)。 西瓜数据集 色泽根蒂纹理青绿稍蜷模糊乌黑蜷缩清晰 …
阅读更多...
基于JavaWeb实验室预约管理系统(源码+数据库+文档)

基于JavaWeb实验室预约管理系统(源码+数据库+文档)

一、项目简介 本项目是一套基于JavaWeb实验室预约管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;e…
阅读更多...
C++程序编译

C++程序编译

GCC编译器 文章目录 GCC编译器 源文件 为 Main.cpp 注意cpp文件 一定要用g命令 否则没办法执行 预处理&#xff08;Pre-Processing&#xff09;&#xff1a;首先会经过预处理器将程序中的预编译指令进行处理&#xff0c;然后把源文件中的注释这些没用的东西都给扬了。 g -E Mai…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023