JavaScript基础总结(上) | 青训营笔记

syrlinkstart
96 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天

如何写好JS

  • HTML/CSS/JS 各司其职
  • 避免不必要的由JS直接操作样式
  • 用class来表示状态
  • 示类交互寻求零JS方案

一、重点内容：

  • js变量与数据类型

  • js运算符与流程控制

二、详细知识点：

前言

浏览器

浏览器分成两部分：渲染引擎和JS引擎

  • 渲染引擎：用来解析HTM与CSS，俗称内核，比如 chrome浏览器的bink，老版本的 webkit
  • JS引擎：也称为JS解释器。用来读取网页中的 JavaScript代码，对其处理后运行，如 chrome浏览器的V8 浏览器本身并不会执行代码，而是通过內置 JavaScript引擎（解释器）来执行JS代码。 JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript语言被称为脚本语言，会逐行解释执行。

JS编写位置

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <!-- 
        <script src="./script.js">document.write("我！");</script>
        1、可以将js代码写到外部js文件，通过script标签的src属性引入
            推荐使用此方式(可以利用页面缓存机制)
            注意：一旦script标签用于引入外部js文件，就不能再使用script标签来编写js代码了，就算写了也会忽略
    -->
    <script src="./script.js">document.write("写在js文件");</script>

    <script>
        // 2、可以将js代码写在script标签中，只在本页面生效

        alert("我是内部js文件");
    </script>
</head>

<body>

    <!-- 3、可以将js代码编写在标签的onclick属性中，当我们点击按钮时才会执行js代码，不方便维护，此方法不常用-->
    <button onclick="alert('写在标签中');">点我</button>

</body>

变量

变量声明

  • js中用var(或let)来声明一个变量
  • var是一个js关键字，用来声明变量（ variable变量的意思）。
  • 使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理
  1. 变量的声明提前
  • 使用var关键字声明变量，会在所有代码执行之前被声明，但不会被赋值 但是，若不使用var关键字，则变量不会被声明提前
  1. 函数的声明提前
  • function fun() {...},这种形式在所有代码执行前就被创建 fun = function() {...},函数表达式创建的，不能被提前创建
  1. 如何声明变量
  • var a = 1 或 var a; a = 1，可以定义多个，用逗号隔开 var a = 1, b = 2, c = 3;
  • 只声明不赋值，程序的结果是 undefined 未定义的
  • 不声明不赋值，程序会报错

用户输入姓名存储到一个 myname的变量里面 var myname = prompt('输入您的名字');

标识符和关键字

  • 在js中我们可以自主命名的都是标识符 列如：变量、函数名、属性名

  • 在js本身已经使用了的字就是关键字 列如：break、case、 catch、 continue...

  • 保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是末来可能会成为关键字，同样不能使用它们当变量名或方法名。

  • 命名一个标识符要遵循如下规则

  1. 标识符只能含有：数字、字母、_、$
  2. 标识符不能以数字开头
  3. 标识符不能是关键字或保留字
  4. 标识符一般采用驼峰命名法 例如：helloWorld

数据类型

在代码运行时，变量的数据类型是由JS引擎根据等号(=)右边变量值的数据类型来判断的。 运行完毕之后，变量才确定了数据类型

js是动态语言变量的数据类型是可以变化的

基本数据类型(值传递)

  • String: 任意字符串
  • Number: 任意数字
  • Boolean: true/false
  • Null: null(定义且赋值了，但值为null)
  • Undefined: undefined(定义了并未赋值)

1. Number数值型

  • js中所有的数值都是Number类型，包括整数和小数
  • Number.MAX_VALUE(1.7976931348623157e+308)：js中数字的最大值
  • Number.MIN_VALUE(5e-324 表示大于0的最小数)：js中数字的最小值
  • Infinity：正无穷
  • -Infinity：负无穷
  • NaN：一个不能被解析的数字，我们可以使用全局函数isNaN()来判断一个数是否为一个非数字
  • 使用js进行浮点运算时，很可能会得到一个不精确的运算结果，所以尽量不要使用js进行浮点运算

在js中八进制前面加0，十六进制前面加0x

  • 表示16进制数字：0x10 = 16
  • 表示8进制数字：010 = 8
  • 表示2进制数字：0b10 = 2

isNaN() 用来判断一个变量是否为非数字的类型，是返回true否则返回false

2. String字符串

  • 在js中字符串需要使用引号引起来，双引号单引号都可以
  • 单引号中可以使用双引号，双引号中可以使用的单引号
  • 可应用""转义字符
  • 检测获取字符串的长度 length，console.log(str.length) 返回字符串str的长度

字符串拼接(+号口诀：数值相加，字符相连)

  • 多个字符串之间可以使用+进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

3、Boolean布尔值

  • true 表示真
  • false 表示假

4、Null

  • Null的类型只有一个，就是null
  • 专门用来表示一个空对象

5、Undefined

  • Undefined的类型只有一个，就是undefined -表示 没有给变量赋值，表示未定义

对象(引用)数据类型(地址传递)

  • Object: 任意对象
  • Function: 一种特别的对象(可以执行)
  • Array: 一种特别的对象(数值下表，内部数据是有序的)
  • Date:
  • ...

判断数据类型

  • typeof: 返回的是具体类型(小写)，以字符串形式返回 可以判断 undefined number string boolean function 不能判断 null object array

  • instanceof: 判断对象的具体类型

  • ===: 数值和数据类型是否相等 可以判断 undefined null

    var a = 10
    console.log(a,typeof a==='number');

    var dist = {
        b1: [1, 20, console.log],  //console.log就是一个函数
        b2: function () {
            console.log('**');
        }
    }
    dist.b1[2]('函数')
    console.log(typeof dist.b1[2] == 'function')
    console.log(dist instanceof Object, dist.b1 instanceof Array);

数字类型转换

1、将其他数据类型转换为String类型

  1. 调用toString()方法，返回修改后的值，该方法不会影响到原变量
  • var b = a.toString();
  • 注意：null和undefined没有toString()方法
  1. 调用String()方法，将里面的变量转换为String类型并返回，null和undefined也适用
  • a = String(a);
  1. 利用+拼接字符串的方法实现转换效果，可以加一个空字符串(推荐使用)

2、将其他数据类型转换为Number类型

  1. 使用Number()函数
  • true->1
  • false->0
  • null->0
  • undefined->NaN
  • 只要含有非数字->NaN
  1. 使用parseInt()和parseFloat()函数 (重点)
  • parseInt()，解析内容返回里面含有的数字，但会舍去小数可以指定第二个参数，表示要转换的进制数parseInt(a,10) 将a转换为10进制数并返回
  • parseFloat()，解析内容返回里面含有的数字，不会舍去小数

3. 使用 - * / 符号可以自动转换为数值型，并进行运算

注意

  • 任何类型在做-、*、/、运算时或比较大小时都会先转换为Number
  • 当比较两个字符串时会比较两个字符串的字符编码大小任何类型与NaN运算结果或比较结果都为NaN
  • 负号可以对变量取反

运算符

表达式：由数字、运算符、变量等组成的式子(表达式都会有返回值) 可以使用递增++ 递减-- 运算，也可以使用 += -= *= ...

判等号（会转型）    37 == 37       true
不等号             37 != 37       false
全等               37 === '37'    false(要求值和数据类型都一致)
不全等             37 !=== '37'   true

与 或 非 ： && || !

控制流程(与c语言类似)

  1. if和c一样
  2. 三元表达式 a>b ? 'yes':'no'
  3. switch和c一样
  4. for和c一样
  5. while、do.. while 都和c一样
avatar
文章
阅读
粉丝