JS基础语法（一）

文章目录

• Javascript基础语法（一）
• • 一、基本概念
  • • 1、 编程
    • 2、 计算机语言
    • 3、 编程语言
    • 4、 编程语言和标记语言的区别
    • 5、总结
    • 6、 计算机基础
    • • 计算机组成
      • • 硬件
        • 软件
        
        
      • 数据存储
      • 程序运行
      
      
    
    
  • 二、 初识Javascript
  • • 1、JS简介
    • 2、 JS初体验
    • 3、 JS注释
    • 4、 输入输出
    
    
  • 三、 变量
  • • 1、变量的主要作用
    • 2、 变量的使用
    • • 声明变量
      • 赋值
      • 变量初始化
      • 小案例
      
      
    • 3、 变量扩展
    • • 更新变量
      • 声明多个变量
      • 特殊情况
      
      
    • 4、 命名规范
    • 5、 交换变量
    
    
  • 四、 数据类型
  • • 1、 数据类型简介
    • 2、 变量的数据类型
    • 3、 简单数据类型
    • • 数字型
      • • 数字型进制
        • 数字范围
        • 特殊值
        
        
      • 字符串型
      • • 字符串引号嵌套
        • 字符串转义符
        • 字符串长度
        • 字符串的拼接
        
        
      • 布尔类型
      • Nudefined 和 Null
      
      
    • 4、 获取数据类型
    • 5、数据类型的转换
    • • 转换为字符串类型
      • 转换为数字类型（重点）
      • 转换为布尔型
      
      
    
    
  • 五、运算符
  • • 1、 算术运算符
    • • 表达式和返回值
      • 递增递减运算符
      • • 前置递增运算符
        • 后置递增运算符
        • 小结
        
        
      
      
    • 2、 逻辑运算符
    • • 短路运算（）
      
      
    • 3、 比较运算符
    • 4、 赋值运算符
    • 5、运算符优先级
    
    
  • 六、 流程控制
  • • 1、 顺序结构
    • 2、 分支结构
    • • if语句
      • • 三元表达式
        
        
      • switch语句
      • 区别
      
      
    • 3、 循环结构
    • • for循环
      • • for循环嵌套
        
        
      • while循环
      • do···while循环
      
      
    • 4、 continue 和 break
    
    
  • 七、 数组元素
  • • 1、 数组概念
    • 2、 创建数组
    • 3、 访问数组
    • • 数组的索引
      • 遍历数组
      • 数组长度
      • 新增元素
      
      
    • 4、 数组排序
    
    
  
  

一、基本概念

1、 编程

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

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

2、 计算机语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言种类非常多，总的来说课可以分成机器语言、汇编语言和高级语言三大类

3、 编程语言

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

编程语言是用来控制计算机的一系列指令，它有固有的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守

如今通用的编程语言有两种形式：汇编语言和高级语言

• 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆
• 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言

4、 编程语言和标记语言的区别

编程语言：有很强的逻辑和行为能力。在编程语言里，有很多具有逻辑性和行为能力的指令，这是生动的

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

5、总结

• 计算机可以帮助人类解决某些问题
• 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
• 编程语言有机器语言、汇编语言、高级语言
• 高级语言需要一个编译器转换为计算机识别的机器语言

6、 计算机基础

计算机组成

硬件

• 输入设备

• 输出设备

• CPU

  
  
  • 负责数据处理和运算

• 硬盘

• 内存

  
  
  • 硬盘和内存都是负责存储数据，硬盘永久存储数据，内存暂时存储数据

软件

• 系统软件
  
  • Windows、Linux、macOS
• 应用软件

数据存储

1. 计算机内部使用二进制表示数据

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

3. 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中，平时我们所说的安装软件，其实就是把程序文件复制到硬盘中

4. 硬盘、内存都是保存二进制数据

5. 存储单位

   bit

   1byte = 8 bit / 其他的都与 1 kb = 1024 byte 类似

程序运行

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

2. CPU执行内存中的代码

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

二、 初识Javascript

1、JS简介

Javascript是一种运行在客户端的脚本语言

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

现在也可以基于Node.js技术进行服务端编程

浏览器执行JS简介

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

JS的组成

• Javascript语法：ECMAScript
• 页面文档对象模型：DOM
  
  • 通过DOM提供的接口可以对页面上的各种元素进行操作（大小、颜色、位置等）
• 浏览器对象模型：BOM
  
  • 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

2、 JS初体验

JS有3种书写位置，分别为行内、内嵌和外部

• 行内式

  
  

  • 


    

    • 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头）
    • 注意单双引号的使用：在HTML中推荐使用双引号，JS中推荐使用单引号
    • 读写性差，在html中编写JS大量代码时，不方便阅读
    • 引号易错，引号多层嵌套匹配时，非常容易弄混
    • 特殊情况下使用

• 内嵌式

  
  

  • 

    

    • 可以将多行JS代码写到
      
      
      • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
      • 引用外部JS文件的script标签中间不可以写代码
      • 适用于JS代码量比较大的情况
  
  

  3、 JS注释

  // 单行注释 Ctrl + /
/*
这为多行注释 默认：Shift + Alt + A
*/

  

  4、 输入输出

  为了方便信息的输入和输出，JS提供了一些输入输出语句

  
  

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

  

  

  三、 变量

  
  

  1、变量的主要作用

  变量就是一个存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

  变量是程序在内存中申请用来存放数据的空间

  
  

  2、 变量的使用

  变量在使用的过程中分为两步：1. 声明变量 2. 赋值

  
  

  声明变量

  var age; // 声明一个名称为age的变量

  

  
  

  1. var是一个JS关键字，用来声明变量（variable）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理
  2. age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

  
  

  
  

  赋值

  age = 10; // 给age这个变量赋值为10
console.log(age); // 输出结果

  

  
  

  1. 用来把右边的值赋给左边的变量空间中，赋值
  2. 变量值是程序员保存到变量空间里面的值

  
  

  
  

  变量初始化

  var age = 18; // 声明变量的同时赋值为18

  

  声明变量的同时赋值叫做变量的初始化

  
  

  
  

  小案例

  var name;
name = prompt("请输入你的名字"); // 输入姓名之后，存储到一个name变量里面
alert(name); // 输出姓名

  

  3、 变量扩展

  
  

  更新变量

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

  
  

  声明多个变量

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

  var age = 18;
var name = "李华";
// 这样写太麻烦了，可以这样写
var age = 18,
name = "李华";

  

  特殊情况

  
  

  情况	说明	结果
  var age; console.log(age)	只声明变量 不赋值	underfined
  console.log(age)	不声明，不赋值，直接使用	报错
  age = 10;console.log(age)	不声明，只赋值	10

  
  

  4、 命名规范

  
  
  • 由字母、数字、下划线、美元符组成
  • 严格区分大小写
  • 不能以数字开头，18age是错误的
  • 不能是关键字、保留字
  • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写，后面单词的首字母大写 ，myFirstName
  
  

  5、 交换变量

  var name1 = "lihua";
var name2 = "xiaoming"; // 交换名字
var temp = name1; // temp存储临时值
name1 = name2;
name2 = temp;

  

  四、 数据类型

  
  

  1、 数据类型简介

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

  
  

  2、 变量的数据类型

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

  var num; // 不确定是什么数据类型
num = 10; // 数字类型
num = "hello"; // 重新赋值后，变成字符串类型

  

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

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

  
  

  
  

  3、 简单数据类型

  JS把数据类型分为两类

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

  数据类型	说明	默认值
  Number	数字型，包含整型值和浮点型值	0
  Boolean	布尔型值	false
  String	字符串类型	“”
  Undefined	var a;声明了变量但是没有赋值	undefined
  Null	var a = null; 声明了变量a为空值	null

  
  

  数字型

  
  

  数字型进制

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

  var num1 = 010; // 数字前面加一个0代表八进制
console.log(num1)
var num2 = 0x9; // 数字前面加一个0x代表十六进制

  

  数字范围

  JS中的最大值和最小值

  alert(Number.MAX_VALUE); // 1.79769e + 308
alert(Number.MIN_VALUE); // 5e - 324

  

  特殊值

  alert(Infinity); // 无穷大，大于任何数值
alert(-Infinity); // 无穷小，小于任何值
alert(NaN); // 代表一个非数值
// isNaN() 这个方法用来判断非数字，并且返回一个布尔类型的值
console.log(isNaN(12)); // 返回值为false

  

  字符串型

  字符串型可以是引号中的任意文本，其语法为双引号""、单引号''

  
  
  • 因为HTML标签里面的属性使用的是双引号，JS这里更推荐使用单引号
  
  

  字符串引号嵌套

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

  
  

  字符串转义符

  类似于HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符

  转义符都是以\开头，常用的转义符

  
  

  转义符	解释说明
  \n	换行符
  \\	斜杆\转义
  \’	单引号
  \"	双引号
  \t	缩进
  \b	空格

  
  

  字符串长度

  检测获取字符串的长度

  字符串是由若干个字符组成的，这些字符的数量就是字符的长度。通过字符串的length属性可以获取整个字符串的长度

  var str = "my name is make";
console.log(str.length); // 打印字符串的长度

  

  字符串的拼接

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

  console.log("沙漠" + "骆驼"); // 字符串的拼接 +
// 只要有字符串和其他类型相拼接，最终的结果都是字符串类型
console.log("1" + 18 + true); // 输出为118true


  加强

  var age = 18;
console.log("i am" + age + "岁"); // 变量拼接

  

  布尔类型

  布尔类型有两个值：true、false

  
  
  • 布尔数当做数字运算时，true为1、false为0
  
  

  Nudefined 和 Null

  一个声明变量没有被赋值的变量会有一个默认值undefined

  一个声明变量个null值，里面存储的值为空

  var vari = undefined;
var flag = 10;
console.log(vari + flag); // 结果为NaN
var space = null;
console.log(space + flag); // 返回10

  

  4、 获取数据类型

  typeof可以用来检测变量的数据类型

  var num = 10,
str = "lihua",
flag = true,
vari = undefined;
console.log(typeof num);
console.log(typeof str);
console.log(typeof flag);
console.log(typeof vari);

  

  prompt 获取的值是字符串类型的数据类型

  
  

  字面量：在源代码中一个固定值的表示法

  
  

  5、数据类型的转换

  使用表单、prompt获取过来的数据默认是字符串类型的数据，此时就不能直接简单的进行加法的相加，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型

  
  

  转换为字符串类型

  
  

  方式	说明	案例
  toString()	转换成字符串	var num = 1; alert(num.toString());
  String()	转换成字符串	var num = 1; alert(String(num));
  加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num + “hello”);

  
  
  • toString() 和 String() 使用方式不一样
  • 三种转换方式，第三种加号拼接字符串转换方式也称为隐式转换
  
  

  转换为数字类型（重点）

  
  

  方式	说明	案例
  parseInt(String)	将String类型转换成整数数值	parseInt(“12”)
  parseFloat(String)	将String类型转换成浮点数值型	parseFloat(“12.0”)
  Number()	将String类型强制转换为数值型	Number(“12”)
  js隐式转换(- * /)	利用算术运算隐式转换为数值类型	“12” - 0

  
  

  注意parseInt和parseFloat的字母大小写

  隐式转换是我们常用的转换方法

  
  

  
  

  转换为布尔型

  
  

  方式	说明	案例
  Boolean()	其他类型转换成布尔值	Boolean(“true”);

  
  

  代表空、否定的值被转换成false；其余的转换成true

  
  

  
  

  五、运算符

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

  
  

  1、 算术运算符

  +（加）、-（减）、*（乘）、/（除）、%（取余）

  console.log(1 + 1);
console.log(1 - 1);
console.log(1 * 2);
console.log(2 / 1);
console.log(5 % 3);

  

  浮点数精确度远远不如整数，不要直接判断两个浮点数的运算结果是否相等

  
  

  
  

  表达式和返回值

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

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

  var num = 1 + 1; // 接收返回值

  

  递增递减运算符

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

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

  递增和递减运算符必须和变量配合使用

  
  

  前置递增运算符

  var num = 10;
++num;
console.log(num); // 先自加1后返回值
console.log(++num * 2); // 24

  

  后置递增运算符

  var num = 10;
num++;
console.log(num); // 先放回值，后自加1
console.log(num++ * 2) // 22

  

  小结

  前置递增和后置递增运算符都可以简化代码的编写，让变量的值 +1

  单独使用时，运行结果相同

  与其他代码联用时，执行结果不同

  
  
  • 后置：先赋值后运算（后递加）
  • 前置：先运算后赋值（先递加）
  
  

  2、 逻辑运算符

  概念：逻辑运算符是用来进行布尔运算的运算符，其返回值是布尔类型

  
  

  运算符	说明	案例
  &&	逻辑与 and	true && false
  ||	逻辑或 or	true || false
  !	逻辑非 not	! true

  
  

  短路运算（）

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

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

  // 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
console.log(123 && 456); // 返回456
console.log(0 && 1); // 返回0
console.log(0 && 1 + 2 && 456 + 123); // 返回0
// 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回结果表达式2
console.log(123 || 456); // 返回123
console.log(0 || 1); // 返回1
console.log(0 || 1 + 2 || 456 + 123); // 返回2
// 逻辑中断很重要，它会影响我们程序运行结果的表达

  

  逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1

  逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回结果表达式2

  逻辑中断很重要，它会影响我们程序运行结果的表达

  
  

  
  

  3、 比较运算符

  概念：比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值作为比较运算的结果

  <（大于）、>（小于）、<=（小于等于）、>=（大于等于）、==（等于）、!=（不等于）、===（全等）、!==（不全等）

  ==默认会转换数据类型，会把字符串类型转换成数字类型

  console.log(18 == "18"); // true
console.log(18 != "18"); // false
console.log(18 === "18"); // false

  

  4、 赋值运算符

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

  =（赋值）、 +=（加等于）、 -=（减等于）、 /=（除等于）、 *=（乘等于）、 %=（余等于）

  
  

  5、运算符优先级

  下表按从最高到最低的优先级列出Javascript运算符。具有相同优先级的运算符按从左至右的顺序求值

  
  

  运算符	描述
  . [] ()	字段访问、数组下标、函数调用以及表达式分组
  ++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
  * / %	乘法、除法、取模
  + - +	加法、减法、字符串连接
  <<>> >>>	移位
  <<= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
  == != === !==	等于、不等于、严格相等、非严格相等
  &	按位与
  ^	按位异或
  |	按位或
  &&	逻辑与
  ||	逻辑或
  ?:	条件
  = oP=	赋值、运算赋值
  ,	多重求值

  
  

  六、 流程控制

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

  简单理解：流程控制就是来控制我们的代码执行按照什么样的顺序来执行

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

  
  

  1、 顺序结构

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

  
  

  2、 分支结构

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

  
  

  if语句

  // if语法结构
/*
if ( 条件表达式1 ) {
// 执行语句1
} else if ( 条件表达式2 ) {
// 执行语句2
} else {
// 执行语句
}
*/
// 如果if条件表达式结果为假，则不执行大括号里面的语句，执行if语句后面的代码
if (3 > 5) {
alert("3大于5");
}
else {
alert("3小于5");
}

  

  三元表达式

  // 条件表达式 ? 表达式1 : 表达式2 ;
// 如果条件表达式结果为真，则返回表达式1的值
var num = 5;
var result = if num > 5 ? "对呀" : "很可惜不是的" ;
alert(result)

  

  switch语句

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

  // switch语句也是多分支结构，可以实现多选一的结果
// 语法结构 switch转换
/* switch (表达式) {
case value1:
执行语句1;
break;
···
default:
执行最后的语句;
}*/
// 代码验证
var num = parseInt(prompt("请输入一个数字"));
switch (num) {
case 1:
alert("输入为一");
break;
case 2:
alert("输入为2");
break;
default:
alert("无法识别");
}

  

  我们的num的值和case里面的值相匹配的时候是全等的关系，必须是值和数据类型一致才可以

  如果当前的case里面没有break，则不会退出switch，是继续执行下一个case

  
  

  
  

  区别

  
  
  • 一般情况下，它们两个语句可以相互替换
  • switch ··· case 语句通常处理case为比较确定值的情况，而 if ··· else 语句更加灵活，常用于范围判断（大于、等于某个范围）
  • switch 语句进行条件判断后直接执行到程序的条件语句，效率更高，而 if ··· else 语句有几种条件，就得判断多少次
  • 当分支较少时， if ··· else 语句的效率比switch语句的高；当分支较多时，switch语句的执行效率比较高，而且结构清晰
  
  

  3、 循环结构

  循环的目的：可以重复执行某些语句

  
  

  for循环

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

  for 重复执行某些代码，通常跟计数有关系

  /*
初始化变量就是用var声明的一个普通变量，通常用于作为我计数器使用
条件表达式就是用来决定吗，每一次循环是否继续执行，就是终止条件
操作表达式就是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增或者递减）
for (初始化变量; 条件表达式; 操作表达式) {
循环体
}
*/
for (var i = 1; i <101; i++) {
console.log("这是一个循环结构");
}


  for循环可以执行重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变换

  for (var i = 1; i <= 100; i++) {
console.log("tom，今年" + i + "岁了");
}


  for循环因为有了计数器的存在，我们还可以重复执行某些操作，比如算术运算

  // 求和
var sum = 0;
for (var i = 1; i <101; i++) {
sum += i;
}
console.log("和为：" + sum);
// 求1到100之间能被3整除的数字的和
var sum1 = 0;
for (var i = 1; i <=100; i++) {
if (i % 3 == 0) {
sum1 += i;
}
}
console.log(sum1);

  

  for循环嵌套

  循环嵌套是指在一个循环语句中，再定义一个循环语句的语法结构

  外循环循环一次，里面的循环执行全部

  // 打印乘法口诀表，倒三角
var str_all = "" // 存储得到的值
for (var i = 1; i <= 9; i++) { // 控制行数
for (var j = i; j <= 9; j++) { // 控制列数
str_all += i + "x" + j + "=" + i*j + "\t";
}
str_all += "\n";
}
console.log(str_all);

  

  while循环

  while循环语句可以在条件表达式为真的前提下，循环执行指定的代码，直到表达式不为真时结束循环

  while ( 条件表达式 ) {
// 循环体代码
}


  执行思路

  
  
  • 先执行条件表达式，如果结果为true，则执行循环代码；如果为false，则退出循环，执行后面的代码
  • 执行循环体代码
  • 循环体代码执行完毕后，程序会继续判断执行条件表达式，如果条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束

  var str = "",
num = 1;
while (num <= 100 ) {
num++;
str += "你好呀\n";
}
console.log(str);
// 乘法口诀表
var str = "",
row = 1;
while (row <= 9) {
var col = 1;
while (col <= row) {
str += row + "x" + col + "=" + col*row + "\t";
col++;
}
row++;
str += "\n";
}
console.log(str);

  

  do···while循环

  do···while 语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环

  do {
// 循环体
} while ( 条件表达式 )


  执行思路

  
  
  • 跟while不同的地方在于 do···while 先执行一次循环体，再判断条件
  
  

  4、 continue 和 break

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

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

  
  

  七、 数组元素

  
  

  1、 数组概念

  数组的概念：使用数组可以把一组相关的数据一起存放，并提供方便的访问方式。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

  // 普通变量
var num = 10;
// 数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5];

  

  2、 创建数组

  
  

  • 利用new关键字创建数组

    var 数组名 = new Array();
var arr = new Array(); // 创建一个新的数组


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

    // 1、 使用数组字面量方式创建空的数组
var 数组名 = [];
// 2、 使用数组字面量方式创建带初始值的数组
var 数组名 = ["小白", "小黑", 2, true];

    

    数组里面的数据一定使用逗号分隔

    
    

  
  

  3、 访问数组

  
  

  数组的索引

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

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

  var arr = ["小白", "小黑", 2, true];
console.log(arr[0]);

  

  遍历数组

  for (var i = 0; i <4; i++) {
console.log(arr[i]);
}

  

  因为我们的数组索引号从0开始，所以 i 必须从 0 开始 i <4

  输出的时候 arr[i] i计数器当做索引号使用

  
  

  
  

  数组长度

  length 用于获取数组的长度

  for (var i = 0; i console.log(arr[i]);
}

  

  新增元素

  可以通过修改length的长度以及索引号增加数组元素

  
  

  • 可以通过修改length的大小来实现数组扩容的目的

    
    

    • length是可读写的

      arr.length = 5; // 手动修改数组长度为5，数组里面应该有5个元素
// 添加的默认值是undefined


  • 通过修改数组索引号的方法新增数组元素

    
    

    • 可以通过修改数组索引号的方式追加数组元素

      var arr1 = ["小白", "小黑", 2, true];
arr1[4] = 5;
console.log(arr1.length); // 追加一个元素
// 如果该索引号已有值，则会替换原来的数组元素

      

      不要直接给数组元素赋值，否则会覆盖里面的数组元素

      
      

    var arr = [2, 0, 6, 80, 56, 56, 0] // 要求将数组里面大于50的数字存储到新数组里面
var new_arr = []; // 刚开始数组的索引为0
for (var i = 0; i if (arr[i] > 50) {
// 新数组索引号从0开始，依次递增
new_arr[neww_arr.length] = arr[i];
}
}


  
  

  4、 数组排序

  冒泡排序

  
  
  • 一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）

  var arr = [1, 5, 0, 6, 66, 9, 564, 1212, 12] // 对数组进行排序，升序
for (var i = 0; i for (var j = 0; j if (arr[j] > arr[j+1]) {
var temp = arr[j]; // 临时存储变量
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);