JS第一天、数据类型检测、内存释放

复习:

以下类型都是 object

console.log(typeof new Object);
console.log(typeof new Array());
console.log(typeof new Date());
console.log(typeof new RegExp());
console.log(typeof new String());
console.log(typeof new Number());
console.log(typeof new Boolean());
console.log(typeof Math); // 就是一个对象 不能new

// 函数的类型是 function
console.log(typeof new Function());//function

typeof 6种类型 number string boolean undefined object function

in 运算符

作用:判断指定的属性是否存在于被检测的对象中(含自身属性和原型属性,无论普通 / 不可枚举 / 原型)
语法: key in obj

var obj = {"name": "chuanchuan","age": 19, "gender": "male"
};
// 遍历对象
for(var k in obj) {console.log("key = " + k + ", v = " + obj[k]);//这里不能写obj.k;
}
console.log("age" in obj);// true
console.log("toString" in obj); // true   toString 是继承来的var arr = [1, 0];
// 对数组来说,索引就是数组的属性
console.log(2 in arr); // false  0和1在  2就不在了// 判断是否存在属性的方法:
// 1 in
// var obj = {};
// console.log("age" in obj);// 2 if
if(obj.age) {// 如果有 。。。。
} else {// 没有。。。
}

面试题

// 判断两个对象是否相等
console.log({} === {});	 // false
console.log({} == {});   // falseconsole.log("1" == 1);   // true
console.log("1" === 1);  // false

// 值类型(简单类型)
// 如果存储的是数据本身,那么就是值类型5种
// 包括:string / number /boolean / null / undefined
// 引用类型(复杂类型)
// 如果存储的是数据的引用(地址),那么就是引用类型9种
// 包括:Object Function Array Date Math RegExp String Number Boolean

1. 为对象定义方法的两种方式

Product.prototype.buy=function(){};Product.prototype={buy:function(){}
}

2. 用构造函数创建属性的四种方式

/*传参形式*/
function Product(name){this.name = name
}
Product.prototype={}
var iphone = new Product('iphone8s')/*默认值*/
function Product(){this.name = ''this.price=0
}
Product.prototype={}var iphone = new Product()
/*动态添加形式*/
iphone.description='XXXXXXXXXX'
iphone.images=[]/*混合模式*/
function Product(name,price){this.name = namethis.price=pricethis.version=1.0this.add=function(){}
}
Product.prototype={}

3. instanceof; A instanceof B 检测构造函数B的原型属性在不在A的原型链上

在这里插入图片描述

4. 两个面试题

var fun1 = function(){this.name = 'peter';return {name: 'jack'};}var p1 = new fun1();console.log(p1.name)// jackvar fun2 = function(){this.name = 'peter';return 'jack';}var p2 = new fun2();console.log(p2.name)//petervar o = new Object();
// 2 创建一个函数
function foo(obj) {obj.name = "腐女";obj = new Object();obj.name = "屌丝";
}
// 3 调用函数
foo(o);
console.log(o.name); //腐女

5. 函数声明和函数表达式的区别

 var str =''var num=1var bool=truevar date = new Date()console.log(fn())  //21行输出函数  本行输出undefinedconsole.log(fn2())// 报错 Uncaught TypeError: fn2 is not a function//函数声明,变量fn以及其实现被提升到顶部function fn(){console.log('函数')  //第21行}//函数表达式,仅变量fn2被提升到顶部,实现没有被提升var fn2 = function(){console.log('函数变量形式')}

6. 属性的get和set

function Product(name,price) {/*属性 行为 可以为空或者给默认值*/this.name=namethis.price=1000;this.description = '';this.zhekou = ''this.sales = ''this.produceDate//固定写法 写在构造函数内部  Object.defineProperty(this, "属性名", fn)Object.defineProperty(this, "price", {value:5000000,writable: false,  //设置属性是否可写});Object.defineProperty(this, "produceDate", {get: function () {return dateFormat(produceDate,'yyyy年MM月dd日');},set: function (value) {produceDate = value;}});}

7.公有属性 私有属性

function Person(name) {//私有属性,只能在对象构造函数内部使用var className = "用户对象";//公有属性,在对象实例化后调用this.name = name;//私有方法var privateFunction = function () {alert(this.name);}//公有方法this.publicFunction = function () {alert(this.name); //公有属性alert(className); //正确 直接通过变量名访问alert(this.className); //undefined 错误 不能这样访问}//公有属性alert(className);//正确 直接通过变量名访问alert(this.className); //undefined 错误 不能这样访问}

8. 数据类型检测的方法

① typeOf(); 在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。
在这里插入图片描述

console.log(typeof undefined)//'undefined'
console.log(typeof null) //object  未知bug
console.log(typeof true) //'boolean'
console.log(typeof 123)  //'number'
console.log(typeof "abc")  //'string'
console.log(typeof function() {}) //'function'
var arr=[];
console.log(typeof {}) //'object'
console.log(typeof arr)//'object'
console.log(typeof unknownVariable) //'undefined'

②call方法 Object.prototype.toString.call()

console.log(toString.call(123))   // "[object Number]"
console.log(toString.call('123'))  //"[object String]"
console.log(toString.call(undefined))  //"[object Undefined]"
console.log(toString.call(true))  //"[object Boolean]"
console.log(toString.call({}))  //"[object Object]"
console.log(toString.call([]))  //"[object Array]"
console.log(toString.call(function(){}))  //"[object Function]"

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
③ instanceof

var arr = new Array()
console.log(arr instanceof Array)     //---------------> true
console.log(date instanceof Date)     //---------------> true
console.log(fn instanceof Function)   //------------> true//    
alert(f instanceof function)        //------------> false
//  注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
④ constructor 判断一个实例的构造函数是谁 对象.constructor
console.log(arr.constructor === Array) //----------> true
console.log(date.constructor === Date) //-----------> true
console.log(fn.constructor === Function) //-------> true
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
⑤jquery中的检测数据类型的方法
Query提供一系列工具方法,用来判断数据类型,以弥补JavaScript原生的typeof运算符的不足。
以下方法对参数进行判断,返回一个布尔值。

    jQuery.isArray():是否为数组。jQuery.isEmptyObject():是否为空对象(不含可枚举的属性)。jQuery.isFunction():是否为函数。jQuery.isNumeric():是否为数字。jQuery.isPlainObject():是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。jQuery.isWindow():是否为window对象。jQuery.isXMLDoc():判断一个DOM节点是否处于XML文档之中。

总和;
/判断变量是不是数值型/

//因为NaN也是number类型的,它是不能用于数值运算的。

 function isNumber(val){return typeof val === 'number' && isFinite(val);}

// 顺便介绍一下JavaScript isFinite() 函数,isFinite() 函数用于检查其参数是否是有穷大,
// 如果 number 是有限数字(或可转换为有限数字),
// 那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。

 /*判断变量是不是布尔类型*/function isBooleanType(val) {return typeof val ==="boolean";}/*判断变量是不是字符串类型*/function isStringType(val) {return typeof val === "string";}/*判断变量是不是Undefined*/function isUndefined(val) {return typeof val === "undefined";}var a;//a是undefinedvar s = "strType";alert("变量a是Undefined的判断结果是:"+isUndefined(a));alert("变量s是Undefined的判断结果是:"+isUndefined(s));/*判断变量是不是对象*/function isObj(str){if(str && typeof str === 'object' && str.constructor!=Array){return true;}return false}/*判断变量是不是null*/function isNull(val){return  val === null;}/*判断变量是不是数组*///数组类型不可用typeof来判断。因为当变量是数组类型时,typeof会返回object。//方法1function isArray1(arr) {return Object.prototype.toString.call(arr) === '[object Array]';}//方法2function isArray2(arr) {if(arr === null || typeof arr === 'undefined'){return false;}return arr.constructor === Array;}

9. 基本数据类型 string number boolean

   复杂数据类型(引用类型)
Array  Date  Object  RegExp  String  Number  Boolean   function

值类型和引用类型

var obj = {name : "宅男"
};function jinhua(param){//param = objparam.name = "高富帅";//下面的这句代码,重新创建了一个对象,修改了param的指向//但是,obj还指向原来的那个对象 所以,在修改param的时候,修改的是//新创建的对象,跟obj没有关系param = {name:"腐女"};param.name = "宅男";
}jinhua(obj);console.log(obj.name); //高富帅
//值类型做函数的参数
//函数内部的变量,也就是形参和实参只是简单的赋值操作,两个数据独立存储于内存中的
//在函数内部对形参进行修改,不会影响外面的变量//引用类型做函数的参数
//还是把实参存储的地址赋值给了形参,在函数内部,形参同样也指向该对象,
//所以,在函数内部对该对象进行修改,会影响到外面的变量//注意:如果在函数内部重新创建对象,为该形参赋值,那么两个对象将不再有关系
//修改其中一个,另外一个不受影响

10. delete关键字

var obj = {name : "尼古拉斯@赵四",age : 20}
//delete关键字可以用来删除对象的属性或方法,删除未使用var声明的变量
//delete关键字有返回值 用来表示删除属性是否成功
//如果删除的是不存在的属性,返回值为true
//如果删除的属性存在原型当中,那么返回值为true,但是并未删除

示例:删除属性 本身有返回值

	var obj = {age: 19};console.log(obj.age); // 19var b=delete obj.age;console.log(b);//trueconsole.log(obj.age);//undefined

示例:删除变量

	var num = 1;// 没有用var声明的变量num2 = 123;var b1=delete num;   // 使用var/let/const声明的变量是无法通过 delete 运算符删除的var b2=delete num2;  // 可以删除console.log(b1)//falseconsole.log(b2)//trueconsole.log(num);  // 1console.log(num2); // 报错

示例:删除数组中的元素
// 删除数组中的元素

var arr = [1, 2];
delete arr[0];
console.log(arr); // [empty,2]  length还是2

11. 异常捕获

//异常捕获语句的完整形式

    try{//可能出现异常的代码xyz();}catch(e){//出现异常后的处理代码  e就是异常信息throw new  Error("自定义信息")//throw " 自定义信息";}finally{console.log("我是finally中的代码");//不管有没有出现异常,这里的代码都会执行//node.js//做释放资源的操作。}

12. 创建对象的方式

① //1.对象字面量 var obj={key:value,key:value…}
//只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高

 var obj = {name:"演员",singer:"薛段子手",type:"流行"};var obj1 ={name:"吻别",singer:"张学友",type:"流行"}

②.使用内置构造函数

   var obj = new Object();obj.name = "一千个伤心的母牛";obj.singer = "张学友";obj.sing = function () {console.log("一千个伤心的母牛");}var obj1 =new Object();obj.name = "一千个伤心的母牛";obj.singer = "张学友";obj.sing = function () {console.log("一千个伤心的母牛");}

③.封装简单的工厂函数 (不推荐使用了)

function createSong(songName,singerName){var o =new Object();o.name = songName;o.singer = singerName;o.sing = function () {console.log("让我来唱首歌");}return o;//{name:"",singer:"",sing:function...}
}
var obj = createSong("演员","薛之谦");
var obj1 = createSong("一言难尽","张宇");

④/自定义构造函数 Object Array
//什么是构造函数?
//构造函数其实也是函数,但是通常用来初始化对象
//并且和new关键字同时出现

    //new 是用来创建对象的//构造函数是用来初始化对象的(给对象新增成员)//构造函数名,首字母要大写!!!以示区分
	function Person() {//默认隐含的操作,把刚才用new新创建出来的对象赋值给thisthis.name = "尼古拉斯凯奇";this.age = 50;this.sayHello = function () {console.log("Hey man");}//如果这里写其他的代码,会执行吗?  肯定会return null;}var p = new Person();//new Object();console.log(p);p.sayHello();

*****构造函数的执行过程
在这里插入图片描述

    1.使用new关键字创建对象2.调用构造函数,把新创建出来的对象的引用赋值给构造函数内的this3.在构造函数内使用this为新创建出来的对象新增成员4.默认返回新创建的这个对象 (普通的函数,如果不写返回语句,会返回undefined)

*****构造函数的返回值
1.如果不写返回值,默认返回的是新创建出来的对象 (一般都不会去写这个return语句)
2.如果我们自己写return语句 return的是空值(return;)或者是基本类型的值或者null,都会默认返回新创建出来的对象
3.如果返回的是object类型的值,将不会返回刚才新创建的对象,取而代之的是return后面的值

13. 原型

原型:任何一个函数都有一个 prototype 的属性,函数的原型属性(prototype)的是 对象类型 的,由 构造函数 创建出来的对象,会默认链接到其构造函数的这个属性(prototype)上,构造函数的 prototype 属性的作用就是:实现数据共享
使用原型的注意事项
1.使用对象访问属性的时候,如果在本身内找不到就会去原型中查找,但是使用点语法进行属性赋值的时候,并不会去原型中进行查找,如果对象中不存在该属性,就会给该对象新增该属性,而不会去修改原型中的属性

    2.如果在原型中的属性是引用类型的属性,那么所有的对象共享该属性,并且一个对象修改了该引用类型属性中的成员,其他对象也都会受影响3.一般情况下不会将属性放到原型对象中一般情况下原型中只会放需要共享的方法

术语:F.prototype 原型属性
f.proto 原型对象

proto :每个对象都有一个__proto__属性,非标准,对象的 proto 与创建它的构造函数的 prototype 是一个东西

function F() {}
var o = new F();
console.log(o.__proto__ === F.prototype); //true

14. 创建函数的三种方式

	创建函数的三种方式1 函数声明的方式2 函数表达式3 通过 new Function() 创建 (后面单独详细介绍)
		// 1function foo1() {function f() {}}// 2var foo2 = function() {};// var foo2;// foo2 = function() {};// 3var foo3 = new Function();

函数声明和函数表达式的区别
注意:预解析是带var的变量和函数体,而不带Var不会预解析,如果在赋值之前打印就报错 not defined;
在这里插入图片描述

	1 函数表达式中的名字可以省略,如果没有省略,那么这个名字可以是任何的值,还有注意:这个名字只能函数体内部使用2 提升函数声明的方式,整个函数体都会被提升函数表达式,提升的是变量3 函数声明 不能出现在其他语句中
		// 不推荐/*if(true) {function f() {console.log("11111");}} else {function f() {console.log("222222");}}f();*/// 推荐使用这种方式if(true) {var f = function () {console.log("11111");}} else {var f = function () {console.log("222222");}}f();

15.面向对象和面向过程

面向过程:所有的细节、步骤、过程,要一步一步亲历亲为(执行者) 面向对象是对面向过程的封装
面向对象:找到能完成这个事情的对象,让它帮你完成就行(调度者)
// jQuery
// 面向对象的方式
$(“body”).append(“

jQuery创建节点就是如此潇洒

”);

// js
// 面向过程的方式

var p = document.createElement("p");
var txt = document.createTextNode("creat E..,creat T..真麻烦");
p.appendChild(txt);document.body.appendChild(p);

面向对象优势(解决函数封装问题)
封装代码,使代码更好维护
减少全局污染
将功能相近的代码组织到一起维护方便,找错方便
面向对象的基本模型
1 将数据与功能封装成函数(方法)
2 将相关的功能绑定到一起(对象)
3 将功能进行分组(模块)

16. 关于内存释放

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

17. 作用域练习题

在这里插入图片描述
题1
在这里插入图片描述题2
在这里插入图片描述

18. 综合实战题

点击让数字加1 4种方法
在这里插入图片描述
在这里插入图片描述
上下两种一样的原理
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

乐意购项目前端开发 #7

一、购物车 本地购物车 创建cartStore.js文件 创建cartStore.js文件, 将购物车列表数据存在pinia中 import { ref, computed } from "vue"; import { defineStore } from "pinia"; import { useUserStore } from "./user"; import {insertCart…

C#,哥伦布数(Golomb Number)的算法与源代码

1 哥伦布数(Golomb Number) 哥伦布数(Golomb Number)是一个自然数的非减量序列,使得n在序列中正好出现G(n)次。前几个15的G(n)值为:1 2 2 3 3 4 4 4 5 5 5 6…

自研人工智能小工具-小蜜蜂(国外ChatGpt的平替)

国内有非常多好用的人工智能工具,但均无法完全替代国外ChatGpt。 ChatGPT相较于其他国内工具的优势在于以下几点: 创新的语言生成能力:ChatGPT是由OpenAI开发的先进的自然语言生成模型,它采用了大规模的预训练和精细调整方法。因此…

项目02《游戏-08-开发》Unity3D

基于 项目02《游戏-07-开发》Unity3D , 本次任务做物品相互与详情的功能, 首先要做 点击相应, 接下来用接口实现点击相应事件,具体到代码中,我们找到需要响应鼠标事件的对象, 双击PackageCell…

arcpy高德爬取路况信息数据json转shp

最近工作上遇到爬取的高德路况信息数据需要在地图上展示出来,由于json数据不具备直接可视化的能力,又联想到前两个月学习了一点点arcpy的知识,就花了一些时间去写了个代码,毕竟手动处理要了老命了。 1、json文件解读 json文件显…

一键部署FC超级马里奥web游戏

效果展示 安装 拉取镜像 #拉取镜像 docker pull stayhungrystayfoolish666/mario #创建并启动容器 docker run -d -p 10034:8080 --name maliao --restartalways stayhungrystayfoolish666/mario:latest 使用 浏览器打开 http://你的ip:10034/

Qt之使用Qt内置图标

一效果 二.原理 Qt内置图标封装在QStyle中,共七十多个图标,可以直接拿来用,能应付不少简单程序需求,不用自己去找图标并添加到资源文件了。 下面是内置图标的枚举定义: enum StandardPixmap {SP_TitleBarMenuButton,SP_TitleBarMinButton,SP_TitleBarMaxButton,SP_T…

植物病害检测YOLOV8,OPENCV调用

【免费】植物病害检测,10种类型,YOLOV8训练,转换成ONNX,OPENCV调用资源-CSDN文库 植物病害检测,YOLOV8NANO,训练得到PT模型,然后转换成ONNX,OPENCV的DNN调用,支持C,PYTH…

4.0 HDFS 配置与使用

之前提到过的 Hadoop 三种模式:单机模式、伪集群模式和集群模式。 单机模式:Hadoop 仅作为库存在,可以在单计算机上执行 MapReduce 任务,仅用于开发者搭建学习和试验环境。 伪集群模式:此模式 Hadoop 将以守护进程的…

【python】python爱心代码【附源码】

一、实现效果: 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 二、完整代码: import math import random import threading import time from math import sin, cos, pi, log from tkinter import * import re# 烟花相关设置 Fireworks [] m…

kvm qemu 优化 windows 虚拟机速度

主要优化磁盘 io 和网络 io 都选为 virtio windows 驱动下载 https://fedorapeople.org/groups/virt/virtio-win/direct-downloads/archive-virtio/virtio-win-0.1.185-2/virtio-win-0.1.185.iso I also had incredibly slow performance with my virtual HDD. The followin…

如何使用 Supabase Auth 在您的应用程序中设置身份验证

在本文中,您将学习基本的关键概念,这些概念将帮助您掌握身份验证和授权的工作原理。 您将首先了解什么是身份验证和授权,然后了解如何使用 Supabase auth 在应用程序中实现身份验证。 (本文内容参考:java567.com&…

Leetcode刷题笔记题解(C++):1863. 找出所有子集的异或总和再求和

思路如下:递归思路,依次遍历数组中的数,当前数要不要选择像二叉树一样去遍历如下图所示 0 0 (选5) 5(不选5) 0 1 0 1 0 6 …

分析网站架构:浏览器插件

一、Wappalyzer 1.1 介绍 Wappalyzer 是一款用于识别网站所使用技术栈的浏览器插件。它能够分析正在浏览的网页,检测出网站所使用的各种技术和框架,如内容管理系统(CMS)、JavaScript库、Web服务器等。用户只需安装 Wappalyzer 插…

DS18B20温度传感器

文章目录 一、介绍DS18B20了解DS18B20引脚及电路图内部结构框图存储器结构单总线(1 wire bus)介绍单总线电路规范单总线时序结构初始化发送一个数据接收一位数据发送一个字节与接收一个字节 DS18B20操作流程所要使用的数据帧温度存储格式 二、实现温度检…

用bootstrap结合jQuery实现简单的模态对话框

嗨害嗨,我又来了奥。今天呢,给大家分享一个工作中常用到的插件——模态对话框的用法。想必大家在工作中也遇到很多页面,需要用模态对话框进行交互的吧,现在呢,就让我们一起来了解一下它的使用吧。 首先,我…

百面嵌入式专栏(面试题)华为面试题

文章目录 题目:static有什么用途?(请至少说明两种)题目:引用与指针有什么区别?题目:描述实时系统的基本特性题目:全局变量和局部变量在内存中是否有区别?如果有,是什么区别?题目:什么是平衡二叉树?题目:堆栈溢出一般是由什么原因导致的?题目:什么函数不能声明为…

为电子表格嵌入数据库,Excel/WPS一键升级为管理系统

将Excel表格转化为管理系统,这款工具能够实现只需导入表格数据,即可自动生成相应的软件和APP。 表格办公的烦恼,有遇到吧? 对于具有一定规模的企业而言,各类表格如同繁星般众多,既有日常使用的常规表格&a…

算法每日一题: 使用循环数组所有元素相等的最少秒数 | 哈希

大家好,我是星恒,今天给大家带来的是一道需要感觉规律的题目,只要读懂题目中的规律,就可以做出来了 这道题用到了哈希,还有一个关键点比较类似循环队列 题目:leetcode 2808 给你一个下标从 0 开始长度为 n…

支持向量机

支持向量机(Support Vector Machine,SVM)是一个非常优雅的算法,具有非常完善的数学理论,常用于数据分类,也可以用于数据的回归预测中。支持向量机在许多领域都有广泛的应用,如文本分类、图像识别…