JavaScript

类型

除了 Object 类型是引用类型,其他类型都是原始类型

原始类型的数据值都是直接保存在“栈”中的,引用类型的值是存放在“堆”中的

栈主要管运行,堆主要管存储

Undefined

该类型表示未定义,它的类型只有一个值,就是 undefined,由于undefined是一个全局变量,并非是一个关键字, 所以部分编程规范要求用 void 0 代替 undefined

undefined = 2

在ES5之前的时候,undefined是可以被赋值的。在现代浏览器当中已经把undefined设置为一个non-configurable, non-writable属性的值了

Null

类型也只有一个值,就是 null,它的语义表示空值

Boolean

String

用于表示文本数据。String 有最大长度是 2^53 - 1,字符串的操作 charAt、charCodeAt、length 等方法针对的都是 UTF16 编码

Number

有 18437736874454810627(即 2^64-2^53+3) 个值

几个例外情况:

  1. NaN,占用了 9007199254740990,这原本是符合 IEEE 规则的数字
  2. Infinity,无穷大;
  3. -Infinity,负无穷大

有效的整数范围是 -0x1fffffffffffff 至 0x1fffffffffffff,所以 Number 无法精确表示此范围外的整数

对于浮点数的比较要注意浮点数的特点:

// 误差是否在精度值之内
Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON

Symbol

是一切非字符串的对象 key 的集合

o[Symbol.iterator] = function() {
  var v = 0 
  return { 
    next: function() {
       return { value: v++, done: v > 10 } 
    } 
  } 
};

Object

变量

var a = 5;

类型转换

JavaScript 中的“ == ”运算,因为试图实现跨类型的比较,它的规则复杂到几乎没人可以记住,某些规范强制要求使用 ===

类型不同的变量比较时==运算只有三条规则:

字符串转数值

parseInt默认只支持 16 进制前缀“0x”,而且会忽略非数字字符,也不支持科学计数法当传入第二个参数,可以解析:

parseInt("1e3", 30)

而 parseFloat 则直接把原字符串作为十进制来解析,它不会引入任何的其他进制

装拆箱

// 使用内置的 Object 函数,我们可以在 JavaScript 代码中显式调用装箱能力
Object(1)

拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在,或者没有返回基本类型,则会产生类型错误 TypeError

运算符

JS特殊语法

分号自动插入

JS的语句若没有分号,会按照以下规则插入分号:

  1. 要有换行符,且下一个符号是不符合语法的,那么就尝试插入分号。
  2. 有换行符,且语法中规定此处不能有换行符,那么就自动插入分号。
  3. 源代码结束处,不能形成完整的脚本或者模块结构,那么就自动插入分号

no LineTerminator here 规则

一些不加分号容易出错的情况

  1. 以括号开头
(function(a){
   console.log(a);
})()/*这里没有被自动插入分号*/
(function(a){
  console.log(a);
})()
  1. 以数组开头
var a = [[]]/*这里没有被自动插入分号*/
[3, 2, 1, 0].forEach(e => console.log(e))
  1. 以正则表达式开头
var x = 1, g = {test:()=>0}, b = 1/*这里没有被自动插入分号*/
/(a)/g.test("abc")
console.log(RegExp.$1)
  1. 以Template开头
var f = function(){
  return "";
}
var g = f/*这里没有被自动插入分号*/
`Template`.match(/(a)/);
console.log(RegExp.$1)

指令序言

"no lint";
"use strict";
function doSth(){
    //......
}
//......

流程控制语句

基本对象

Function

function f(x){
    ...
}

var f = function(){
    ...
}

Array

new Array(元素列表);
new Array(长度);
[1,2,3,4];

Date

Math

Gloal

立即执行函数

(
    function(){
        //...
    }
)()

window

方法

与弹出框有关的方法:

与打开关闭有关的方法:

动画函数封装

核心原理:通过定时器 setInterval() 不断移动盒子位置。

缓动效果

动函数添加回调函数

回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调

完整代码

function animate(obj,target,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
        var step = Math.ceil((target - obj.offsetLeft)/10);
        if (obj.offsetLeft >= target){
            clearInterval(obj.timer);
            callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

JSON

语法

获取数据

转换

JSON.stringify({username:'name'}) // to text
JSON.parse(str) // to obj

后端解析

移动端常用插件

移动端常用框架

本地存储

特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大,sessionStorage约5M、localStorage约20M

4、只能存储字符串,可以将对象JSON.stringify() 编码后

sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

// 存储
sessionStorage.setItem(key, value);
// 获取
sessionStorage.getItem(key);
// 删除
sessionStorage.removeItem(key);
// 清除所有
sessionStorage.clear();

localStorage

使用方式同sessionStorage