js基础5day

Javascript基础

第一天

1. 变量

• 作用

  • 程序中保存数据

• 使用

  • 1. 定义 let 自定义变量名
  • 2. 赋值 变量名 = 值

• 注意事项

  • 1. 变量命名规范
    • 1. 不能以数字开头
    • 2. 变量名中不能出现空格
    • 6. 不能使用汉字
    • 3. 不能以关键字作为变量
    • 4. 不能以保留字作为变量
  • 2. 同一个变量名不能重复定义
  • 3. 赋值的时候,先执行赋值运算符右侧的代码
  • 4. 同一个变量一次只能保存一个值
  • 5. 必须先定义变量再使用

2. 输出和输入消息

• 输出消息

  • console.log(信息)

  • alert(信息)

  • document.write(信息)

    • 1. 输出的信息都在body标签
    • 2. 可以在网页中输出html标签

• 输入消息

  • prompt(信息)

    • 返回字符串

  • confirm(信息)

    • 返回布尔

3. 书写位置

• 内嵌式

  • 在html页面中通过script标签设置的js代码

  • 特点

    • 在html页面中任何一个位置都可以

• 外联式

  • 通过script标签的src引入js文件

  • 特点

    • 在html页面中的任何一个位置都可以引入
    • 内嵌式和外联式写法不能嵌套

• 行内式

  • 将代码写到标签内部

4. 组成

• 基础语法 (ECMASCRIPT)
• DOM操作 (网页)
• BOM 操作

5. js中代码基本规则

• 1. js中区分字母大小写
• 2. 只有变量不需要加引号
• 3. 除了变量之外,遇到汉字或者字母都设置引号

6. 数据类型

• 简单类型

  • 数字类型

    • 变量的值无引号的纯数字和NaN

  • 字符串类型

    • 变量的值带有引号

  • 布尔类型

    • 变量的值不带引号且为true和false

  • undefined类型

• 复杂类型

  • 数组

  • 对象

    • nulll是对象

  • 函数

7. 数据类型转换

• 转数字类型

  • Number()

    • 非小数

      • 有字符串是not a number 即NaN

  • parseInt()

    • 只会保留整数部分，小数点后面的会被忽略

  • parseFloat()

    • 非小数

      • 小数部分

• 转字符串类型

  • String(变量)

    • 任何的一种数据类型转换为字符串类型

  • 变量.toStrng()

    • undefined 不能转换为字符

8. 获取数据类型

• typeof 变量

9. 数组

• 作用

  • 保存多条数据

• 定义数组

  • let 数组名 = []

• 数组赋值

  • let 数组名 = [值, 值, 值]
  • 通过索引赋值 数组名[索引] = 值

• 索引

  • 数组中每一个值对应的编号
  • 索引是从 0 开始的

第二天

显式转换

• 编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

  • 通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

隐式转换

• 某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。+

算数运算符

• • • / % （）

• 在js计算过程中，如果需要加（）如果需要设置多个（）时候可以嵌套使用
• 算数运算符特点：
• 1. 程序中遇到-*/%时候。变量会发生隐式类型转换（变量自己偷偷的将自己的数据类型改变）----隐式转换
• 2. 在程序中通过自己实现的数据类型转换是（强制类型转化）----显示类型转换
• 3. 当程序中出现字符串相加的时候，加号就是一个字符串拼接的作用，也可以做隐式类型转换
• 华氏度=9/5*摄氏度+32

赋值运算符

• = 赋值
• += a+=b ===> a=a+b
• -= a-=b ===>a=a-b
• = a=b ===>a=ab
• /= a/=b===>a=a/b
• %= a%=b===>a=a%b

比较运算符

在程序中来比较

• <
• ＞= 或的关系
• < = 或的关系
• == 等于会发生隐式类型转换 （忽略数据类型，直接比较的是值）
• === 全等于在比较的时候同时要比较数据类型和值
• !=
• !==

逻辑运算符

• 连接多个比较运算符，程序中出现多个条件通过逻辑运算符连接

  • && 且 与 只要有一个结果为false最后结果为false，全部都为true结果为true 一假则假
  • || 或 符号两边有一个true就为true 一真则真
  • ！ 非 true变false false变true 真变假，假变真

• 逻辑运算短路

  • 通过左边能得到整个式子的结果，因此没必要再判断右边

  •    运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
    

  • && 左边为false就短路
  • || 左边为true就短路

一元运算符

• 在循环语句中会使用一元运算， 经常用于计数来使用。

  • 两方式

    • ++

      • a++和++a

        • ++运算是在变量原来值的基础上加一，--运算是在变量原来值的基础上减一

        • 前置自增和后置自增单独使用没有区别

        • 如果在参与运算有赋值的时候有区别，赋值的值

          • 前置自增：先自加再使用（记忆口诀：++在前 先加 ）先计算再赋值

          •  后置自增：先使用再自加（记忆口诀：++在后 后加）   先赋值再计算
            

    ---

      - 同++
    

分支语句

• if分支语句
  if （条件）

  • 单分支

    • 单条件判断中出现一个条件

      • 分支语句：根据程序中的实际问题分析得到一个条件语句，js代码根据不同的条件是实现不同的功能，让我们有选择的执行代码js从上到下依次执行。括号内的条件为true时，进入大括号里执行代码。小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型判断条件的结果是够成立（true或者false），成立只执行if后大括号的js代码，后面不执行，为false只执行else的代码，前面的if的代码不执行

  • 多分支

    • if（条件1）{执行代码1}
      else if（条件2）{执行代码2}
      ……

      • 先判断条件1，若满足条件1就执行代码1，其他不执行
      • Ø若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
      • Ø若依然不满足继续往下判断，依次类推
      • Ø若以上条件都不满足，执行else里的代码n
      • Ø注：可以写N个条件，但这里演示只写2个
      • xxxx is not defined表示xx变量未定义

• switch语句

  • 程序中变量的值是某些固定的值

    • switch （数据）{case 值1：
      代码
      break；
      case 值2：
      代码
      break;
      ……}

      • • 先获取变量的值，使用变量的值和case后面的值进行相等比较，如果变量的值等于多少就执行对应的case中的代码，不相等就继续向下判断，都不相等执行default中的代码（js执行从上到下）
      • • 代码相同把case1：case2：case3：，break， 简写
      • • case的语句和break后跟分号
      • • case的break不能省略，default的break可以省略
      • • switch的变量和case的值数据类型要保持统一（重要），switch的变量实质是布尔值
      • 找到跟小括号里数据全等的case值，并执行里面对应的代码若没有全等 === 的则执行default里的代码
      • switch case语句一般用于等值判断,不适合于区间判断 switch case一般需要配合break关键字使用 没有break会造成case穿透

循环while

• 反复执行的过程

第三天

三元运算符

• 条件？满足条件执行的代码：不满足条件执行的代码

循环

• while

  • 当循环次数不确定的时候

  • 语法

    • 初始化变量; while(条件) {}

• for

  • 当循环次数确定的时候

    • for(初始化变量; 条件; 自增) {}

• 相同点条件只要成立,就执行循环体中的代码, 否则不执行

遍历数组

• 通过循环的方式获取数组中的每一个值

• 长度

  • 数组名.length

• 语法

  • for(let i = 0; i < 数组名.length; i++)

操作数组

• 数组名.push从数组的末尾添加
• 数组名.unshift从数组的开始添加
• 数组名.pop删除数组最后一个
• 数组名.shift删除数组开头

第四天

函数

• 可以实现代码复用，提高开发效率

• function，是被设计为执行特定任务的代码块

• 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

• 注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数，默认不执行

• 函数名命名规范
  和变量命名基本一致
  尽量小驼峰式命名法
  前缀应该为动词
  命名建议：常用动词约定

• 子主题 6

• 子主题 15

• 函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

• 函数是用那个关键字声明的？
  function
  函数不调用会执行吗？如何调用函数？
  函数不调用自己不执行
  调用方式: 函数名()
  函数的复用代码和循环重复代码有什么不同？
  循环代码写完即执行，不能很方便控制执行位置
  随时调用，随时执行，可重复调用

• 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
  实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
  形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
  开发中尽量保持形参和实参个数一致
  我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参

• 函数传递参数的好处是？
  可以极大的提高了函数的灵活性
  函数参数可以分为那两类？怎么判断他们是那种参数？
  函数可以分为形参和实参
  函数声明时，小括号里面的是形参，形式上的参数/定义函数是，函数名后面（）中的变量
  在函数的形参本质是一个变量不用let
  函数调用时，小括号里面的是实参，实际的参数
  尽量保持形参和实参的个数一致
  参数中间用什么符号隔开？
  逗号

• 形参和实参之间的关系

  • 一一对应

    • 尽量数量对应

      • 形参>实参

        • undefined

    • 赋值对应

      • 按照顺序

• 断点打到函数调用处

• 函数返回值

  • 函数不一定需要返回值，但是如果要在外部使用函数内部变量的值，则必须通过返回值，实现在函数外部使用函数内部变量的值

  • 函数内部定义的变量不能在函数外部直接使用

  • 设置返回值

    • 在函数内部将需要在函数外部使用的值作为返回值： return 值

  • 需要在函数外部接收函数内部的返回值：let 变量=函数名()
    函数调用是把函数内部的返回值返回给变量

• 用return关键字
  语法
  解说函数的返回值

  • 一个函数只能设置一个return，因为当程序执行return后后面的代码就不执行了，如果想要得到多个值的话可以返回一个数组的格式
  • 如果没有设置函数的return返回值，用变量接收了函数调用，那相当于变量为赋值就是undefined
  • 自定义返回值的时候考虑返回值的类型和结果多方面考虑

冒泡排序

• 数据按照一定的顺序（规则）排列显示

  • 升序
  • 降序

• 本质：对数组中的值按照一定规律从大到小或从小到大排序

• 实现

  • 准备数组
  • 遍历数组
  • ary[i]和ary[i+1]
  • 交换量个变量的值用新变量
  • 确定要比较多少次，每次中对数组相邻的俩个值比较大小交换位置
  • 趟数=总个数减一
  • j<=ary.length-i-1(好理解但是不常用一般都是j<ary.length-i)
  • 子主题 8

第五天

对象

• 自定义对象

  • 自己定义的对象

    • 对象JavaScript里的一种数据类型
      是一个容器一种无序的数据集合

    • 保存数据

      • 变量，一个变量只能保存一个数据
      • 数组 可以保存多条数据
      • 对象可以保存多条数据且数据都是有具体指向的

    • 输出整个对象时候要用console.log打印

    • 基本使用

      • 定义对象字面量

        • let 变量={}

        • 对象赋值：在对象中是通过键值对
          属性（键）：值，
          属性：信息或叫特征（名词）
          方法：功能或叫行为（动词

          • 如果对象中有多个键值对之间用逗号，隔开

    • 总结1

      • 程序的数据中需要一个明确的指向，

      • 通过字面量定义

        • 直接在对象内通过键值对的形式赋值
          键（属性）：值，逗号分隔多个键值对

          • 键是完全自定义也是变量

          • 键值可以是任何一种数据类型

            • 在对象值中的函数是不用函数名的

      • 对象中键的值是一个函数就是对象的方法，其他是属性

    • 获取属性和方法

      • 对象.属性

      • 对象.方法名（）

        • 如果函数的方法没有返回值，调用对象的方法的输出结果是undefined，所以要在函数内写return返回值，本质是要把对象的方法赋值变量方法就是一个变量名
        • 方法本质就是一个函数，（）调用
          不加（）就是输出整个函数没有执行

      • 对象名['属性名']

      • 对象名['方法名']（）

    • 对象的其他操作

      • 通过点或者[]的形式给对象赋值

        • 对象.自定义属性=值
        • 如果对象中已经有该属性和方法就是修改的意思

    • 一共三种
      直接在对象内写
      点的形式
      [] 的形式

    • 对象的赋值和取值总结

      • 定义对象

      • 对象赋值

        • 直接在对象中以键值对的方式赋值
        • 对象.属性=值
          对象.方法=值
        • 对象['属性']=值
          对象['方法']=function(){}

      • 对象取值

        • 对象.属性
          对象[’属性‘]
        • 对象.方法（）
          对象['方法']（）

    • 遍历对象

      • 遍历对象通过循环的方式将对象的值取出

      • 对象没有像数组一样的length属性,所以无法确定长度对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

      • 键本质就是一个变量该变量中保存的就是对象中的每一个键let k

      • in后跟要被遍历的对象

      • 一般不用这种方式遍历数组、主要是用来遍历对象
        一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

      • 遍历完对象存储到数组如果有删除此数组的索引号用splice

• 内置对象

  • js本身自己内部就封装好的对象

    • Math

      • 提供了数学计算的属性和方法

        • Math.PI

          • 圆周率

        • Math.abs()

          • 绝对值

        • Math.ceil（）

          • 如果本身就是一个整数结果还是本身，如果是小数结果是大于或等于一个给定数字的最小的整数负数一样 向上取整

        • Math.floor()

          • 如果本身就是一个整数结果还是本身，如果是小数结果是取小于或者等于一个给定数字的整数向下取整

        • Math.max（）

          • 返回一组数据的最大值

        • Math.min（）

          • 返回一组数据的最小值

        • Math.pow（x，y）
          x的y次方

          • 幂运算

        • Math.random

          • 随机返回一个浮点数0~1包含0不包含1
            [0,1)

        • 随机整数
          随机点名

          • Math.floor(Math.random() * (M最大值 - N 最小值+ 1)) + N最小值

• 短路运算

  • 或短路运算返回后面的值
  • 与短路运算返回当前的值

堆和栈

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

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

string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈空间分配区别：

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

l 值类型（简单数据类型）： string ，number，boolean，undefined，null

l 值类型变量的数据直接存放在变量（栈空间）中

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面

l 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

l 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中