JS基础深入复习与总结 - 数据类型

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量142 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46022982/article/details/117427115
版权

JavaScript:是直译型的脚本语言。是一个动态类型，弱类型，基于原型的语言。需要通过解释器对语句进行翻译，而这个翻译官就是JS引擎。

脚本语言：需要一个宿主。依赖于引擎，在浏览器当中执行。

  • 动态类型：类型是可以变化的。

    var a = 1;
a = "abc";// 由Number类型转为了字符串
a = {};
a = true;

  • 弱类型：程序员在开发的时候可以忽略类型。

    • 定义变量时,可以忽略类型。

      var a = true;
var b = {};
var c = "";
var d = true;

    • 函数传参时，函数返回结果时，可以忽略类型。

      function run(a,b){
	if(typeof a === "number" && typeof b === "number"){
        
    }else{
        
    }
    return 23;
}
run(1,2);
run("a","b");
run({},function(){})

    • 定义对象，设置属性时。可以忽略类型。

      var obj = {
	a:true,
    b:"123",
    c:function(){
        
    }
}
obj.c = 567;
var arr = [1,2,3];

  • 基于原型

    ​ 类，对象。 对象是通过类实例化出来的。 实例化：new

    ​ js是没有类的概念，没有继承。

    ​ JS是有对象的，JS当中可以将构造函数视为类。

    JS当中的继承，其实是对象继承对象。原型

计算机语言：

​ 程序员与计算机资源的是源码。

​ 计算机语言分为两部分：

  • 低级语言
    • 汇编语言：是指令。指令与机器语言的指令是1：1的关系。最终是由汇编器对其进行翻译，翻译为机器语言。
    • 机器语言：指令。这些指令为二进制。机器语言才是最底层的语言。
  • 高级语言
    * 编译型语言：c,c++。不能够直接运行，在运行之前需要一次性提前编译。生成一个相对应的执行文件。在服务器当中运行的是该文件。
    * 解释型语言：又称为直译型语言。javascript,shell,python。是程序在执行时进行解释（翻译），JS引擎会一行一行的对其进行翻译。
    * 混合型语言：拥有编译与解释共同的特点。 JAVA ,C#

一、JS基础深入复习与总结

1、数据类型

1.1、数据类型分类
  • 基本(值)类型

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol ,BigInt

在基本类型中，有三个比较特殊的存在：String Number Boolean，由于这三个基本类型都有自己对应的包装对象，也被称之为基本包装类型。

  • 怎么生成一个基本包装类型的包装对象呢?
var str = "abcdefg";
// 包装对象，首先它是一个对象。包装的是你的基本数据类型。
var str1 = new String("abcdefg");
// Object会根据传入的参数，生成相对应类型的包装对象。
var str2 = new Object("abcdefg");
console.log(str1,str2);

var num1 = new Number(1234);
var num2 = new Object(1234);
console.log(num1,num2);

var bol1 = new Boolean(true);
var bol2 = new Object(true);
console.log(bol1,bol2);
  • 基本包装类型不是对象，为什么会有属性呢?

基本包装类型当中的属性与方法，全部都是来自于相对应包装对象的原型。会隐式执行下面案例当中的{}程序

// 对象：拥有属性或方法的值，可以称其为对象。
var userName = "刘德华";
console.log(userName.charAt(0));// 刘
// 隐式执行：
{
    // 创建一个String类型的包装对象，值为刘德华
    var _userName = new String("刘德华");
    // 输出
    console.log(_userName.charAt(0));
    // 将_userName在内存中清除。
    _userName = null;
}

  • 引用类型和基本包装对象的区别？

    // 答：生命周期不同。引用类型在定义之后，在自己的作用域执行完毕之前会一直保存在内存当中。而包装对象往往是一瞬间。
// 定义一个对象类型。
var obj = {
age:12
};
console.log(obj.age);// 12


// 定义了一个字符串类型的变量
var str = "年龄";
// 增加属性number值为20
str.number = 20;
// 会隐式执行：
{
    // 生成一个包装对象
    var _str = new String("年龄");
    // 赋值
    _str.number = 20;
    // 清空
    _str = null;
    // console.log(_str);
}
console.log(str.number);// undefined
// 会隐式执行
{
    var _str2 = new String("年龄");
    console.log(_str2.number);
    _str2 = null;
}

  • 如何给基本类型添加方法或者属性呢？

答：将属性或方法放置到相对应的包装函数的原型对象当中。

 // 练习：增加一个名字为last的方法，该方法返回字符串的最后一个字符
 String.prototype.last = function () {
     console.log("last 执行了",this);
     return this.charAt(this.length-1);
 }

var str = "我爱你中国，我亲爱的母亲，我为你流泪，也为你自豪！"
// console.log(str[0]);
// console.log(str.charAt(0));
console.log(str.last());// 输出str的最后一个字符
// {
//     var _str = new String("我爱你中国，我亲爱的母亲，我为你流泪，也为你自豪！");
//     _str.last();
// }

  • “ == ” 运算符将原始值和其包装对象视为相等，“ === ”全等运算符则视为不等。

    var str = "abc";
var str1 = new String("abc");
console.log(str == str1,str === str1);// true false

  • 最后，我们可以通过String（），Number（），Boolean（）构造函数来显式创建包装对象。但是通常情况下不建议这么做。

  • 对象(引用)类型

对象(Object)、数组(Array)、函数(Function)

// 后面详细介绍
1.2、数据类型检测
  • typeof

JavaScript是一门弱语言，它在声明变量时无需确定变量的类型，JavaScript在运行时会自动判断。那么如何判断一个变量的类型呢，JavaScript提供了typeof运算符，用来检测一个变量的类型。

  • typeof运算符的返回类型为字符串 : undefined、boolean、 string 、 number 、 object 、 function

    • 可以区别: 数值, 字符串, 布尔值, undefined, function
    var a;
console.log(typeof a);// undefined
function fn(num) {
    console.log(typeof num);// undefined
}
console.log(typeof fn);// function
console.log(typeof fn());// undefined
var obj = {};
console.log(obj.userName);// undefined

// 如果写的是表达式加上括号，如果不写括号，那输出的是表达式的结果
var bol = true;
console.log(typeof bol);// boolean
console.log(typeof(bol));// boolean
console.log(typeof 1===1);// false
console.log(typeof(1===1));// boolean

var str = "123";
console.log(typeof str);// string
console.log(typeof str/1);// NaN
console.log(typeof(str/1));// number

var und = undefined;
console.log(typeof und);// undefined
    • 不能区别: null与对象, 一般对象与数组
    var obj= {};
var arr = [];
console.log(typeof obj,typeof arr);// object object

var n = null;
console.log(typeof n);// object

  • instanceof 略

    console.log([1,2,3,4] instanceof Array);// true
console.log(1 instanceof Array);// false

  • constructor 略

1.2(附加) in与hasOwnProperty的区别：
    var obj = {
        userName:"zhangsan"
    }
    obj.__proto__.run = function(){

    }
    // in 用于判断对象是否拥有指定属性。（属性在实例中或在原型链当中只要存在即为true）
    // hasOwnProperty 只判断实例
    console.log("userName" in obj);// true
    console.log(obj.hasOwnProperty("userName"));// true
    console.log("run" in obj);// true
    console.log(obj.hasOwnProperty("run"));// false
1.3、Undefined 和 Null
  • Undefined

Undefined类型只有一个值，即undefined。

// Undefined类型只有一个值，即undefined。
console.log(undefined in window);// true

常见的生成Undefined的环境：

  • 变量被声明了，但没有赋值时，就等于undefined

    var a;
console.log(a);// undefined

  • 调用函数时，应该提供的参数没有提供，该参数等于undefined

    function fn(a,b){
	console.log(a,b);// 1 undefined
}
fn(1);

  • 对象没有赋值的属性，该属性的值为undefined

    var obj = {
	userName:"zhangsan";
}
console.log(obj.userName,obj.age);// zhangsan undefined

  • 函数没有返回值时或return右侧没有内容时，默认返回undefined

    // return右侧没有内容时
function fn() {
    return;
}
console.log(fn());// undefined

// 没有返回值时
function fn2() 
}
console.log(fn2());// undefined

Undefined常被用于条件判断

// 复习条件判断。undefined如果直接作为判断条件，为false
if(1===1){
	console.log("成立");
}
if(true){
	console.log("成立2");
}
if(undefined){
	console.log("不成立1");
}
if(!undefined){
	console.log("成立3");
}
if(0){// false
    console.log("不成立2");
}
if(""){// false
    console.log("不成立3");
}

// 1、判断函数接收的参数。 0 "" false不考虑
function fn(a) {
    if(a){
        console.log("有值");
    }else{
        console.log("无值");
    }
}
// 2、判断函数接收的参数。考虑0 "" false
function fn2(a){
    if(a !== undefined){
        console.log("有值")
    }else console.log("无值")
}
// fn2("");

// 3、判断对象是否拥有指定的属性
var obj = {
    userName:"zhangsan"
}
// 如果考虑0 false "" ,条件更改为if(obj.userName !== undefined)
if(obj.userName){
    // 有值
    console.log("有值")
}else console.log("无值")

  • Null

    # 道理经：无，万物之始也，有，万物之母也。

null 类型是第二个只有一个值的数据类型，这个特殊的值是 null

从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回"object"的原因。

console.log(typeof null);// object

常见Null的环境：

  • 作为函数的参数，当你不想传，或者是不需要传参数时，可以使用null.

    // obj 接收的一个形参。要求接收的类型是一个对象
function fn(obj,a){
    if(obj === null) return;
    if(typeof obj === "object"){
        console.log("123");
    }
}
fn(null,1);

  • 作为对象原型链的终点

    function Box(){

}
var box = new Box();
// box 是通过构造函数Box实例化（new）出来
// box.__proto__ === Box.prototype
console.log(box.__proto__ === Box.prototype);// true
console.log(Box.prototype.__proto__ === Object.prototype);// true
console.log(Object.prototype.__proto__);// null

Null的使用场景：

  • 初始赋值, 表明要赋值的对象为null

    // 未来该值有可能是对象的话，初始值可以设置为null.
var obj = null;// 将初始值设置为null,说明后面有可能要将其设置为一个对象
// .... 逻辑
obj = {
    a:1,
    b:2
};

var str = ""; // 说明后续值应该是一个字符串
var where = null;
var keyword = ""
if(接收的关键字是否符合要求){
   where= {
       keyword:keywored
   }
}

  • 内存回收:将值设置为 null,可以对其进行回收。

    var a = 1;
var b = {};
a = null;
b = null;
  • null和undefined的区别：
  • undefined 代表变量没有赋值
  • null 代表变量赋值，只是值为null
那么遥远
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
【JS】万字整理JavaScript相关基础技术面试题总结 - 前端面试必备 - 基础知识总结 - 秋招冲鸭
YK菌的博客
08-09 3892
面试题系列之——JavaScript
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 589
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
JS复习4-----继续深入
qq_44625142的博客
04-05 189
JS this关键字 a.面向对象语言中，this表示当前对象的一个引用，但在JS中this不是固定不变的，它会随着执行环境的改变而改变，具体如下： 1 在方法中，this表示该方法所属的对象 2 如果单独使用，this表示全局对象 3 在函数中，this表示全局对象 4 在函数中，在严格模式下，this是未定义的 5 在事件中，this表示接收事件的元素 6 类似call()和apply()方...
前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)(1)
2401_84152109的博客
04-22 944
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
深入浅出JavaScript-老杜JavaScript基础教程全套完整版+老杨JS应用篇
不要回答的博客
04-16 2130
p1/53 javascript概述 p2/53 HTML中嵌入javascript的第一种方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML中嵌入javascript的第一种方式</title> </head> <body> <!-- 1、实现功能：点击按钮，弹出消息框 2、JS
JavaScript基础语法——继续深入了解js吧（变量、数据类型、循环）
m0_53619602的博客
07-05 201
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 ​ 简单理解：流程控制就是来控制代码按照一定结构顺序来执行 ​ 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。...
JS数据类型、数组、this指向复习
rt3Dmax9的博客
04-19 775
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题。
JavaScript基础--typeof和数据类型转换
youpccc的博客
03-29 561
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里即可获取！！！。
复习js数据类型
weixin_45743513的博客
05-05 75
数据类型 这几天，遇到了很多数据类型的坑。可把我坑惨了。开始带大家深入了解js数据类型之间的小秘密 js数据为弱类型（没有太多数据分类，定义上少了很多要求） 一共分为六大基本数据类型 number（1,2，3） string (“name”,“age”) boolean( true ,flase ) null undefind object 非字符串到字符串的类型转换 1.加号运算符( + )即能用于数字加法，也能用于字符串拼接。 1 例如： console.log("52" +
js代码-js基础复习
07-14
本次复习我们将深入探讨JS的基础知识，包括变量、数据类型、控制流、函数以及对象等核心概念。 1. 变量与数据类型 在JavaScript中，我们使用`var`, `let`或`const`关键字声明变量。`var`是全局或函数作用域，而`let...
front-end-interview:前端面试基础复习
03-07
首先，我们需要了解JavaScript的基础知识，包括但不限于变量、数据类型（原始类型和引用类型）、作用域（全局作用域、局部作用域、块级作用域）、变量提升（Hoisting）以及常被考察的闭包（Closure）概念。...
大学复习资料-Javascript.zip
07-17
1. **基础语法**：JavaScript的基础包括变量（var、let、const）、数据类型（如字符串、数字、布尔、null、undefined、对象、数组、符号）、运算符（算术、比较、逻辑、赋值等）、控制结构（条件语句if/else、switch...
web编程基础复习提纲
08-06
1. **变量与数据类型**：`var`、`let`、`const`声明变量，基本数据类型有字符串、数字、布尔、null、undefined等。 2. **操作符**：算术、比较、逻辑、赋值和位操作符。 3. **控制流程**：`if...else`、`switch`...
JS-SANDBOX:JS练习复习
03-17
在深入探讨JavaScript（JS）的练习与复习之前，我们首先要明白JavaScript是一种广泛使用的编程语言，主要用于构建交互式的Web应用和网页。它允许我们在用户浏览器上运行代码，提供了丰富的功能，如动态内容、表单...
JavaScript检查对象是否包含某个属性
徐三岁的博客
06-28 940
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
JS：防抖与节流函数的实现与应用
qq_45820271的博客
06-29 232
防抖：一连串操作只执行一次。通过设置一个延迟时间，如果这段时间没有再次执行操作则运行目标函数，否则重新计时。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1200
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
最新发布
weixin_63680330的博客
07-04 86
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Java基础知识复习资料.doc
07-11
Java语言是强类型语言，因为在Java中变量必须声明并且初始化后才能使用，必须有明确的类型，而且不能重复定义。...希望本文的内容可以帮助大家复习和巩固Java基础知识，为更深入的学习和实践打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值