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

何处锦绣不灰堆 2020-11-13 12:56:04
JS 基础知识 基础 不好 理清


写在前面

我们在写看别人的源码或者面试的时候经常会遇到一个比较奇葩的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

持续更新中…

版权声明
本文为[何处锦绣不灰堆]所创,转载请带上原文链接,感谢
https://clearlove.blog.csdn.net/article/details/107309271

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple