javascript速查手册(持续更新中)

javascript知识点速查

数据类型

• 数值（number）：整数和小数（比如1和3.14）
• 字符串（string）：文本（比如Hello World）。
• 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
• undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
• null：表示空值，即此处的值为空。
• 对象（object）：各种值组成的集合。
• ES6 又新增了第七种 Symbol 类型的值，后续补充。

通常，数值、字符串、布尔值这三种为基本数据类型；object，array，function为引用数据类型；至于undefined和null，一般看做两个特殊值。

typeof与instanceof

typeof运算符可以返回一个值的数据类型（注意是小写的字符串类型）

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
typeof Symbol() // symbol
function f() {}
typeof f          // "function"
typeof undefined    // "undefined"
v       // ReferenceError: v is not defined
typeof v       // "undefined"
typeof window // "object"
typeof {} // "object"
typeof [] // "object"

typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

var o = {};
var a = [];
o instanceof Array // false
a instanceof Array // true

typeof null // "object"

null是一个表示“空”的对象，转为数值时为0；undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。

Number

JavaScript不区分整数和浮点数，统一用Number表示，(JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）)，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，          typeof NaN // 'number'
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
十六进制用0x前缀和0-9，a-f表示

根据国际标准 IEEE 754，JavaScript 浮点数的64个二进制位，从最左边开始，是这样组成的。
第1位：符号位，0表示正数，1表示负数
第2位到第12位（共11位）：指数部分
第13位到第64位（共52位）：小数部分（即有效数字）
-253到253，都可以精确表示。大于2的53次方以后，整数运算的结果开始出现错误，由于2的53次方是一个16位的十进制数值，所以简单的法则就是，JavaScript 对15位的十进制数都可以精确处理。
Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

0xff // 255  十六进制
0o377 // 255  八进制
0b11 // 3    二进制
0888 // 888 有前导0不超过8则视为八进制
0777 // 511

-0 === +0 // true
0 === -0 // true
0 === +0 // true

parseInt()
        //将字符串转化为整数，如果参数不是字符串先转化为字符串再转换
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1
所以，parseInt的返回值只有两种可能，要么是一个十进制整数，要么是NaN
parseInt('0x10') // 16
parseInt('011') // 11
parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1
parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8
parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

// parseInt方法还可以接受第二个参数（2到36之间），默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

// 对于二进制来说，1是有意义的字符，5、4、6都是无意义的字符，所以第一行返回1，第二行返回NaN。
parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

parseFloat()
        //字符串转为浮点数
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14
parseFloat('3.14more non-digit characters') // 3.14        
parseFloat('\t\v\r12.34\n ') // 12.34        
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN        

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

// 进制转换
// 其他进制转十进制
parseInt(num,2)
// 十进制转其他进制
num.toString(2) 

isNaN()
isNaN(NaN) // true
isNaN(123) // false
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

isFinite()
        //isFinite方法返回一个布尔值，表示某个值是否为正常的数值
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true


eval()  //计算 JavaScript 字符串，并把它作为脚本代码来执行。

转义

• \0 ：null（\u0000）
• \b ：后退键（\u0008）
• \f ：换页符（\u000C）
• \n ：换行符（\u000A）
• \r ：回车键（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：单引号（\u0027）
• \" ：双引号（\u0022）
• \\ ：反斜杠（\u005C）

Base64转码

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。

JavaScript 原生提供两个 Base64 相关的方法。

• btoa()：任意值转为 Base64 编码
• atob()：Base64 编码转为原来的值

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

Object

对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以；如果键名是数值，会被自动转为字符串。

// 报错
var obj = {
  1p: 'Hello World'
};

// 不报错
var obj = {
  '1p': 'Hello World',
  'h w': 'Hello World',
  'p+q': 'Hello World'
};

var obj = {
  p: function (x) {
    return 2 * x;
  }
};
obj.p(1) // 2

//属性读取
var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

//属性查看所有
var obj = {
  key1: 1,
  key2: 2
};
Object.keys(obj);  // ['key1', 'key2']

//属性是否存在：in 运算符
var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true
in运算符的一个问题是，它不能识别哪些属性是对象自身的，哪些属性是继承的。就像上面代码中，对象obj本身并没有toString属性，但是in运算符会返回true，因为这个属性是继承的。
这时，可以使用对象的hasOwnProperty方法判断一下，是否为对象自身的属性。
var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

//属性的遍历：for in循环
var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3

var person = { name: '老张' };
for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name

Function

//函数名式声明
function print(s) {
  console.log(s);
}
//赋值式声明
var print = function(s) {
  console.log(s);
};
//函数表达式声明,这里x只能在函数内部使用
var print = function x(){
  console.log(typeof x);
};
//构造函数声明
var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

ES6新增模板字符串${name}

javascript输出

alert();//警示框输出，包含确认按钮
prompt();//输入框弹出，包含输入框和确认按钮（取消返回null）
confirm();//确认框弹出，包含确认取消按钮（返回值true和false）
document.write("页面输出")//可以解析标签，\n无效要用<br>
console.log("输出一条日志");//最常用
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条错误");
console.dir("打印当前对象");
console.time("timer");  console.timeEnd("timer"); //运行耗时

Boolean对象

var b = new Boolean(true);

typeof b // "object"
b.valueOf() // true

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean('') // false
Boolean(NaN) // false

Boolean(1) // true
Boolean('false') // true
Boolean([]) // true
Boolean({}) // true
Boolean(function () {}) // true
Boolean(/foo/) // true

使用双重否定转换为布尔值
!!undefined // false
!!null // false
!!0 // false
!!'' // false
!!NaN // false

!!1 // true
!!'false' // true
!![] // true
!!{} // true
!!function(){} // true
!!/foo/ // true

Array对象方法

join()
    //所有元素拼接为字符串,参数为连接符，不改变原数组!!
    var arr=[1,2,3];
    arr.join();//"1,2,3"默认逗号分隔
    arr.join(" ");//"1 2 3"
    arr.join("");//"123"
        //String.split()是将字符串分割成数组
        //Array.join()与String.split()互为逆运算

reverse()
    //数组翻转，返回逆序的数组，并且不带参数，改变原数组!!
    var arr=[1,2,3];
    arr.reverse(); //arr=[3,2,1]
    arr.reverse().join(); //"3,2,1" 此时arr=[3,2,1]

sort()
    //排序数组元素，不带参数默认以字母表顺序，一般传入判断函数，改变原数组！！
    var arr1=[3,6,13,2,4];
    arr1.sort(function(a,b){
         return a-b;     //升序排列 return b-a; //降序排列
           });
    console.log(arr1);

concat()
   // 连接两个或多个数组，不影响原数组    返回新数组
    var a = [1,2,3];
    a.concat(4, 5); //返回[1,2,3,4,5]
    a.concat([4,5]); //返回[1,2,3,4,5]
    a.concat([4,5],[6,7]); //返回[1,2,3,4,5,6,7]
    a.concat(4, [5,[6,7]]); // 返回[1,2,3,4,5,[6,7]]

slice() 
    //数组截取，不改变原数组，包头不包尾
    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    animals.slice(2);   //从索引号2起往后截取，包括2   Array ["camel", "duck", "elephant"]
    animals.slice(2, 4);  // 包括2不包括4      Array ["camel", "duck"]
    animals.slice(1, -1);// -1到倒数第一个且不包括，-表示倒着数 Array ["bison", "camel", "duck"]

splice()
    //删除数组指定元素，改变原数组，返回删除值
    arr.splice(start, count, addElement1, addElement2, ...); //(位置，个数，插入元素)
    var a = ['a', 'b', 'c', 'd', 'e', 'f'];
    a.splice(4, 2) // ["e", "f"]
    a // ["a", "b", "c", "d"]

    a.splice(4, 2, 1, 2) // ["e", "f"]
    a // ["a", "b", "c", "d", 1, 2]

    a.splice(-4, 2) // ["c", "d"]

    var a = [1, 1, 1];
    a.splice(1, 0, 2) // []
    a // [1, 2, 1, 1]

    var a = [1, 2, 3, 4];
    a.splice(2) // [3, 4]
    a // [1, 2]

//添加删除数组元素方法
push()  //追加，在数组末尾添加数组元素
    var arr = [1, 2, 3, 4];
    arr.push(4, 5, 6);   // push完毕后会返回新的数组长度   此例为7

unshift()  //在数组开头添加数组元素
    arr.unshift(0, 10);   //unshift也有返回值，同push

pop()  //删除最后一个元素，不跟参数，一次只能一个
    arr.pop();      //  pop完毕后会返回删除的元素

shift()  删除第一个元素    一次一个，有返回值，不带参数
    arr.shift();    

indexOf() //通过元素返回数组索引
    var arr=[1,2,3,4];
    arr.indexOf(2);  //返回该元素索引号，只返回第一个，找不到则返回-1
    arr.lastIndexOf(3);   //从后往前查找

charAt()  //通过索引返回数组元素

toLocalString()     //将数组转化为本地化字符串
toString()          //转化为字符串

map()   //map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
var numbers = [1, 2, 3];

numbers.map(function (n) {
  return n + 1;
});
// [2, 3, 4]

numbers
// [1, 2, 3] 

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。
[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6] 返回新数组

forEach(function,this)     //对数组内每个元素都调用一次函数，没有返回值
var a=[1,2,3];
a.forEach(function(x,i,a){a[i]++;});      //a现在是[2,3,4]

filter(function,this)   //满足条件的返回到新数组，传入的第二格参数为this指向
[1,2,3].filter(function(x){return x>1;});  //[2,3]

every(function,this)       //判断数组中是否每个元素都满足条件，是true否false，[]空数组总返回true
[1,2].every(function(){return x<4;})         //true

some(function,this)       //判断数组中是否有满足条件的元素，有true无false，[]空数组返回false
[1,2,3].some(function(x){return x>5;})        //true

reduce()      //每次将前两个参数合并作为新第一个参数
[1,2,3,4].reduce(function(x,y){return x*y;})   //24:((1*2)*3)*4
reduceRight()
[2,10,60].reduceRight(function(x,y){return x/y;})      //3:(60/10)/2

Function对象方法

String对象方法

String.charAt(n)  //返回字符串中的第n个字符
String.charCodeAt(n)   //返回字符串中的第n个字符的代码
String.concat(字符串1,字符串2,...)      //连接字符串,返回新字符串
String.fromCharCode(65,66)   //从字符编码创建字符串 AB
String.index0f(要找的字符串,从某个位置开始的索引)     //返回的是这个字符串的索引值,没找到则返回-1
String.lastIndex0f(要找的字符串)   //从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
String.length   //字符串的长度
String.match(/abc/g)    //找到一个或多个正则表达式的匹配
String.replace("Microsoft","Runoob")    //替换一个与正则表达式匹配的子串，只替换一次
String.search("Runoob")     //检索与正则表达式相匹配的子串，返回位置索引值
String.slice(1,5)     //截取字符串，包头不包尾，同数组截取

String.split()      //将字符串分割成字符串数组
    'a|b|c'.split('|') // ["a", "b", "c"]
    'a|b|c'.split('') // ["a", "|", "b", "|", "c"]
    'a|b|c'.split() // ["a|b|c"]
    'a||c'.split('|') // ['a', '', 'c']
    'a|b|c'.split('|', 0) // [] 第二个参数限制返回个数
    'a|b|c'.split('|', 1) // ["a"]
    'a|b|c'.split('|', 2) // ["a", "b"]
//Array.join()与String.split()互为逆运算

String.substr(1,5)      //抽取一个子串，（开始，长度）
String.substring(1,5)   //返回字符串的一个子串，包头不包尾，截取
String.toLocaleLowerCase()   //把字符串转换小写
String.toLocaleUpperCase()   //将字符串转换成大写
String.toLowerCase()     //将字符串转换成小写
String.toString()     //返回字符串
String.toUpperCase()    //将字符串转换成大写
？？？？？
String.value0f()     //返回字符串

Math对象方法

Math.abs()    //计算绝对值
Math.acos()    //计算反余弦值
Math.asin()    //计算反正弦值
Math.atan()     //计算反正切值
Math.atan2()    //计算从x轴到一个点之间的角度
Math.ceil()     //对一个数上舍入，即取整加1
    Math.ceil(3.2) // 4
    Math.ceil(-3.2) // -3
Math.cos()       //计算余弦值
Math.E           //算术常量e,即自然对数的底数（约等于2.718）
Math.exp()      //返回 E 的 x 次幂的值
Math.floor()    //对一个数下舍入，即取整
    Math.floor(3.2) // 3
    Math.floor(-3.2) // -4
Math.log()     //返回数的自然对数（底为e）
Math.max(a,b,c)     //返回最大的参数
Math.min(a,b,c)     //返回最小的参数
Math.PI          //返回圆周率（约等于3.14159）
Math.pow(x,y)      //返回 x 的 y 次幂
Math.random( )     //返回介于0（包含）~1（不包含）之间的一个随机数
Math.round()      //四舍五入
Math.sqrt()       //返回数的平方根

//得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}
//0到num
Math.floor(Math.random() * (num + 1));

Data对象方法

Date()   //无论有无参数，总是返回当前时间
// "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"
Date(2000, 1, 1)
// "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"

Date实例有一个独特的地方。其他对象求值的时候，都是默认调用.valueOf()方法，但是Date实例求值的时候，默认调用的是toString()方法。这导致对Date实例求值，返回的是一个字符串，代表该实例对应的时间。

var today = new Date();
today
// "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"
// 等同于
today.toString()
// "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"

// 参数为时间零点开始计算的毫秒数
new Date(1378218728000)
// Tue Sep 03 2013 22:32:08 GMT+0800 (CST)
// 参数为日期字符串
new Date('January 6, 2013');
// Sun Jan 06 2013 00:00:00 GMT+0800 (CST)
// 参数为多个整数，
// 代表年、月、日、小时、分钟、秒、毫秒
new Date(2013, 0, 1, 0, 0, 0, 0)
// Tue Jan 01 2013 00:00:00 GMT+0800 (CST)

new Date('2013-2-15')
new Date('2013/2/15')
new Date('02/15/2013')
new Date('2013-FEB-15')
new Date('FEB, 15, 2013')
new Date('FEB 15, 2013')
new Date('February, 15, 2013')
new Date('February 15, 2013')
new Date('15 Feb 2013')
new Date('15, February, 2013')
// Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
//具体传参见文档，此为了解内容https://wangdoc.com/javascript/stdlib/date.html

Data()日期对象  是一个构造函数，必须使用new调用创建日期对象
    var date = new Date(); //有参数则返回参数时间 '2020-8-4'或'2020/8/4' 字符串形式
    var year = date.getFullYear();
    var month = date.getMonth() + 1;      //返回月 0-11
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();        // 1-6 星期日为 0
    var oneday = arr[day];
    var hour = date.getHours();
    var h = hour < 10 ? '0' + hour : hour;
    var min = date.getMinutes();
    var s = date.getSeconds();
    console.log(date);

    返回当前时间函数
    function getTimer() {
        var hour = date.getHours();
        var hour = hour < 10 ? '0' + hour : hour;
        var min = date.getMinutes();
        var min = min < 10 ? '0' + min : min;
        var s = date.getSeconds();
        var s = s < 10 ? '0' + s : s;
        return hour + ':' + min + ':' + s;
    }
        console.log(getTimer());

        时间戳
        var date = new Date();
        //第一种方法
        console.log(date.valueOf());   //获取现在距离1970年1月1日过的毫秒数
        //第二种方法
        console.log(date.getTime());    //valueOf()与getTime效果相同
        //第三种方法
        var date1 = +new Date();
        //第四种方法 H5新增
        console.log(Date.now());

        时分秒转换公式
        d = parseInt(总秒数 / 60 / 60 / 24);   //计算天数
        h = parseInt(总秒数 / 60 / 60 % 24);  //计算小时
        m = parseInt(总秒数 / 60 % 60);     //计算分钟
        s = parseInt(总秒数 % 60);        //计算当前秒数

        封装倒计时函数
        function countDown(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000;  //1秒=1000毫秒
            d = parseInt(times / 60 / 60 / 24);   //计算天数      取整parseInt()
            d = d < 10 ? '0' + d : d;
            h = parseInt(times / 60 / 60 % 24);  //计算小时
            h = h < 10 ? '0' + h : h;
            m = parseInt(times / 60 % 60);     //计算分钟
            m = m < 10 ? '0' + m : m;
            s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2020-12-1 14:00:00'));

原型与原型链

所有 JavaScript 对象都从原型继承属性和方法

原型继承

所有 JavaScript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

Object.prototype 位于原型继承链的顶端：

日期对象、数组对象和 Person 对象都继承自 Object.prototype。

箭头函数与函数中的this

作用域与变量提升

在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。

变量提升即将变量声明提升到它所在作用域的最开始的部分。

//函数提升
console.log(a)  // f a() { console.log(a) }
console.log(b) //undefined
function a() {
        console.log(a) 
}
var b = function(){
        console.log(b)
}
//相当于
var a = 'function'
var b
console.log(a)
console.log(b)

//函数提升与变量提升的优先级
console.log(a);    // f a() {console.log(10)}
console.log(a());    //  undefined
var a = 3;
function a() {
        console.log(10) //10
}
console.log(a)   //3
a = 6;
console.log(a());  //a is not a function;
//相当于
    var a = funtion () {
        console.log(10)
    }
    var a;
    console.log(a);    // f a() {console.log(10)}
    console.log(a());  //  undefined
    a = 3;
    console.log(a)   //3
    a = 6;
    console.log(a());   //a() is not a function;

可见函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

闭包

闭包特性：

1. 函数嵌套函数
2. 函数内部可以引用函数外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

  function fn() {
            var num = 1;
            num++;
            console.log(num);
            return function () {
                var n = 0;
                console.log(++n);
                console.log(++num);
            }
        }
        var ff = fn();
        ff();
        ff();
        fn()();
        fn()();
        //

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

深拷贝与浅拷贝

// 实现浅拷贝(只拷贝一层，如果里面包含object类型则只拷贝了地址)
        var obj = {
            id: 1,
            name: 'andy',
            a: [1, 2],
            msg: {
                age: 18
            }
        };
        var ob = {};
        for (var k in obj) {
            o[k] = obj[k];
        }
        console.log(ob);

        // ES6新方法
        Object.assign(oo, obj);

// 实现深拷贝
        var obj = {
            id: 1,
            name: 'andy',
            a: [1, 2],
            msg: {
                age: 18
            }
        };
        var o = {};
        //封装函数
        function deepCopy(newObj, oldObj) {
            for (var k in oldObj) {
                // 获取原对象每个属性值
                var item = oldObj[k];
                // 判断属性值属于哪种数据类型
                if (item instanceof Array) {
                    // 如果为数组通过递归再一次执行for in，遍历数组
                    newObj[k] = [];
                    deepCopy(newObj[k], item);
                    // 这里需要先判断数组，因为数组类型返回值是object
                } else if (item instanceof Object) {
                    // 如果为对象则递归再一次遍历判断
                    newObj[k] = {};
                    deepCopy(newObj[k], item);
                } else {
                    // 普通数据类型直接添加
                    newObj[k] = item;
                }
            }
        }
        // 不需要返回值，执行完毕后newObj已经达到想要的效果
        deepCopy(o, obj);
        console.log(o);

DOM

nodeType属性返回一个整数值，表示节点的类型。不同节点的nodeType属性值和对应的常量如下。

• 文档节点（document）：9，对应常量Node.DOCUMENT_NODE
• 元素节点（element）：1，对应常量Node.ELEMENT_NODE
• 属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
• 文本节点（text）：3，对应常量Node.TEXT_NODE
• 文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
• 文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
• 注释节点（Comment）：8，对应常量Node.COMMENT_NODE

Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12

document.nodeType // 9
document.nodeType === Node.DOCUMENT_NODE // true

nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。

只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，因此这三类节点的nodeValue可以返回结果，其他类型的节点一律返回null

textContent属性返回当前节点和它的所有后代节点的文本内容。

// HTML 代码为
// <div id="divA">This is <span>some</span> text</div>

document.getElementById('divA').textContent
// This is some text

textContent属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名（大写）	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

更多参考https://wangdoc.com/javascript/dom/node.html

页面加载完毕后执行js代码

window.onload=function(){}

node接口

方法	描述
获取节点
document.getElementById(‘id’)	返回带有指定 ID 的元素。
document.getElementsByTagName(‘div’)	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
document.getElementsByClassName(‘class’)	返回包含带有指定类名的所有元素的节点列表。
document.getElementsByName(‘name’)	通过name属性获取一组元素节点对象
document.querySelector(‘#id’)/(‘.class’)	找到第一个符合条件的节点对象
document.querySelectorAll(‘#id’)	找到所有符合节点
查找节点
parentNode.firstChild	第一个子节点
parentNode.lastChild	最后一个子节点
parentNode.childNodes	所有子节点（包含文本节点等）
node.children	所有子元素节点
node.parentNode	父节点
node.nextSibling	下一个兄弟节点
node.previousSibling	前一个兄弟节点
创建节点
document.createElement(‘elementName’)	创建元素节点
document.createAttribute(‘attrName’)	创建属性节点
document.createTextNode(‘test’)	创建文本节点
document.createComment(‘comment’)	创建注释节点
添加节点
node.appendChild(‘element/txt/comment/fragment’)	添加新的节点或移动已有的节点到指定节点下作为子节点
replaceChild()	替换子节点。
.insertBefore()	在指定的子节点前面插入新的子节点。
removeChild(‘’)	删除子节点。
remove()	删除自身
getAttribute(‘name’)	返回指定的属性值。
setAttribute(‘class’,’newclass’)	把指定属性设置或修改为指定的值。

使用 isSameNode() 方法来确定两个节点是否相同。

使用 isEqualNode() 方法 检查两个节点是否相等，但不一定是相同的节点。

文档节点（document）https://wangdoc.com/javascript/dom/document.html

document是一个对象，属于window对象的属性

var doctype = document.doctype;
doctype // "<!DOCTYPE html>"
doctype.name // "html"
//document.firstChild通常就返回这个节点。
    //DOM树的根节点是html
document.documentElement  //返回html元素对象
document.body   //返回body元素对象
document.head  //指向<head>节点

document.scrollingElement  //属性返回文档的滚动元素
document.activeElement    //属性返回获得当前焦点（focus）的 DOM 元素,通常，这个属性返回的是<input>、<textarea>、<select>等表单元素

属性节点（element）https://wangdoc.com/javascript/dom/element.html

操作元素

element.innerText //设置文本，去除空格和换行

element.innerHTML //保留空格和换行，可执行标签

属性	描述
只可读取，一般相对于offsetParent计算
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
常用于滚动监听
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。

更多属性见文档：https://www.w3school.com.cn/jsref/dom_obj_all.asp

控制样式

1.使用style
//style.height只能读写行内样式，是字符串类型，带单位；
//这里修改类名的时候要用style.className

2.添加类名更改样式
div1.classList.add("active");  //添加class样式
div1.classList.remove("box");  //删除class样式
div1.classList.toggle("show");  //切换class样式

/*通用的获取元素样式的方法*/
    function getStyle(obj, name) {
        if (window.getComputedStyle) {
            //正常浏览器的方式，具有getComputedStyle()方法
            return getComputedStyle(obj, null)[name];
        } else {
            //IE8的方式，没有getComputedStyle()方法
            return obj.currentStyle[name];
        }
    }

    var box = document.getElementById("box");
    console.log(getStyle(box, "width"));

鼠标事件	描述	dom
onclick	单击	2
ondblclick	双击	2
onmousedown	鼠标按下	2
onmouseup	鼠标松开	2
onmouseover	鼠标移到元素	2
onmousemove	鼠标在元素内移动	2
onmouseout	鼠标移出元素	2
onmouseenter	鼠标移到元素（不支持冒泡）	2
onmouseleave	鼠标移出元素（不支持冒泡）	2
oncontextmenu	鼠标右键打开菜单
键盘事件	描述	dom

键盘事件	描述	dom
onkeydown	键盘按键被按下	2
onkeypress	键盘按键按下并松开	2
onkeyup	键盘按键被松开	2

表单事件	描述	dom
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea)	2
onfocus	元素获取焦点时触发	2
onfocusin	元素即将获取焦点时触发	2
onfocusout	元素即将失去焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发（input=”search”）
onselect	用户选取文本时触发（input和textarea）	2
onsubmit	表单提交时触发	2

其他事件	描述	DOM
onload	页面加载完毕（包括内容、图片、frame、object）的时候触发该事件
resize	页面大小改变的时候触发该事件（例如浏览器缩放）
scroll	页面滚动的时候触发该事件
unload	从页面或frame删除所有内容的时候触发该事件（例如离开一个页面）

其他事件查表https://www.runoob.com/jsref/dom-obj-event.html

数组
arguments[]	只定义在函数体中，是局部变量，在全局环境中为undefined
arguments.callee	指代当前执行函数
arguments.length	实际传入参数个数

延时器与定时器

//延时器
var time=setTimeout(function(){
    console.log(1);
},1000);
clearTimeout(time);

//执行一个循环定时器，并将返回值赋给timer这个变量
var timer = setInterval(function(){
    console.log('2');
},1000);
console.log(timer);
//取消定时器需要有索引值，timer保存的是动画队列里的索引值(key) ，clearInterval停止动画需要一个索引值
clearInterval(timer);

BOM

Window：浏览器窗口，顶层对象

window对象不但充当全局作用域，而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

兼容性：IE<=8不支持。

对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

window.open() ：打开新的窗口

window.close() ：关闭当前窗口

History：历史记录 – 前进/后退

• history.go()
  • +n 为前进n页 类似浏览器的向前按钮
  • -n 为后退n页 类似浏览器的向后按钮

history.go(-2);     //向后退两页
history.go(1);     //向前进一页

• history.back() 加载 history 列表中的前一个 URL
• history.forward(); 可以跳转到下一个页面

history.back();
history.forward();

• history.length 返回历史记录中有多少条记录

Navigator：访问者信息

实现对浏览器类型的判断

var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {
    alert("你是火狐浏览器");
} else if (/chrome/i.test(ua)) {
    alert("你是谷歌浏览器");
} else if (/msie/i.test(ua)) {
    alert("你是IE5-IE10浏览器");
} else if ("ActiveXObject" in window) {
    alert("你是IE11浏览器");
}

Screen：用户屏幕信息

Screen 对象包含有关客户端显示屏幕的信息。

Location：URL相关 – 页面跳转

location对象表示当前页面的URL信息。例如，一个完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

正则表达式

字面量定义
var reg = /xyz/;
构造函数定义
var reg = new RegExp('xyz');
var reg = new RegExp(/xyz/, 'i');
// 等价于
var reg = /xyz/i;
后面参数：i  不区分大小写
        g  查找所有匹配项
        m  多行匹配

        [^xyz]表示除了x、y、z之外都可以匹配；[^]，就表示匹配一切字符，其中包括换行符
                                                             /y((..)\2)\1/.test('yabababab') // true
\1指向外层括号，\2指向内层括号

str.search(reg);
str.test(reg);
str.match(reg)
b[\s\S]

  [\u4e00-\u9fa5]+

元字符	说明
^	匹配开头
$	匹配结尾
*	等价于{0,}
+	等价于{1,}
?	等价于{0,1}
.	匹配除换行符外的任一字符
()
x|y	x或者y
{m,n}	至少m次，至多n次
[xyz]	x或者y或者z
[^xyz]	除x或y或z外的任一字符
\d	等价于[0-9]
\D	等价于[^0-9]

\f	匹配一个换页符
\n	匹配一个换行符
\r	匹配一个回车符
\t	匹配一个水平制表符
\s	匹配一个空白字符，包括空格，制表符，换页符，换行符相等于[ \t\r\n\v\f]
\S	匹配一个非空白字符相当于[^ \t\r\n\v\f]
\w	相当于[a-zA-Z0-9_]
\W	相当于[^a-zA-Z0-9_]
\1	匹配第一个()的内容

正则去重

var str = 'dfvgndsdddsss';
console.log(str.replace(/(\w)\1+/g, '$1'));

1、exec() 方法是一个正则表达式方法，用于检索字符串中的正则表达式的匹配。

函数返回一个数组中，其中数组中存放匹配的结果；如果未找到匹配，则返回值为null。

2、test() 方法是一个正则表达式方法，用于检测一个字符串是否匹配某个模式，

如果字符串中含有匹配的文本，则返回true，否则返回false。

3、search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相配的子字符串，并返回子串的起始位置。

3.1、search() 方法使用正则表达式，使用正则表达式搜索字符串，且不区分大小写

3.2、search() 方法使用字符串， 可使用字符串作为参数。字符串参数会转换为正则表达式

4、replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。

4.1、replace() 方法使用正则表达式，使用正则表达式且不区分大小写将方法中的参数替换为字符串中的指定内容。

4.2、replace() 方法使用字符串，将接收字符串作为参数。

5、match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

exec 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
test 一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
match 一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
search 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。

JSON

AJAX

node

npm -v 查看版本

主要参考文档

网道JavaScript教程：https://wangdoc.com/javascript/index.html

MDN教程：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

现代JavaScript教程：https://zh.javascript.info/

阮一峰ES6教程：https://wangdoc.com/es6/

廖雪峰官方网站：https://www.liaoxuefeng.com/wiki/1022910821149312

CSDN博主整理JavaScript全篇：https://blog.csdn.net/qq_38490457/article/details/109257751

W3school教程：https://www.w3school.com.cn/

菜鸟教程：https://www.runoob.com/js/js-tutorial.html