js 基础

前端

学习记录 - js基础

划重点

  • js分两大类数据
    • 基本类型(栈内存)【分别占有固定内存；用完即弃】
      • Number
      • String
      • null
      • Boolean
      • undefined
      • 堆的引用地址（指针）
    • 引用类型(堆内存)【引用地址内存固定大小，但值不定；坐等垃圾回收】
      • Object
      • Function
      • Array
  • js中内存是自动管理的，不可见。声明变量、方法时会占用一定内存
  • js有垃圾回收机制
    • 垃圾回收机制是为了以防内存泄漏（内存泄漏就是当已经不需要某块内存时这块内存还存在着）
      • 全局变量引起的内存泄露（全局变量不会被回收）【解决：用严格模式】
      • 闭包引起（活动对象被引用，导致闭包内变量无法回收释放）【解决：活动对象set null】
      • 被删除DOM元素的引用（DOM被删除但对象中引用还在）【解决：对象set null】
      • 定时器未清空、无限回调（定时器内部实现闭包，回调也是闭包）【解决：clearInterval、set null】
    • 原理：周期性查找不再被使用的变量（根无法访问，没被引用），然后回收释放占用的内存
    • 方式：
      • 标记清除
        • 当变量进入作用域（环境）时，被标记为’进入‘，离开时被标记’离开‘。’离开‘标记的将会被回收
        • 一些优化
          • 分代回收——新的死的快，老的活的久
          • 增量回收——量大时分多部分标记回收，需额外标记，存在微小延迟
          • 空闲时间收集——CPU有空才工作
      • 引用计数（低版本的浏览器）
        • 当变量声明并赋值引用类型时，次数+1，当此变量重新赋值时，次数-1，值=0时会被回收
    • js的闭包
      • 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。简单来说，闭包是为了局部变量能一直活着，不被回收，同时可被外部访问

方法

alert

  • 警告框

  • 在文档加载前弹出

confirm

  • 确认框

  • 确认时返回true

  • 取消时返回false

prompt

  • 输入框

  • 输入的所有内容均为String

  • 不输人返回空字符串

console.log

  • 在控制台输出参数
  • 同类有 .error / .info 等等

var

  • 声明变量
  • 不建议使用，用let代替，详情见 js es6

function

  • 声明函数

typeof

  • 返回参数的数据类型
    • string
    • number
    • boolean
    • underfined
    • ….

isNaN

  • 判断参数是否NaN（NaN：Number中的不正常表现）

数学方法 Math

Math.round(x)四舍五入

Math.abs(x) 绝对值

Math.ceil(x) 向上取整

Math.floor(x) 向下取整

Math.max(x,y) 最大值

Math.min(x,y) 最小值

Math.pow(x,y) x的y次幂

Math.random() 随机数 0-1（不包括1 包括0）

数据转换

number

1
2
3
4
5
6
7
Number('1')

// 可以转换成数字则返回数字否则返回NaN

// 出现小数会保留小数

// 内容为空则转换为0
1
2
3
4
5
6
7
parseInt('13.3')

// 出现小数会直接取整而不是四舍五入

// 如果第一个是数字，会转换到遇到非数字为止

// 内容为空则返回NaN
1
2
3
4
5
6
7
parseFloat('13.3')

// 出现小数保留小数

// 如果第一个是数字会转换到遇到非数字为止

// 内容为空则返回NaN

string

1
2
3
4
let num = 12
String(num)   // '12'

num.toString() // '12'

null和undefined没有该方法

boolean

只有“”、undefined、NaN、false、0、null会转换成false

1
Boolean()  // false

逻辑运算符

||

  • or或者
  • 有真必真

&&

  • and并且
  • 有假必假

！

  • not非
  • 取反
1
2
3
4
5
//(可用作短路运算)

true&&('执行的命令');

false||('执行的命令');

循环

for

  • 循环语句
  • 先判断再执行
  • 需3参数
1
2
3
for(let i = 0;i<10;i++){
	console.log(i)   // 最后输出 i = : 9
}

for…in…

  • 遍历数组
  • 可遍历对象，但会对象中所有方法
1
2
3
for(let i in [1,2,'c',4]){
  	console.log(i);  //依次输出： 1 2 'c' 4
}

for…of… （推荐）

  • 遍历数组/对象
1
2
3
for(let i of {a:1,b:2,c:'c'}){
  	console.log(i);  //依次输出： 1 2 'c'
}

do…while…

  • 循环语句
  • 先执行后判断
1
2
3
4
5
6
let i = 0;
do{
    i++;
}while(i<5){
    console.log(i);  //依次输出： 1 2 3 4 5
}

while

  • 循环语句
  • 先判断再执行
1
2
3
4
5
let i = 0;
while(i<5){
	console.log(i); //依次输出： 0 1 2 3 4
    i++;
}

Tip：es5中数组方法的遍历循环，如forEach、map等

循环体语

break

  • 终断
  • 跳出当前循环

continue

  • 中断
  • 跳过当前一次循环
  • 循环继续不跳出

return

  • 终断
  • 停止当前的操作并返回值

判断

if…else…

1
2
3
4
5
if(Boolean()){
    // '命令'
}else{
   // '命令'
}

if…else if…else…

1
2
3
4
5
6
7
if(Boolean()){
    // '命令'
}else if(Boolean()){
    //'命令'
}else{
   // '命令'
}

switch

  • 用于根据不同的条件执行不同的动作
  • 表达式的值会与每个case的值比较。如果匹配，则该case关联的代码会被执行
  • 通常与break或default关键字一起使用
    • break关键字用于跳出switch代码块
    • default关键字来规定匹配不存在时做的事情
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
switch(i){
    case 0:
        // (执行代码);
        break;
    case 1:
        // (执行代码);
        break;
    case 2:
        // (执行代码);
        break;
        //...
    default:
        // (执行代码);
        break;
}

错误处理

try 测试代码块的错误try和catch一般成对出现的

catch 处理错误

throw 创建自定义错误

1
2
3
4
5
try{//当代码一出现错误时,跳过代码一,执行代码二,没错则跳过代码二
    // 代码一
}catch(err){
    // 代码二
}
1
2
3
4
5
6
try{//当代码一出现错误时,跳过代码一,执行代码二并创建自定义错误
    // 代码一
    throw('自定义错误')
}catch(err){//err=自定义错误
    // 代码二
}

杂七杂八

arguments 存储实参的数组(为隐藏参数)

ele的坐标

ele.offsetLeft = style.left 若ele已定位则按style.left,反之,则按ele到documen的left

ele.offsetTop = style.top 同上理

ele.offsetWidth = style.width 获取ele的宽

ele.offsetHeight = style.height 同上理

  • 我们知道offsetTop可以获得HTML元素距离上方或外层元素的位置，style.top也是可以的，二者的区别是：

    • 一、offsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。
    • 二、offsetTop只读，而style.top可读写。
    • 三、如果没有给HTML元素指定过top样式，则style.top返回的是空字符串。

  • offsetLeft与style.left、offsetWidth与style.width、offsetHeight与style.height也是同样道理

ele.clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的长度

ele.clientTop 同上理

ele.clientHeight 内容可视区域的高度

ele.clientWidth 内容可视区域的宽度

ele.scrollWidth 同下理

ele.scrollHeight

  • IE、Opera认为scrollHeight是网页内容实际高度，可以小于clientHeight。
  • NS、FF认为scrollHeight是网页内容高度，不过最小值是clientHeight。

ele.scrollTop 距页面的高度(滚动条)

ele.scrollLeft 距页面的宽度(一般用法document.body.scrollTop)

screen.height 屏幕的高度(分辨率高)

screen.width 屏幕的宽度(分辨率宽)

screen.availWidth 屏幕的宽度(空白空间)(还包括了未知部分,与想象中有出入)

screen.availHeight 屏幕的高度(空白空间)(还包括了屏幕底部的开始菜单栏)

  • (一般要获取屏幕的宽度用指可视区域document.documentElement.clientWidth)
  • (一般要获取屏幕的高度用指可视区域document.documentElement.clientHeight)

ele.screenLeft 返回窗口相对于屏幕的X坐标

ele.screenTop 返回窗口相对于屏幕的Y坐标

事件对象的坐标

event.screenX 鼠标相对屏幕的x坐标

event.screenY 鼠标相对屏幕的x坐标

event.offsetX 鼠标相对事件源元素的x坐标

event.offsetY 鼠标相对事件源元素的y坐标

event.clientX 鼠标相对浏览器的可视窗口的x坐标(窗口坐标)

event.clientY 鼠标相对浏览器的可视窗口的y坐标(窗口坐标)

event.pageX 鼠标相对document文档的x坐标(文档坐标) ie不支持

event.pageY 鼠标相对document文档的y坐标(文档坐标) ie不支持