javascript作为客户端语言
按照JS的相关语法,去操作页面中的元素或者浏览器中的一些功能。
- ES(ECMAscript):描述了该语言的语法和基本对象。
- DOM(Document Object Module):文档对象模型,描述处理网页内容的方法和接口。
- BOM(Browser Object Module):浏览器对象模型,描述与浏览器进行交互的方法和接口。
变量
- 定义方式:
- ES3:var、function(创建函数)
- ES6 :let、 const(存储的值不能被修改,可以理解为常量)
- 模块导入:import(导入模块)
import A from "b.js"
- 创建类: class
class Fn {}
- Symbol:创建唯一值
let a = Symbol(1)
- 模块导入:import(导入模块)
- 严谨的命名规范:
- 严格区分大小写
- 使用数字、字母、下划线(
_
)、$ 命名,但是字不能作为开头_box
,一般公共变量都是_
开头$box
,一般JQ获取的以$
开头
- 驼峰命名:首字母小写,其余么一个有意义的单词的首字母都要大写(命名尽可能语义化,使用英文单词)
- 常用缩写:add / insert / create / new(新增) 、 update (修改)delete/del / remove / rm (删除)、sel/select /query /get(查询)、info(信息)…
- 不能用关键字(当下有特殊含义的是关键字)和保留字(未来可能称为关键字的词)
JavaScript数据类型
基本数据类型(原始值类型)
- 数字 number:正数、负数、小数、0、NaN、BigInt
- 字符串string:基于 单引号/双引号/反引号「模板字符串」 包起来的都是字符串
- 布尔 boolean:true/false
- 空对象指针: null
- 未定义: undefined
- Symble:唯一值
- static Symbol
- Symbol.prototype
- bigint:大范围的整数值
引用数据类型
- 标准普通对象(纯粹对象) object:
- {} 普通对象:用花括号包裹的键值对
- 标准特殊对象:Array / RegExp / Date / Error / Math / ArrayBuffer / DataView / Set/Map …
- [] 数组对象:用方括号包裹,数组项用逗号分割
- /^$/ 正则对象
- Math 数学函数对象
- Date 日期对象
- …
- 非标准特殊对象:基于构造函数「或者Object」创在出来的原始值对象类型的格式信息,类型属于对象类型
-
Object:特殊类型(EG:变量名)属性名需要中括号包裹,=> [{}]:111
-
Number:正数,负数,浮点数,NaN,+/-Infinity.
-
String
-
Boolean
-
Symbol
- 唯一值
- 把Symbol作为对象,提供的很多静态属性方法,是JavaScript很多知识的底层实现原理。
- vuex和redux中我们需要派发很多行为标识,我们可以把这些行为标识统一管理,为了保证行为标识的唯一性,可以基于symbol处理。
- …
-
BigInt:大数, 超过
Number.MAX_SAFE_INTERGER
(最大安全数字)的数字进行运算,运算结果不一定正确。
-
…
-
- 可调用对象「实现了call方法」 function
- 普通函数
function fn(){}
- 构造函数
- 箭头函数
- 生成器函数
- …
- 普通函数
添加特殊类型属性名:
for-in
: 迭代无法迭代symbol类型的私有属性。Object.keys(obj)
: 获取当前对象所有非symbol类型的私有属性(返回包函属性名的数组)。Object.getOwnPropertySymbols(obj)
: 获取symbol类型的私有属性(返回包函属性名的数组)。a.concat(b)
:拼接数组。Refect.ownKeys(obj)
:获取所有属性,包含所有类型,私有原型上的(返回包函属性名的数组)。
Symbol作用2:把Symbol作为对象,提供的很多静态属性方法,是JavaScript很多知识的底层实现原理。
Symbol.toPrimitive/hasInstance/toStringTag/iterator/asyncIterator
数据类型区别(堆栈底层机制)
基本数据类型值 VS 引用数据类型值
- 基本类型值:按值操作,因为它结构简单,所以直接是存在栈内存的值存储空间当中,以后所有的操作直接操作值就可以。=> 直接操作值(直接操作的是值),所以叫做值类型
- 引用数据类型:必须先开辟一个堆内存,操作的都是堆内存16进制内存的引用地址,这样的话,就可能会到导致引用类型值会出现两个变量共用同一个堆内存地址,管控同一个堆,导致其中一个变量把堆内存中东西修改,另一个就会受影响。=> 操作堆内存的16进制引用地址(按引用地址操作的)
浏览器执行JS代码:
- 从电脑中分配出一块内存,用来执行代码(栈内存 => Stack)
- 浏览器分配一个主线程用来自上而下执行JS代码
基本数据类型值创建过程(let a = 12):
- 创建变量a,放到当前栈内存变量存储区域中
- 创建一个值12、把它存储到当前栈内存值存储区域中
- = 为赋值,赋值就是让变量和值相互关联的过程
引用类型值的存储:
- 在当前栈内存中分配出一块新内存,用来存储引用类型值(堆内存 =》heap)内存有一个16进制地址
- 把对象中的键值对(属性名:属性值)依次存储到堆内存中
- 把堆内存地址和变量关联起来
EG1以及解题思路图:
EG:2
let n = [10,20];
let m = n;
let x = m;
m[0] = 100;
x = [30, 40];
x[0] = 200;
m = x;
m[1] = 300;
n[2] = 400;
console.log(n, m, x);
解题思路图:
EG3:
let a= {
n: 1
}
let b = a;
a.x = a = {
n: 2
};
console.log(a.x);
console.log(b)
解题思路图: