JavaScript从小白到小黑的学习指南(一)

153 阅读5分钟

本文详细介绍一些关于 JavaScript的学习知识与技巧,话不多说上目录

目录

  1. JavaScript的诞生
  2. JavaScript的数据类型
  3. JavaScript的难点——原型
  4. JavaScript的数据类型转换与运算
  5. JavaScript的控制语句(一)——for,if,switch-case

1.JavaScript的诞生

"与其说我爱 Javascript,不如说我恨它。它是 C 语言和 Self 语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好:'它的优秀之处并非原创,它的原创之处并不优秀。'" ——Brendan Eich

Brendan Eich是JavaScript语言的设计师,你可能很难想象这样一个全世界最多人使用的语言居然是用仅仅十天的时间设计完成的。现如今它依然有不少的bug,但是这也无法阻挡人们对于它的热情。

随着Chrome 浏览器的在浏览器的发展势头逐渐压过IE以及移动互联网的兴起,互联网逐渐成为了前端行业发展的沃土,而 JavaScript 也搭乘着时代的快车,到达了前所未有的高度。

2.JavaScript的数据类型

一共七种:

  1. 数字 number
  2. 字符串 string
  3. 布尔 bool
  4. 符号 symbol
  5. 空 undefined
  6. 空 null
  7. 对象 object

字符串,布尔值与c语言定义一致,这里来介绍一下其他几种

1.数字

js的数字规则与c差别不大,需要注意的几点是:

①js中的number是有精度的

对于浮点数,js采用双精度存储,占64位

为了更深刻的理解,先来看这一段代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = 0.1
        let b = 0.2
        alert(a+b)
    </script>
</body>
</html>

运行结果是:

%K7OP}AKTV~F_AVO@RUS@$F.png

很震惊对不对,为什么0.1+0.2不等于0.3?

原因就在于js的精度和浮点数问题

十进制的0.10.2都会被转换成二进制,但由于浮点数用二进制表达时是无穷的,原本简单的0.1会变成0.0001100110011001......这样的二进制编码,然后js再将这两种的二进制编码相加,这样的结果转换为浮点数,再由于浮点数的精度限制从而截断结果 所以你可以看到,在js的体系中,

0.1+0.2->0.30000000000000004

②1.0=1

js 内的数字没有 int(整数型) 与 float(浮点型) 之分,即 1 与 1.0 相同,在js中表示相同的含义

2.空——undefined和null

它们的区别是什么呢

null 表示对象的值未设置。在布尔运算中被认为是falsy

undefined 表示一个变量没有被声明,或者被声明了但没有被赋值(未初始化)。

另外,一个没有传入实参的形参变量的值为undefined,如果一个函数什么都不返回,则该函数默认返回undefined。

这里引用知乎Thomas Lin的图解释可以更好的理解

image.png

null表示抽纸里面没有纸这个东西(包括纸筒)(值),但是抽纸盒子(对象)还在,而undefined才是真的四大皆空。

3.symbol

ES6 引入了一种新的原始数据类型 Symbol,这一类型是js特有的类型 ,Symbol() 函数会返回 symbol 类型的值 他有两个重要的特点:

  • 表示独一无二的值,也就是说,就算两个值的symbol相等,他们也不相等
  • 具有隐藏性,某种程度有点像python的私有属性,隐藏性是配合在对象的使用中,将Symbol作为对象属性Key使用时,for ... in...将不会遍历到Symbol的Key。从而达到隐藏属性的实现

4.object

js 中的所有事物都是对象:字符串、数值、数组、函数...它用于存储各种键值集合和更复杂的实体,同时附带有更多的属性prototype,这些属性从哪里来?

  • 在你的js代码还没有运行的时候,js环境里就有一个window对象了
  • window对象里有一个Object属性,Window.Object是一个函数对象
  • window.Object这个对象中,有一个属性,叫prototype
  • window.Object.prototype里有toString等属性

为了更好的理解对象,我们这里介绍js的难点——原型

3.JavaScript的难点——原型

原型可以理解为python的类,是js语言继承的基础,js的继承实际上就是基于原型链的继承

image.png

4.JavaScript的数据类型转换与运算

1.类型转换

        // string->Number 特点:只能识别纯数字的字符串(整数,小数,科学计数法)
        let a = Number('10')
        let b = Number('q')
        // parseInt转换成整数,parseFloat转换成浮点数
        let o = parseInt('1.0')
        // number转string
        let aStar = a.toString()

        // bool->number true-1 false-0
        let bool1 = Number(true)

        // Number->bool
        let e = 0
        let bool2 = Boolean(e)

        // 对象转字符串
        let odj={
            a:1,
            b:2
        }
        const objste=obj.toString()
        console.log(objste);
        
        // 序列化json,将对象转为字符串
        const str2=JSON.stringify(obj)
        console.log(str2);

2.运算

四则运算,逻辑运算与c语言大概一致,这里介绍一下三元运算符

```// <!-- 三元表达式a?b:c a对返回B -->
        let abc = (10<4)?10:4

5.JavaScript的控制语句(一)

规律与c语言比较相似,但语法不同,这里通过代码帮助大家一一理解

1.for

        let sum = 0
        // 设计循环,从i=0到i=100循环,每次循环后i=i+1
        for (let i=0;i<=100;i++){
            sum+=i
        }
        alert('绩点:'+sum)

2.switch

        const name = phone.slice(0,2) //字符串切割
        // 功能有点类似与if
        switch(name){
            // 如果输入的是苹果,弹窗:
            case '苹果':
                alert('土豪')
                break;
            case'华为':
                alert('战狼')
                break;
            case'小米':
                alert('牛蛙')
                break;
            // 如果都不是
            default:
                alert('?')
                break;

3.if

        let score = prompt('请输入你的分数')
        const condition = score<60
        // 如果括号内的情况为真
        if(condition){
            alert('寄')
        }else{
            alert('没寄')
        }