1.JavaScript基本数据类型
number typeof -> number
boolean typeof -> boolean
string typeof -> string
undefined typeof -> undefined
null typeof -> object
2.全局变量/局部变量
全局变量：
1.定义在函数外面的变量，称为全局变量；很少用
2.定义在函数内部，没有使用var声明的变量，称为全局变量。
局部变量：
方法内部，用var声明的变量，称为局部变量。
3.使用Array模拟栈结构
var arr = [1, 2, 3];
arr.push(true, false); //push可以向数组尾部添加一个或者多个元素，返回新增元素后数组的长度
arr.pop(); //从数组尾部移除一个元素，返回移除的元素 false
4.使用Array模拟队列结构
var arr = [1, 2, 3];
arr.push(true); //数组【1， 2， 3， true】
arr.shift(); //从数组头部移除一个元素，返回移除元素 1 数组【2， 3， true】
//unshift(1, 2); 向数组头部添加一个或者多个元素
5.数组 splice/slice
/**
* splice
* 第一个参数：起始位置
* 第二个参数：截取的个数(没有此参数表示截除起始位置后面的所有元素)
* 第三个参数及以后：追加的新元素(没有此参数表示截除起始位置后n（参数2的值）个元素)
*/
var arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, 3, 4, 5);
console.log(arr); //[1, 3, 4, 5, 4, 5]
/**
* slice，不操作数组本身
* 第一个参数：起始位置
* 第二个参数：结束位置(不包含结束的元素)
*/
var arr = [1, 2, 3, 4, 5];
var result = arr.slice(2, 4);
console.log(arr); //[1, 2, 3, 4, 5]
console.log(result); //[3, 4]
6.数组 concat/join
/**
* concat,合并两个数组，生成一个新的数组，不操作数组本身
*/
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [true, false]
var result = arr1.concat(arr2);
console.log(arr1); //[1, 2, 3, 4, 5]
console.log(arr2); //[true, false]
console.log(result); //[1, 2, 3, 4, 5, true, false]
/**
* join，用指定连接符链接数组所有元素，不操作数组本身
* 第一个参数：起始位置
* 第二个参数：结束位置(不包含结束的元素)
*/
var arr1 = [1, 2, 3, 4, 5];
var result = arr1.join("-");
console.log(arr1); //[1, 2, 3, 4, 5]
console.log(result); //1-2-3-4-5
7.数组 sort/reverse
var arr = [5, 2, 1, 4, 3];
/**
* sort,正序排列数组
*/
arr.sort();
console.log(arr);//[1, 2, 3, 4, 5]
var arr1 = [10, 2, 4, 1, 7];
arr1.sort();
console.log(arr1); //[1, 10, 2, 4, 7] 按照字符串来值比较
//解决方案
arr.sort(function (value1, value2) {
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0
}
});
/**
* reverse,倒序排列数组，不是按照元素大小，而是按照元素索引倒序
*/
arr.reverse();
console.log(arr); //[3, 4, 1, 2, 5]
8.数组新特性-迭代(every/filter/forEach/map/some)
every:对数组的每一个元素执行一次函数调用，都返回true，则返回true，若有一个返回false，则返回false
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var result = arr.every(function (value, index, array) {
return value > 2;
});
console.log(result); //false
filter:对数组的每一个元素执行一次函数调用，函数执行结果为false，则把该元素过滤掉，最后返回过滤后的结果
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var result = arr.filter(function (value, index, array) {
return value > 2;
});
console.log(result); //[3, 4, 5, 4, 3]
forEach:对数组的每一个元素执行一次函数调用，对每个元素进行操作，无返回
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
arr.forEach(function (value, index, array) {
console.log(value); //遍历输出数组的每一个元素
})
map:对数组的每一个元素执行一次函数调用，返回函数调用后的结果
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var result = arr.map(function (value, index, array) {
return value * 2;
});
console.log(result); //[2, 4, 6, 8, 10, 8, 6, 4, 2]
some:对数组的每一个元素执行一次函数调用，若有一个返回true，则返回true，如果都返回false，则返回false
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var result = arr.some(function (value, index, array) {
return value >= 5;
});
console.log(result); //true
reduce:从前往后遍历，preValue保留上一次函数运算的结果
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var result = arr.reduce(function (preValue, curValue, index, array) {
return preValue + curValue;
});
console.log(result); //25 (1+2+3+4+5+4+3+2+1)
reduceRight:与reduce相反，从后往前遍历
9.Object基本方法
每一个object对象都会有一下属性和方法
--Constructor:构造函数，保存着用于创建当前对象的函数；
--hasOwnProperty(propertyName):用于检测propertyName属性是否再当前实例中存在(不包括原型)；
--isPrototypeOf(Object):检查传入的对象是否是另外一个对象的原型；
--propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for iny语句来枚举；
--toLocaleString():返回对象的字符串表示，该字符串与执行环境的地区对应；
--toString():返回对象的字符串显示；
--valueOf():返回对象的字符串、数值、布尔显示；
10.函数的3中定义方式
//函数3中定义方式
//1.function语句式，这种方法定义的函数会被提前提取编译
function test1() {
console.log("function语句式");
}
test1(); //function语句式
//2.函数的直接量
var test2 = function () {
console.log("函数的直接量");
}
test2(); //函数的直接量
//3.Function构造函数式，有动态性，拥有顶级作用于
var test3 = new Function("a", "b", "console.log(a+b);");
test3(10, 20); //30
//函数作用于概念
var k = 1;
function t1() {
var k = 2;
//function test() {return k;} 2
//var test = function () {return k;}; 2
//var test = new Function("return k;"); 1
alert(test());
}
t1();
11.function中的arguments
每个function对象中都自带一个arguments对象，该对象存储了该function的实际参数列表，arguments是一个数组对象，通过 方法名.length 可以获取到方法申明的参数列表
arguments.callee 指向函数自己本身,类似递归的时候推荐使用，仔细看下面例子
function fact(num) {
if(num <= 1) {
return 1;
} else{
return num * fact(num - 1);
}
}
console.log(fact(5)); //120
var F = fact;
console.log(F(5)); //120
fact = null;
console.log(F(5)); //Uncaught TypeError:fact is not a function
//标准定义
function fact(num) {
if(num <= 1) {
return 1;
} else{
return num * arguments.callee(num - 1);
}
}
12.this
this对象是再运行时基于函数的执行环境绑定的，在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。也就是说，this关键字总指向调用者。
//this总是指向调用者
var k = 10;
function test() {
this.k = 20;
}
console.log(test.k); //undefined,因为test函数还未被调用
test(); //此处相当于window.test(),所以this指向的时window
console.log(test.k); //undefined
console.log(k); //20,相当于window.k
13.call/apply
call/apply这两个方法是每一个function自带的成员方法，他们的作用一样，都是为function指定执行作用域，区别在于，call接受的参数是以参数列表的形式接受，而apple是将参数封装成数组进行接受的。
var color = "red";
var obj = {color:"blue"};
function add(num1, num2) {
console.log(this.color + ":" + (num1 + num2));
}
function call1(obj, num1, num2) {
add.call(obj, num1, num2);
}
function apply1(obj, num1, num2) {
add.apply(obj, [num1, num2]);
}
call1(this, 10, 20); //red:30
apply1(this, 20, 40); //red:60
call1(obj, 10, 20); //blue:30
apply1(obj, 20, 40); //blue:60
14.执行环境
执行环境(execution context)是javascript中最为重要的一个概念。执行环境定义了变量或者函数有权访问的其他数据，决定了他们各自的行为。每一个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
15.作用域链
每一个函数都有自己的执行环境，当执行流进一个函数时，韩式的环境就会被推入 一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返还给之前的执行环境。当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。
16.块级作用域
JavaScript没有跨级作用于的概念，如下例
function test() {
for(var i = 0; i <= 5; i++){
console.log(i);
}
console.log(i); //6,此处依然能访问到i
}
test();
我们可以通过()()的方式模拟块级作用域，
function test() {
(function () {
for(var i = 0; i <= 5; i++){
console.log(i);
}
})();
console.log(i); //Uncaught ReferenceError: i is not defined
}
17.闭包
闭包；一个函数可以访问另外一个函数作用域中的变量，起到保护变量的作用
自己理解：一个函数返回另一个函数，返回的函数有外部作用域的访问权限
var name = "abc";
var obj = {
name : "efg",
getName: function () {
return function () {
return this.name;
}
}
};
/**
* 这个方法可以拆解理解的
* var fun = obj.getName() = function(){return this.name}
* fun() = window.fun()
* 所以会返回外部作用于的name
*/
console.log(obj.getName()()); //abc
//返回obj.name解决方案
var obj1 = {
name:"efg",
getName:function () {
var o = this;
return function () {
return o.name;
}
}
};
console.log(obj1.getName()()); //efg
18.面向对象
18.1.创建面向对象的3种方式
//1.普通方法调用
function createPerson(name, age, sex) {
var obj = {};
obj.name = name;
obj.age = age;
obj.sex = sex;
return obj;
}
var person = createPerson("zhangsan", 20, "男");
console.log(person.name + ":" + person.age + ":" + person.sex); //zhangsan:20:男
//2.构造函数创建,这种方式，函数名都是首字母大写
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var person = new Person("lisi", 25, "男");
console.log(person.name + ":" + person.age + ":" + person.sex); //lisi:25:男
//3.通过call/apply的形式调用
var person = {};
Person.apply(person, ["wangwu", 30, "女"]);
console.log(person.name + ":" + person.age + ":" + person.sex); //wangwu:30:女
18.2.原型(prototype)
原型(prototype)；每一个函数对象都有一个prototype属性，该属性是一个指针，指向一个对象，这个对象的用途是将特定的属性和方法封装起来，共实例对象共享使用。
function Person() {}
Person.prototype.name = "zhangsan";
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log(this.name);
};
var p1 = new Person();
p1.name = "lisi";
var p2 = new Person();
p2.name = "wangwu";
p1.sayName(); //lisi
p2.sayName(); //wangwu
console.log(p1.sayName == p2.sayName); //true
console.log(Person.prototype.isPrototypeOf(p1)); //true 判断是否是某对象的原型
console.log(Object.getPrototypeOf(p1)); //返回Person.prototype对象
构造函数，原型对象，实例对象三者的关系
1.构造函数.prototype = 原型对象
2.原型对象.constructor = 构造函数(模板)
3.原型对象.isPrototypeOf(实例对象) 判断实例对象的原型是否是当前对象
18.3.原型的使用
18.3.1.简单原型模式
该模式要遵循的原则式创建对象必须放在原型后面，否则创建的对象无法访问到原型内的属性或方法
function Person() {}
Person.prototype = {
name:'z3',
age:20,
sayName:function () {
console.log(this.name);
}
}
//定义Person.prototype的构造函数为Person,使用这种方法指定构造函数，for-in的时候无法获取到constructor
Object.defineProperty(Person.prototype, "constructor", {
enumerable:false,
value:Person
})
var p = new Person();
p.sayName(); //z3
console.log(Person.prototype.constructor); //function Person(){}
18.3.2.组合使用构造函数和原型模式
由于上述方式所有属性/方法对所有对象都是共享的，有一个明显的缺点，当属性是应用数据类型时，A对象对这个数组进行了push操作，B对象去访问时得到的时A对象操作后的结果。通过组合使用构造函数和原型模式可以有效解决这个问题
function Person(name, age, friends) {
this.name = name;
this.age = age;
this.friends = friends;
}
Person.prototype = {
constructor : Person,
sayName : function () {
console.log(this.name);
}
}
var p1 = new Person('z1', 20, ["aaa", 'bbb']);
p1.friends.push('zzz');
var p2 = new Person('z2', 22, ['ccc', 'ddd']);
p2.friends.push('yyyy');
p1.sayName(); //z1
p2.sayName(); //z2
console.log(p1.friends); //["aaa", "bbb", "zzz"]
console.log(p2.friends); //["ccc", "ddd", "yyyy"]
18.3.3.动态原型模式
该模式把所有的属性和方法封装到一起,代码更加简洁，如下方式定义，sayName只会被创建一次
function Person(name, age) {
this.name = name;
this.age = age;
if(typeof this.sayName != "function"){
Person.prototype.sayName = function () {
console.log(this.name);
}
}
}
var p1 = new Person('z1', 20);
var p2 = new Person('z3', 22);
p1.sayName(); //z1
p2.sayName(); //z3
18.3.4.稳妥构造函数式
适合在非常安全的环境中使用，他没有公共属性，不能使用this对象,同时创建的时候也不使用new,这种方法类似与java中的private，所有属性都无法通过obj.xxx的方式获取，必须通过对应的方法获取。
function Person() {
var obj = {};
var name = 'z1';
var age = 20;
obj.sayName = function () {
console.log(name);
}
return obj;
}
var p = Person();
p.sayName(); //z1
19.继承
JavaScript通过让子类对象的原型指向父类对象的方式实现继承
19.1.原型继承
特点：即继承了父类的模板，又继承了原型对象
function Sup(name){
this.name = name;
}
function Sub(age) {
this.age = age;
}
var sup = new Sup('z3');
Sub.prototype = sup;
var sub = new Sub(20);
console.log(sub.name); //z3
console.log(sub.age); //20
console.log(sup.isPrototypeOf(sub)); //true
console.log(Sub.prototype.constructor); //function Sup(name){this.name = name;}
console.log(sub instanceof Sub); //true
console.log(sub instanceof Sup); //true
19.2类继承
特点：只继承模板，不继承原型对象，又称借用构造函数方式继承
function Person(name, age) {
this.name = name;
this.age = age;
}
function Boy(name, age, sex) {
Person.call(this, name, age);
this.sex = sex;
}
var boy = new Boy('z3', 20, '男');
console.log(boy.name + " : " + boy.age + " : " + boy.sex); //z3 : 20 : 男
console.log(boy instanceof Boy); //true
console.log(boy instanceof Person); //false
console.log(Boy.prototype.constructor); //Boy(name, age, sex) {Person.call(this, name, age);this.sex = sex;}
19.3混合继承
function Person(name, age) {
this.name = name;
this.age = age;
}
function Boy(name, age, sex) {
Person.call(this, name, age);
this.sex = sex;
}
Boy.prototype = new Person();
var boy = new Boy('z3', 20, '男');
console.log(boy.name + " : " + boy.age + " : " + boy.sex); //z3 : 20 : 男
console.log(boy instanceof Boy); //true
console.log(boy instanceof Person); //true
console.log(Boy.prototype.constructor); //Person(name, age) {this.name = name;this.age = age; }
20.Ajax
20.1创建XHR
目前Javascript主流的都是通过Ajax技术进行网络请求的，Ajax可以不需要刷新页面的同时与服务器进行交互，提高用户体验，Ajax的核心是XMLHttpRequest，目前主流的浏览器都支持原生的XHR，但是IE7以前使用的是MSXML库中的XHR对象，所以为了兼容性，我们可以通过一下方式获取XHR
function createXHR() {
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
var i, len;
for(i = 0, len = versions.length; i < len; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch (ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available");
}
}
20.2同步请求
var xhr = createXHR();
xhr.open("get",
"https://accountv3-api.fclassroom.cn/checkVersion.json?jike-client-from=APP&versionType=21&category=20&versionNo=356",
false);
xhr.send(null);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("Request was unsuccessful : " + xhr.status);
}
20.3异步请求
var xhr = createXHR();
xhr.onreadystatechange = function () {
/**
* readyState
* 0:未初始化
* 1:启动
* 2:发送
* 3:接收
* 4:完成
*/
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("Request was unsuccessful : " + xhr.status);
}
}
}
xhr.open("get",
"https://accountv3-api.fclassroom.cn/checkVersion.json?jike-client-from=APP&versionType=21&category=20&versionNo=356",
true);
xhr.send(null);
20.4Get/Post
get请求与上述方式一样，如果需要为请求添加自己的header，可以通过XHR的setRequestHeader(name,value)进行设置，这个方法的调用必须在open之后，send之前。
post请求可以通过FormData来承载需要提交的数据
var xhr = createXHR();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("Request was unsuccessful : " + xhr.status);
}
}
}
xhr.open("post",
"https://accountv3-api.fclassroom.cn/checkVersion.json",
true);
var formData = new FormData();
formData.append("jike-client-from", "APP");
formData.append("versionType", "21");
formData.append("category", "20");
formData.append("versionNo", "356");
xhr.send(formData);