jsgrammer

jsgrammer

计算机编程基础

能够说出什么是编程语言

能够区分编程语言和标记语言的不同

能够说出常见的数据存储单位及其换算关系

能够说出内存的主要作用以及特点

关键词：编程语言 计算机基础

编程语言

  1. 编程

    编程：计算机为了解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程

    计算机程序：计算机所执行的一系列指令集合，而程序全部都是我们所掌握的语言来编写的，所以，人们要控制计算机一定要通过计算机语言向计算机发出命令

    注意：计算机指的是任何能够执行代码的设备

  2. 计算机语言

    计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介

    计算机语言的种类非常多，总的来说可以分成机器语言、汇编语言、高级语言三大类

    实际上计算机最终执行的都是机器语言，它是由0和1组成的二进制数，二进制是计算机语言的基础

  3. 编程语言

    可以通过类似于人类语言的语言来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言ProgramminLanguage

    编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守，如今通用的编程语言有两种形式：汇编语言和高级语言

    汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆

    高级语言主要相对于低级语言而言，它并不是特质某一种具体的语言，而是包括了很多编程语言

  4. 翻译器

    高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器，

    翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化，记住0和1

  5. 编程语言和标记语言的区别

    编程语言有很强的逻辑和行为能力，在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的

    标记语言不用向计算机发出指令，常用于格式化和链接。标记语言存在是用来被读取的，它是被动过的

计算机基础

  1. 计算机组成

    计算机

    硬件

    输入设备 鼠标、键盘、手写板、摄像头等

    输出设备 显示器、打印机、投影仪等

    CPU 负责处理数据和运算

    硬盘 负责存储数据，硬盘永久存储数据，内存暂时存储数据

    内存

    软件

    系统软件 window、linux、macos

    应用软件 浏览器、qq、word

  2. 数据存储

    2.1 计算机内部使用二进制0和1来表示数据

    2.2 所有数据，包括文件、图片等最终都是以二进制数据0和1的形式存放在硬盘的

    2.3 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。

    2.4 硬盘、内存都是保存的二进制数据

  3. 数据存储单位

    bit<byte<kb<mb<<gb<tb<...

    位bit：1bit可以保存一个0和1（最小的存储单位）

    字节Byte：1B = 8b

    千字节KB：1KB = 1024B

    兆字节MB：1MB = 1024KB

    吉字节GB：1GB = 1024MB

    太字节TB：1TB = 1024GB

    ......

  4. 程序运行

    4.1 打开某个程序时，先从硬盘中把程序的代码加载带内存中

    4.2 CPU执行内存中的代码

    注意：之所以要内存的一个重要原因，是因为cpu运行太快了，如果只是从硬盘中读取数据，会浪费CPU性能，所以，才使用存取速度更快的内存保存运行时的数据。（内存是电、硬盘是机械）

初识js

能够说出js是什么

能够直到js的发展历史

能够说出浏览器执行js的原理

能够说出js由哪三部分组成

能够写出js三个输入输出语句

初识js

  1. js历史

    • 布兰登艾奇（BrendanEich，1961~）

    • 布兰登艾奇在1995年利用10天完成js设计

    • 网景公司最初命名位LiveScript，后来在与Sun合作之后将其改名为JavaScript

  2. js是什么

    • js是世界上最流行的语言之一，是一种运行在客户端的脚本语言Script

    • 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来解释并执行

    • 现在也可以基于node.js进行服务器端编程

  3. js的作用

    • 表单动态校验（密码强度检测） -- js产生最初的目的

    • 网页特效

    • 服务器端开发

    • 桌面程序

    • App

    • 控制硬件-物联网

    • 游戏开发

  4. html/css/js的关系

    • html/css标记语言 -- 描述类语言 结构/表现

    • js脚本语言 -- 编程语言 行为

  5. 浏览器执行js简介

    • 渲染引擎和js引擎

    • 渲染引擎：用来解析html和css，俗称内核

    • js引擎：也成为js解释器，用来读取网页中的js代码，对其处理后运行，比如chrome浏览器的V8

    • 浏览器本身并不会执行js代码，而是通过内置js引擎/js解释器来执行js代码，js引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以js语言归为脚本语言，会逐行解释执行

  6. js组成

    js

    ECMAScript js语法

    Dom 网页文档对象模型

    Bom 浏览器对象模型

    6.1 ECMAScript

    • ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网商应用广泛，它往往被称为JavaScript网景公司或JScript微软公司，但实际上后两者是ECMAScript语言的实现和扩展

    • ECMAScript规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准

    6.2 DOM -- 文档对象模型

    • 文档对象模型DocumentObjectModel，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作

    6.3 BOM -- 浏览器对象模型

    • 浏览器对象模型BrowserObjectModel，提供了独立于内容，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口

  7. js初体验

    • 行内、内嵌、外部

alert('如果我是dj，你还爱我吗')

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式 -->
    <!-- 
        可以将多行js代码写到<script>标签中
            内嵌js时学习时常用的方式
     -->
    <script>
        // alert('沙漠骆驼')
    </script>
    <!-- 3.外部式 -->
    <!-- 
        利用HTML页面结构化，把大段js代码独立到HTML页面外，即美观，也方便文件级别的复用
        引用外部js文件的script标签中不可以写代码
        适用于js代码量比较大的情况
     -->
    <script src="my.js"></script>
</head>
​
<body>
    <!-- 1.行内式 -->
    <!-- 
        可以将单行或少量js代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
        注意单双引号的使用：在HTML中我们推荐使用双引号，js中我们推荐使用单引号
        可读性差，在HTML中编写js大量代码，不方便阅读
        引号易错，引号多层嵌套匹配时，非常容易弄错
        特殊情况下使用
     -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
​
</html>

 

js注释

单行注释、多行注释

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 单行注释 ctrl + /
        /*
            多行注释
            多行注释
            shift + alt + a
        */
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

js输入输出语句

方法说明归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
promote(info) 浏览器弹出输入框，用户可以输入 浏览器

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        prompt('请输入您的年龄：')
        alert('计算的结果是：')
        console.log('我是程序员能看到的')
    </script>
</head>
​
<body>
​
</body>
​
</html>

变量

能够说出变量的主要作用

能够写出变量的初始化

能够说出变量的命名规范

能够画出变量是如何在内存中存储的

能够写出交换变量的案例

变量的概述

  1. 什么是变量

    • 变量就是一个装东西的盒子

    • 变量是用于存放数据的容器，我们通过变量名获取数据，设甚至可以修改数据

    • 本质：变量是程序在内存中申请的一块用来存储数据的空间

变量的使用

  1. 步骤

    • 声明变量 格式：var 变量名 -- var age

      var是一个js关键字，用来声明变量（variable变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

      age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

    • 赋值 格式：变量名 = 值 -- age = 18

      =用来把右边的值赋给左边的变量空间中，此处代表赋值的意思

      变量值是程序员保存到变量空间里的值

    • 变量的初始化 格式：var 变量名 = 值

      声明一个变量并赋值，我们称之为变量的初始化

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.声明变量
        var age;
        // 2.赋值
        age = 18;
        // 输出结果
        console.log(age);
        // 3.变量的初始化
        var myName = '橙留香';
        // 输出结果
        console.log(myName);
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

变量语法扩展

  1. 更新变量

    一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后依次赋的值为准

  2. 同时声明多个变量

    同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

  3. 声明变量的特殊情况

    • 只声明不赋值

    • 不声明不赋值使用

    • 不声明只赋值使用

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myName = '迪丽热巴';
        console.log(myName);
        // 更新变量
        myName = '橙留香';
        console.log(myName);
        // 同时声明多个变量
        var age = 18,
            address = '火影村',
            salary = 2000;
        // 声明变量的特殊情况
        // 只声明不赋值
        var sex;
        console.log(sex); // undefined
        // 不声明不赋值直接使用
        console.log(tel); // 报错
        // 不声明直接赋值使用
        qq = 1303075560;
        console.log(qq); // 全局变量
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成

  • 严格区分大小写

  • 不能以数字开头

  • 不能是关键字、保留字

  • 变量名必须有意义

  • 遵守驼峰命名法

  • 尽量不使用name作为变量名，name在一般的浏览器具有其特殊意义

交换变量案例

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 需求：交换两个变量的值
        var apple1 = '红苹果';
        var apple2 = '青苹果';
        // 临时变量
        var temp;
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

数据类型

能够说出五种简单数据类型

能够使用typeof获取变量的类型

能够说出1~2种转换为数值型的方法

能够说出1~2种转换为字符型的方法

能够说出什么是隐式转换

数据类型简介

  1. 为什么需要数据类型？

    在计算机种，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用内存空间，于是定义了不同的数据类型

  2. 变量的数据类型

    变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了将如何代表这些值的位存储到计算机内存种。js是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序的运行过程种，类型将会被自动确定

    在代码运行时，变量的数据类型是由js引擎根据 = 右边变量的值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

    js拥有动态类型，同时意味着相同的变量可用作不同的类型

简单数据类型

  • 简单数据类型（Number,String,Boolean,Undefined,Null）

  • 复杂数据类型 (object)

简单数据类型说明默认值
Number 数字型，包含整型值和浮点型值 0
String 字符串类型，js里，字符串都带引号 ""
Boolean 布尔值类型，如true和false 等价于1和0 false
Undefined var a;声明了变量a但是没有给值，此时a=undefined undefined
Null var a = null;声明了变量a为空值 null

Number

  1. 数字型进制

    最常见的进制有二进制、八进制、十进制、十六进制

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

  2. 数字型范围

    js中数字型的最大值和最小值

  3. 数字型三个特殊值

    无穷大、无穷小、非数值

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 八进制 0~7 数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1);
        // 十六进制 0~9 a~f #ffffff 数字前面加0x 表示十六进制
        var num2 = 0x9;
        var num3 = 0xa;
        console.log(num2);
        console.log(num3);
        // 数字型的最大值和最小值
        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);
        // Infinity 代表无穷大，大于任何数值
        console.log(Number.MAX_VALUE * 2);
        // -Infinity 代表无穷小，小于任何数值
        console.log(-Number.MAX_VALUE * 2);
        // NaN Not a number，代表一个非数值
        console.log('pink' - 100);
    </script>
</head>
​
<body>
​
</body>
​
</html>

  1. isNaN()

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // isNaN() 方法用于判断非数字 并返回一个值 如果是数字返回false，不过不是数字返回true
        console.log(isNaN(12));
        console.log(isNaN('pink'));
    </script>
</head>
​
<body>
​
</body>
​
</html>

String

  1. 字符串可以是引号中的任意文本，其语法为双引号""和单引号''，因为HTML标签内的属性使用的是双引号，js这里我们更推荐使用单引号

  2. 字符串引号嵌套

    js可以用双引号嵌套单引号，或者用单引号嵌套双引号（外双内单，外单内双）

  3. 字符串转义字符

    转义符解释说明
    \n 换行符
    \ 斜杠\
    ' ''单引号
    " ""双引号
    \t tab缩进
    \b 空格 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // "" ''
        var str = "pink";
        var str1 = 'pink';
        // 引号嵌套
        var str2 = "我是'pink'老师";
        var str3 = '我是"pink"老师';
        // 转义字符
        var str4 = '我要\n换行了';
        // 输出到控制台
        console.log(str);
        console.log(str1);
        console.log(str2);
        console.log(str3);
        console.log(str4);
    </script>
</head>

<body>

</body>

</html>

  1. 字符串长度以及拼接

    • 通过字符串的length属性可以获取整个字符串的长度

    • 字符串 + 任何类型 = 新的字符串 数值相加，字符相连

    • 字符串拼接加强，通过和字符串相连的方式实现变量与字符串相连，引引加加

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取字符串的长度
        var str = 'my name is andy';
        console.log(str.length);
        // 字符串拼接
        console.log('zhang' + 'san');
        console.log('zhang' + 18);
        console.log('zhang' + false);
        console.log('zhang' + undefined);
        console.log('zhang' + null);
        // 字符串拼接加强
        var age = prompt('请输入您的年龄：');
        console.log('pink' + age + '岁');
    </script>
</head>

<body>

</body>

</html>

Boolean、Undefined和Null

  1. 布尔型有两个值：true和false，其中true/1表示真对，而false/0表示假错

  2. 一个声明后没有赋值的变量会有一个默认undefined，如果进行相连或者相加时，注意结果

  3. 一个声明变量给null值，里面存的值为空（学习对象时，会深入了解null）

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var flag = true; // 1
        var flag1 = false; // 0
        // 参与加法运算时当1/0看
        console.log(true + 1); // 2
        console.log(false + 1); // 1
        // Undefined
        var str;
        console.log(str + 'pink'); // undefinedpink
        console.log(str + 1); // NaN
        console.log(str + true); // NaN
        // Null
        console.log(null + 'pink'); // nullpink
        console.log(null + 1); // 1
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

获取变量数据类型

  1. typeof可用来获取检测变量的数据类型

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // typeof
        var num = 10;
        console.log(typeof num); // Number
        console.log(typeof(num));
        var str = 'pink';
        console.log(typeof str); // String
        var flag = true;
        console.log(typeof flag) // Boolean
        var ud = undefined;
        console.log(typeof ud); // undefined
        var timer = null; // object
        console.log(typeof timer);
​
        console.log(18); // 蓝
        console.log('18'); // 黑
        console.log(true); // 深蓝
        console.log(undefined); // 浅灰
        console.log(null); // 浅灰
    </script>
</head>
​
<body>
​
</body>
​
</html>

  1. 字面量

字面量是源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

  • 数字字面量：8，9，10

  • 字符串字面量：'黑马程序员'，'前端'

  • 布尔字面量：true，false

  • ......

数据类型转换

把一种数据类型的变量转换成另一种数据类型

  • 转换成字符串类型

方式说明案例
toString() 转换成字符串  
String()强制转换 转换成字符串  
加号拼接字符串隐式转换 和字符串拼接的结果都是字符串  

  • 转换成数字型

方式说明案例
parseInt(string) 将string类型转成整数数值类型，取整去小数，去尾  
parseFloat(string) 将string类型转成浮点数数值类型  
Number()强制转换 将string类型转换成数值型  
- * / 隐式转换 利用算术运算隐式转换为数值型  

  • 转换成布尔型

    • 代表空、否定的值都会被转换为false，如""、0、NaN、undefined、null

    • 其余值都会被转换为true

方式说明案例
Boolean() 函数 其他类型转成布尔值  

  • 扩展

解释性语言和编译型语言

翻译器翻译的方式有两种：一种是编译，另一种是解释，两种方式之间的区别在于翻译的事件点不同

编译器是在代码执行之前进行编译，生成中间代码文件

解释器是在运行时进行及时解释，并立即执行（当编译器以解释的方式运行时，也称为解释器）

标识符、关键字、保留字

标识符：开发人员为变量、属性、函数、参数取的名字，标识符不能是关键字和保留字

关键字：js本身已经使用了的字，不能再用它们充当变量名、方法名

保留字：预留的关键字，同样不能使用它们当变量名或方法名

运算符

运算符导读

能够使用常用运算符

能够说出前置递增和后置递增的区别

能够说出运算符的优先级

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合，即数字、运算符、变量的组成的式子

返回值：表达式最终都会有一个结果，返回给我们，即返回值

运算符

  1. 运算符operator也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号

  2. 常用的运算符

    • 算数运算符

    • 递增递减运算符

    • 比较运算符

    • 逻辑运算符

    • 赋值运算符

算数运算符

算术运算符使用的符号，用于执行两个变量或值的算数运算

运算符描述实例
+ 加  
- 减  
* 乘  
/ 除  
% 取余数（取模）  

 

递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增++和递减--运算符来完成

在js中，递增++和递减--既可以放在变量前面，也可以放在变量后面。放在前面时，我们可以称为前置递增/递减运算符，

放在变量后面时，我们可以成称为后置递增/递减运算符

注意：递增和递减必须和变量配合使用

  • 前置递增运算符

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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            // 1.想让一个变量自己加1
            var num = 1;
            // num = num + 1; 比较麻烦
            // 前置自增运算符
            ++num;
            console.log(num);
            // 先自加，后返回值
            var p = 10;
            console.log(++p + 10); // 11
        </script>
    </head>

    <body>

    </body>

    </html>

  • 后置自增运算符

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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var num = 10;
            num++; // num = num + 1
            console.log(num);
            // 前置自增和后置自增，如果单独使用，效果相同的
            // 后置自增 先返回原值 后自加1
        </script>
    </head>

    <body>

    </body>

    </html>

  • 练习

    <!DOCTYPE html>
    <html lang="en">
    ​
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var a = 10; // a = 10
            ++a; // a = 11
            var b = ++a + 2; // a = 12 + 2
            console.log(b); // 14
    ​
            var c = 10; // c = 10
            c++; // c = 11;
            var d = c++ + 2; // c++ = 11 + 2 c = 12
            console.log(d); // d = 13
    ​
            var e = 10; // e = 10
            var f = e++ + ++e; // e++ = 10 e = 11 ++e = 11+ 1 --> 10 + 11 + 1
            console.log(f); // 22
        </script>
    </head>
    ​
    <body>
    ​
    </body>
    ​
    </html>

     

比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果

运算符名称说明案例结果
> 大于号    
< 小于号    
>= 大于等于号    
<= 小于等于号    
== 判等号（会转型）    
!= 不等号    
=== !== 全等要求值和数据类型都一致     
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num1 = 10;
        var num2 = 100;
        console.log(num1 > num2);
        console.log(num1 == num2);
        console.log(num1 != num2);
​
        console.log(1 > 2); //f
        console.log(1 >= 1); // t
        console.log(1 < 0); // f
        console.log(1 <= 1); // t
        console.log(1 == 1); // t
        console.log(1 == '1'); // t
        console.log(1 != '1'); // f
        console.log(1 === '1'); // f
        console.log(1 !== '1'); // t
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。开发多用于多个条件的判断

逻辑运算符说明案例
&& 逻辑与 and  
|| 逻辑或 or  
！ 逻辑非 not   
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 逻辑与 两侧有一侧为假，结果为假  两侧都为真，结果为真
        console.log(3 > 5 && 3 > 2); // f&&t f
        console.log(3 < 5 && 3 > 2); // t&&t t
        // 逻辑或 两侧有一侧为真，结果为真 两侧都为假，结果为假
        console.log(3 > 5 || 3 > 2); // f&&t t
        console.log(3 > 5 || 3 < 2); // f&&f f
        // 逻辑非
        console.log(!true); // f
    </script>
</head>

<body>

</body>

</html>

短路运算（逻辑中断）

短路运算原理：当有多个表达式（值）时，左边的表达式/值可以确定结果时，就不再继续运算右边的表达式

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 短路 逻辑中断
        // && 如果表达式1为假，则返回表达式1 如果表达式1为真，则返回表达式2
        console.log(123 && 456); // 456
        console.log(0 && 456); // 0
        // || 如果表达式1为真，则返回的是表达式1，如果表达式1为假，则返回表达式2
        console.log(123 || 456); // 123
        console.log(0 || 456); // 456
        // 逻辑中断会影响程序的运行结果
        var num = 0;
        console.log(0 && num++);
        console.log(num); // 0
    </script>
</head>

<body>

</body>

</html>

 

赋值运算符

用来把数据赋值给变量的运算符

赋值运算符说明案例
= 直接赋值  
+=、-= 加、减一个数后再赋值  
*=、/=、%= 乘、除、取模后再赋值   
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 赋值运算符
        var num = 10;
        console.log(num); // 10
        num += 5;
        console.log(num); // 15
        num *= 2;
        console.log(num); // 30
    </script>
</head>

<body>

</body>

</html>

 

运算符优先级

优先级运算符顺序
1 小括号 ()
2 一元运算符 ++、--、！
3 算数运算符 先*、/、% 后 + -
4 比较运算符 >、>=、<、<=、
5 相等运算符 ==、!=、===、!==
6 逻辑运算符 先&&后||
7 赋值运算符 =
8 逗号运算符 ,

js流程控制分支结构

能够使用if分支语句

能够使用switch语句

能够使用三元表达式

流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能

即：流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行顺序

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的

分支流程控制if语句

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 条件表达式决定执不执行大括号内的代码块
        // 单分支
        // 需求：弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进入网吧
        var age = prompt('请输入您的年龄：');
        if (age >= 18) {
            alert('年龄已达18岁');
        }
        // 双分支
        if (age >= 18) {
            alert('请进');
        } else {
            alert('滚出去');
        }
        // 多分支
        var score = prompt('请输入您的分数：');
        if (score > 100 || score < 0) {
            alert('分数有误，应在0~100之间');
        } else if (score >= 90) {
            alert('奖励一个亲亲');
        } else if (score >= 60) {
            alert('再接再励');
        } else {
            alert('奖励一个巴掌');
        }
    </script>
</head>
​
<body>
​
</body>
​
</html>

三元表达式

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值
        var result = 1 > 2 ? true : false;
        console.log(result);
    </script>
</head>

<body>

</body>

</html>

分支流程控制switch语句

switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // switch 条件表达式的结果和值是全等关系 break穿透
        // 需求：用户在弹出框里面输入一个水果，如果有就弹出该水果的价格，如果没有该水果就弹出没有此水果
        var fruit = prompt('请输入要查询的水果：');
        switch (fruit) {
            case '西瓜':
                alert(2.5);
                break;
            case '菠萝':
                alert(3);
                break;
            case '榴莲':
                alert(9.9);
                break;
            default:
                alert('没有此水果');
                break;
        }
    </script>
</head>

<body>

</body>

</html>

switch和if else if语句的区别

  • 一般情况下，它们两个语句可以相互替换

  • switch...case语句通常处理case为比较确定之的情况，而if...else...语句更加灵活，常用于判断范围（大于、等于某个范围）

  • switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if...else语句有几种条件，就得判断多少次

  • 当分支比较少时，if...else语句的执行效率比switch语句高

  • 当分支比较少时，switch语句的执行效率比较高，而且机构更清晰

js流程控制循环结构

能够说出循环的目的

能够说出for循环的执行过程

能够使用断点调试来观察的代码的执行过程

能够使用for循环完成累加求和等案例

能够使用双重for循环完成乘法表案例

能够说出while循环和dowhile循环的区别

能够说出break和continue的区别

循环

循环的目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

在js中，主要有三种类型的循环语句：

  • for循环

  • while循环

  • dowhile循环

断点调试：断点调试可以帮助我们观察程序的运行过程

F12 -- sources -- 调试文件 -- 程序的某一行设置断点

Watch：监视，通过watch可以监视变量的值的变化

F11：程序单步执行，让程序一行一行的执行，此时，观察watcj中变量的值的变化

for循环

在程序中，一组被重复执行的语句被称之为循环体，能否重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句，计数

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // for(初始化变量;条件表达式;操作表达式){// 循环体}
        // 初始化变量：一个普通变量，通常用于作为计数器使用
        // 条件表达式：决定每一次循环是否执行，终止条件
        // 操作表达式：每次循环中最后的代码，通常用于计数器变量的更新（递增或递减）
        // 循环体
        // 循环执行过程：
        // 1.初始化变量
        // 2.条件表达式
        // 3.循环体
        // 4.操作表达式
        // 重复2~4直至条件不满足，退出循环
        for (var i = 0; i < 100; i++) {
            console.log('你好');
        }
        // 重复执行相同代码 让用户控制输出的次数
        var num = prompt('请输入次数：');
        for (var i = 0; i < num; i++) {
            console.log('你好');
        }
        // 重复执行不同代码
        for (var i = 1; i <= 100; i++) {
            console.log('我今年' + i + '岁了');
        }
        // 加强版几岁了
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('我今年1岁了,刚出生');
            } else if (i == 100) {
                console.log('我今年100岁了，我死了');
            } else {
                console.log('我今年' + i + '岁了');
            }
        }
        // 重复某些操作
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

双重for循环

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        for (var i = 0; i < 3; i++) {
            console.log('这是外层循环的第' + i + '次');
            for (var j = 0; j < 3; j++) {
                console.log('这是里层循环的第' + j + '次');
            }
        }
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

while循环

更复杂、灵活的条件判断

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // while 循环
        /*         初始化变量;
                while(条件表达式){
                    // 循环体
                    操作表达式;
                } */
        // 需求：打印人的一生
        var age = 1;
        while (age <= 100) {
            if (age == 1) {
                console.log('我出生了，' + age + '岁了');
            } else if (age == 100) {
                console.log('我去世了，' + age + '岁了');
            } else {
                console.log('我' + age + '岁了');
            }
            age++;
        }
​
        // 需求：计算1-100之间所有整数的和
        var i = 1;
        var sum = 0;
        while (i <= 100) {
            sum += i;
            i++;
        }
        console.log('sum:' + sum);
​
        // 需求：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
        var input = prompt('你爱我吗？');
        while (input !== '我爱你') {
            input = prompt('你爱我吗？');
        }
        alert('结束');
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

dowhile循环

更复杂、灵活的条件判断，至少会执行一次循环代码

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // do while
        /*         初始化变量;
                do {
                    // 循环体
                    操作表达式;
                } while (条件表达式) */
        var i = 0;
        do {
            console.log('how are you');
            i++;
        } while (i < 100)
        // 需求：打印人的一生
        var age = 1;
        do {
            if (age == 1) {
                console.log('我出生了' + age + '岁了');
            } else if (age == 100) {
                console.log('我去世了' + age + '岁了');
            } else {
                console.log('我' + age + '岁了');
            }
            age++;
        } while (age <= 100)
        // 需求：计算1-100之间的所有整数的和
        var i = 1;
        var sum = 0;
        do {
            sum += i;
            i++;
        } while (i <= 100)
        console.log('sum：' + sum);
        // 需求：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
        var input = '';
        do {
            input = prompt('你爱我吗？');
        } while (input !== '我爱你')
        alert('结束');
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

continue与break

  • continue关键字用于立即跳出本次循环，继续下一次循环，本次循环体中continue之后的代码就会少执行一次

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // continue 关键字
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue; // 退出当前次的循环，继续执行剩余次的循环 第三次
            }
            console.log('我正在吃第' + i + '个包子');
        }
    </script>
</head>
​
<body>
​
</body>
​
</html>

  • break关键字用于立即跳出整个循环，循环结束

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // break 关键字
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                alert('我吃到虫子了，我不吃了');
                break; //退出整个循环
            }
            console.log('我正在吃第' + i + '个包子');
        }
    </script>
</head>
​
<body>
​
</body>
​
</html>

命名规范以及语法规范

  • 标识符命名规范

    • 变量函数的命名必须要有意义

    • 变量的名称一般用名词

    • 函数的名称一般用动词

  • 操作符语法规范

    • 操作符的左右两侧各保留一个空格

  • 单行注释语法规范

    • 单行注释前保留一个空格

  • 其他语法规范

    • 括号左侧保留一个空格

    • ...

js数组与函数

能够知道为什么要有数组

能够创建数组

能够获取数组中的元素

能够对数组进行遍历

能够给数组新增一个元素

能够独立完成冒泡排序的案例

数组的概念

数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素，数组是一种将一组数据存储在单个变量名下的优雅方式

创建数组

js中创建数组有两种方式：

  • 利用new创建数组

  • 利用数组字面量创建数组

获取数组中的元素

数组的索引/下标：用来访问数组元素的序号（从零开始）

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过数组名[索引]的方式来获取数组中的元素

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数组：一组数据的集合 存储在单个变量下的优雅方式 存放任意类型的数据
        // 利用new关键字创建数组
        var arr = new Array();
        // 利用数组字面量创建数组
        var arr1 = [];
        // 数组中的元素（数据）利用逗号分隔 数组的初始化 
        var arr2 = [1, 'pink', true];
​
        // 获取数组元素 索引/下标 从零开始 数组名[索引]
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr[3]); // 无该元素 undefined
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

遍历数组

将数组中的每个元素从头到尾都访问一次

数组长度：数组名.length，可以访问数组元素的数量，即数组长度 -- 动态检测数组的个数

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 遍历数组 循环 把数组中的元素从头到尾访问一次
        // i 计数器 当 索引号 用
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }
        // 数组长度 数组名.length 可以访问数组元素的数量，即数组长度
        // 动态检测数组长度
        var arr2 = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', '曹操'];
        for (var i = 0; i < arr2.length; i++) {
            console.log(arr2[i]);
        }
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

数组中新增元素

  • 修改length长度

  • 修改索引号追加

数组案例

​

js函数

能够说出为什么需要函数

能够根据语法书写函数

能能够根据需求封装函数

能够说出形参和实参的传递过程

能够使用函数的返回值

能够使用arguments获取函数的参数

函数的概念

封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用

函数的使用

  • 声明函数

  • 调用函数

函数的参数

在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

  • 形参

  • 实参

函数的返回值

  • return

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在js中，arguments实际它是当前函数的一个内置对象，所有的函数都内置了一个arguments对象，argums对象存储了传递的所有实参

伪数组

  • 具有length属性

  • 按索引方式存储数据

  • 不具有数组的push、pop等方法

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数
        // 声明函数
        // function 关键字 小写 函数名一般是动词 函数不调用自己不执行
        /*         function 函数名(){
                    // 函数体
                } */
        // 调用函数
        // 函数名();
​
        // 函数的参数
        // 形参和实参
        /*         function 函数名(形参1, 形参2, ...) {
                    // 在声明函数的小括号里面的是形参 形式上的参数
                }
                函数名(实参1, 实参2, ...) // 在函数调用的小括号里面的是实参 实际的参数 */
​
        // 形参和实参的匹配
        // 形参 看作一个不用声明的变量
        // 实参的个数等于形参的个数
        // 实参的个数多于形参的个数 取到形参的个数
        // 实参的个数小于形参的个数 值+undefined
​
        // 函数的返回值 return
        /*         function 函数名(){
                    return 需要返回的结果;
                } */
        // 函数实现某种功能，最终结果返回给函数的调用者  定义一个变量接收返回值
​
        // return
        // 1.返回值 只能返回一个值 返回最后一个值 可利用数组返回多个值
        // 2.终止函数 return后面的代码不会被执行
​
        // 函数没有return，则返回undefined
​
        // break、continue、return
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            // console.log(sum);
            return sum;
        }
        var res = getSum(1, 10);
        console.log(res);
​
        // arguments -- 伪数组
        function fn() {
            console.log(arguments);
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
​
        var res1 = fn(1, 2, 3, 4);
        console.log(res1);
    </script>
</head>
​
<body>
​
</body>
​
</html>
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 需求：输出当前年二月份天数 函数调用另一个函数
        var year = prompt('请输入当前年年份：');
​
        function isBissextile(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag
        }
​
        function input() {
            var num = 28
            if (isBissextile(year)) {
                num = 29;
            }
            return num;
        }
​
        var res = input();
        console.log(res);
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

函数案例

 

函数的两种声明方式

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数的两种声明方式 都可传递参数 后者变量存储函数
        // 1.利用函数关键字自定义函数 命名函数
        function fn() {
​
        }
        fn();
        // 2.函数表达式 匿名函数
        var fn = function() {
​
        }
        fn();
    </script>
</head>
​
<body>
​
</body>
​
</html>

js作用域

能够说出js的两种作用域

能够区分全局变量和局部变量

能够说出如何在作用域链中查找变量的值

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js作用域：代码名字（变量）在某个范围内起作用和效果，提高程序可靠性和减少命名冲突
        // es6前：全局作用域 局部作用域
        // 全局作用域：整个script标签 或者 一个单独的js文件
        var num = 10;
        var num = 20;
        console.log(num); // 20
        // 局部作用域 函数作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
        function fn() {
            var num = 30;
            console.log(num);
        }
        fn();
    </script>
</head>
​
<body>
​
</body>
​
</html>

块级作用域

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 块级作用域：js中es6前暂无块级作用域
        // {} if{} for{}
        function fn() {
            var num = 10;
        }
        fn();
        // console.log(num); // 不可输出
​
        if (3 < 5) {
            var num1 = 5;
            console.log(num1);
        }
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

变量的作用域

  • 全局变量

  • 局部变量

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 全局变量和局部变量
        // 全局变量：在全局作用域下的变量
        // 局部变量：在内部作用域下的变量 函数的形参看作局部变量
        // 全局变量浏览器关闭时才销毁，占资源
        // 局部变量当我们程序执行完毕就被销毁，比较节约内存资源
        var num = 10; // 全局变量，全局可用
        function fn() {
            var num1 = 20; // 局部变量，只能在函数内使用
            num2 = 20; // 全局变量，函数内部不声明直接赋值
​
        }
        fn();
        console.log(num1); // 局部变量，报错
        console.log(num2); // 全局变量
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

作用域链

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 作用域链 内部函数访问外部函数的变量 采用链式查找的方式来决定取哪个值 就近原则
        var num = 10;
​
        function fn() { // 外部函数
            var num = 20;
​
            function fn1() { // 内部函数
                console.log(num);
            }
            fn1();
        }
​
        fn();
    </script>
</head>
​
<body>
​
</body>
​
</html>

js预解析

能够知道解析器运行js分为哪两步

能够说出变量提升的步骤和运行过程

能够说出函数提升的步骤和运行过程

预解析

变量预解析和函数预解析

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 预解析
        // js引擎运行js分为两步 预解析 与 代码执行
        // 预解析：js引擎会将js里面的var和function提升到当前作用域的最前面
        // 代码执行：按照代码书写的顺序从上往下执行
​
        // 预解析分为 变量预解析 变量提升 与 函数预解析 函数提升
        // 变量提升 把所有变量声明提升到当前作用域的最前面 不提升赋值操作
        // 函数提升 把所有函数声明提升到当前作用域的最前面 不调用函数
​
        // 1.
        console.log(num); // 报错
        // 2
        console.log(num1); // undefined
        var num1 = 10;
        // 等价于
        /*         var num1;
                console.log(num1);
                num1 = 10; */
        // 3.
        fn();
​
        function fn() {
            console.log(11);
        }
        // fn(); // 正常执行
        // 等价于
        /*         function fn() {
                    console.log(11);
                }
                fn(); */
        // 4.
        fun(); // 报错
        var fun = function fn2() {
                console.log(22);
            }
            // fun(); // 正常执行
            // 等价于
            /*         var fun;
                    fun();
                    fun = function fn2() {
                        console.log(22);
                    } */
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

预解析案例

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
​
        function f1() {
            var a = b = c = 9;
            // 等价于 var a = 9; b = 9; c= 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
​
        function f1() {
            // var a = b = c = 9;
            // 等价于 var a = 9; b = 9; c= 9;
            var a;
            a = 9; // 局部变量
            b = 9; // 全局变量
            c = 9; // 全局变量
            console.log(a); // 9
            console.log(b); // 9
            console.log(c); // 9
        }
        f1();
        console.log(c); // 9
        console.log(b); // 9
        console.log(a); // 报错
    </script>
</head>
​
<body>
​
</body>
​
</html>

js对象

能够说出为什么需要对象

能够使用字面量创建对象

能够使用构造函数创建对象

能够说出new的执行过程

能够遍历对象

对象

在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象

对象是由属性和方法组成的

  • 属性：事物的特征，在对象中用属性来表示（常用名词）

  • 方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象？

保存一个值时，可以用变量，保存多个值（一组值）时，可以用数组，如果要保存一个人能的完整信息时，需要使用对象

js中的对象表达结构更清晰，更强大

创建对象的三种方式

  • 利用字面量创建对象

  • 利用new Object创建对象

  • 利用构造函数创建对象

new关键字

  • 在内存中创建一个空的对象

  • 让this指向这个空对象

  • 执行构造函数里面的代码，给空对象添加属性和方法

  • 返回这个对象

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 创建对象
        // 1.利用对象字面量创建对象 {}
        // var obj = {};
​
        // 2.利用new Object创建对象
​
        // 3.利用构造函数创建对象 构造函数名首字母要大写 构造函数不需return就可返回对象
        /*         function 构造函数名(形参...) {
                    this.属性 = 值,
                        this.方法 = function(形参...) {}
                }
                    var 对象名 = new 构造函数名(实参...)
                    对象名.方法名(实参);
                 */
​
        // 属性和方法采用键值对的形式 键 属性名 : 值 属性值
        // 多个属性和方法用,分隔
        // 方法冒号后跟随的是一个匿名函数
        // 1.
        var obj = {
                uname: 'zhangsan',
                age: 18,
                gender: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }
            // 2.
        var obj1 = new Object();
        obj1.uname = 'zhangsan';
        obj1.age = 18;
        obj1.gender = '男';
        obj1.sayHi = function() {
                console.log('hi~');
            }
            // 3.
        function Singer(uname, age, gender) {
            this.uname = uname,
                this.age = age,
                this.gender = gender,
                this.Sing = function(name) {
                    console.log(name);
                }
        }
        var ldh = new Singer('liudehua', '18', '男');
        console.log(ldh);
        ldh.Sing('冰雨');
​
        // 使用对象 1 2
        // 调用对象的属性
        // 1.对象名.属性名
        console.log(obj.uname);
        // 2.对象名['属性名']
        console.log(obj['gender']);
        // 调用对象的方法 对象名.方法名()
        obj.sayHi();
​
        // 案例
        var dog = {
            uname: '可可',
            type: '阿拉斯加犬',
            gender: 5,
            color: 'brownish red',
            bark: function() {
                console.log('汪汪汪');
            },
            showFilm: function() {
                console.log('演电影');
            }
        }
        console.log(dog);
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

遍历对象属性

for...in语句用于对数组或者对象的属性进行循环操作

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 构造函数
        function Role(uname, type, blood) {
            this.uname = uname,
                this.type = type,
                this.blood = blood,
                this.Attack = function(method) {
                    console.log(method);
                }
        }
​
        // 创建对象
        var houyi = new Role('后裔', '射手', 100);
        houyi.Attack('远程');
        var lianpo = new Role('廉颇', '坦克', 500);
        lianpo.Attack('近战');
        console.log(houyi, lianpo);
    </script>
</head>
​
<body>
​
</body>
​
</html>

js内置对象

能够说出什么是内置对象

能够根据文档查询指定API的使用方法

能够使用Math对象的常用方法

能够使用Date对象的常用方法

能够使用Array对象的常用方法

能够使用String对象的常用方法

内置对象

js中的对象分为三种：自定义对象、内置对象、浏览器对象

前两者是js基础内容，属于ECMAScript，第三个浏览器对象属于js独有的，属于js API模块

内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发

查文档

JavaScript 参考 - JavaScript | MDN (mozilla.org)

  • 查阅该方法的功能

  • 查看里面参数的意义和类型

  • 查看返回值的意义和类型

  • 测试

Math对象

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // math 对象 不是一个构造函数 不需要new来调用 可直接使用属性和方法
        console.log(Math.PI);
        console.log(Math.max(11, 22, 33));
        console.log(Math.max(11, 22, 'pink'));
        console.log(Math.max());
​
        // 需求：封装自己的数学对象
        var myMath = {
            PI: 3.141592653589793,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    max = max > arguments[i] ? max : arguments[i];
                }
                return max;
            },
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    min = min > arguments[i] ? arguments[i] : min;
                }
                return min;
            }
        }
​
        console.log(myMath.PI);
        console.log(myMath.max(11, 22, 33));
        console.log(myMath.min(11, 22, 33));
​
        // 1.绝对值
        console.log(Math.abs(1)); // 1
        console.log(Math.abs(-1)); // 1
        console.log(Math.abs('-1')); // 1
        console.log(Math.abs('pink')); // NaN
        // 2.三个取整方法
        // Math.floor() 向下取整
        console.log(Math.floor(1.1)); // 1
        console.log(Math.floor(1.9)); // 1
        // Math.ceil() 向上取整
        console.log(Math.ceil(1.1)); // 2
        console.log(Math.ceil(1.9)); // 2
        // Math.round() 四舍五入 .5往大了取
        console.log(Math.round(1.4)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(1.6)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // -1
​
        // random() 随机数方法
        console.log(Math.random());
​
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        console.log(getRandomIntInclusive(1, 10));
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

日期对象

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Date 对象 构造函数 必须使用new创建日期函数
        // 无参
        var date = new Date();
        console.log(date);
        // 带参 数字型 2019,10,01 字符串型 '2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 01);
        console.log(date1); // 返回11月
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);
​
        // 日期格式化
        // 1.getFullYear() 获取当年
        // 2.getMonth() 获取当月 0-11
        // 3.getDate() 获取当天日期
        // 4.getDay() 获取星期几 周日0到周六6
        // 5.getHours() 获取当前小时
        // 6.getMinutes() 获取当前分钟
        // 7.getSeconds() 获取当前秒钟
        console.log(date.getFullYear());
        console.log(date.getMonth()); // 从0开始，月份减一
        console.log(date.getDate());
        console.log(date.getDay());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        // 格式化年月日
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        // var date = date.getDate(); // 报错 原因是重新赋值
        var date1 = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log(year + '年' + month + '月' + date + '日' + arr[day]);
        // 格式化时分秒
        var hours = formatting(date.getHours());
        var minutes = formatting(date.getMinutes());
        var seconds = formatting(date.getSeconds());
        // 格式化函数
        function formatting(num) {
            var res = num >= 10 ? num : '0' + num;
            return res;
        }
        var time = hours + ':' + minutes + ':' + seconds;
        console.log(time);
​
        // 时间戳 Date的总毫秒数 距1970年1月1日过了多少毫秒数
        // valueOf() getTime()
        console.log(date.valueOf());
        console.log(date.getTime());
        // 简单的写法
        var date3 = +new Date(); // 实际开发最常用的写法
        console.log(date3);
        // h5 新增的 获取总的毫秒数
        console.log(Date.now());
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

数组对象

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数组对象
        // 创建数组
        // 利用new Array() 创建数组
        // var arr = new Array(); // 创建了一个空数组
        // var arr = new Array(2); // 数组长度为2，里面有两个空的数组元素
        var arr = new Array(1, 2, 3); // 等价于利用数组字面量创建元素
        console.log(arr);
​
        // 检测是否为数组的两种方式 
        // instanceof 运算符
        var arr = [];
        console.log(arr instanceof Array);
        // Array.isArray() h5新增 ie9~
        console.log(Array.isArray(arr));
​
        // 翻转数组
        function reverse(arr) {
            var newArr = [];
            if (Array.isArray(arr)) {
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
            } else {
                newArr = 'error';
            }
            return newArr;
        }
        /*         var num = 1;
                console.log(num.length); // undefined
                console.log(undefined - 1); // NaN
                console.log(NaN >= 0); // false */
        console.log(reverse(1, 2, 3));
​
        // 添加删除数组元素的方法
        // 1.push(参数1...) 末尾添加一个或多个元素，注意修改原数组 返回新的长度
        // 2.pop() 删除数组最后一个元素，把数组长度减1，无参数，修改原数组 返回它删除的元素的值
        // 3.unshift(参数1...) 向数组的开头添加一个或更多元素，注意修改原数组 返回新的长度
        // 4.shift() 删除数组第一个元素，把数组长度减1，无参数，修改原数组 返回它删除的元素的值
        var arr1 = [1, 2, 3];
        console.log(arr1.push('pink'));
        console.log(arr1.unshift('blue'));
        console.log(arr1);
        console.log(arr1.pop());
        console.log(arr1.shift());
        console.log(arr1);
        // 筛选数组
        function screeningArray(arr) {
            var newArr = [];
            if (arr instanceof Array) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] <= 2000) {
                        newArr.push(arr[i]);
                    }
                }
            } else {
                newArr = 'error';
            }
            return newArr
        }
​
        var arr = [1500, 1200, 2000, 2100, 1800];
        console.log(screeningArray(arr));
        console.log(screeningArray(1, 2, 3));
​
        // 数组排序
        // 1.reverse() 颠倒数组中的元素的顺序，无参数 该方法会改变原来的数组 返回新数组
        var arr2 = [1, 2, 3, 4];
        console.log(arr2.reverse());
        // 2.sort() 对数组的元素进行排序 该方法会改变原来的数组 返回新数组 -- 冒泡排序
        var arr3 = [3, 4, 5, 6];
        var arr4 = [13, 4, 77, 1, 7];
        console.log(arr3.sort());
        // console.log(arr4.sort); // 一旦数字两位以上，则会出现问题
        arr4.sort(function(a, b) {
            // return a-b; // 升序排序
            return b - a; // 降序排序
        })
        console.log(arr4);
​
        // 数组索引
        // 1.indexOf() 数组中查找给定元素的第一个索引 如果存在返回索引号 如果不存在，则返回-1
        var arr5 = [1, 2, 3, 4, 5, 6, 3];
        console.log(arr5.indexOf(3)); // 只返回第一个满足条件的索引号 2
        console.log(arr5.indexOf(7)); // 返回-1
        // 2.lastIndexOf() 在数组中的最后一个的索引 如果存在返回索引号 如果不存在，则返回-1
        console.log(arr5.lastIndexOf(3)); // 只返回从后往前查的第一个满足条件的索引号 6
        console.log(arr5.lastIndexOf(7)); // -1
        // 数组去重
        // 方法一
        function duplicateRemoval(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (arr.indexOf(arr[i]) == arr.lastIndexOf(arr[i])) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var arr6 = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
        var res = duplicateRemoval(arr6);
        console.log(res);
        // 方法二
        function duplicateRemoval1(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) == -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var arr7 = [1, 2, 3, 3, 2, 4, 5, 6, 6, 5];
        var res1 = duplicateRemoval1(arr7);
        console.log(res1);
        // ...
        var num = 5;
​
        function fn(num) {
            num = 10;
        }
        fn(num);
        console.log(num);
​
        // 数组转换为字符串
        // 1.toString() 把数组转换为字符串，逗号分隔每一项 返回一个字符串
        var arr8 = [1, 2, 3];
        console.log(arr8.toString());;
        // 2.join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 无参时默认是逗号 返回一个字符串
        console.log(arr8.join());
        console.log(arr8.join('-'));
        console.log(arr8.join('&'));
​
        // 1.contact() 连接两个或多个数组 不影响原数组 返回一个新数组
        // 2.slice() 数组截取slice(begin,end) 返回被截取项目的新数组
        // 3.splice() 数组删除splice(第几个开始,要删除的个数) 返回被删除项目的新数组 注意，这个会影响原数组
        var arr9 = [1, 2, 3];
        var arr10 = [4, 5, 6];
        var res2 = arr9.concat(arr10);
        console.log(res2);
        var res3 = arr9.slice(0, 2);
        console.log(res3);
        arr9.splice(0, 1);
        console.log(arr9);
    </script>
</head>
​
<body>
​
</body>
​
</html>

 

字符串对象

基本包装类型

为了方便操作基本数据类型，js还提供了三个特殊的引用类型：String、Number、Boolean

基本包装类型就是把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 基本包装类型
        // 下面的代码有什么类型
        var str = 'andy';
        console.log(str.length);
        // 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面的代码却可以执行
        // 这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：
        // 1.生成临时变量，把简单类型包装为复杂数据类型
        var temp = new String('andy');
        // 2.赋值给我们声明的字符变量
        str = temp;
        // 3.销毁临时变量
        temp = null;
    </script>
</head>
​
<body>
​
</body>
​
</html>

字符串不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 字符串的不可变
        var str = 'abc';
        str = 'hello';
        // 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
        // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
        // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
        var str1 = '';
        for (var i = 0; i < 100000; i++) {
            str += i;
        }
        console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断地开辟新的内存空间
    </script>
</head>
​
<body>
​
</body>
​
</html>

根据字符串返回位置

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 字符串对象
        // 根据字符返回位置
        var str = '改革春风吹满地，春天来了';
        // 1.indexOf('要查找的字符'[,开始的位置]) 返回指定内容在元字符串中的位置，如果找不到返回-1，开始的位置是index索引号
        console.log(str.indexOf('春'));
        console.log(str.indexOf('春', 3));
        // 2.lastIndexOf('要查找的字符'[,开始的位置]) 从后往前找，只找第一个匹配的，...
        console.log(str.lastIndexOf('春'));
        console.log(str.lastIndexOf('春', 7));
​
        // 返回字符串的位置，查找字符串'abcoefoxyozzopp'中所有出现o的位置以及次数
        function search(str) {
            var index = [];
            var count = 0;
            var position = str1.indexOf('o');
​
            while (position != -1) {
                index.push(position);
                count++;
                position++;
                position = str1.indexOf('o', position);
            }
​
            index.push(count);
            return index;
        }
​
        var str1 = 'abcoefoxyozzopp';
        var res = search(str);
        console.log(res);
​
        // ['red','blue','red','green','pink','red']，求red出现位置以及次数
        function search1(arr) {
            var count = 0;
            var index = arr.indexOf('red');
            while (index != -1) {
                count++;
                console.log(index);
                index++;
                index = arr.indexOf('red', index)
            }
            console.log(count);
        }
​
        var arr = ['red', 'blue', 'red', 'green', 'pink', 'red'];
        search1(arr);
    </script>
</head>
​
<body>
​
</body>
​
</html>

根据位置返回字符

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 根据位置返回字符
        var str = 'abc';
        // 1.charAt(index) 返回指定位置的字符 index字符串的索引号
        console.log(str.charAt(2));
        // 2.charCodeAt(index) 获取指定位置处的字符的ASCII码 indexs索引号 -- 判断用户按下了哪个键
        console.log(str.charCodeAt(2));
        // 3.str[index] 获取指定位置处字符 h5新增 ie8~支持 和 charAt(index)等效
        console.log(str[2]);
    </script>
</head>
​
<body>
​
</body>
​
</html>

拼接以及截取字符串

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 拼接以及截取字符串
        var str = 'hello';
        var str1 = 'world';
        // 1.concat(str1,str2,str3...) 用于连接两个或多个字符串，等效于+ +更常用
        console.log(str.concat(str1));
        // 2.substr(start,length) 从start位置开始（索引号),length取的个数 -- 重点
        console.log(str.substr(0, 2));
        // 3.slice(start,end) 从start位置开始，截取到end位置，end取不到，参数都为索引号
        console.log(str1.slice(0, 3));
        console.log(str1.slice(0, -1)); // 从后往前的索引 0 -1 -2...
        // 4.substring(start,end) 从start位置开始，截取到end位置，end取不到，基本与slice相同，但不接受负值
        console.log(str1.substring(0, 3));
    </script>
</head>
​
<body>
​
</body>
​
</html>

替换字符串以及转换为数组

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 替换字符串以及转换为数组
        var str = "a,b,c";
        var str1 = 'abc';
        var str2 = 'ABC'
            // 1.替换字符 replace('被替换的字符','替换后的字符') 只会替换第一个字符
        str.replace('a', 'd');
        console.log(str.replace('a', 'd'));
        // 2.字符转换为数组 split('分隔符')
        console.log(str.split(','));
        // toUpperCase() -- 转换大写
        console.log(str1.toUpperCase());
        // toLowerCase() -- 转换小写
        console.log(str2.toLowerCase());
    </script>
</head>
​
<body>
​
</body>
​
</html>

js简单数类型和复杂类型

能够说出简单数据类型的内存分配

能够说出复杂数据类型的内存分配

能够说出简单类型如何传参

能够说出复杂类型如何传参

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

  • 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

    string、number、boolean、undefined、null

  • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型

    通过new关键字创建的对象（系统对象、自定义对象）

堆和栈

堆：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈，简单数据类型存放到栈里面

堆：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，复杂数据类型存放到堆里面

js中没有堆栈的概念，通过堆栈的方式更容易理解代码的执行方式

简单类型内存分配

简单数据类型：值存放在栈里开辟的内存空间

复杂类型内存分配

复杂数据类型：地址存放在栈里开辟的内存空间，地址指向的在堆里开辟的内存空间，堆里的内存空间用于存放值

简单类型传参

  • 变量初始化

  • 在栈开辟内存空间，存放值

  • 变量重新赋值

  • 将内存空间对用变量的值修改为新值

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值赋值了一份给形参，那么方法内部堆形参做任何修改，都不会影响到外部的变量

复杂类型传参

  • 变量初始化

  • 在栈开辟内存内存空间，存放对象

  • 在栈开辟内存空间，存放地址值，指向栈内存里存放对象的内存空间

函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象

 

 

posted @ 2022-08-23 03:51  litilestar  阅读(36)  评论(0)    收藏  举报