北屿

北屿小智障

0%

Javascript笔记

Posted on Edited on In

JavaScript快速上手

变量

定义

1
var name;

变量名

开头可以是任意Unicode字符、美元符、下划线
后面的字符除上述以外还有Unicode数字

不能是关键字
关键字：

1
2
3
4
5
6
7
8
9
10
11
arguments   break       case        catch
class       const       continue    debugger
default     delete      do          else
enum        export      extends     false
finally     for         function    if
implements  import      in          instanceof
interface   let         new         null
package     private     protected   public
return      static      super       switch
this        throw       true        try
typeof      var         void        while

3个标识符不是保留字但也要视为保留字

1
Infinity    NaN     undefined

原始值

有布尔值、数字、字符串、空值(undefine null)
特点
可进行内容比较
其属性不能被改变、添加或移除

ToPrimitive()将值转换为原始值

对象

非原始值都是对象
简单对象、数组、正则表达式

比较身份标识，每个值都有各自的身份标识
对象属性可以很自由地改变、添加或移除

undefined 和 null

丢失参数、访问不存在的属性会得到undefined
null是没有对象
可以直接比较相等

typeof 和 instanceof

typeof用法
typeof value;

操作数 结果
undefined ‘undefined’
null object
布尔值 boolean
数字 number
字符串 string
函数 function
其他常规值 object
引擎创建的值 任意字符串

instanceof用法
value instanceof Constr
判断value是否由Constr创建

1
2
> undefined instanceof Object
false

布尔值

以下值会被认为是false

  • undefined\null
  • false
  • -0,NaN
  • ‘’

严格的相等或不等
=== !==
宽松的相等或不等
== !=

数字

特殊的数字
NaN = Not a number

1
2
> Number('xyz')
NaN

检查是否为NaN用isNaN()，但对非数字不起作用，可以用其值是否等于自身来判断

Infinity

1
2
3
4
> 3/0
Infinity
> Math.pow(2,1024)//too large
Infinity

isFinite()可以用来检查是否为实际值，即不为以上两个值

parseFloat()将字符串中字符转换成数字，对于一些特殊的例如true null ‘’ 无法处理

JavaScript有两个0，+0，-0

数字内部表示为双精度

部分 位数 位置
符号 1位 第63位
指数 [-1023,1024] 11位 62~52
分数 52位 52~0

表示公式

$ (-1)^{sign} \times %1.fraction \times 2^{exponent} $

安全整型范围
Number.MAX_SAFE_INTEGER=2^53
Number.MIN_SAFE_INTEGER=-2^53

浮点数转化为整数的方法
Math.floor(),Math.ceil(),Math.round()

位运算或Toint32()得到32位整数

parseInt()可得到整数，可选基数，在第二个参数

Number原型方法

函数 描述
Number.prototype.toFixed(fractionDigits) 舍入到小数点后指定位数
Number.prototype.toPrecision(precision) 精确到指定位
Number.prototype.toString(radix) 转化为可选字符串可选进制
Number.prototype.toExponential(fractionDigits) 强制指数表示

运算符

基本都一样

字符串

原始值 不可改变
单引号双引号均可以使用

一个反斜杠对行结束符转义，使字符串跨行拼写

可以用><直接比较 也可以String.prototype.localeCompare(other)

构造器方法
String.fromCharCode()
String.fromCharCode().apply()

原型方法
String.prototype.charAt(pos)
String.prototype.charCodeAt(pos) //String.fromCharCode()逆函数
String.prototype.slice(start [,end])
String.prototype.substring(start [,end])
String.prototype.split([separator] [,limit]) //separator可以为正则表达式 limit 是最多包含元素

字符串变换
String.prototype.trim() //去除开头结尾空格换行符等
String.prototype.concat(str1,str2,...)
String.prototype.toLowerCase()
String.prototype.toLocaleLowerCase()
String.prototype.toUpperCase()
String.prototype.toLocaleUpperCase()

字符串检索和比较
String.prototype.indexOf(searchString,position)
String.prototype.lastIndexOf(searchString,position)
String.prototype.localeCompare(other)

支持正则表达式的方式
String.prototype.search(regexp) //返回第一个起始位置，未匹配返回-1
String.prototype.match(regexp) //返回所有匹配的子字符串
String.prototype.replace(search, replacement)

语句

if/switch/for/while/do-while与C/C++完全相同

函数

函数声明方式定义函数

1
2
3
function add(a, b) {
    return a + b;
}

给变量赋值为函数表达式

1
2
3
var add = function(a, b) {
    return a + b;
}

函数声明的提升特性

函数声明具有提升特性 他们实体会被移动到所在作用域开始处

arguments

JavaScript中所有参数可被调用，通过arguments来使所有参数可用

1
2
3
4
5
6
> function f() { return arguments; }
> var args = f('a','b','c');
> args.length
3
> args[0]
'a'

参数太多或太少

太多额外的参数会忽略
太少丢失的参数会得到undefined

可选参数

附上默认值

1
2
3
4
5
6
function pair(x, y) {
    x = x || 0;
    y = y || 0;
    return [x, y];
    
}

限制参数长度

1
2
3
4
5
funton pair(x, y) {
    if(arguments.length !== 2) {
        throw new Error('Need exactly 2 arguments');
    }
}

将arguments转化为数组

1
2
3
function toArray(arrayLikeObject) {
    return Array.prototype.slice.call(arrayLikeObject);
}

异常捕获

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getPerson(id) {
    if (id < 0) {
        throw new Error('ID must not be negative:' + id);
    }
    return { id:id };
}
function getPerson(ids) {
    var result = [];
    ids.forEach(function(id) {
        try {
            var person = getPerson(id);
            result.push(person);
        } catch (exception) {
            console.log(exception);
        }
    });
    return result;
}

严格模式

<script>标签第一行输入 'use strict'
或在每一个函数中激活
'use strict';

变量作用域和闭包

一个变量的作用域总是完整的函数
提升特性，声明会被移动到函数开始处
闭包，每个函数都和他周围的变量保持连接
IIFE模式，防止成为全局变量，用函数限制作用域

对象和构造函数

可以用delete移除属性

任意属性名

提取方法使用bind()方法

方法中的函数无法使用this，两种解决方法:保存在另一个变量中，利用函数参数传入

构造函数

数组

数组可以拥有自定义属性。
索引 $i$ 是数字 $0\leqslant i < 2^32-1$

length

不是函数，数组的一个属性。

二维数组

需要手动创建

1
2
3
4
5
6
7
var rows = [];
for(var i=0; i<3; i++) {
    rows[i]=[];
    for(var j=0; j<3; j++) {
        rows[i][j]=1;
    }
}

in

检查的索引值。

长度

length的基本功能是追踪数组的最大索引。

可以直接修改长度…多加少减。

添加和删除元素（破坏性地）

1
2
3
4
5
6
7
8
9
10
11
12
Array.prototype.shift() // 移除索引0处的元素，随后元素索引依次-1
Array.prototype.unshift(elem1?, elem2?, ...) // 在数组最前面添加给定元素，返回新的数组长度
Array.prototype.pop() // 移除数组最后的元素并返回该元素
Array.prototype.push() // 在数组尾部添加该元素，返回新的数组长度

// 破坏性地吧arr2添加到arr1后
Array.prototype.push.apply(arr1, arr2)

Array.prototype.splice(start, deleteCount?, elem1?, elem2?, ...) 
// 从start开始移除deleteCount个元素，并插入给定元素
// start可以是负数，-1指向最后的元素，以此类推
// deleteCount是可选的，若省略（连同所有后续的参数），那么将移除之后所有的元素

排序和颠倒元素顺序（破坏性地）

1
2
3
4
5
Array.prototype.reverse() // 颠倒顺序

Array.prototype.sort(compareFunction?) 
// 排序，转化为字符串比较
// function compareFunction(a, b) 比较ab，返回负数(a<b)；返回0(a=b)；返回正数(a>b)

合并、切分和连接（非破坏性地）

1
2
3
4
5
6
7
Array.prototype.concat(arr1?, arr2?, ...) // 创建一个新数组

Array.prototype.slice(begin?, end?) 
// 将[begin,end)复制到新数组，缺少end使用数组长度，都缺少复制整个数组。若任意索引时负值，那么加上数组长度

Array.prototype.join(separator?) 
// 对所有数组元素创建字符串，用separator连接，若缺少，默认为','

值的查找（非破坏性地）

1
2
3
4
5
6
7
Array.prototype.indexOf(searchValue, startIndex?)
// 从startIndex开始查找searchValue，返回第一次出现的位置，没有找到返回-1。若缺少startIndex查找整个数组。
// 查找使用严格相等

Array.prototype.lastIndexOf(searchElement, startIndex?)
// 从startIndex反向查找searchValue返回第一次出现的索引，若没有找到返回-1，缺少startIndex查找整个数组
// 查找使用严格相等

迭代（非破坏性地）

检查方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
arr.examinationMethod(callback, thisValue?)
function callback(element, index, array)
thisValue可以配置callback内的this

Array.prototype.forEach(callback, thisValue?)
Array.prototype.every(callback, thisValue?) 
// 若对于每个元素回调函数都返回true则返回true，一旦返回false则停止迭代，返回false
// undefined也会被解释成false
// 如果数组是空的，结果是true，且不调用callback

Array.prototype.some(callback, thisValue?) 
// 至少一个返回true则返回true，若回调函数返回true则停止迭代
// undefined也会被解释成false
// 如果数组是空的，结果是false，且不调用callback

转化方法

1
2
3
4
5
Array.prototype.map(callback, thisValue?)
// 对每个元素应用callback的结果

Array.prototype.filter(callback, thisValue?)
// 返回callback为true的元素

归约函数

1
2
3
4
5
6
7
8
9
10
11
12
callback函数有所不同
function callback(previousValue, currentElement, currentIndex, array)
// previousValue 是会掉函数返回之前的值
// 提供显式initialValue，previousValue是initialValue，currentElement是数组第一个元素(reduceRight: 数组最后一个元素)
// 未提供显式initalValue，previousValue是数组第一个元素，currentElement是数组第二个元素(reduceRight: 数组最后一个和倒数第二个元素)

Array.prototype.reduce(callback, initialValue?)
// 从左到右遍历，返回回调函数最后的值


Array.prototype.reduceRight(callback, initialValue?)
// 从右到左遍历，返回回调函数最后的值

正则表达式

test()
exec()
replace()

Math

标准库

参考

  • 《深入理解JavaScript》
Related Posts
Have fun.