公告栏

此网站主题为本人手写主题, 主题待开源···

音乐盒

站点信息

文章总数目: 308
已运行时间: 1187
目录
  1. 一、JavaScript编程语言
    1. 解释型语言和编译型语言
    2. 是什么
    3. 用途
    4. 浏览器执行JS简介
    5. JavaScript的组成
  2. 二、变量
    1. var和let和const
    2. 作用域链
    3. 预解析和代码执行
  3. 三、基本数据类型
    1. 数据类型
    2. 自动确定类型机制
    3. number
    4. string
    5. boolean
    6. undefined
    7. null
    8. TODO: symbol
    9. 数据类型判断及转换
  4. 四、运算符和表达式
    1. 基本运算符
    2. 位移运算符
    3. 二进制位运算符
    4. 二元逻辑运算符
    5. 可选链运算符
    6. 赋值运算符
    7. 逗号运算符
  5. 五、语句结构
    1. 顺序结构
    2. 选择结构
    3. 循环结构
    4. 其他
      1. throw
      2. try...catch
尼采般地抒情

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 308
已运行时间: 1187

前言:JavaScript语言基本知识

  1. JavaScript编程语言
  2. 变量
  3. 基本数据类型
  4. 运算符和表达式
  5. 语句结构

一、JavaScript编程语言

解释型语言和编译型语言

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

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

执行过程

是什么

  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script == 脚本)
  • 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
  • 现在也可以基于 Node.js 技术进行服务器端编程

用途

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

浏览器执行JS简介

浏览器分成两部分:

  1. 渲染引擎:用来解析HTML和CSS,俗称内核。比如Chrome浏览器是blink,老版本是webkit。
  2. JS引擎:也称JS解释器,用来读取网页中的JavaScript代码,对其处理后运行。比如Chrome的V8引擎。

浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。

JavaScript的组成

  1. ECMAScript

ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript:规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

  1. DOM——文档对象模型

文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)

  1. BOM——浏览器对象模型

浏览器对象模型(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

二、变量

“行为怪异的var所造成的各种问题。”

《JavaScript高级程序设计》

var和let和const

【var】

  • 在全局区域声明是全局变量
  • 函数里面用var声明变量的时候是局部变量,但是省略var的时候,就变成全局变量了(坑……),好在严格模式下如果在函数里面这样定义会报错

  • 会变量提升,把所有变量声明都拉到函数作用域的顶部,所以在同一个域里面,var定义的变量,先使用在定义也是可以的。
  • 可以多次定义赋值
var i = 0;
var i = 0;

编写代码不建议使用var来定义变量了

【let】

  • 作用范围:块作用域
  • 会有冗余声明(不可以多次定义赋值)
  • 不会变量提升,俗称“暂时性死区”

【const】

  • 作用范围:块作用域
  • 声明变量必须同时初始化变量
  • 不允许重复声明
  • 尝试修改变量的值报错,但对对象操作就不一样了

使用建议:参照《JavaScript高级程序设计》书中所说的,“不使用var,const优先,let次之”。

作用域链

因为var可以多次声明这一个特点,就产生出了一个问题,在函数里面声明一个变量,在函数外也声明一个同名的变量,就会导致接下来的代码使用哪一个变量的情况。分析是哪个其实也好办,就是看调用的这个函数离哪个声明的变量最近,哪个最近取哪个。


作用域链有其解决的办法,那就是利用作用域链,但是使用let和const更为方便


比如:循环迭代过程中

预解析和代码执行

浏览器的js解析器当中,会将js代码分两步执行,分别为,预解析和执行代码

  • 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义
  • 代码执行: 从上到下执行JS语句

三、基本数据类型

数据类型

最新的 ECMAScript 标准定义了 8 种数据类型:

  • 七种基本数据类型
    • 布尔值(Boolean),有 2 个值分别是:true false.
    • 数字(Number),整数或浮点数,例如: 42 或者 3.14159
    • 任意精度的整数 (BigInt) ,可以安全地存储和操作大整数,甚至可以超过数字的安全整数限制。
    • 字符串(String),字符串是一串表示文本值的字符序列,例如:"Howdy" 。
    • 代表(Symbol)( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。
    • undefined,和 null 一样是一个特殊的关键字,undefined 表示变量未赋值时的属性。
    • null,一个表明 null 值的特殊关键字。JavaScript 是大小写敏感的,因此 null 与 Null、NULL或变体完全不同。
  • 以及对象(Object)。

自动确定类型机制

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定,这是和Java基本类型不同的一点。

let age = 10;        // 这是一个数字型
let forsome= '是的';   // 这是一个字符串

在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型

number

JavaScript 数字类型既可以保存整数,也可以保存小数(浮点数)

Number.MAX_VALUE

最大值

Number.MIN_VALUE

最小值

Infinity

正无穷大

-Infinity

负无穷大

NaN

非数值

Infinity和NaN是JavaScript语言的全局属性(JavaScript 标准内置对象 - JavaScript | MDN

string

  • 转义符

转义符

解释说明

\n

换行符,n 是 newline 的意思

\ \

斜杠 \

'

' 单引号

"

”双引号

\t

tab 缩进

\b

空格 ,b 是 blank 的意思

  • 字符串长度:通过字符串的 length 属性可以获取整个字符串的长度。

Java里面基本数据类型比如定义了一串字符,是没有相应长度length属性一说的,除非new一个字符的对象。JavaScript里面也有相应的机制,称之为——“包装对象”,可以直接使用length属性,指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成(包装成)对象,和Java里面一样。

boolean

布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。

布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

undefined

一个声明未定义的变量的初始值,或没有实际参数的形式参数。

null

值 null 特指对象的值未设置。

null和undefined作用几乎一致,区别:null是一个表示“空”的对象,转为数值时为0;undefined是一个表示”此处无定义”的原始值,转为数值时为NaN。

TODO: symbol

https://juejin.cn/post/7091170378243899429

数据类型判断及转换

  • 数据类型的几种判断方法

判断方法

缺点

typeof

不能判断null和区分array/Date/RegExp等

instanceof

无法检测null和undefined,未必准确,无法判断字面量方式创建的基本数据类型

constructor

无法检测null和undefined,未必准确

Object.prototype.toString.call()

  • 数据类型的转换

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型

当参数为: ''、0、NaN、null、undefined,转换为false,其他都转换称true

四、运算符和表达式

基本运算符

  • +-*/%:数学运算符
  • ++:自增运算符(注意i++和++i区别)
  • ==、===:区别就是后者要求值和数据类型都相等,前者只要求值
  • &&、||、!:与或非
  • !!:将值转换为Boolean类型

位移运算符

  • <<:按位左移
  • >>:按位右移
  • >>>:按位无符号右移

二进制位运算符

  • &:按位与
  • |:按位或

两边转换为二进制进行相加得到后的结果

技巧:Number|0 将Number取整

Number为正数的时候,相当于向下取整,Math.floor()。console.log(1.1|0) // 1

Number为负数的时候,相当于向上取整,Math.ceil()。console.log(-5.22|0) // -5

  • ~:按位非

按位取反(eg:00000001 -> 11111110)

  • ^:按位异或

二元逻辑运算符

  • 逻辑与:存在假则返回假的值,否则返回最后一个值
console.log( 123 &amp;&amp; 456 );        // 456
console.log( 0 &amp;&amp; 456 );          // 0
console.log( 123 &amp;&amp; 456&amp;&amp; 789 );  // 789

  • 逻辑或:返回最先为真的值

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

  • 空值合并运算符:当前面的值为null或者undefined时,取后面的值,否则取前面的值

console.log(55 ?? 66)
console.log(false ?? 66)

interface Customer {
  name: string
  city?: string
}
let customer: Customer = {
  name: 'xiaoming',
  city: 'jiangxi'
}
console.log(customer?.city)
let customerCity = customer?.city ?? 'Unknown city'

console.log(customerCity)

55
false
jiangxi
jiangxi

可选链运算符

  • 可选链?.:类似判断条件是否存在

赋值运算符

  • >>=:右位移复制
  • ……

逗号运算符

逗号(,)运算符对它的每个操作数从左到右求值,并返回最后一个操作数的值。这让你可以创建一个复合表达式,其中多个表达式被评估,复合表达式的最终值是其成员表达式中最右边的值。这通常用于为 for 循环提供多个参数。

五、语句结构

顺序结构

浏览器引擎对js代码是从上往下依次执行的

所以js代码的位置,以及代码与代码相互依赖的关系顺序都要注意。

选择结构

  • if…else
  • switch 语句

switch( 表达式 ){ 
  case value1:
    // 表达式 等于 value1 时要执行的代码
    break;
  case value2:
    // 表达式 等于 value2 时要执行的代码
    break;
  default:
    // 表达式 不等于任何一个 value 时要执行的代码
}


// 如果row为true则this.actFormOptions.modelObject.assign({}, toShowActFromData(row))
this.actFormOptions.model = row ? Object.assign({}, toShowActFromData(row)) : getColumnFormModel(actColumns, defaultActProp)

循环结构

和Java一样都有,都有for(){}、while(){}、do{}while()三种结构,以及continue、break两个关键字,用法完全一样,在java里面有增强的for循环一说,js也有相应的增强的for循环。

  • while
  • do...while
  • for
  • for-in语句

  • for-of语句
  • for await...of

遍历可迭代对象的元素

其他

throw

抛出一个用户定义的异常。

try...catch

标记一个语句块,并指定一个应该抛出异常的反馈。

评论区

Twikoo giscus