JS实用知识点学习笔记

JS数据类型判断

typeof可以用来判断number、string、Boolean、function、symbol、undefined类型数据
instanceof可以判短Array、Date和Function
用object.prototype.toString可以判断所有类型

var gettype=Object.prototype.toString 

gettype.call('aaaa') 输出 [object String] 
gettype.call(2222) 输出 [object Number] 
gettype.call(true) 输出 [object Boolean] 
gettype.call(undefined) 输出 [object Undefined] 
gettype.call(null) 输出 [object Null] 
gettype.call({}) 输出 [object Object] 
gettype.call([]) 输出 [object Array] 
gettype.call(function(){}) 输出 [object Function]

闭包

闭包，即函数的定义后表达式位于另一个函数的内部，而且这些函数可以访问他们外部函数声明的所有变量，参数和定义的其他函数。
当内部函数在包裹它的函数外部被调用时就形成了闭包，即内部函数会在外部函数返回后执行。

原型链

1.所有引用类型都有对象特性
2.所有的引用类型都有一个_proto_属性，属性值是一个普通的对象
3.所有的函数都有一个prototype属性，属性值是一个普通的对象
4.所有的引用类型的_proto_属性都指向它的构造函数的prototype属性值
5.当试图获得对象某一属性，但是对象本身没有的话会去它的_proto_属性（即它的构造函数的prototype属性值）中寻找

原型链继承

每个构造函数都有一个原型对象，原型对象都有一个指向构造函数的指针（construct），而实例都有一个内部指针指向原型对象。其中构造函数都有一个prototype属性指向实例对象
实例→原型对象→构造函数
↑ ← ↓
假设有构造函数A和B，通过A.prototype = new B(); 把A的prototype属性指向了B的实例，那么A实例的内部指针也会发生改变： A实例→B原型对象
我的理解：
A实例→A原型对象→A构造函数→（A.prototype = new B() ）B实例→B原型对象
这样A就能继承B的所有属性和方法

This

1.谁调用函数或方法this就指向谁
2.如果没有上一级调用，那么this就指向window
3.即使一个函数中包含多个对象，这个函数被最外层的对象所调用，this也只是指向它上一级对象

arguments对象

在函数代码中，使用arguments对象无需指出参数名就能访问参数。如arguments[0]访问的就是函数第一个参数。
arguments.length可以用来获取参数的个数
用arguments判断参数个数就可以用来模拟函数重载

function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 5);
  } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}

doAdd(10); //输出 “15”
doAdd(40, 20); //输出 “60”

ES6常用属性

1.let和const
let和const都是用来声明变量的，其中let为js新增了块级作用域，let定义的变量作用域为代码块。const同常用来定义常量，一旦声明值就不能改变。
2.函数参数默认值

function printText(text = 'default') {
    console.log(text);
}

这样没有传入参数值的时候text的值就为default

3.箭头函数
特点：不需要用function来创建；省略return关键字；继承上下文this关键字。

var A = function （a,b）{
return a+b;
}
//使用箭头函数
var a = (a,b) =>a+b;

function a() {
console.log(a)
}
//使用箭头函数
let a = ()=>{
console.log(a)
}

箭头函数与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能用new
箭头函数不绑定this，会从上下文捕获this来作为自己的this值
箭头函数在用call()和apply()方法调用一个函数时只是传入了一个参数，对this不影响
箭头函数没有原型属性
箭头函数不绑定arguments属性，转而用rest参数解决

4.模板字符串
如插入一段HTML在ES5中需要用到+和/来进行多行文字拼接

$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

在ES6中只需要用到``就可以，${}用于界定

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

5.结构赋值

let [a,b,b] = [1,2,3]
let [a,[b],c] = [1,[2],3] //解构赋值要求两边模式相同

let [x,y = 'a'] = ['b'] //解构赋值允许设置默认值

//注意：ES6使用严格的（===）判断一个位置是否有效

//如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
  console.log('aaa');
}

let [x = f()] = [1];

2.对象的解构赋值

let {foo,baz} = {foo:"a",baz:"b"}

//嵌套解构
let obj = {
    p: [
      'Hello',
      { y: 'World' }
    ]
  };
  
  let { p: [x, { y }] } = obj;
  //如果要为P赋值
  let {p,p:[x, { y }]} = obj

6.数组

数组去重

var arr = [1,2,3,4,4,5];
var arr2 = [...new Set(arr) ];		//arr2就是去重之后的数组

数组拷贝
浅拷贝,只复制指针，修改b会导致a变化

let arr = [1,2,3]
let arr2 = [...arr];

深拷贝
利用concat

let arr = [1,2,3];
let arr2 = [].concat(arr);

利用JSON深拷贝

let obj = {
a:1,
b:2,
c:undefind,
fun:function () {
console.log("function")
}
};
let obj2 = JSON.parse(JOSN.Stringify(obj));
console.log(obj2);
//object:[a:1,b:2]
//用JSON拷贝会忽略undefined和function

数组合并

let arr = [1,2];
let arr2 = [3,4];
[...arr,...arr2];
//[1,2,3,4]