JS学习笔记

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

一、JS基础

        1.1、解释型和编译型语言的区别

        编译型语言通篇先编译出一个文件程序会自动执行这个文件。

                优点快

                缺点不能跨平台。

        解释型语言编译一句执行一句没有编译文件相当于直接编译成1010机器语言然后执行。

                优点跨平台

                缺点稍微慢。

        注意java严格意义上不算编译语言也不是解释型语言编译出文件后java虚拟机解释执行使java可跨平台。

        1.2、概述

        计算机不能直接理解任何除机器语言以外的语言所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具被称为翻译器。

在这里插入图片描述


        翻译器翻译的方式有两种:一个是编译另外一个是解释。两种方式之间的区别在于翻译的时间点不同。例如Java是编译器js就是解释型
        编译器 是在代码执行之前进行编译生成中间代码文件
        解释器 是在运行时进行及时解释并立即执行(当编译器以解释方式运行的时候也称之为解释器)

         1.3 执行过程

在这里插入图片描述

 举一个简单的例子😛😛😛😛类似于请客吃饭:

        编译语言∶首先把所有菜做好才能上桌吃饭😭。
        解释语言:好比吃火锅边吃边涮同时进行😃。

二、字符串与其他类型相互转换

1、变量转换成字符串

        Js变量转为字符串类型的方法有以下3种大家可以根据场景选择适合的方法

        1. toString()用法

变量 = 变量.toString();

        2. String()

变量 = String(变量);

        拓展toString()和string() 有什么不同

        除了使用的语法不同之外最大的区别是有些值无法通过toString()转化如undefined和null。

<script>
    var s = null;
    // s = s.toString()  报错
    s = String(s);                  // 运行正常          
    console.log(s, typeof(s));// 输出10 String
</script>

        3. 拼接字符串     

        通过字符串拼接可以将非字符串转为字符串类型我们通过下面案例演示

<script>
    var a = 10, b = true, c = undefined, d = null, e = '你好';
    console.log(a + '');        // 输出字符串 10
    console.log(b + '');        // 输出字符串 true
    console.log(c + '');        // 输出字符串 undefined
    console.log(d + '');        // 输出字符串 null
    console.log(a + '10');      // 输出字符串 1010
    console.log(e + a);         // 输出字符串 你好10
</script>

2、JS类型转换强制类型转换+隐式类型转换

        JavaScript中有五种基本数据类型其中包括 String、Number、Boolean、Function、Symbol、三种对象类型其中包括 Object、Date、Array和两种特殊类型其中包括 Null、Undefined。不同的类型之间运算需要先对数据的类型进行转换类型转换是将一种数据类型转换为另一种数据类型的过程在日常开发中我们会经常用到。

        在 JavaScript 有两种类型转换的方式分别是隐式类型转换和强制类型转换也叫显式类型转换。

1. JS 隐式类型转换

        隐式转换就是自动转换通常发生在一些数学运算中。因为 JavaScript 是一种弱类型的语言在一个表达式中运算符两边的类型可以不同比如一个字符串和一个数字相加JavaScript 解释器会在运算之前将它们的类型进行转换如下所示

var str = "http://c.biancheng.net/";
var num = 123;
var res = str + num;
document.write(typeof res); // 输出string
document.write(res); // 输出http://c.biancheng.net/123

        通过运行结果可以看出将一个字符串与一个数字相加会得到一个字符串类型的值。如果是在 C语言或者 Java 语言中的话上面的运算会因为运算符两边的数据类型不一致而导致报错但在 JavaScript 中则不会因为在运算之前 JavaScript 解释器会将上面的 num 变量隐式的转换为字符串类型之后再进行运算。

JavaScript 中表达式中包含以下运算符时会发生隐式类型转换

  • 算术运算符加+、减-、乘*、除/、取模%
  • 逻辑运算符逻辑与&&、逻辑或||、逻辑非!
  • 字符串运算符+、+=。

示例代码如下

document.write("3" - 2); // 输出1
document.write("3" + 2); // 输出"32"
document.write(3 + "2"); // 输出"32"
document.write("3" * "2"); // 输出6
document.write("10" / "2"); // 输出5
document.write(1 + true); // 输出2
document.write(1 + false); // 输出1
document.write(1 + undefined); // 输出NaN
document.write(3 + null); // 输出3
document.write("3" + null); // 输出"3null"
document.write(true + null); // 输出1
document.write(true + undefined); // 输出NaN

通过运行结果可以得出

  • 字符串加数字数字会转换为字符串
  • 数字减字符串字符串会转换为数字如果字符串无法转换为数字例如"abc"、"JavaScript"则会转换为 NaN
  • 字符串减数字字符串会转换为数字如果字符串无法转换为数字则会转换为 NaN
  • 乘、除运算时也会先将字符串转换为数字。

2. JS 强制类型转换

        与隐式类型转换相反强制类型转换需要手动进行在 JavaScript 中强制类型转换主要是通过调用全局函数来实现的例如 Number()、Boolean()、parseInt()、parseFloat() 等。

1) 使用 Number() 函数

Number() 函数的语法格式如下

Number(value);

示例代码如下

document.write(Number("10.5")); // 输出10.5
document.write(Number(true)); // 输出1
document.write(Number(false)); // 输出0
document.write(Number(null)); // 输出0

在使用 Number() 函数时有以下几点需要注意

  • 如果参数中只包含数字将转换为十进制数字忽略前导 0 以及前导空格如果数字前面有负-号那么-会保留在转换结果中如果数字前面有加+号转换后会删掉+号
  • 如果参数中包含有效浮点数字将转换为对应的浮点数字忽略前导 0 以及前导空格同样对于数字前的正负号会保留负号忽略正号
  • 如果参数中包含有效的十六进制数字将转换为对应大小的十进制数字
  • 如果参数为空字符串将转换为 0
  • 如果参数为布尔值则将 true 转换为 1将 false 转换为 0
  • 如果参数为 null将转换为 0
  • 如果参数为 undefined将转换为 NaN
  • 如果参数为 Date 对象将转换为从 1970 年 1 月 1 日到执行转换时的毫秒数
  • 如果参数为函数、包含两个元素以上的数组对象以及除 Date 对象以外的其他对象将转换为 NaN
  • 如果在参数前面包含了除空格、+和-以外的其他特殊符号或非数字字符或在参数中间包含了包括空格、+和-的特殊符号或非数字字符将转换为 NaN。

2) 使用 parseInt() 函数

        parseInt() 函数的语法格式如下

parseInt(string, radix);

        其中 string 为要转换的值如果参数不是一个字符串则会先将其转换为字符串字符串开头的空白将会忽略radix 为一个可选参数表示字符串的基数取值范围在 2 到 36 之间例如将 radix 参数设置为 16则表示将 string 转换为一个十六进制数。

        在使用 parseInt() 函数时有以下几点需要注意

  • 解析字符串时会忽略字符串前后的空格如果字符串第一个字符为负号-那么负号会保留在转换结果中如果字符串第一个字符为正号+那么转换后将忽略正号
  • 如果字符串前面为除空格、正号+、负号-以外的特殊符号或者除 a～f或 A～F之外的非数字字符那么字符串将不会被解析返回结果为 NaN
  • 在字符串中包含空格、小数点.等特殊符号或非数字的字符时解析将在遇到这些字符时停止并返回已解析的结果
  • 如果字符串是空字符串返回结果为 NaN。

示例代码如下

document.write(parseInt("1101",2)); // 输出13
document.write(parseInt("a37f",16)); // 输出41855
document.write(parseInt("123")); // 输出123
document.write(parseInt(" 123")); // 输出123

3) 使用 parseFloat() 函数

        parseFloat() 函数的语法格式如下

parseFloat(string);

        其中 string 为要被转换为浮点数的值如果转换失败则会返回 NaN。
        在使用 parseFloat() 函数时有以下几点需要注意

  • 如果在解析的过程中遇到了正号+、负号-、数字0-9、小数点.、或科学计数法中的指数e 或 E以外的字符则会忽略该字符以及之后的所有字符并返回解析到的浮点数
  • 解析过程中若遇到多个小数点则会在解析到第二个小数点时停止并返回第二个小数点之前的解析结果
  • 解析过程中会忽略参数开头或末尾的空白字符
  • 如果参数的第一个字符不能被解析为数字则会返回 NaN。

示例代码如下

document.write(parseFloat("312.456"));  // 输出312.456
document.write(parseFloat("-3.12"));    // 输出-3.12
document.write(parseFloat("+3.12"));    // 输出3.12
document.write(parseFloat(".12"));      // 输出0.12

三、JS断点调试

        参考JS实用技巧之断点调试详解_js断点调试_M-Codes的博客-CSDN博客

        JS调试Debug教程[简明版]

四、数据类型基本数据类型+引用类型

        JavaScript 是一种动态类型的语言在定义变量时不需要提前指定变量的类型变量的类型是在程序运行过程中由 JavaScript 引擎动态决定的另外您可以使用同一个变量来存储不同类型的数据。

var a;  // 此时 a 为 Undefined
a = "http://c.biancheng.net/"; // 此时 a 为 String 类型
a = 123;  // 此时 a 为 Number 类型

JavaScript 中的数据类型可以分为两种类型

  • 基本数据类型值类型字符串String、数字Number、布尔Boolean、空Null、未定义Undefined、Symbol在存储时变量中存储的是值本身因此叫做值类型。
  • 引用复杂数据类型对象Object、数组Array、函数Function。在存储时变量中存储的仅仅是地址引用因此叫做引用数据类型。通过new关键字创建的对象系统对象、自定义对象。

提示Symbol 是 ECMAScript6 中引入的一种新的数据类型表示独一无二的值。

typeof 操作符

        在开始介绍各种数据类型之前先来了解一下 typeof 操作符使用 typeof 操作符可以返回变量的数据类型。

        typeof 操作符有带括号和不带括号两种用法如下例所示

typeof x;       // 获取变量 x 的数据类型
typeof(x);      // 获取变量 x 的数据类型

1. JS 基本数据类型

1) String 类型

        字符串String类型是一段以单引号''或双引号""包裹起来的文本例如 '123'、"abc"。需要注意的是单引号和双引号是定义字符串的不同方式并不是字符串的一部分。

        定义字符串时如果字符串中包含引号可以使用反斜杠\来转义字符串中的引号或者选择与字符串中不同的引号来定义字符串如下例所示

var str = "Let's have a cup of coffee."; // 双引号中包含单引号
var str = 'He said "Hello" and left.'; // 单引号中包含双引号
var str = 'We\'ll never give up.'; // 使用反斜杠转义字符串中的单引号

2) Number 类型

        数值Number类型用来定义数值JavaScript 中不区分整数和小数浮点数统一使用 Number 类型表示如下例所示

var num1 = 123; // 整数
var num2 = 3.14; // 浮点数

注意Number 类型所能定义的数值并不是无限的JavaScript 中的 Number 类型只能表示 -(253 - 1) 到 (253 -1) 之间的数值。

对于一些极大或者极小的数也可以通过科学指数计数法来表示如下例所示

var y=123e5; // 123 乘以 10 的 5 次方即 12300000
var z=123e-5; // 123 乘以 10 的 -5 次方即 0.00123

另外Number 类型中还有一些比较特殊的值分别为 Infinity、-Infinity 和 NaN其中

  • Infinity用来表示正无穷大的数值一般指大于 1.7976931348623157e+308 的数
  • -Infinity用来表示负无穷大的数值一般指小于 5e-324 的数
  • NaN即非数值Not a Number 的缩写用来表示无效或未定义的数学运算结构例如 0 除以 0

提示如果某次计算的结果超出了 JavaScript 中 Number 类型的取值范围那么这个数就会自动转化为无穷大正数为 Infinity负数为 -Infinity。

3) Boolean 类型

        布尔Boolean类型只有两个值true真或者 false假在做条件判断时使用的比较多您除了可以直接使用 true 或 false 来定义布尔类型的变量外还可以通过一些表达式来得到布尔类型的值例如

var a = true; // 定义一个布尔值 true
var b = false; // 定义一个布尔值 false
var c = 2 > 1; // 表达式 2 > 1 成立其结果为“真true”所以 c 的值为布尔类型的 true
var d = 2 < 1; // 表达式 2 < 1 不成立其结果为“假false”所以 c 的值为布尔类型的 false

4) Null 类型

        Null 是一个只有一个值的特殊数据类型表示一个“空”值即不存在任何值什么都没有用来定义空对象指针。

        使用 typeof 操作符来查看 Null 的类型会发现 Null 的类型为 Object说明 Null 其实使用属于 Object对象的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

5) Undefined 类型

        Undefined 也是一个只有一个值的特殊数据类型表示未定义。当我们声明一个变量但未给变量赋值时这个变量的默认值就是 Undefined。例如

var num;
console.log(num); // 输出 undefined

        在使用 typeof 操作符查看未赋值的变量类型时会发现它们的类型也是 undefined。对于未声明的变量使用 typeof 操作符查看其类型会发现未声明的变量也是 undefined示例代码如下

var message;
console.log(typeof message); // 输出 undefined
console.log(typeof name); // 输出 undefined

6) Symbol 类型

        Symbol是ECMAScript6 中引入的一种新的数据类型表示独一无二的值Symbol 类型的值需要使用 Symbol() 函数来生成如下例所示

var str = "123";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1); // 输出 Symbol(123)
console.log(sym2); // 输出 Symbol(123)
console.log(sym1 == sym2); // 输出 false 虽然 sym1 与 sym2 看起来是相同的但实际上它们并不一样根据 Symbol 类型的特点sym1 和 sym2 都是独一无二的

2. JS 引用数据类型

1) Object 类型

        JavaScript 中的对象Object类型是一组由键、值组成的无序集合定义对象类型需要使用花括号{ }语法格式如下

{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}

        其中 name1、name2、name3、...、nameN 为对象中的键value1、value2、value3、...、valueN 为对应的值。

        在 JavaScript 中对象类型的键都是字符串类型的值则可以是任意数据类型。要获取对象中的某个值可以使用对象名.键的形式如下例所示

var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
console.log(person.name); // 输出 Bob
console.log(person.age); // 输出 20

2) Array 类型

        数组Array是一组按顺序排列的数据的集合数组中的每个值都称为元素而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[ ]数组中的每个元素使用逗号进行分隔例如

[1, 2, 3, 'hello', true, null]

另外也可以使用 Array() 函数来创建数组如下例所示

var arr = new Array(1, 2, 3, 4);
console.log(arr); // 输出 [1, 2, 3, 4]

数组中的元素可以通过索引来访问。数组中的索引从 0 开始并依次递增也就是说数组第一个元素的索引为 0第二个元素的索引为 1第三个元素的索引为 2以此类推。如下例所示

var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]); // 输出索引为 0 的元素即 1
console.log(arr[5]); // 输出索引为 5 的元素即 true
console.log(arr[6]); // 索引超出了范围返回 undefined

3) Function 类型

        函数Function是一段具有特定功能的代码块函数并不会自动运行需要通过函数名调用才能运行如下例所示

function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res); // 输出 Hello, Peter

        此外函数还可以存储在变量、对象、数组中而且函数还可以作为参数传递给其它函数或则从其它函数返回如下例所示

var fun = function(){
    console.log("http://c.biancheng.net/js/");
}

function createGreeting(name){
    return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
console.log(result); // 输出 Hello, Peter

参考资料

js编译语言与解释型语言详解

JavaScript基础——第五节解释型语言和编译型语言标识符关键字保留字的区别_123加油^O^的博客-CSDN博客

JS转换成字符串类型的三种方法 - 编程是我快乐 - 博客园

JS类型转换强制类型转换+隐式类型转换

JS实用技巧之断点调试详解_js断点调试_M-Codes的博客-CSDN博客

JS数据类型基本数据类型+引用类型

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：vue3学习笔记之router(router4 + ts)

下一篇：LwIP系列--性能数据统计

“JS学习笔记” 的相关文章

Swig工具在win10上使用1年前 (2023-02-02)
数据库实践丨使用MTK迁移Mysql源库后主键自增列导致数据无法插入问题1年前 (2023-02-02)
一个99年菜鸟研究生的疫情三年1年前 (2023-02-02)
python破解wifi教程1年前 (2023-02-02)
Linux ALSA驱动之三：PCM创建流程源码分析（基于Linux 5.18）1年前 (2023-02-02)
内网穿透软件对比——cpolar : 网云穿（下）1年前 (2023-02-02)
数字签名技术1年前 (2023-02-02)
01背包问题的三种求解方法——动态规划、回溯法、分支限界法的具体思路介绍及对比1年前 (2023-02-02)
【如何提高IT运维效率】深度解读京东云基于NLP的运维日志异常检测AIOps落地实践1年前 (2023-02-02)
【大数据hadoop】基于centos7搭建haoop与hive1年前 (2023-02-02)

阿里云国际版