总结的一些JavaScript的冷知识

时间 2019-12-10

原文原文链接

一、!!将一个值方便快速转化为布尔值

console.log( !!window===true );

二、不声明第三个变量实现交换

var a=1,b=2;
a=[b,b=a][0];//执行完这句代码以后 a的值为2 b的值为1了

三、&&和||的用法（学会了立马感受高大尚了吧）

用代码说话吧javascript

var day=(new Date).getDay()===0;
//传统if语句
if (day) {
    alert('Today is Sunday!');
};
//运用逻辑与代替if
day&&alert('Today is Sunday!');//也就是说只有day为真的状况才执行后面的代码alert  一句简单的代码就实现了上面的if功能  强大吧

if (!a) {
    a = {};
 }
 //上面的三句话能够用下面的一句话替换哦
 a = a || {}; //解释这句话一下哦   若是有a这个变量的声明的话 那么它仍是原来的对象  若是没有就给它建立一个对象

顺便写一下下面的例子

与其这样书写：if(string.length > 0){..}
不如这样书写：if(string.length){..}css

四、NAN不等于任何值，包括它自身

你们都知道在任何编程语言中，若是被除数为0则会报错，而在js里面不会，它返回的值为NAN，NaN表示一个不能产生正常结果的运算结果，咱们能够用isNaN(number)来检测是否是NAN，可是你们也许都不知道NAN不等于任何值，包括它自身。html

五、利用script标签保存任意信息

将script标签设置为type='text'而后能够在里面保存任意信息，以后能够在JavaScript代码中很方便地获取。java

页面代码以下所示：css3

<script type="text" id="angelaScript">
    <h1>这个标题1是不会显示出来的，能够用这种方式保存信息哦！</h1>
    </script>
    <script type="text/javascript">
        console.log(document.getElementById('angelaScript').innerHTML); 
    </script>

结果显示以下图所示：正则表达式

六、js当中Switch的一些用法

看上图运行的效果，总结一句哦！chrome

1）switch参数变量与case后面的比较是全等比较，也就是说===的比较
2）并不是每个case后面都须要书写break，若是不写的话，它会顺序往下执行的
3）switch语句不光可使用数字、字符作条件表达式，还可使用字符串！

看下面的switch的使用，你瞬间以为switch这么厉害！编程

七、了解做用域，清楚明白当前的this是谁

八、你可能不知道的js数组

数组的length属性不可枚举
JS的数组能够用字符串形式的数字下标来访问，由于数组的元素实际上是数组对象的属性。
delete能够用来从数组中移除元素，但因为一个元素就是一个属性，delete会在数组中遗留一个“空洞”；被delete删除的元素为undefined，使用splice方法多是一个更好的办法。例如要删除arr数组的第3个元素，可使用这样的语句：arr.splice(2,1);不过对于大型数组来讲，这个函数的效率可能不高。

九、html中设置了id的元素竟然是js的全局变量哦

html页面代码以下所示数组

<div id="angelaDiv">
    </div>
    <script type="text/javascript">
        console.log(angelaDiv);
    </script>

在chrome控制台看到的结果以下图所示浏览器

十、字符串竟然能用下标访问

你们都知道字符串是不可变的，在js中也是如此。也就是说一旦字符串被建立，就没法改变。可是我相信不多人知道在js当中竟然能够用下标来访问字符串当中的某一个字符，虽然能够用下标读取但去不能修改哦(虽然修改操做不会报错，可是却不起做用)

十一、字符串的一些方法

string的substring函数的用法和slice同样，可是它不能处理负数参数。ECMAscript中也没有对substr方法进行标准化，因此若是要取一个字符串的子串，就用slice方法吧！
string的split(separator,limit)方法把string分割成片断，来建立一个字符串数组。可选参数limit能够限制被分割的片断数量。separator参数能够是一个字符串或一个正则表达式，而且来自分组捕获的文本将会被包含在被分割后的数组中

var s = 'str1 , str2 , str3';s.split(/\s(,)\s/,4);  
//输出结果：["str1",",","str2",","]

十二、把浏览器当成编辑器

浏览器地址栏输入如下代码，立马就把浏览器变成notepad了，厉害吧！

data:text/html, <html contenteditable>

1三、垂直居中

你们都知道css里面用text-align:center加上margin:0 auto就能够实现水平居中了，可是垂直居中却没有相应的css属性来设置，而若是要设置元素可以垂直居中必须得将容器设置为display:table，而后将子元素也就是要垂直居中显示的元素设置为display:table-cell，而后加上vertical-align:middle来实现。

看代码吧！下面的代码利用css3的transform来实现垂直居中和水平居中

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

转自快乐人生，积极进取-总结的一些js的冷知识