不好理清的JS基础知识和CSS3选择器小结-第一章

àì夳堔傛蜴生んèń 2023-02-25 12:28 12阅读 0赞

#### 写在前面 ####

我们在写看别人的源码或者面试的时候经常会遇到一个比较奇葩的js问题或者是css3的问题，比如下面这几个问题可以尝试回答一下：

*  null属于什么类型？
 *  为什么要定义一个变量初始化为null？
 *  为什么null是基本数据类型，当使用typeof null的时候却返回了object？
 *  object又属于引用数据类型，为什么基本数据类型的null又属于他呢？这不是矛盾吗？
 *  …

在我们看来可能很少会去关注的一些问题，但是面试或者源码中经常会遇到，今天我们就先简单的捋一捋，其实不是问题奇葩，还是我们的基本功不扎实导致的，一起来看看吧！  
没进行写之前明确几个一句话：

> **typeof 和 instanceof 这两个功能就是完全不一样的运算符。typeof 是为了检查数据类型，instanceof是为了看一个变量是否是某个对象的实例**

*  **typeof 的目的，是检查数据类型，而它的输出，非常确定的只有如下几个**：
 *  undefined （变量定义了但是没有进行赋值）
 *  object （对象类型）
 *  boolean （布尔类型）
 *  number （任意数字，这里包含所有的数字，包括小数和负数）
 *  string （字符串类型）
 *  function （函数类型）
 *  symbol（新的数据类型，可以自行百度）

#### 数据类型的判断 ####

*  typeof

> typeof可能是我们使用最多的一种方式了，它可以判断的类型有很多,但是不管判断任何数据类型他的返回都是以string的形式进行返回,但是却不可以进行判断null和数组，后面我们会说一下原因，下面我们看几个例子：

var a 
    console.info(typeof a ,"typeof a") //undefined
    console.info(typeof a === 'undefined' ,"typeof a === 'undefined'") //true
    var fun = function(){ }
    console.info(typeof fun === 'function' ,"typeof fun === 'function'") //true

> 上面的三个简单的例子可以看出来typeof是可以进行数据类型的判断的，只是我们进行判断是不是和对应的类型判断的时候需要加上引号进行比较，原因是typeof的返回永远是string的形式进行的！

*  instanceof

> instanceof一般我们用来判断引用数据类型，或者直接点用来判断对象的，下面看一个很好玩的例子：

var obj1= { 
    	b : [1,"a",console.info],
    	c : function(){ 
    		return function(){ 
    			   "this is clearlove"
    					}
    				}
    			}
    console.info(obj1 instanceof Object ,"obj1 instanceof Object") //true
    console.info(obj1.b instanceof Object ,"obj1.b instanceof Object") //true
    console.info(obj1.c instanceof Object , "obj1.c instanceof Object") //true
    console.info(obj1.b instanceof Array ,"obj1.b instanceof Array") //true
    console.info(obj1.c instanceof Function ,"obj1.c instanceof Function") //true
    var a= new function(){ }
    console.info(typeof a) //object
    var a = function(){ }
    console.info(typeof a) //function

> ECMAScript 的Function实际上就是一个功能完整的对象。而function这个关键字是用来创建所有对象的构造函数或者普通函数要用的关键字ECMAScript如何定义类和对象，提问者var a=new function()\{\}实际上是用构造函数的方法创建了一个匿名对象的实例，而并不是系统内置对象Function的实例，所以a instanceof Function返回false，typeof返回"object"。

*  ===

> 这个就是直接看数据是不是相同的同时还要看数据类型是不是相同，都满足的时候===才会是true

#### null和undefined ####

> 这个就是比较老生常谈的一个话题了，看了上面的应该知道和理解了这两个的区别了吧

*  null是定义了一个变量并且初始化为null
 *  undefined是定义了一个变量但是没有进行初始化

var b = null
    console.info(typeof b , "typeof b") //object
    console.info(b instanceof Object) //false
    console.info(b === null) //true

*  null不可以使用null进行判断，不是语法不支持，而是没有意义，判断出来的是object而不是null，所以一般直接进行===null进行判断一个变量是不是null，Object 是一种对象类型， "object"是一个字符串， 你不定义的话没有意义

#### 特殊的null类型 ####

> 前面说到null是一种比较特殊的数据类型，它特殊在什么地方呢？当我们使用var a = null的时候其实是传递一个信息，就是这个a是一个对象，但是此时我没有源数据，所以我先初始化一个null，一般代码结束的时候也会进行var b = null，这个时候是进行内存的释放，告诉浏览器的垃圾回收赶紧干活了，将这个\*\*回收掉了！所以说null是一个很重要的数据类型！

#### css3选择器 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="div1">
    			<p>我是段落1</p>
    			<p>我是段落2</p>
    			<p>我是段落3</p>
    			<p>我是段落4</p>
    			<span>我是span</span>
    		</div>
    		<input type="text" name="" id="" value="" />
    		<input type="radio" name="sex" id="" value="" checked="checked"/>
    		<input type="radio" name="sex" id="" value="" />
    		<input type="button" name="" id="" value="我是button1" />
    		<input type="button" name="" id="" value="我是button2" disabled="disabled"/> <br />
    		<a href="#a1">点击我id为a1的span会变色</a>
    		<span id="a1">我是id为a1的span</span>
    		<a href="#a2">点击我id为a2的span会变色</a>
    		<span id="a2">我是id为a2的span</span>
    	</body>
    	<style> a{ text-decoration: none; } /* :first-of-type 选择该类型元素的第一个子元素 */ p:first-of-type{ color : darkred } /* :last-of-type 选择该元素的最后一个子元素 */ p:last-of-type{ color:green } /* :nth-of-type 选择该类型元素的第几个子元素 */ p:nth-of-type(2){ color: yellow; } /* :nth-last-of-type 从倒叙开始选择改元素的第几个子元素 */ p:nth-last-of-type(2){ color:orangered } /* ::selection 选择用户选中的部分 */ p::selection{ /* 用户选中的部分背景色为透明 */ background-color: transparent; } /* :not 选择非用户指定内容的选择器 */ #div1 :not(p){ color: #FFFFFF } /* :root 根结点选择器 */ :root{ background: #7E7E7E; color: #FFFFFF; } /* [attr =“value”] 属性选择器 */ input[type='text']{ width: 100px; } /* :enabled 选择状态可用的元素（button，inpout） */ input[type='button']:enabled{ border: none; background: #008000; color: #FFFFFF; outline: none; } /* disabled 选择状态可用的元素（button，inpout） */ input[type='button']:disabled{ border: none; background: greenyellow; color: gray; } /* :checked 选择状态可用的元素（radio） */ input[type='radio']:checked::before{ content: "男"; color: red; } /* target 选择器 被当前锚点激活的对应的id的样式 */ #a1:target{ color: #008000; } #a2:target{ color: red; } </style>
    </html>

> 直接拿去运行，这里不多BB

**持续更新中…**