当前位置: 首页 > news >正文

十三、JS进阶(二)

1. 深入对象

1.1 创建对象的三种方式

1. 利用对象字面量创建对象

const o = {name:'佩奇'
}

2. 利用new Object创建对象

const o = new Object({name:'佩奇'})
console.log(o);//{name:'佩奇'}
        const obj = new Object({age:18});obj.uname = '张三';console.log(obj);

3. 利用构造函数创建对象

1.2 构造函数

构造函数:是一种特殊的函数,主要用来初始化对象。

构造函数在技术上是常规函数。不过有两个约定:

1. 它们的命名以大写字母开头。

2. 它们只能由“new”操作符来执行。

        // 创建一个猪 构造函数function Pig(name,age){this.name = name;this.age = age;}// console.log(new Pig('佩奇',6))const p = new Pig('佩奇',6)

1. 使用new关键字调用函数的行为被称为实例化。

2. 实例化构造函数时没有参数时可以省略()

3. 构造函数内部无需写return,返回值即为新创建的对象。

4. 构造函数内部的return返回的值无效,所以不要写return。

5. new Object() new Date()也是实例化构造函数。

实例化执行过程:

说明:

1. 创建新对象

2. 构造函数this指向新对象

3. 执行构造函数代码,修改this,添加新的属性。

4. 返回新对象。

1.3 实例成员&静态成员

实例成员:通过构造函数创建的对象称为实例对象,实例对象中的属性和方法成为实例成员。(实例属性和实例方法)

        function Pig(name,age){this.name = name;}const peiqi = new Pig('佩奇')const qiaozhi = new Pig('乔治')peiqi.name = '小猪佩奇'peiqi.sayHi = () =>{console.log('我是佩奇')}console.log(peiqi === qiaozhi)// false

说明:

1. 为构造函数传入参数,创建结构相同但值不同的对象。

2. 构造函数创建的实例对象彼此独立互不影响。

静态成员:构造函数的属性和方法被称为静态成员(静态属性和静态方法)。

        function Pig(name){this.name = name;}Pig.eyes = 2 //静态属性Pig.sayHi = function(){ //静态方法console.log(this)}Pig.sayHi()console.log(Pig.eyes)// 2

说明:

1. 静态成员只能构造函数来访问。

2. 静态方法中的this指向构造函数。

比如:Data.now()、Math.PI、Math.random()。

2. 内置构造函数

在JS中最主要的数据类型有6种:

基本数据类型:

字符串、数值、布尔、undefined、null

引用类型:

对象

但是,会有特殊情况:

        //普通字符串const str = 'red';console.log(str.length); // 3console.num = 12console.log(num.toFixed(2)); // 12.00//js底层完成,把简单数据类型包装为引用数据类型const str = new String('red');

其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称之为包装类型。

JS中几乎所有的数据都可以基于构成函数创建。

内置构造函数:

引用类型:Object、Array、RegExp、Date等。

包装类型:String、Number、Boolean等。

Object

Object是内置的构造函数,用于创建普通对象。

三个常用的静态方法(只有构造函数Object可以调用的)

1. 作用:Object.keys静态方法获取对象中的所有属性(键)

2. 作用:Object.vs静态方法获取对象中的所有属性值。

语法:

        const o = {uname:'张三',age:18}//获得所有的属性名console.log(Object.keys(o));//返回数组['uname','age']//获得所有的属性值console.log(Object.values(o));//返回数组['张三',18]

注意:返回的是一个数组。

3. 作用:Object.assign静态方法常用于对象拷贝。

语法:

        const o = {uname:'张三',age:18}//获得所有的属性名console.log(Object.keys(o));//返回数组['uname','age']//获得所有的属性值console.log(Object.values(o));//返回数组['张三',18]const oo = {}Object.assign(oo,o)//将o的属性赋值给oo

Array

Array是内置的构造函数,用于创建数组。

数组常见实例方法:

方法作用说明
forEach遍历数组不返回数组,经常用于查找遍历数组元素
filter过滤数组返回新数组,返回的是筛选满足条件的数组元素
map迭代数组返回新数组,返回的是处理之后的数组元素,想要使用返回的新数组
reduce累计器返回累计处理的结果,经常用于求和等

作用:reduce返回累计处理的结果,经常用于求和等。

基本语法:

arr.reduce(function(){},起始值)
arr.reduce(function(上一次值,当前值){},起始值)

参数:

1. 如果有起始值,则把初始值累加到里面。

        const arr = [1,5,8]//1.没有初始值// const total = arr.reduce(function (prev,current) {//     return prev + current// })// console.log(total)//2.有初始值const total = arr.reduce(function (prev,current) {return prev + current},10)console.log(total)//3.箭头函数const total2 = arr.reduce((prev,current) => prev + current,10)console.log(total2)

reduce执行过程:

1. 如果没有起始值,则上一次值以数组的第一个数组元素的值。

2. 每一次循环,把返回值给做为下一次循环的上一次值。

3. 如果有起始值,则起始值做为上一次值。

http://www.dtcms.com/a/561339.html

相关文章:

  • bfs/dfs-最大连通问题
  • 找考卷做要去哪个网站百度推广app怎么收费
  • Matlab自学笔记六十七:(编程实例)非线性方程组求解fsolve
  • 【第1章·第2节】MEX文件的用途详解,在MATLAB中执行“Hello world”
  • 如何做网站的充值功能网站广告源码
  • OpenCV(十七):绘制多边形
  • 数据结构:双向链表-从原理到实战完整指南
  • 网站 栏目管理wordpress瘦身
  • 4D毫米波雷达理解
  • 了解AI 用好AI 拥抱AI哪个公司好
  • 用python streamlit sqlite3 写一个聊天室
  • 【Swift】LeetCode 76. 最小覆盖子串
  • 网站优化哪家专业工厂关键词网络推广
  • 颍泉网站建设写一个网站
  • 视觉Transformer的介绍即ViT模型的搭建(pytorch版本)
  • Python企业编码规范
  • 电力电子技术 第十二章——方波逆变器
  • 网站后台 模板商业网站建设案例课程百度云
  • 从零开始学网站建设新农村建设投诉在哪个网站
  • FastAPI使用详解
  • idmd设计邯郸整站优化
  • MIT-两个多项式相乘
  • 【每天一个AI小知识】:什么是AI Agent?
  • 547.力扣LeetCode_ 省份数量
  • Python编程实战—面向对象与进阶语法 | 属性与方法
  • 县级林业网站建设管理河南省住房和城乡建设厅电话
  • 自己怎么做返利网站中国做陶壶的网站有哪些
  • C++11新特性介绍
  • 软考 系统架构设计师系列知识点之杂项集萃(187)
  • 好用百度seo排名优化软件工具(seo快速优化软件)