JS(ES_6)_2

1.创建对象的6种方式:

 1. ob=new Object() ob.name='ah' ob.age=18

2. ob={name:'ah',gae:18}

3.工厂模式:

设计一个函数,专门生产Person类型的对象

<script>function createPerson(name,age,family) {var o = new Object();o.name = name;o.age = age;o.family = family;o.say = function(){alert(this.name);}return o;}p1=createPerson('ah',18,['l','ys'])
</script>

4.构造函数模式:

构造一个对象Person

<script>
function Person(name,age){this.name=namethis.age=agethis.sh=Function(){console.log('hi)}}p1=new Person('ah',18)
</script>

缺陷:构造函数也有其缺陷,每个实例都包含不同的Function实例( 构造函数内的方法在做同一件事,但是实例化后却产生了不同的对象,方法是函数 ,函数也是对象)

5.原型模式创建对象

 

     实例成员:实例化过程中的新加的属性或方法(私有属性或方法)

    静态成员:new 一个对象所具有的基本属性或方法(一般属性或方法)

    公共成员:对象.prototype 的属性或方法,可被重新赋值,可直接使用(公共属性或方法)

prototype见:详解prototype、__proto__和constructor_prototype和constructor-CSDN博客

<script>function Person() { }console.log(Person.prototype);//Object//创建公共属性Person.prototype.name = 'ah'Person.prototype.age = 21;Person.prototype.family = ["lida", "lier", "wangwu"];Person.prototype.say = function () {alert(this.name);};console.log(Person.prototype);//{name: 'ah', age: 21, family: Array(3), say: ƒ}let p1 = new Personconsole.log(p1);//Person {}console.log(p1.name);//ah//单独设置私有属性/实例属性:p1.sh = function () {console.log('hi', this.name);}console.log(p1);console.log(Person.prototype);p1.sh()//hi ahp2 = new Personp2.sh()//报错</script>

6.原型模式+构造函数模式:

<script>function Person(name, age) {this.name = namethis.age = age}//设置一般的属性,方法// 公共的的函数Person.prototype.sh = function () {console.log('hi', this.name);}console.log(Person);/*Person(name, age) {this.name = namethis.age = age}*/let p1 = new Person('ah', 18)  //设置一般的属性p1.sh() // hi ahconsole.log(p1);//Person {name: 'ah', age: 18}</script>

2.基本包装类型:

详情见:JS基础知识(二十二):基本包装类型_js包装类型-CSDN博客

1.基本类型值: 指的是简单的数据段Undefined、Null、Boolean、Number 和 String

2.引用类型值: 指那些可能由多个值构成的对象

3.基本包装类型:为了便于操作基本类型值,ECMAScript 还提供了 3 个特殊的引用类型:Boolean、Number 和String。

与其他引用类型相似,但有各自类型相应的特殊方法,例如String的  s1.substring(2);

本来基本类型值不应有方法,但是有方法,这是因为后台自动完成了一系列的处理,即

{

                创建 String 类型的一个实例;

                在实例上调用指定的方法;

                销毁这个实例;

 }经过以上处理,s1就跟个对象一样了而且,上面这三个步骤也分别适用于 Boolean和 Number 类型对应的布尔值和数字值

引用类型  与  基本包装类型  的主要区别就是对象的生存期

使用 new 操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。

而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。

3.Object的静态方法:

         1.Object.keys(obj)  返回一个数组,获得属性名

         2.Object.values(obj) 返回一个数组,获得属性值

         3.Object.assign(obj2, obj/{gender:'女'}) 将后者赋值/增加(拷贝)给前者  assign赋值,分配

    <script>// 只有构造函数Object可以调用// 1.Object.keys(obj)  返回一个数组,获得属性名// 2.Object.values(obj) 返回一个数组,获得属性值// 3.Object.assign(obj2, obj) 将后者赋值(拷贝)给前者let obj = {name: 'ah',age: 18,sh: function () {alert(this.name)}}console.log(Object.keys(obj));console.log(Object.values(obj));let obj2 = {}Object.assign(obj2, obj)// 后者给前者console.log(obj2);// let arr = Object.keys(obj)// console.log(arr[0]);// console.log(arr[1]);</script>

4.Array的实例方法:

 1.forEach:遍历,无返回值,本质上等同于 for 循环,对每一项执行 function 函数。

使用方法:

<!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>let arr = [1, 2, 3]let sum = 0arr.forEach(function (e) { sum += e })console.log(sum); //6</script>
</body></html>

2.map:迭代映射,map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

使用方法:

<!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>const array1 = [1, 4, 9, 16];// Pass a function to mapconst map1 = array1.map((x) => x * 2);console.log(map1);// Expected output: Array [2, 8, 18, 32]</script>
</body></html>

 3.reduce:累计器

使用方法:

<script>const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4const initialValue = 0; //initialValue初始值const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue,  //accumulator累加器  currentValue数组值initialValue,);console.log(sumWithInitial);// Expected output: 10</script>

相关过程:         

  第一次调用回调时初始化 accumulator 的值。

            如果指定了 initialValue,则 callbackFn 从数组中的第一个值作为 currentValue 开始执行,accumulator初始为initialValue

            如果没有指定 initialValue,则 accumulator 初始化为数组中的第一个值,并且 callbackFn 从数组中的第二个值作为 currentValue 开始执行。

            在这种情况下,如果数组为空(没有第一个值可以作为 accumulator 返回),则会抛出错误。

            每次调用时,callbackFn 的返回值都作为 accumulator 参数传递到下一次调用中。

            accumulator 的最终值(也就是在数组的最后一次迭代中从 callbackFn 返回的值)将作为 reduce() 的返回值

4.filter:过滤返回数组

filter() 方法创建给定数组一部分的浅拷贝,其包含 通过所提供函数实现的测试 的所有元素。

使用方法:

<!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>// filter() 方法创建给定数组一部分的浅拷贝,其包含 通过所提供函数实现的测试 的所有元素。const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter((word) => word.length > 6);console.log(result);// Expected output: Array ["exuberant", "destruction", "present"]</script>
</body></html>

5.join:整合

 join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。 如果数组只有一个元素,那么将返回该元素而不使用分隔符。

使用方法:

<!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>const elements = ['Fire', 'Air', 'Water'];console.log(elements.join());// Expected output: "Fire,Air,Water"console.log(elements.join(''));// Expected output: "FireAirWater"console.log(elements.join('-'));// Expected output: "Fire-Air-Water"</script>
</body></html>

6.find:查找第一个符合条件的,有则返回,无则undifind,可以用来根据对象的属性筛选对象

使用方法:

<!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>const array1 = [5, 12, 8, 130, 44];const found = array1.find((element) => element > 10);//括号内写查找的函数/要求console.log(found);// Expected output: 12</script>
</body></html>

7.every:测试所有元素

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

使用方法:

<!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>const isBelowThreshold = (currentValue) => currentValue < 40;const array1 = [1, 30, 39, 29, 10, 13];console.log(array1.every(isBelowThreshold));// Expected output: true</script>
</body></html>

8.some:测试是否包含

使用方法:

<!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>let arr = [1, 2, 3, 4]console.log(arr.some(x => x == 1)); //true</script>
</body></html>

9.findindex:找index,返回要找元素的下标,没找到则返回-1

使用方法:

<!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>let arr = ['a', 'b', 'c', 'd']console.log(arr.findIndex(x => x == 'c'));</script>
</body></html>

特殊:Array.from():伪数组(可迭代对象)转真数组

例如将获得的 lis 数组转化成真数组

案例:购物车展示

效果图:

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;box-sizing: border-box;}.banner {width: 1000px;height: 500px;margin: 0 auto;padding: 0 20px;border: 1px solid #000;}li {display: flex;width: 100%;height: 100px;margin-bottom: 6px;justify-content: space-between;}li img {width: 100px;}li div {width: 250px;text-align: center;color: red;}li span {color: #b3b3b3a5;font-size: 13px;}li .title {width: 100%;text-align: left;color: #000;}.total {text-align: right;}.total span {color: red;}</style>
</head><body><div class="banner"><ul><!-- 样例布局,可留可删 --><li><img src="https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/163511/10/41642/167436/65e18381Fa56cd005/a3dd2c0fa6881ad0.jpg.webp"alt=""><div class="title">诚心如意手摇咖啡磨豆机<br><span>【赠品】</span><br><span>【赠品】</span></div><div><span>青色/一大</span></div><div>289.90</div><div><span>x2</span></div><div>279.80</div></li></ul><div class="total">合计:<span>798.00¥</span></div></div><script>const goodlists = [{name: 'Apple 苹果 iPhone 15 Plus 二手手机 蓝色 128G',price: 4999,picture: 'https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/182034/34/38675/27903/650a62f5F522fd836/10fd8e1d1809b325.jpg.webp',count: 2,spec: { color: '蓝色' },gifts: '充电线,耳机'},{name: '电脑台式桌家用办公桌子卧室小型简约租房学生学习写字桌简易书桌 经典款-100CM白柳木 圆滑桌角 稳固承重',price: 116,picture: 'https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/219000/19/39060/94643/65fdb31dF791b2494/d73fccc8ca386203.jpg.webp',count: 1,spec: { size: '150cm*100cm', color: '原木色' }},{name: '科技布艺沙发小户型客厅卧室简约单人双人三人北欧简易服装店网红 深蓝色 科技布 80cm 单人位【厂家直销】',price: 888,picture: 'https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/112292/24/44663/84229/65d19513F0af948f9/105acfa9e3bdc391.jpg.webp',count: 1,spec: { size: '3m*1.5m', color: '紫色' }}]const ul = document.querySelector('.banner ul')const total = document.querySelector('.banner .total')let subtotal = [] //求和ul.innerHTML = goodlists.map(function (e) {subtotal.push(e.count * e.price)let str = ``if (Object.keys(e).find(x => x == 'gifts')) {// let arr = Object.values(e.gifts).join('').split(',')let arr = e.gifts.split(',')console.log(arr);for (x of arr) {str += `<br><span>【赠品】${x}</span>`}}return `<li><img src="${e.picture}"alt=""><div class="title">${e.name}${str}</div><div><span>${Object.values(e.spec).join('/')}</span></div><div>${e.price.toFixed(2)}</div><div><span>x${e.count}</span></div><div>${e.count * e.price}</div></li>`}).join('')let initialvalue = 0total.innerHTML = `合计:<span>${subtotal.reduce((a, initialvalue) => a + initialvalue)}¥</span>`</script>
</body></html>

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

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

相关文章

软件设计师备考 | 案例专题之数据流图 概念与例题

案例分析专题大纲&#xff1a; 数据流图基本概念 基本图形元素&#xff1a;外部实体、加工、数据存储、数据流 数据流&#xff1a;由一组固定成分的数据组成&#xff0c;表示数据的流向。在DFD中&#xff0c;数据流的流向必须经过加工。加工&#xff1a;描述了输入数据流到输出…

啊哈!算法-第2章-栈、队列、链表

啊哈!算法-第2章-栈、队列、链表 第1节 解密qq号——队列第2节 解密回文——栈第3节 纸牌游戏——小猫钓鱼第4节 链表第5节 模拟链表 第1节 解密qq号——队列 新学期开始了&#xff0c;小哈是小哼的新同桌(小哈是个大帅哥哦~)&#xff0c;小哼向小哈询问 QQ 号&#xff0c; 小…

算法提高之线段树

算法提高之线段树 存储方式 线段树除了最后一层叶子节点以外是一个满二叉树类似堆的形式 因此可以用堆来存储线段树同时注意到 数组是可以模拟堆的 因此我们可以用一位数组来存储线段树 节点编号为u&#xff0c;对应左子树编号为2 * u&#xff0c;右子树编号为2 * u 1装逼一…

C++ 学习 指针上

&#x1f64b; 继续C Primer 第五版的学习 注 后面还会有关于指针进一步的学习 本篇为基础篇 &#x1f33f;可以先看看这两篇 或许可以进一步加深一下对指针的理解 指针和数组 指针简介 &#x1f308; 上一次讲了 C中的引用&#xff0c;现在总结一下指针和引用的主要区别。 …

uniapp微信小程序解决open-type获取用户头像,返回临时路径问题!

解决 open-type 为 chooseAvatar&#xff0c;返回临时路径问题 文章目录 解决 open-type 为 chooseAvatar&#xff0c;返回临时路径问题效果图Demo获取头像回调数据结构效果图解决方式上传到服务器转base64 基于微信小程序获取头像昵称规则调整后&#xff0c;当小程序需要让用户…

深入了解FreeRTOS:实时操作系统的核心概念和应用

前言&#xff1a; 在当今数字化世界中&#xff0c;嵌入式系统扮演着至关重要的角色&#xff0c;从工业自动化到智能设备&#xff0c;无所不在。而实时操作系统&#xff08;RTOS&#xff09;则是这些系统的核心引擎&#xff0c;它们负责管理任务、资源和时间&#xff0c;确保系统…

RmlUi 初试,hello world

前言 最近在研究GUI的各个方面&#xff0c;最后被导向了web render&#xff0c;真的是一言难尽。 这里就其中一个比较有意思的项目 RmlUi 浅试一下&#xff0c;没想要还挺麻烦&#xff01;这里留下note以供后人参考。 环境搭建 Windows VS2022 pre-binary library 需要指…

高通Android 12/13 设置和获取ADB状态

/*** 设置ADB状态** param isEnable*/public void setADB(boolean isEnable) {Settings.Global.putInt(mContext.getContentResolver(), Settings.Global.ADB_ENABLED, isEnable ? 1 : 0);}/*** 获取ADB状态** return*/public boolean getADB() {return Settings.Global.getIn…

虚拟化技术[3]之网络虚拟化

网络虚拟化 网络虚拟化简介核心层网络虚拟化接入层网络虚拟化虚拟机网络虚拟化案例: VMware网络虚拟化技术虚拟网络接口卡虚拟交换机vSwitch分布式交换机端口组VLAN 网络虚拟化简介 传统的数据中心&#xff1a;服务器之间操作系统和上层软件异构、接口与数据格式不统一&#x…

链表相交-力扣

在做这道题时&#xff0c;首先想到的解法是遍历第一个链表&#xff0c;将其全部添加到哈希表中&#xff0c;然后遍历第二个链表&#xff0c;如果能够再哈希表中查到元素&#xff0c;则返回这个元素&#xff0c;否则返回NULL。 但在实际写代码时&#xff0c;第一次写默认为链表相…

Redis实现MQ

MQ的提出 上游发出请求后阻塞等待下游给到反馈&#xff0c;否则整个流程将一直阻塞。 提出mq之后&#xff1a;即有producer mq consumer 三者 MQ的特点 异步解耦 在有了 mq 后&#xff0c;producer 不需要过分关心 consumer 的身份信息&#xff0c;只需要把消息按照指定的协议…

Python 潮流周刊#52:Python 处理 Excel 的资源

本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&#xff0c;并增长职业和副业的收入。 本期周刊分享了 12 篇文…

基于hive的酒店价格数据可视化分析系统设计和实现

摘要 本文基于Django框架和Hive技术&#xff0c;设计和实现了一种酒店价格数据可视化分析系 统&#xff0c;旨在为酒店管理者提供直观、清晰的数据洞察和决策支持。在研究中&#xff0c;首先深入分 析了酒店价格数据可视化分析系统的背景和意义&#xff0c;认识到对于酒店行…

3.Redis之Redis的环境搭建redis客户端介绍

1.版本的选取 安装 Redis&#xff1a;Redis 5 系列~~ 在 Linux 中进行安装~~ Redis 官方是不支持 Windows 版本的~~ 微软维护了一个 Windows 版本的 Redis 分支 Centos和Ubuntu.Docker 2.如何进行安装&#xff1f;&#xff1f;&#xff1f; 1.ubuntu 2.centos yum instal…

arcgisPro将一个图层的要素复制到另一个图层

1、打开两个图层&#xff0c;如下&#xff0c;其中一个图层中有两个要素&#xff0c;需要将其中一个要素复制到另一个图层中&#xff0c;展示如下&#xff1a; 2、选中待复制要素&#xff0c;点击复制按钮&#xff0c;如下&#xff1a; 3、下拉粘贴按钮列表&#xff0c;选择【选…

利用oracle默认事务隔离级别(提交读)提升多表联查速度

利用oracle默认事务隔离级别(提交读)提升查询速度) 背景介绍&#xff1a; 数据量大查询缓慢&#xff0c;添加太多条件&#xff0c;使用IN走了全表查询导致查询速度缓慢。 解决方案&#xff1a; 版本一&#xff1a; 新建临时表&#xff0c;在查询是将数据插入到临时表中&#…

Python 根据点云索引提取点云

点云索引滤波 一、介绍1.1 概念1.2 参数设置二、代码示例三、结果示例一、介绍 1.1 概念 点云索引滤波 是一种常用的点云滤波方法,根据给定的索引列表获取点云中的索引点,或着根据给定的索引列表获取点云中的非索引点。 1.2 参数设置 核心函数: def select_by_index(self, …

Ubuntu22.04虚拟机设置静态IP

虚拟机设置静态IP 按下电脑的 “win”键&#xff0c;在弹出的输入框中输入“控制面板”&#xff0c;选中控制面板 1.选择 “网络和Internet” 2.选择 “网络和共享中心” 3.选择 “更改适配器设置” 4.选择 “VMnet8”&#xff0c;双击打开 5.选择 “属性” 找到 “Internet …

【idea】idea2024最新版本下载_安装_破解

1、下载 下载地址&#xff1a;下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 下载完成&#xff1a; idea破解脚本下载链接&#xff1a;https://pan.baidu.com/s/1L5qq26cRABw8XuEn_CngKQ 提取码&#xff1a;6666 下载完成&#xff1a; 2、安装 1、双击idea的安装包&…

《计算机网络微课堂》1-6 计算机体系结构

常见的计算机网络体系结构 从本节课开始&#xff0c;我们要用 4 次课的时间来介绍有关计算机网络体系结构的知识&#xff0c;具体包含以下内容&#xff1a; 一&#xff0c;常见的计算机网络体系结构二&#xff0c;计算机网络体系结构分层的必要性三&#xff0c;计算机网络体系…