

首页  思维导图  详情



Javascript知识体系

2016-10-26 08:11:22   0  举报





仅支持查看

AI智能生成

Javascript是一种轻量级的解释型或即时编译型的编程语言，它是Web的三大核心技术之一。Javascript知识体系包括基础语法、数据类型、函数、对象、数组、字符串、正则表达式、事件处理、错误处理、作用域、闭包、原型链、异步编程等。此外，还有DOM操作、BOM操作、事件模型、浏览器兼容性问题等。学习Javascript需要掌握这些知识点，并通过实践来加深理解。

模版推荐

作者其他创作

大纲/内容

函数function

一等公民

函数声明

function命令

函数表达式

Function构造函数

<pre class="highlight" style="box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; padding: 1em 0.9em; font-size: 16.1px; direction: ltr; overflow: auto; border: 1px solid rgb(204, 204, 204); border-radius: 7px; color: rgb(248, 248, 242); font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace !important; font-variant-numeric: normal !important; font-stretch: normal !important; background: rgb(17, 17, 17);"><code style="box-sizing: border-box; font-size: 20.93px; line-height: 27.209px; font-family: Consolas, "Courier New", Courier, FreeMono, monospace; margin: 1em 0px 1.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">var add = new Function( 'x', 'y', 'return (x + y)' ); // 等同于 function add(x, y) { return (x + y); }</code></pre>

重复声明

后面声明的会覆盖前面声明，不管参数个数是否一样

函数的重载

可以通过在函数体内判断arguments的length来实现函数的重载

函数名提升

如果同时采用function命令和赋值语句声明同一个函数，最后总是采用赋值语句的定义

属性

name

紧跟在function关键字之后的那个函数名

length属性

预期传入的参数的个数

基本语法

变量提升

标识符大小写敏感

中文是合法的标识符

非保留字，但有特殊含义

Infinity

NaN

undefined

注释

也支持html的注释 （单行）

区别 { }

Javascript区块不构成单独的作用域（scope），与区块外变量同属一个作用域

标签 Label

一般配合break和continue使用

数据类型

6种数据类型

Number 数值

64位浮点数形式储存

第1位：符号位，0表示正数，1表示负数

第2到12位：储存指数部分

第13到64位：储存小数部分（有效数字）

精度最多只能到53个二进制位（小数部分）

数值范围

NaN

typeof NaN = number

NaN不等于任何值，包括它本身 NaN === NaN  (false)

NaN与任何数的运算等到的都是NaN

isNaN() 可以判断是否为NaN, 只对数值有效

isNaN( { } ) = true

isNaN( Number ({ })) = true

Infinity

无穷

正数数值太大

负数数值太小

0 / 0 = Infinity

-Infinity !== -Infinity

Infinity大于一切数值（除了NaN），-Infinity小于一切数值（除了NaN）。

isFinite()

isFinite(NaN) = false

全局方法

parseInt ( )

将字符串转为整数

parseInt('    81') =81

如果参数不是字符串，则会先转为字符串

字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分

parseFloat ( )

String 字符串

转义符

\0 = null

\b  后退

\f  换页符

\n  换行

\r 回车

\t  制表符

\v  垂直制表符

\'  单引号

\"  双引号

字符串 = 字符数组

无法改变字符串之中的单个字符  如 str[4] = 'a' 不起作用

无法直接使用数组的方法，必须通过call方法间接使用

Array.prototype.join.call(s, ' ' )

push()  sort()  reverse() splice() 等会改变原数组的方法都无效

字符集

Unicode字符集

每个字符在js内部都是以16位的UTF-16格式储存  （2个字节）

Base64转码

btoa()

字符串或二进制值转为Base64编码

atob()

Base64转为原来的编码

这两个方法不适合非ASCII码的字符，如中文，会报错 必须中间插入一个转码环节，再使用这两个方法

boolean

false

undefined

null

false

NaN

"" 或者 ''

undefined

Number(undefined) = NaN

表示未定义

1. 变量声明了，但没有赋值

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

3. 对象没有赋值的属性

4. 函数没有返回值，默认返回undefined

null

Number(null) = 0

object

创建对象的三种方法

直接使用 { } ： var o1 = { }

使用new生成对象实例

使用Object.create() 方法生成

对象键名都是字符串

对象引用

如果不同的变量指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址

属性操作

读取属性

可以使用.  也可以使用【】

数值键名不能使用点运算符，因为会被当成小数点，只能使用方括号运算符

检查变量名是否声明

查看所有属性

Object.keys

delete命令

delete命令只能删除对象本身的属性，无法删除继承的属性

in运算符

用于检查对象是否包含某个属性（键名）

不能识别对象继承的属性，对继承的属性也返回true

for...in 循环

用来遍历一个对象的全部属性

<pre class="highlight" style="box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; padding: 1em 0.9em; font-size: 16.1px; direction: ltr; overflow: auto; border: 1px solid rgb(204, 204, 204); border-radius: 7px; color: rgb(248, 248, 242); font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace !important; font-variant-numeric: normal !important; font-stretch: normal !important; background: rgb(17, 17, 17);"><code style="box-sizing: border-box; font-size: 20.93px; line-height: 27.209px; font-family: Consolas, "Courier New", Courier, FreeMono, monospace; margin: 1em 0px 1.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">var o = {a: 1, b: 2, c: 3}; for (var i in o) { console.log(o[i]); }</code></pre>

遍历的是对象所有可遍历的的属性，会跳过不可遍历的属性，比如toString(), 因为它默认设置为“不可遍历”

不仅遍历对象自身的属性，还遍历继承的属性

不推荐使用，因为一般情况下都是只想遍历对象自身的属性

hasOwnProperty ( )

判断是不是自身的属性

with语句

操作同一个对象的多个属性时，提供一些书写的方便

<div><div>with区块内部的变量，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量。这是因为with区块没有改变作用域，它的内部依然是当前作用域 </div></div>

使用场合

替换模板变量

数组

特殊的object,键名是按次序排列的一组整数

对于数值的键名，不能使用点结构，只能用方括号arr[0]

length

32位整数，最多为（2^32 - 1）个

动态值 - 永远等于键名中的最大整数 + 1

可修改，如果人为设置一个小于当前的成员个数的值，则数组成员会自动减少到length设置的值

清空数组：让 length = 0;

数组添加属性不影响length的值

类似数组的对象

特征：具有length属性，但该属性不是动态值，不会随着成员变化而变化

函数的arguments对象，大多数DOM元素集，字符串，都是类似数组的对象

数组的slice方法将类似数组的对象，变成真正的数组

遍历

for循环

<pre class="highlight" style="box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; padding: 1em 0.9em; font-size: 16.1px; direction: ltr; overflow: auto; border: 1px solid rgb(204, 204, 204); border-radius: 7px; color: rgb(248, 248, 242); font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace !important; font-variant-numeric: normal !important; font-stretch: normal !important; background: rgb(17, 17, 17);"><code style="box-sizing: border-box; font-size: 20.93px; line-height: 27.209px; font-family: Consolas, "Courier New", Courier, FreeMono, monospace; margin: 1em 0px 1.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">// for循环 function logArgs() { for (var i = 0; i < arguments.length; i++) { console.log(i + '. ' + arguments[i]); } }</code></pre>

数组的forEach方法

<pre class="highlight" style="box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; padding: 1em 0.9em; font-size: 16.1px; direction: ltr; overflow: auto; border: 1px solid rgb(204, 204, 204); border-radius: 7px; color: rgb(248, 248, 242); font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace !important; font-variant-numeric: normal !important; font-stretch: normal !important; background: rgb(17, 17, 17);"><code style="box-sizing: border-box; font-size: 20.93px; line-height: 27.209px; font-family: Consolas, "Courier New", Courier, FreeMono, monospace; margin: 1em 0px 1.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">// forEach方法 function logArgs() { Array.prototype.forEach.call(arguments, function (elem, i) { console.log(i+'. '+elem); }); }</code></pre>

in运算符

判断某个键名是否存在

数组遍历

for...in循环

不仅会遍历数组所有的数字键，也会遍历非数字键

<pre class="highlight" style="box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; padding: 1em 0.9em; font-size: 16.1px; direction: ltr; overflow: auto; border: 1px solid rgb(204, 204, 204); border-radius: 7px; color: rgb(248, 248, 242); font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace !important; font-variant-numeric: normal !important; font-stretch: normal !important; background: rgb(17, 17, 17);"><code style="box-sizing: border-box; font-size: 20.93px; line-height: 27.209px; font-family: Consolas, "Courier New", Courier, FreeMono, monospace; margin: 1em 0px 1.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">var a = [1, 2, 3]; a.foo = true; for (var key in a) { console.log(key); } // 0 // 1 // 2 // foo</code></pre>

不推荐使用

for循环

while循环

forEach()

<pre class="highlight" style="box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; padding: 1em 0.9em; font-size: 16.1px; direction: ltr; overflow: auto; border: 1px solid rgb(204, 204, 204); border-radius: 7px; color: rgb(248, 248, 242); font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace !important; font-variant-numeric: normal !important; font-stretch: normal !important; background: rgb(17, 17, 17);"><code style="box-sizing: border-box; font-size: 20.93px; line-height: 27.209px; font-family: Consolas, "Courier New", Courier, FreeMono, monospace; margin: 1em 0px 1.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">var colors = ['red', 'green', 'blue']; colors.forEach(function (color) { console.log(color); });</code></pre>

使用delete命令删除一个数组成员，会形成空位，但不会影响length属性

Symbol (ES6新加)

判断值类型

typeof运算符

typeof window = object

typeof { } = object

typeof [ ] = object

typeof null = object

instanceof

{ } instanceof Array = false

[ ] instanceof Array = true

Object.prototype.toString