简介

js由3部分组成：

  1. ECMAScript
  2. BOM 整个浏览器
  3. DOM

语法

=== 运算符需要在类型和值两方面同时相等

use strict” 定义 JavaScript 代码应该以“严格模式”执行

对象是易变的：它们通过引用来寻址，而非值

for…in 语句遍历对象的属性

delete 关键词会同时删除属性的值和属性本身

使用set和get关键字设置属性的值或读取，读取是不需要()，更简洁。

运算符

  • typeof 返回变量的类型
  • instanceof 返回true，如果对象是对象类型的实例
    以上两个运算符不用括号 直接空空格分割

位运算符处理 32 位数。该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象。

箭头函数

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

(param1, param2, …, paramN) => { statements }

多条语句加花括号，需要手动返回

(param1, param2, …, paramN) => expression

1
2
3
4
5
6
/*示例 只有一条语句时可以省略花括号和return*/
let foo=(a)=>{
    let b= a*2;
    return a+b;
}
alert(foo(10));

生成器函数 generator

1
2
3
4
5
function* foo(x){
    yield x+1;
    yield x+2;
    return x+3;
}

yield关键字暂停函数并返回

生成器函数可以使用for of循环

方法：

  • next() 如果给next方法传参数， 那么这个参数将会作为上一次yield语句的返回值 next()返回一个迭代器对象，done表示是否执行完函数，value为值

类

ECMA6 定义类的方法

1
2
3
4
5
6
7
8
9
/*ECMA6新语法定义类*/
class Person{
    constructor(name){
        this.name=name;
    }
    sayHello(){
        console.log(this.name);
    }
}

js类

使用 super.method(…) 调用父方法。 使用 super(…) 调用父构造函数

es6的class 使用extends继承

继承类中的构造函数必须调用 super(…),(!)并且在使用 this 之前执行它。

1
2
3
4
5
class Rabbit extends Animal{
  constructor(name, earLength){
    super(name); 
    this.earLength = earLength; 
   }/*派生类重写基类的构造函数 ，必须先调用super(...)*/

当访问一个对象的属性时，首先在这个对象奔上上进行查找。如果没找到，会继续在原型上查到，也就是__proto__指向的那个对象

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法

ES5要继承对象本身和对象的prototype时需要混合继承，使用基类的apply方法时派生类继承基类本身的方法和属性，使用Object.create继承prototype的方法和属性，使用ES6时可以直接继承

数据类型

JavaScript 数据类型JavaScript 中有五种可包含值的数据类型：

  • 字符串（string）
  • 数字（number）
  • 布尔（boolean）
  • 对象（object）
  • 函数（function）

有三种对象类型：

  • 对象（Object）
  • 日期（Date）
  • 数组（Array）
    同时有两种不能包含值的数据类型：
  • null
  • undefined

对象

window

1
2
var opened = window.open('about:blank', '_self');
/*_self以自身打开一个新窗口，并返回引用判断浏览器：*/
  • window.location.assign() 方法加载新文档。
  • window.open(“about:blank”,”_self”).close() 关闭当前页面 只有open方法打开的才能用close
  • setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。
  • setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数。
  • clearTimeout()
  • clearInterval()停止执行

Math

Math对象没有构造函数。方法和属性是静态的

  • Math.random() 总是返回小于 1 的数。
  • Math.random() 与 Math.floor() 一起使用用于返回随机整数。
  • Math的random()方法返回0-1之间的随机数，可以用0.5减去随机数进行随机排序。
    ——————

    arguments

    arguments 对象包含函数调用时使用的参数数组。js变参可以直接传，函数定义内使用arguments关键字和[]索引参数如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。

数据结构 对象

array

方法 描述
splice() js的数组没有类似insert()的方法，使用splice(a,b,....)，a为插入位置，b为删除成员数，第三个参数可选，为替换的新元素,返回修改后的数组，注意splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
sort() js数组的sort方法是按字典排序的，无论成员类型是number还是string，而且是直接排序，不是返回副本,reverse()反向排序。 当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
function(a, b){return a-b}//也可以返回b-a，则反向排序
push() 向数组添加成员的安全方法
pop() 弹出成员，并返回被删除的成员
hift() 删除第一个成员
unshift() 在首部添加成员
concat() 连接2个数组（不会改变数组，会返回一个副本）
forEach() 方法为每个数组元素调用一次函数（回调函数）。该函数接受 3 个参数：item,index，array。map()方法同上，但返回一个数组的副本 forEach()的回调函数传递的值，要需要成员需要使用index
filter() 方法创建一个包含通过测试的数组元素的新数组。需要传入一个函数，参数同上
every() 方法检查所有数组值是否通过测试。参数同上
some() 方法检查某些数组值是否通过了测试。有一个通过都为true
find() 方法返回通过测试函数的第一个数组元素的值。
findIndex() 方法返回通过测试函数的第一个数组元素的索引。

set

声明：

1
var set = new Set([1,2,3]);

使用拓展运算符将set转换为数组 var arr=[...set];
for in是ES5标准，遍历key.
for of是ES6标准，遍历value.

set方法

方法 描述
add()
delete()
has()
clear()
size()
keys()
values()
entries() 
1
forEach((value,key)=>{consolo.log(value*2);})

使用回调函数访问,有2个可选参数 set（ 调用当前 forEach 方法的集合对象）和thisArg（ 回调函数执行过程中的 this 值。），

1
for(let [value,key] of set.entries())

map

声明：

1
var map = new Map([["name","john"],["age",13]]);

map 方法

方法 描述
size()
get(key)
set(key,value) 添加值对
delete(key)
has(key)
clear()

this

在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。当不带拥有者对象调用对象时，this 的值成为全局对象。如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数

箭头函数的this

箭头函数的this指向定义时的作用域而不是调用时， 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
代码没有在任何函数中执行，而是在全局作用域中执行时，this的值就是global对象，对于浏览器来说，this就是window。

Date

  • toLocaleString() 返回标准日期字符串
  • toLocaleTimeString() 返回不带日期的字符串

ES6 Promise对象

用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}});
promise.then(function(value) {
  /*success*/
}, 
  function(value) {
  /* failure*/
}
);

JSON

  • JSON.parse(string)将一个字符串解析为JSON格式，可以将返回值赋值给变量，使用成员运算符访问
  • JSON.stringify(jsObj)将一个js对象转换成JSON
  • JSON必须用双引号，否则js中的JSON.parse会解析错误
    最后一个值对后不能添加逗号

方法

string 方法

方法 描述
  • substring()和substr()区别是前者第二个参数为结束index，后者为截取多少位
  • replace() 方法不会改变调用它的字符串。它返回的是新字符串。

其他方法

这三种 JavaScript 方法可用于将变量转换为数字

  • Number()
  • parseInt()
  • parseFloat() 
1
2
3
4
5
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) == 'MicroMessenger') {
  /*这里警告框会阻塞当前页面继续加载*/
  alert('用百度打开，别用微信内置浏览器');  
};
1
2
3
4
/*以下代码是用javascript强行关闭当前页面 */
var opened = window.open('about:blank', '_self'); 
opened.opener = null; 
opened.close();
方法 描述
call() fn.call() 强制改变this指向到传入的第一个参数第二个参数开始原有参数向后移一位
apply() 和call方法区别是第二个参数是数组

属性

  • innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

    事件

    当用户进入后及离开页面时，会触发 onload 和 onunload 事件

html链接js脚本时，要放到文档最后，必须等待页面加载完毕，或者使用自定义的addLoadEvent()函数等待页面加载完毕后执行事件，addLoadEvent()函数实现如下：

1
2
3
4
5
6
7
8
9
10
function addLoadEvent(newFunc){
  var oldFunc=window.onload;   
  //如果没有绑定onload直接绑定 
  if(typeof oldFunc!="function")
  window.onload=newFunc;    
  else{window.onload=function(){
    oldFunc();
    newFunc(); 
  }}}
  /*也可以直接用匿名函数绑定多个事件，但此方法只适合需要绑定的函数不是很多的场合*/

闭包

JavaScript 闭包闭包是指有权访问另一个函数作用域中的变量的函数

1
2
3
4
5
var add = (function () { 
  var counter = 0; return function () { return counter += 1; 
  } 
})()/*自调用函数注意不能少了括号*/
add();add();add();/* 计数器目前是 3add成为了自调用函数所返回的一个函数，此函数为自调用函数所有*/

正则表达式

语法

可以通过new RegExp()构造函数给正则表达式添加变量，注意字符串里要使用\\转义

修饰符

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。每次匹配使用当前正则对象的lastIndex属性的值作为在目标字符串中开始查找的起始位置。lastIndex属性的初始值为0，找到匹配的项后lastIndex的值被重置为匹配内容的下一个字符在字符串中的位置索引，用来标识下次执行匹配时开始查找的位置，如果不加g，则每次都从0开始索引

m 执行多行匹配。

方括号

[]表示可以出现的范围,^在[]中查找任何不在方括号之间的字符表示，例如[^abc]|或()分组，将内容作为一个整体进行匹配, 正则表达式中每个小括号内的部分表达式就是一个子表达式。
RegExp.$1...$9属性的值为String类型，返回上一次正则表达式匹配中，第n个子表达式所匹配的文本（只是分组里的文本，不包括定义量词）。

表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。

Quantifiers 定义量词

n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串
。
n{X,} 匹配包含至少 X 个 n 的序
列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。^符号在[]内是取反的意
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

元字符元字符（Metacharacter）

拥有特殊含义的字符
元字符描述:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.(点)查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NUL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符

__

方法

方法 描述
test() 通过正则pattern进行匹配，返回true或false
exec() 返回匹配正则pattern的字符串 当全局匹配时，下一次执行exec()会从上一次结束的地方开始匹配，如果没有找到返回null，相当于一次次执行的match()方法
match() 当执行全局匹配时使用字符串方法match()，返回包含所有匹配的字符串的数组,如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match()
replace() 使用第一个参数正则，将符合条件的字符串替换成参数2，此方法多次替换需要全局匹配
compile() 编译正则表达式。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。

支持正则表达式的 String 对象的方法

方法 描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

js动画

bj.style这个方法只能获取写在html标签的写在style属性中的值

overflow 属性规定当内容溢出元素框时发生的事情

注意事项

微信内置浏览器有缓存，如果js文件名不变的话是不会重新加载的

背景色用内联样式，否则获取不到

bj.style这个方法只能获取写在html标签的写在style属性中的值

window.innerWidth/innerHeight无法获取手机端大小

可以使用document.body.clientWidth获取，但是body默认高度是0，可以将body继承window的高度后再获取

setInterval只能传递函数指针，否则第二次会将函数的返回值传递进去，可以使用一个匿名函数执行带参数的函数

在函数内使用getComputedStyle获取一个参数字符串时使用中括号[]

img默认是行内元素，使用display:block可以设置成块级元素并且消除默认的3px空白

offsetWidth实际获取的是盒模型(width+border + padding)

js文件在本地运行和服务器上路径不一样，本地以html为基准，服务器上以js文件为基准