你所不知道的js的小知识点(1)

2018-09-18 06:38:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:通过vue-cli3构建一个SSR应用程序

下一篇:原生DOM操作方法小结