现代JavaScript教程笔记(2021第二本)(二)

简介: 现代JavaScript教程笔记(2021第二本)

数据类型


JavaScript 中的值都具有特定的类型,JavaScript 中有8种基本的数据类型(7 种原始类型和 1 种引用类型);

  • number 用于任何类型的数字:整数或浮点数,在 ±(253-1) 范围内的整数。
  • bigint 用于任意长度的整数。
  • string 用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。
  • boolean 用于 true 和 false。
  • null 用于未知的值 —— 只有一个 null 值的独立类型。
  • undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
  • symbol 用于唯一的标识符。
  • object 用于更复杂的数据结构。

我们可以把任何值存到变量里,并且可以在被赋值后改变该变量值的类型;

扩展:动态语言指的是允许这种操作的编程语言,例如 JavaScript,被称为“动态类型”的编程语言,意思是虽然编程语言中有不同的数据类型,但是你定义的变量并不会在定义后,被限制为某一数据类型。

Nunber类型

//Number包括以下:整数和浮点数和Infinity和-Infinity 以及NaN这五种;
1 //整数
1.223 //浮点数
//Infinity 代表数学概念中的 无穷大 ∞。是一个比任何数字都大的特殊值。
//可以通过除以0获取
console.log(1/0);
//也可以直接获取
console.log(Infinity);
//NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果;
alert( "not a number" / 2 );
//NaN 是粘性的。任何对 NaN 的进一步操作都会返回 NaN,所以在数学表达式中有一个NaN,
//会被传播到最终结果
alert( "not a number" / 2 + 5 ); // NaN
//数学运算符
//+ 加
//- 减
//* 乘
// 除 /
//加号是在碰到字符串的情况下会进行拼接而不会进行运算,但其他字符则不会

在 JavaScript 中做数学运算是安全的。脚本永远不会因为数学运算的致命的错误(“死亡”)而停止。最坏的情况下,我们会得到 NaN 的结果。

BigInt 类型

/*
在 JavaScript 中,“number” 类型无法表示大于 (253-1)(即 9007199254740991),
或小于 -(253-1) 的整数。这是其内部表示形式导致的技术限制。在大多数情况下,这个范围就
足够了,但有时我们需要很大的数字,例如用于加密或微秒精度的时间戳。BigInt 类型是最近被
添加到 JavaScript 语言中的,用于表示任意长度的整数。*/
// 尾部的 "n" 表示这是一个 BigInt 类型
//通过将 n 附加到整数字段的末尾来创建 BigInt 值
const bigInt = 1234567890123456789012345678901234567890n;

String 类型

//创建字符串的几种方式,一个字符串可以包含零个(为空)、一个或多个字符。
双引号:"Hello".
单引号:'Hello'.
反引号:`Hello`.
//反引号还可以通过${}进行字符串拼接,剩下俩种都是通过+号进行拼接
`1${2+1}`

单个字符有一个特殊的 “character” 类型,在 C 语言和 Java 语言中被称为 “char”。在 JavaScript 中没有这种类型。只有一种 string 类型;

Boolean 类型

相等和不相等——先转换再比较      (==)
全等和不全等——仅比较而不转换  (===)
//boolean 类型仅包含两个值:true 和 false。
//这种类型通常用于存储表示 yes 或 no 的值:true 意味着 “yes,正确”,false 意味着 
//“no,不正确”。
为true的类型都有: true,字符串,数值大于0,数组,对象;
为false的类型都有:undefined,null,false,0,NaN,空字符串;

“null” 值

null是一个特殊的值他的类型是null。 仅仅是一个代表“无”、“空”或“值未知”的特殊值,JavaScript 中的 null 不是一个“对不存在的 object 的引用”或者 “null 指针”。“undefined”值

特殊值 undefined 和 null 一样自成类型;
undefined 的含义是 未被赋值;
如果一个变量已被声明,但未被赋值,那么它的值就是 undefined;
可以把undefined赋值给变量,一般是作为未进行初始化的事物的默认初始值。

object 类型

object 则用于储存数据集合和更复杂的实体;他的值不是单一的,他是用于存储多种类型的;

symbol 类型

用于创建对象的唯一标识符。他创建的值不会重复;

typeof运算符

返回的是一个字符串类型的值
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object"  (1)
typeof null // "object"  (2)
//这里这个null比较特殊,这是历史遗留的问题,javascript中不同对象在底层都表示为二进制
//而javascript 中会把二进制前三位都为0的判断为object类型,而null的二进制表示全都是0
//自然前三位也是0,所以执行typeof时会返回 ‘object’。后来为了兼容性而保留了下来。null
//绝对不是一个 object。null 有自己的类型,它是一个特殊值。
typeof alert // "function"  (3)
//函数隶属于 object 类型。但是 typeof 会对函数区分对待,并返回 "function"。
//这也是来自于 JavaScript 语言早期的问题。

交互


alert

弹出一条信息
alert('王菜菜');

prompt

result = prompt(title, [default]);
/*浏览器会显示一个带有文本消息的模态窗口,还有 input 框和确定/取消按钮。
title
显示给用户的文本
default
可选的第二个参数,指定 input 框的初始值。
访问者在提示输入栏中输入一些内容,然后按“确定”键。然后我们在 result 中获取该文本。
按取消键或按 Esc 键取消输入,然后我们得到 null 作为 result。
IE 浏览器会提供默认值。我们不写返回数据的话会把 "undefined" 
插入到 prompt。
*/

confirm

result = confirm('你是不是前端');
点击确定返回 true,点击取消或按下 Esc 返回 false。
  • 这些方法都是模态的:它们暂停脚本的执行,并且不允许用户与该页面的其余部分进行交互,直到窗口被解除,返回的值全都是字符串。
  • 上述所有方法共有两个限制:
  • 模态窗口的确切位置由浏览器决定。通常在页面中心。
  • 窗口的确切外观也取决于浏览器。我们不能修改它。

一个小小问题

/*由于JavaScript是单线程,所以在弹出alert之后,点击alert的确定按钮之前,
alert后面的代码将停止执行*/
如何想解决这样的问题可以通过layer这个模态框模块来解决
layer.alert()
/* 引起的小bug*/
//脚本加载是异步的,如果在 a 、b 之间阻断,那样会造成界面冻结住,失去响应;

类型转换


字符串的类型转换

只要被''单引号或""还有``包裹起来的都是字符串类型,当然也可以通过方法去转换.
有以下几种方法:
value+'';
String(value);
value.toString();
`${value}`;
value+"";
//也可以通过json方法进行转换
JSON.stringify(value)

数值转换

//任何算数运算符都会转化成数值,除了加法之外可能在某些条件下变成字符串拼接,剩下的减,除,
//乘,取余都不会成为字符串;
//以下几种方法都会变成数值
减法 -
乘法 *
除法 /
取余 %
//使用 Number(value)除了以下的转换
undefined转换为NaN
null转换为0
true转换为1
false转换为0
空字符串转为0
string
//字符串中必须全为数字否则返回NaN
 Number(value)
 //遇到非数字返回数
 parseInt()
 //默认保留小数点的后俩位
 parseFloat()
 //parseInt()和 parseFloat()只支持字符串且不为空,其他返回都是NaN
 也可以使用前置加号进行转换只对非数值的有效
 +'1' //1
 +' '  //0
 +true //1
 +号也可以看做成Number的简写

布尔型转换

布尔值由于只有俩个转换极为简单
除了空字符串 0 false unll undefind NaN其他值都为true,注意包含'0'的字符串也为true,带空格的空字符串也为true;
也可以使用!!进行转换为布尔值;
Boolean(value);

算数运算符


//运算元是运算符应用的对象。乘法运算 5 * 2,有两个运算元:左运算元 5 和右运算元 2。
//运算元也会被别人成为参数;
//一个运算符对应的只有一个运算元,那么它是 一元运算符;
-1
//一个运算符拥有两个运算元,那么它是 二元运算符;
1+1
//数学运算符有以下几种
加法 +
减法 -
乘法 *
除法 /
取余 %
求幂 **
//加减乘除就不说了,我在前面做笔记做有俩次了

取余 %

5%2得出1 这是5除以2的余数

求幂**

2 ** 3 
就是2*2*2=8
也可以拿求幂数去求立方根和平方根

字符串拼接

//只要加号碰上和字符串相关的都会变成字符串拼接;
"1"+2
//运算符都是按照顺序工作的,只有碰到字符串才会触发拼接
1+1+1+'3'  //33
//其他运算符都会先把字符串转换为数字,这种转换是隐式转换,
//隐式转换:同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。

运算符优先级

一个运算表达式有超过一个运算符,执行的顺序则由优先级决定;那个优先等级高执行谁;

优先级 名称 优先级
17 一元加号 +
17 一元负号 -
16 求幂 **
15 乘号 *
15 除号 /
13 加号 +
13 减号 -
3 赋值符 =

链式赋值

a = b = c = 2 + 2;
链式赋值从右到左进行计算。首先,对最右边的表达式 2 + 2 求值,然后将其赋给左边的变量:c、b 和 a。最后,所有的变量共享一个值。

原地赋值

let n=n*2;
//缩写
let n*=2;
//*=这种类型运算符的等级是3,所以都是在最后执行,
//这种运算符还有 -=,+=,/=,*=;

自增或自减

自增或自减只用于变量;
自增和自减分为前置和后置;
前置形式返回一个新的值,但后置返回原来的值(做加法/减法之前的值);
let a=1;
++a; // 2
a++; // 1
后置++或后置--只有下次被使用到的时候才会使用自增过的值或自减过的值; 不过后置加加的值会被赋值给当前自增或自减的变量;
++/-- 运算符同样可以在表达式内部使用。它们的优先级比绝大部分的算数运算符要高;

位运算符

位运算符把运算元当做 32 位整数,并在它们的二进制表现形式上操作。

按位与 ( & )
按位或 ( | )
按位异或 ( ^ )
按位非 ( ~ )
左移 ( << )
右移 ( >> )
无符号右移 ( >>> )
这些运算符很少被使用,一般是我们需要在最低级别(位)上操作数字时才使用。

逗号运算符

let a = (1 + 2, 3 + 4);
alert( a ); // 7(3 + 4 的结果)
逗号运算符的优先级非常低,比 = 还要低,因此上面你的例子中圆括号非常重要

值的比较


大于 / 小于:a > b;a < b;
大于等于 / 小于等于:a >= b;a <= b;
检查两个值的相等:a == b,请注意双等号 == 表示相等性检查,俩个等号会把俩边的值转换为
相同的类型进行比较,===全等号,全等不进行转换直接进行比较,而单等号 a = b 表示赋值。
检查两个值不相等。不相等在数学中的符号是 ≠,但在 JavaScript 中写成 a != b。
//比较返回的结果都是布尔值

字符串比较

//在比较字符串的大小时,JavaScript 会使用“字典(dictionary)”或
//“词典(lexicographical)”顺序进行判定。
//换言之,字符串是按字符(母)逐个进行比较的。


相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
47 2
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
212 0
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
47 0
|
4月前
|
JavaScript NoSQL 前端开发
|
4月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
41 0
|
5月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
442 3
|
5月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
245 0