学习JS第二周

23/5/1~7

1.循环

1.1循环的目的

• 对于有规律性的重复操作，在程序中要完成这类操作需要重复执行某些语句
  JS 中的循环：for循环、while循环、do…while循环

1.2for循环

在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称为循环语句。
1.for循环主要用于把某些代码循环若干次，通常跟计数有关。语法结构如下：

• 初始化变量：就是用var声明的一个普通变量，通常用于作为计数器使用
• 条件表达式：就是用来决定每一次循环是否继续执行（就是终止的条件）
• 操作表达式：就是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）

2.代码体验

3.执行思路：首先执行里面的计数器变量 var i =1,但这句话在for里面只执行一次；接着去i <=100来判断是否满足条件，如果满足条件，就执行循环体，不满足条件退出循环；最后执行i++（递增），如此结束一轮，剩下以此类推。
4.重复执行相同代码（用户控制输出次数：利用变量）

5.重复执行不同代码（计数器i的存在让i每次循环值发生变化）

+ 变量要用 ‘+（变量字母）+’ 进行表示
6.100次加法运算

7.一行显示字符串（利用追加字符串的方式）

• 利用空字符串‘ ’，追加字符串

1.3双重for循环（循环嵌套）

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

• 外面的循环循环一次，里面的循环执行全部
  2.代码体验
  

• 如上代码外层循环一次，里层循环三次
  3.打印n行n列的星星（外层控制行数，内层控制每行多少个）
  

• 换行记得使用 ‘/n’
  4.打印倒三角星星
  

• 核心算法：（里层循环）j=i;j<=n;j++

1.4while循环

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

2.执行思路：当条件表达式结果为真，就执行循环体；否则退出循环
3.代码体验

• num++是为了完成计数器的更新，防止死循环

1.5do while循环

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

2.执行思路：跟while不同的地方在于do while先执行一次循环体再判断条件，如果条件表达式结果为真，就继续执行循环体，否则退出循环。

• do while循环体至少要执行一次
  3.代码体验
  

1.6 continue和break

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

• 对于以上代码，作用效果是跳过第三次（i==3）

• continue能达到的效果：
  

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

2.数组

2.1数组概念

数组（Array）是一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式.

2.2创建数组

1.创建数组的方式：

• 利用new创建数组
  

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

数组里面的数据用逗号隔开
2.数组元素类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等等

2.3获取数组元素

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

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

2.4遍历数组

遍历：就是把数组中的每个元素从头到尾都访问一次

• i 初始化时，必须从0开始
  1.数组的长度是元素个数 “数组名.length”
  

• arr.length 动态监测数组元素的个数
  2.数组求和以及平均值
  

  3.数组最大值
  

• for循环中，令var=1是因为已经将数组中第一个元素赋值给max故循环只有从第二个元素开始

• 输出时，‘文字内容’+变量字母

  4.数组转换成分割字符串
  

2.5数组中新增元素

• 通过修改length（可读性的）长度新增数组元素
  

• 通过修改数组索引追加数组元素
  

注意：不能直接给数组名赋值，否则里面的数组元素都没有了；若对数组中已占有的追加数组元素即为替换，若对数组中未占用的追加数组元素即为增加
1.数组中存放十个值

2.筛选数组（两种方法）

3.删除指定数组元素

4.翻转数组

5.冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从和小到大或从大到小）

• 一共需要的趟数，用外层for循环，长度是arr.length-1
• 每一趟交换次数，用里层for循环，长度是arr.length-i-1
• 交换两个变量
• 若从大到小排列，则arr[j]<arr[j+1];若从小到大排列，则arr[j]>arr[j+1]

3.函数

3.1函数概念

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

3.2函数的使用：声明函数和调用函数

• 声明函数
  

• function是声明函数的关键字，必须小写

• 函数是做某件事情，函数名一般是动词

• 调用函数
  

• 调用函数不要忘记添加小括号

• 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

3.3函数的参数

• 参数分为形参（在声明函数的小括号里）和实参（在函数调用的小括号里）
  

• 形参是接受实参的，形参类似于一个变量

• 函数的参数可以有，也可以没有，个数不限

• 多个参数中间用逗号分隔

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

• 一般要求，形参和实参个数相匹配
  

• 形参的默认值是undefined

3.4函数的返回值（return）

• 函数只是实现某种功能，最终的结果需要返回给函数的调用者【函数名（）】，通过return实现
• 只要函数遇到return 就把后面的结果返回给函数的调用者【函数名（）=return后面的结果】
• return有时也作为终止函数：return后面语句后面的代码不会被执行；return只能返回一个值（已最后一个为准）
• 函数若有return，则返回的是return后面的值，若函数没有return，则返回undefined
• break，continue，return的区别
  

案例：利用函数求任意一个数组中最大值

3.5arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JS中，arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，可以进行遍历，具有以下特点：

• 具有length属性
• 按索引方式存储数据
• 不具有数组的push,pop等方法
  

案例：利用函数求任意个数的最大值

3.6函数案例

• 利用函数翻转任意数组 reverse翻转
  

• 利用函数封装的方法排序——冒泡排序
  

函数可以调用另外一个函数（相互调用，注意顺序）

3.7函数的声明方式

• 利用函数关键字自定义函数（命名函数）
  

• 函数表达式（匿名函数）
  

• fun是变量名，不是函数名

• 函数表达式声明方式和声明函数差不多，只不过变量里面存的是值，而函数表达式里面存的是函数

• 函数表达式也可以进行传递函数

4.作用域

4.1作用域概述

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

4.2JS的作用域：全局作用域和局部作用域

• 全局作用域：整个script标签或者是一个单独的js文件
  var num =10;
• 局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
  function fn(){ var num = 20; }

4.3变量的作用域：全局变量和局部变量

• 全局变量：在全局作用域下的变量（在全局下都可以使用）
• 注意：如果在函数内部，没有声明（var）直接赋值的变量也属于全局变量
• 局部变量：在局部作用域下的变量，在函数内部的变量就是局部变量
• 注意：函数的形参也可以看做是局部变量
• 从执行效果来说全局变量和局部变量：全局变量只有浏览器关闭的时候才会销毁，比较占用内存资源；局部变量是当程序执行完毕就会销毁，比较节约资源

JS没有块级作用域（es6新增了块级作用域）

4.4作用域链

• 内部函数可以访问外部函数的变量（内部函数是外部函数的子集），采取的是链式查找的方式来决定取哪个值，这种结构称为作用域链（就近原则）
  

• 以上代码输出结果是20

5.预解析

JS代码是由浏览器中的JS解析器来执行的。JS解析器在运行JS代码的时候分为两步：预解析和代码执行。

• 预解析：JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面
  预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
  console.log(num);//得到结果undefined var num = 10;
  相当于执行了
  var num;
  console.log(num);
  num = 10;

• 要将fun（）写到声明（var fun）后面，否则会报错
  fun(); var fun=function(){ console.log(22);//得到结果会报错 }

• 函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数
  fn(); function fn(){ console.log(11); }
  fn（）既可以放在函数定义之前，也可以放在它的后面

• 代码执行：按照代码书写的顺序从上往下执行

• 案例【先提升函数，再提升变量（先全局再局部），剩下的照抄】
  
  

• var a=b=c=9;
  相当于var a=9;b=9;c=9;(b和c直接赋值，没有var声明，当全局变量看)
  【集体声明】var a=9,b=9,c=9;
  相当于var a=9;var b=9;var c=9;

• 局部变量(var a)最外层无法调用，故会报错

6.对象

6.1对象的概念

对象是一个具体的事物。在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。

• 属性：事物的特征，在对象中用属性来表示（常用名词）。
• 方法：事物的行为，在对象中用方法来表示（常用动词）。
• 保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组（对象）。

6.2创建对象

在JS中，采用三种方式创建对象：

• 利用字面量创建对象
  对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法
  1.创建对象
  

  • 里面属性或者方法采取键值对的形式【键（属性名）：值（属性值）】
  • 多个属性或者方法中间用逗号隔开
  • 方法冒号后面跟的是一个匿名函数
    2.使用对象（对象的调用）
  • 调用对象的属性：对象名.属性名【…的】
    console.log(obj.uname)；
  • 调用对象的属性：对象名[‘属性名’]
    console.log(obj['age'])；
  • 调用对象的方法：对象名.方法名（）
    obj.sayHi();

• 利用new Object创建对象
  1.创建对象
  

  • 利用等号赋值的方法添加对象的属性和方法
  • 每个属性和方法之间用分号结束
  • 方法冒号后面跟的是一个匿名函数
    2.使用对象（对象的调用）
  • 调用对象的属性：对象名.属性名【…的】
    console.log(obj.uname)；
  • 调用对象的属性：对象名[‘属性名’]
    console.log(obj['age'])；
  • 调用对象的方法：对象名.方法名（）
    obj.sayHi();

• 利用构造函数创建对象
  因为前两种创建对象的方式一次只能创建一个对象，故创建多个对象时，利用函数的方法来创建对象更方便
  1.构造函数格式
  

  • 构造函数名字首字母要大写
  • this是当前的意思
  • 构造函数不需要return，就可以返回结果(对象)
  • 调用构造函数必须使用new
  2. 举例
     

  3.构造函数和创建对象

  • 构造函数是泛指的某一大类，抽象了对象的公共部分，封装到函数里面
  • 创建对象是特指某一个，通过new关键字创建对象的过程称为对象实例化

6.3new关键字执行过程

1.new构造函数可以在内存中创建一个新的空的对象
2.this就会指向刚才创建的空对象
3.执行构造函数里面的代码，并且给这个新对象添加属性和方法
4.返回这个新对象（故构造函数里面不需return）

6.4遍历对象

for…in语句用于对数组或者对象的属性进行循环操作
for (变量 in 对象){ }

• 若直接用变量（k）输出，则得到的是属性名；若用对象名[变量]输出，则得到的是属性值

6.5变量、属性、函数、方法总结

• 变量和属性的相同点：它们都是用来存储数据的
• 变量和属性的不同点：变量是单独声明并赋值的，使用的时候直接写变量名，是单独存在的；属性是在对象里面的，无需声明，使用的时候必须是 对象.属性
• 函数和方法的相同点：都是实现某种功能，实现某种事
• 函数和方法的不同点：函数是单独声明，并且调用的 ==函数名（）==单独存在；方法是在对象里面，调用的时候 对象.方法（）

7.内置对象

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

• 内置对象是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是基本而必要的功能（属性和方法）
• JS中提供了多个内置对象：Math、Date、Array、String等

7.1Math对象

Math是一个内置对象，具有数学常数和函数的属性和方法，不是一个函数对象。同时Math不是一个构造函数，所有我们不需要new来调用，而是直接使用里面的属性和方法即可。
console.log(Math.max());

• Math首字母一定要大写
  

• 最大值
  

• 绝对值
  

• 三个取整方法
  

  • 在round中0.5这个数特殊，一般不论正负，往数更大的那个数取

• 随机数 random
  Math.random()

  • 返回的参数(但无需跟参数)是一个浮点数（0=<x<1）
  • 得到一个两数之间的随机整数
    return Math.floor(Math.random()*(max-min))+min;
  • 得到两个数之间的随机整数，并且包含这两个数
    return Math.floor(Math.random()*(max-min+1))+min;

7.2日期对象

Date用来处理日期和时间；需要构造函数，必须使用new来调用创建日期对象
1.使用Date：如果没有参数，则会返回当前系统的当前时间

2.参数常用的写法：数字型 2019，10，01 字符串型 ’2019-10-1 8：8：8‘
3.日期格式化

• 月份是从0~11开始，故一般得到的月份会小一个月
• 星期的星期天是0
• 时分秒中，达到个位数显示两位数的效果
  h=h<10?'0'+h:h;
  4.获取日期的总的毫秒数
• Date对象是基于1970年1月1日（世界标准时间）起的毫秒数

  • 通过valueOf()和getTime()
    

  • 简便写法
    

  • H5新增方法
    console.log(Date.now());
    5.案例：倒计时
    

7.3数组对象

1.数组对象的创建

• 字面量方式
  var arr=[];
• new Array()
  var arr1 = new Array(数字);此处的数字表示数组有多少元素（长度）
  var arr1 = new Array(数字，数字);此处两数字表示两个数字元素
  2.检测是否为数组
• instanceof运算符：true或者false
• Array.isArray(参数)：true或者false
  

3.添加删除数组元素方法

• push在末尾给数组追加新的元素；数组名称.push（数组元素）;push完毕后，返回的结果是新数组的长度；原数组也会发生变化

• unshift在开头给数组添加新的元素；数组名称.unshift(数组元素)；unshift完毕后，返回的结果是新数组的长度；原数组也会发生变化

• pop()在末尾删除数组元素（一次只能一个）；数组名称.pop（）；pop完毕之后，返回的结果是删除的元素；原数组也会发生变化
  +shift ()在开头删除数组元素（一次只能一个）；数组名称.shift（）；shift完毕之后，返回的结果是删除的元素；原数组也会发生变化
  4.数组排序
  

• 翻转数组 数组名.reverse（）；

• 冒泡排序（个位数） 数组名.sort（）；

• 冒泡排序（多位数）

5.数组索引

• indexOf(数组元素) 作用就是返回该数组元素的索引号（从前往后）
• 只返回第一个（从前往后）满足条件的索引号
• lastIndexOf(数组元素)
• 只返回第一个（从后往前）满足条件的索引号
  6.案例：数组去重
  

7.数组转换为字符串

• toString() 将数组转换为字符串
  var arr = [1,2,3]; console.log(arr.toString());
• join（分隔符）
  var arr1 = ['green','blue','pink']; console.log(arr1.join());//green,blue,pink
  8.数组对象中的其他函数
  

7.4字符串对象

1.基本包装类型就是把简单数据类型包装成为复杂数据类型，这样简单基本类型就有了属性和方法
var str = 'andy'; console.log(str.length);

2.字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间（不是内容改变，而是新开辟空间储存了内容，然后变量指向那个内容，原有内容仍在空间内）
3.根据字符返回位置
字符串的所有方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

• 若要跳过某个，自定义初始位置==str.indexOf（‘要查找的字符’，[起始的位置]）==即str.indexOf(‘春’,3)//是索引号从第四个元素的位置往后开始查找
  4.案例：查找字符串“abcoefoxyxzzopp”中所有o出现的位置和次数
  

5.根据位置返回字符

• charAt(index) 根据位置返回字符

• charCodeAt(index) 返回相应索引号的字符ASCⅡ值 目的：判断用户按下了哪个键

• str[index]
  6.字符串操作方法
  

• substr（‘截取的起始位置’、‘截取几个字符’）
  console.log(str1.substr(2,2));//第一个2是索引号的2，是从第几个开始；第二个2，是取几个字符

• replace（‘被替换的字符’，‘替换为的字符’）
  console.log(str.replace('a','b'));//将a替换为b;只会替换第一个字符

• 若想替换全部字符（利用循环）
  

7.转换大小写

• toUpperCase() //转换大写
• toLowerCase() //转换小写