你所不知道的js的小知识点(1)
你所不知道的js的小知识点(1)
1.js调试工具 debugger
<div class="container"> <h3>debugger语句会产生一个断点，用于调试程序，并没有实际功能；</h3> <ol> <li>使用debugger的前提是你手动打开了“开发者工具”；</li> <li>debugger会产生一个断点，代码会停止在这里不再往下执行；</li> </ol> </div> <script> console.log(1); debugger; console.log(2); </script>
2.获取页面元素 document.querySelector()
<h3>如何获取页面元素？</h3>
<ol>
<li>获取单个元素：document.querySelector('选择器')，如果该选择器对应多个元素，则只返回第一个；</li>
<li>获取多个元素：document.querySelectorAll('选择器')，获取选择器对应的全部元素；</li>
</ol>
3.类型转换
<h3>类型转换</h3>
<ol>
<li>JavaScript总是把值自行转换为他需要的数据类型;</li>
<li>
转化为数字：
-(减)、*(乘)、/(除)，会把类型转换成数字； <br>
true转化为1，false、空字符串转换为0；<br>
略坑的加号:+，只要有一个是字符串，则全部作为字符串；
因为加号(+)同时还是字符串连接符号；
</li>
<li>原始值到对象的转换：直接使用String()、Number()、Boolean()构造函数转换；</li>
</ol>
4.作为属性的变量
<h3>作为属性的变量</h3>
<ol>
<li>使用var声明变量时，作为全局对象的一个属性，无法通过delete运算符删除；</li>
<li>不使用var，直接给一个未声明的变量赋值，该变量是可以delete的；</li>
<li>不使用var，使用关键词this给一个变量赋值，也是可以delete的；</li>
</ol>
5.作用域链(概念知识，重点!)
<h3>作用域链</h3>
<ol>
<li>JavaScript里的全局代码或者函数，都有一个与之对应的作用域链；</li>
<li>作用域链可以理解为对象的列表，或叫对象的链表，他们是按优先级顺序排列的；</li>
<li>这些对象就定义了一段代码或者函数的“作用域中”的变量；</li>
<li>在全局代码(就是不是函数的代码，好扯~~)中，作用域链由一个全局对象组成；</li>
<li>
在无嵌套的函数中，作用域链有两个对象：<br>
一、定义函数参数和局部变量的对象； <br>
二、定义全局变量的对象；<br>
如果是嵌套函数，则作用域链上至少三个对象；
</li>
<li>
当代码运行需要<code>变量解析</code>(就是查找需要的变量的值)的时候，<br>
就在作用域链(有顺序的对象或者链表)里面寻找对应的变量，<br>
一旦找到就使用该变量并结束寻找；<br>
如果作用域链里面找不到对应的变量，则抛出错误；
</li>
</ol>
6.关系表达式
<h3>关系运算符用于检测两个值之间的关系；</h3>
<ol>
<li>总是返回一个布尔值true或false；</li>
<li>==：相等运算符，检查两个值是否相等，不考虑类型；</li>
<li>===：恒等运算符，检查两个值是否相等，同时考虑类型；</li>
<li>比较运算符：>、>=、<、<=；</li>
<li>
in运算符：检查右侧对象里面是否拥有左侧属性名，如果有返回true； <br>
实例代码一看就什么都懂了 ：
<pre>
var a = {x:1, y:2, z:''};
console.log(a);
console.log('x' in a);
console.log('z1' in a);
console.log('toString' in a);
console.log('isPrototypeOf' in a);
</pre>
</li>
<li>
instanceof:检查左侧的对象是否是右侧类的实例，如果是返回true； <br>
如果一个对象是一个“父类”的子类的实例，则一样返回true； <br>
还有记住一点所有的对象都是Object的子类(后面原型链会讲到)； <br>
所以，还是看代码：
<pre>
var d = new Date();
console.log(d instanceof Date);
console.log(d instanceof Array);
console.log(d instanceof String);
console.log(d instanceof Object);
</pre>
</li>
</ol>
7.位运算符
<h3>位运算符对数字的二进制数据进行更低层级的按位运算，高级，然而不常用；</h3>
<ol>
<li>位运算要求操作数是整数；</li>
<li>位运算会将NaN、Infinity、-Infinity转换为0；</li>
<li>按位于：&，对操作数的二进制表示逐步执行AND操作；</li>
<li>按位或：|，对操作数的二进制表示逐步执行OR操作；</li>
<li>按位异或：^，对操作数的二进制表示逐步执行XOR操作，一个为1另一个不为1才返回1；</li>
<li>按位或：~，对操作数的二进制表示所有位取反；</li>
<li>左移：<<，对操作数的二进制表示进行左移，移动位数由第二个操作数指定；新的一位用0补充，并舍弃第32位；左移1位相当于*2，左移2位相当于*4，以此类推；</li>
<li>带符号右移：>>，右边溢出的位忽略；如果是正数，左边最高位补0；如果是负数，左边最高位补1；右移1位相当于/2,右移2位相当于/4，不要余数，以此类推；</li>
<li>无符号右移：>>>，和带符号右移一样，只是左边的最高位总是补0；</li>
</ol>
8.算术表达式
<h3>大声说出来你知道的算术运算符：加减乘除取余，+-*/%；</h3>
<ol>
<li>
+：数字相加 或 字符串连接； <br>
加法操作的行为表现： <br>
一、如果其中一个操作数是对象，则JavaScript会自动把他转成原始类型的值；<br>
二、如果其中一个操作数是字符串的话，则另一个也会转成字符串，然后你懂的；<br>
三、如果两个操作数都是数字，则进行加法运算; <br>
可怜巴巴的样子，还是给你弄几个例子吧：
<pre>
console.log(1 + 5);
console.log('1' + 5);
console.log(new Date() + '--ok');
console.log(12 + NaN);
console.log(true + true);
console.log(201 + null);
console.log(203 + undefined);
console.log(3 + 5 + '猜猜看');
</pre>
</li>
<li>其他的算术运算符还用讲吗？</li>
</ol>
9.对象创建表达式
<h3>由函数调用表达式延伸而来，前面加个new即可；</h3>
<ol>
<li>如果不需要传递参数，函数后面的小括号可以省略；</li>
<li>如果调用的函数或方法没有返回值，则表达式的值是undefined；</li>
<li>简单理解就是函数或方法名称后面跟上小括号代表执行；</li>
<li>不看个例子感觉不踏实：
<pre>
new Array(1,2,3);
new String('hello world!');
</pre>
</li>
</ol>
10.标签语句
<h3>跳转语句可以让JavaScript代码的执行从一个位置跳转到另一个位置，厉害了~</h3>
<h3>标签语句</h3>
<ol>
<li>标签由标识符加冒号组成，如：gohere:；</li>
<li>标签标识符+冒号(:)+语句，就组成了标签语句；</li>
<li>break 和 continue可以使用语句标签；</li>
</ol>
11.for-in 一个重点例子，猜猜会打印什么？为什么？
var personobj = { name: '你叫什么？', sex: '男', weight: '160' }; var arr = new Array(); var i = 0; for(arr[i++] in personobj); console.log(arr);
12.try-catch-finally
<h3>try-catch-finally是JavaScript的异常处理机制；</h3> <ol> <li> 语法结构是这样的： <pre> try{ //我们自认为没有错误的 处理业务的代码 } catch(e){ //上面的业务处理代码报错了，这里才会执行 //console.log(e); } finally{ //这里总是会执行，哎哟，领导啊，总结发言 } </pre> </li> <li>异常对象e里面有两个属性name和message，分别代表错误类型和错误描述信息；</li> <li> 瞄一眼小案例： <pre> try{ console.log(a); } catch(e){ console.log(e.name); //返回错误类型 console.log(e.message); //错误描述 } finally{ console.log('大会到处结束'); } </pre> </li> </ol>
13.with语句用于临时扩展作用域链
<h3>with语句用于临时扩展作用域链；</h3>
<ol>
<li>是的，临时扩展作用域，临时；with代码块执行完成后恢复原始状态；</li>
<li>
语法结构是这样的：
<pre>
with(object){
statement;
}
</pre>
将object添加到作用域链的头部，执行完成statement后，作用域链恢复到原始状态；
</li>
<li>
看代码吧
<pre>
/*
*清空表单所有输入框的值
*document.querySelector['#myform'].username.value = '';
*document.querySelector['#myform'].password.value = '';
*document.querySelector['#myform'].coder.value = '';
*/
with(document.querySelector['#myform']){
username.value = '';
password.value = '';
coder.value = '';
}
</pre>
这就是with的用法；
</li>
<li>但是，不推荐使用with，有代码不好优化，运行慢等问题；</li>
<li>并且，严格模式下是不能使用with的；</li>
<li>所以，能不用我看你还是不要用with了吧；</li>
</ol>
14.use strict
<h3>use strict是将后续的代码解析为严格代码；</h3>
<ol>
<li>严格模式下禁止使用with；</li>
<li>严格模式下所有的变量都要先声明；</li>
<li>
严格模式下调用函数的this值是undefined；下面这段小代码不加"use strict"的区别；
<pre>
"use strict";
function fn(){
console.log(this);
}
fn();
</pre>
</li>
<li>严格模式和普通模式有很多细微差别，记住很困难，基本原则是：<code>写代码要严谨</code>，不要偷懒，不要觉得当前代码可以正常运行即可；</li>
</ol>
版权声明：本文为LeoXnote原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。