前端 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(); // 30

document.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.mfbz.cn/a/295366.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++ 释放指针

C++ 释放指针

在C中&#xff0c;释放指针通常使用delete或delete[]操作符&#xff1b; 如果指针指向的是单个对象&#xff0c;可以使用delete操作符进行释放&#xff1b; 在释放完内存后&#xff0c;最好将指针置为nullptr&#xff0c;以避免出现悬空指针&#xff08;dangling pointer&#…
阅读更多...
LeGO-LOAM 几个特有函数的分析（2）

LeGO-LOAM 几个特有函数的分析（2）

接上回LeGO-LOAM 几个特有函数的分析&#xff08;1&#xff09; 二、广度优先遍历 广度优先遍历&#xff08;Breadth-First Search, BFS&#xff09;是一种用于遍历或搜索树或图的算法。这种算法从树的根&#xff08;或图的某一指定节点&#xff09;开始&#xff0c;然后探索…
阅读更多...
「小明赠书活动」2024第二期《实战AI大模型》

「小明赠书活动」2024第二期《实战AI大模型》

⭐️ 赠书 - 《实战AI大模型》 从基本概念到实践技巧的&#xff0c;全方位解读AI大模型&#xff0c;手把手教你训练和部署BERT、GPT-3、ChatGPT&#xff01; 人工智能领域资深专家尤洋老师倾力打造&#xff0c;获得了 李开复、周鸿祎、颜水成 三位大咖鼎力推荐&#xff0c;一经…
阅读更多...
【前端】[vue3] vue-router使用

【前端】[vue3] vue-router使用

提示&#xff1a;我这边用的是typeScript语法&#xff0c;所以js文件的后缀都是ts。 安装vue-router&#xff1a; &#xff08;注意&#xff1a;vue2引用vue-router3 vue3才引用vue-router4&#xff09; npm install vue-router4src文件夹下面创建 router/index.ts&#xff08;…
阅读更多...
安科瑞微机综合保护测控装置在某电厂10.5kV厂用电系统改造中的应用——安科瑞 顾烊宇

安科瑞微机综合保护测控装置在某电厂10.5kV厂用电系统改造中的应用——安科瑞 顾烊宇

摘要&#xff1a;某电厂8号机10.5kV厂用电二次系统设备大多为常规电磁式继电器、电量变送器等。通过对厂用电二次系统从设备选型、设计、施工调试等方面进行的改造&#xff0c;尤其微机综合保护测控装置的应用&#xff0c;集控制、保护、测量、信号报警、开关量采集、通讯功能于…
阅读更多...
Python+Appium自动化测试的使用步骤

Python+Appium自动化测试的使用步骤

这篇文章主要介绍了PythonAppium实现自动化测试的使用步骤&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 一、环境准备 1.脚本语言&#xff1a;Python3.x IDE&am…
阅读更多...
IIS回收应用

IIS回收应用

前言 作为Windows的一个可选包，Internet Information Services （IIS）管理器经常被用于Windows Server系列服务器内的Web管理。IIS采用应用程序池方式管理Web的工作进程，同时采用了页面输出缓存的缓存加载机制。当网络出现瞬间访问异常时，部分IIS管理的web页面可能会发生长…
阅读更多...
vue登录 滑动验证，记住密码及AES加密解密

vue登录 滑动验证，记住密码及AES加密解密

相关依赖 npm install js-cookie //js-cookie npm install crypto-js //AES加密解密 npm install -S vue-puzzle-vcode //滑动验证 vue2 <template><div class"login"><div class"login-box"><div class"imgbox">&…
阅读更多...
BOM介绍

BOM介绍

文章目录 1、简介主要作用 2、BOM的组成2.1 窗口对象window2.1.1 window对象特点2.1.2 window作用域2.1.3 window对象常见方法**第一类&#xff1a;系统对话框**第二类&#xff1a;控制浏览器窗口方法第三类&#xff1a;与定时器有关的方法 1、简介 BOM&#xff08;Browser Ob…
阅读更多...
面试算法98：路径的数目

面试算法98：路径的数目

题目 一个机器人从mn的格子的左上角出发&#xff0c;它每步要么向下要么向右&#xff0c;直到抵达格子的右下角。请计算机器人从左上角到达右下角的路径的数目。例如&#xff0c;如果格子的大小是33&#xff0c;那么机器人从左上角到达右下角有6条符合条件的不同路径。 分析…
阅读更多...
教学/直播/会议触摸一体机定制_基于展锐T820安卓核心板方案

教学/直播/会议触摸一体机定制_基于展锐T820安卓核心板方案

触控一体机是一种集先进的触摸屏、工控和计算机技术于一体的设备。它取代了传统的键盘鼠标输入功能&#xff0c;广泛应用于教学、培训、工业、会议、直播、高新科技展示等领域。触摸一体机的应用提升了教学、会议和展示的互动性和信息交流。 触摸一体机方案基于国产6nm旗舰芯片…
阅读更多...
鸿蒙问题之本地模拟器无法识别

鸿蒙问题之本地模拟器无法识别

今天按例打开本地模拟器&#xff0c;发现DevEco Studio不能检测到我的本地模拟器了。 重启了DevEco Studio和模拟器多次都无果。果断删除模拟器 然后创建一个新的&#xff0c;就可以成功检测到了。这应该是idea的一个bug
阅读更多...
外包干了5个月，技术明显退步了...

外包干了5个月，技术明显退步了...

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年12月份&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…
阅读更多...
《知识扫盲》ROS和ROS2对比

《知识扫盲》ROS和ROS2对比

文章摘选自&#xff1a;ROS与ROS2对比 1.ROS问题举例 ROS的设计目标是简化机器人的开发&#xff0c;如何简化呢&#xff1f;ROS为此设计了一整套通信机制&#xff08;话题、服务、参数、动作&#xff09;。 通过这些通信机制&#xff0c;ROS实现了将机器人的各个组件给的连接…
阅读更多...
基于springboot的java读取文档内容（超简单）

基于springboot的java读取文档内容（超简单）

读取一个word文档里面的内容&#xff0c;并取出来。 代码&#xff1a; SneakyThrowsGetMapping(value "/readWordDoc")ApiOperationSupport(order 1)ApiOperation(value "文档读取 ", notes "文档读取 ")public R ReadWordDoc () {System.o…
阅读更多...
如何在 ChatGPT 上使用 Wolfram 插件回答数学问题

如何在 ChatGPT 上使用 Wolfram 插件回答数学问题

这里写自定义目录标题 写在最前面Wolfram是什么&#xff1f;ChatGPT 如何与 Wolfram 相结合&#xff0c;为什么有效&#xff1f;如何在 ChatGPT 上安装 Wolfram 插件&#xff1f; 写在最前面 参考&#xff1a;https://clickthis.blog/zh-CN/how-to-answer-math-questions-usin…
阅读更多...
Codeium在IDEA里的3个坑

Codeium在IDEA里的3个坑

转载自Codeium在IDEA里的3个坑&#xff1a;无法log in&#xff0c;downloading language server和中文乱码_downloading codeium language server...-CSDN博客文章浏览阅读1.7w次&#xff0c;点赞26次&#xff0c;收藏47次。Codeium安装IDEA插件的3个常见坑_downloading codeiu…
阅读更多...
arr.prototype 数组的方法

arr.prototype 数组的方法

1.forEach 作用:遍历这个数组 代码&#xff1a; let arr [10, 20, 30, 40, 50];arr.forEach((item) > {console.log(item);}); 返回值:没有返回值 2.fiflter 作用:过滤数组 代码&#xff1a; let arr [10, 20, 30, 40, 50];let newArr arr.filter((item) > {retu…
阅读更多...
Mysq之——分库分表

Mysq之——分库分表

Mysq之——分库分表 简介分库分表的方式垂直分表垂直分库水平分库水平分表 图解&#xff1a;垂直分表与水平分表&#xff08;分库类似&#xff09;分库分表带来的问题 简介 分库分表就是为了解决由于数据量过大而导致数据库性能降低的问题&#xff0c;将原来独立的数据库拆分成…
阅读更多...
应用层网络协议

应用层网络协议

tags: [“计算机网络”] descripution: “学习应用层的一些常用协议” 网络协议&#xff1a;约定的信息传输的格式&#xff0c;如几个字节是消息头、消息头记录什么信息之类的&#xff1b;c/s架构&#xff1a;不一定是两台计算机&#xff0c;而是两个应用、两个端口工具&#…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站