你所不知道的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>