JS的执行机制
特点： 1、单线程， 即，同一个时间只能做一件事，不要多线程是为了提升效率 (用途是与用户互动，操作Dom，否则会带来很复杂的同步问题) 2、任务队列(消息队列)， 同步任务(主线程上排队执行)，异步任务(不进入主线程，而是进入‘任务队列task queue’，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行) console.log('a'); while(true){} console.log('b') //只能输出a，因为是同步任务，程序由上到下执行，遇到while死循环，下面的语句就没法执行 console.log('a'); setTimeout(function(){ console.log('b') },0) while(true){} //还是只能输出a，setTimeout()就是个异步任务。在所有同步任务执行完之前，任何的异步任务是不会执行的 3、Event Loop 1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。 4）主线程不断重复上面的第三步。 主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。 哪些语句会放入异步任务队列及放入时机 1、setTimeout和setlnterval 2、DOM事件 3、ES6中的Promise 4、Ajax异步请求 javascript 代码运行分两个阶段： 1、预解析 ---把所有的函数定义提前，所有的变量声明提前，变量的赋值不提前 2、执行 ---从上到下执行（按照js运行机制） for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i) },1000) } //5个5 在到达指定时间时，定时器就会将相应回调函数插入“任务队列”尾部。这就是“定时器（timer）”功能 关于定时器的重要补充： 1、定时器包括setTimeout与 setInterval 两个方法。它们的第二个参数是指定其回调函数推迟/每隔多少毫秒数后执行。 2、对于第二个参数有以下需要注意的地方：当第二个参数缺省时，默认为 0； 当指定的值小于 4 毫秒，则增加到 4ms(4ms 是 HTML5 标准指定的，对于 2010 年及之前的浏览器则是 10ms);也就是说至少需要4毫秒，该setTimeout()拿到任务队列中。
2、js的浅copy和深copy
JS浅copy与深copy //后台返回了一堆数据，你需要对这堆数据做操作，多人开发情况下，没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据， 1、封装一个深拷贝的函数(PS：只是一个基本实现的展示，并非最佳实践) function deepClone(obj){//递归 let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判断ojb子元素是否为对象，如果是，递归复制 if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = deepClone(obj[key]); }else{ //如果不是，简单复制 objClone[key] = obj[key]; } } } } return objClone; } let a=[1,2,3,4], b=deepClone(a); a[0]=2; console.log(a,b); 2、slice只能实现一维数组的深拷贝，， let a=[0,1,[2,3],4], b=a.slice(); a[0]=1; a[2][0]=1; console.log(a,b); //是做不到的 3、concat方法 与slice也存在这样的情况，他们都不是真正的深拷贝 4、我们还可以借用JSON对象的parse和stringify function deepClone(obj){ let _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone } let a=[0,1,[2,3],4], b=deepClone(a); a[0]=1; a[2][0]=1; console.log(a,b); 5、JQ的extend方法 //$.extend( [deep ], target, object1 [, objectN ] ) let a=[0,1,[2,3],4], b=$.extend(true,[],a); a[0]=1; a[2][0]=1; console.log(a,b);
3、js类型转换
显示转换 1、Number() 1）如果是布尔值，true和false分别被转换为1和0 2）如果是数字值，返回本身。 3）如果是null，返回0. 4）如果是undefined，返回NaN。 5）如果是字符串，遵循以下规则： 1、如果字符串中只包含数字，则将其转换为十进制（忽略前导0） 2、如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0） 3、如果是空字符串，将其转换为0 4、如果字符串中包含非以上格式，则将其转换为NaN 6）如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则转换返回的字符串值。 2、parseInt(string, radix) 1）忽略字符串前面的空格，直至找到第一个非空字符 2）如果第一个字符不是数字符号或者负号，返回NaN 3）如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止 4）如果上步解析的结果以0开头，则将其当作八进制来解析；如果以0x开头，则将其当作十六进制来解析 5）如果指定radix参数，则以radix为基数进行解析 3、parseFloat(string) 它的规则与parseInt基本相同，但也有点区别：字符串中第一个小数点符号是有效的，另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值。 4、toString(radix) 除 undefined 和 null 之外的所有类型的值都具有toString()方法，其作用是返回对象的字符串表示。 5、String(mix) 1）如果有toString()方法，则调用该方法（不传递radix参数）并返回结果 2）如果是null，返回”null” 3）如果是undefined，返回”undefined” 6、Boolean(mix) 以下值会被转换为false：false、”"、0、NaN、null、undefined，其余任何值都会被转换为true。 隐式转换 1、isNaN(mix) 2、递增递减操作符（包括前置和后置）、一元正负符号操作符 1）如果是包含有效数字字符的字符串，先将其转换为数字值（转换规则同Number()），在执行加减1的操作，字符串变量变为数值变量。 2）如果是不包含有效数字字符的字符串，将变量的值设置为NaN，字符串变量变成数值变量。 3）如果是布尔值false，先将其转换为0再执行加减1的操作，布尔值变量编程数值变量。 4）如果是布尔值true，先将其转换为1再执行加减1的操作，布尔值变量变成数值变量。 5）如果是浮点数值，执行加减1的操作。 6）如果是对象，先调用对象的valueOf()方法，然后对该返回值应用前面的规则。如果结果是NaN，则调用toString()方法后再应用前面的规则。对象变量变成数值变量。 3、加法运算操作符 4、乘除、减号运算符、取模运算符 5、逻辑操作符（!、&&、||） 6、关系操作符（<, >, <=, >=） 7、相等操作符（==）
4、js的组成部分
javascript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: 1、ECMAScript,由ECMA-262定义,提供核心语言功能; 2、文档对象模型(DOM),提供访问和操作网页内容的方法和接口; 3、浏览器对象模型(BOM),提供与浏览器交互的方法和接口;
5、js严格模式
"use strict"; //是进入严格模式的标志，放在脚本文件的第一行，则整个脚本都将以"严格模式"运行。如果这行语句不在第一行，则无效，整个脚本以"正常模式"运行 1、全局变量显式声明 变量必须先用var声明，然后再使用 2、静态绑定 1）禁止使用with()语句 2）创设eval作用域 3、禁止this关键字指向全局对象 4、禁止在函数内部遍历调用栈 5、禁止删除变量 严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。 'use strict' var x; delete x; //语法错误 var o = Object.create(null,{ 'x':{ value:1, configurable:true } }) delete o.x //删除成功 6、严格模式下，对一个使用getter方法读取的属性进行赋值，会报错。 var o = {}; Object.defineProperty(o, "v", { value: 1, writable: false }); o.v = 2; console.log(o)//1 虽然没有改变，但是也没有报错 'use strict'; var o = {}; Object.defineProperty(o, "v", { value: 1, writable: false }); o.v = 2; // 报错 console.log(o) 7、严格模式下，对禁止扩展的对象添加新属性，会报错。 var o = {}; Object.preventExtensions(o); o.v = 1; console.log(o)//空对象 'use strict'; var o = {}; Object.preventExtensions(o); o.v = 1; // console.log(o) 8、严格模式下，删除一个不可删除的属性，会报错。 delete Object.prototype; //无影响 'use strict'; delete Object.prototype; // 报错 9、对象不能有重名的属性 10、函数不能有重名的参数 11、禁止八进制表示法 12、arguments对象的限制 13、 函数必须声明在顶层 14、保留字