JavaScript入门学习 第一周学习小结

Day01 变量

---

变量

• 定义变量及赋值：

// 定义一个变量
var score
 
// 给一个变量赋值
score = 100
 
//访问变量
console.log(score)

变量的命名规则和命名规范

• 1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成

  2. 严格区分大小写

  3. 不能由数字开头，不要使用中文汉字命名

  4. 不能是 保留字 或者 关键字

  5. 不要出现空格

• 1. 语义化

  2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

数据类型

数值类型（number）

• 所有数字，包括小数

• 特殊数字类型：NaN（not a number），非数字值

字符串类型（string）

• 被引号引起来的（可以是单引号也可以是双引号）

布尔类型（boolean）

• 只有两个（true 或者 false）

null类型（null）

• 值为 null，空类型为object

undefined类型（undefined）

• 只有一个，就是 undefined，表示没有值的意思

判断数据类型

使用 typeof 变量  或者 typeof(变量) 关键字来进行判断

判断一个变量是否为数字

语法：isNaN(变量)       是数字为true，不是为false

 数据类型转换 

其他数据类型转成数值

1. Number(变量)

2. parseInt(变量)

3. parseFloat(变量)

 其他数据类型转成字符串

变量.toString()

• 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

String(变量)

• 所有数据类型都可以  

连接符/加号运算

运算符

Day2  逻辑分支 

---

 程序 = 程序语句 + 数据结构 + 算法

 if语句

 if (条件) { 要执行的代码 }

if - else 语句

 if (条件) {
     条件为 true 的时候执行 
    } else { 条件为 false 的时候执行 }

if语句嵌套

if(条件){ 
    语句块1 
    if(条件2){
        语句块2
    }
}

if - else if 语句

if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }

if - else if - else 语句

if (条件1) {
  alert('我是代码段1')
} else if (条件2) {
  alert('我是代码段2')
} else {
  alert('我是代码段3')
}//条件1  2都不成立执行最后else

SWITCH多分支语句 

switch (表达式值) {
  case 值1:
      语句块1
      [break]  //终止符号
  case 值2:
      语句块2
  case 值3:
      语句块3
  default:
      语句块
}

三元运算符 

• 两个符号 组成的语句

• if-else 语句的简写形式

• 条件 ?   语句1 ： 语句2   //只能写一条语句，不能是语句块

单步调试 

• 找程序bug的一种方式
• 让程序语句一条一条执行，观察程序语句执行输出情况

 Day03循环结构

---

 循环结构语句：while、do-while、for

 while语句

语法： 

var num = 初始值   //初始值
while(条件表达式){ //先判断条件，再决定是否执行       
     //循环体      //循环体要有能改变条件的语句
}

• 三要素：初始值、条件、改变条件语句 
• 先判断条件，再决定是否执行 
• 循环体一定要有改变条件的语句，否则会成为死循环！！
   

do-while语句

语法：

        var n = 0
        do{
            console.log('do-while',n)
            n++     //改变条件的语句
        }while(n<5);
        console.log(n)

for循环语句

语法：

for(初始化;条件;改变条件){
    //循环体
}

 for循环嵌套

//for循环嵌套if
for(var i = 1 ; i <= 100 ; i++){
    var num = i   //循环获取100内的数
    if(num % 4 == 0){
        cosole.log(num)  //获取能被4整除的数
    }
}

双重for循环 

•  for循环里面嵌套for循环，即双重for循环
• 循环的嵌套： 外层循环循环一次，内层循环要全部执行

  **打印图形编程思想：

          双重for循环，外层循环打印行数，内层循环打印列数

          关键点：计算每行打印多少个元素，根据外层循环变量确定

/*打印
    *
   ***
  *****
 *******
*********    */
var n = 5
for(var i = 1 ; i<= n ; i++){
    for(var j = 1 ; j <= n-i ; j++){
        document.write('&nbsp;')   //打印空格
    }
    for(var k = 1 ; k <= 2 * i - 1 ; k++){
        document.write('*')   //打印*
    }
    document.write('<br>')//换行
}

跳转语句 

BREAK 终止循环 break

和循环语句一起使用：结束循环，在循环没有进行完毕的时候，提前终止循环

和switch-case一起使用：结束所在的case语句

CONTINUE 结束本次循环 coninue

在循环中，continue后面的代码不执行，跳过本次循环，执行后续循环

 document.write 

• 显示内容到页面

 Day04 函数 上

---

• 作用：将任意功能的代码进行‘封装’
• 目的：复用代码，在需要的时候进行调用
• 语法：

  //声明定义函数
  function 函数名 (){
          封装代码
  }
   
  函数名()  //函数调用语句

  //封装 求两数的最大值的函数
  function getMax(){  //定义名为getMax的函数
      var m = 54
      var n = 67
      var max = m         //函数体 封装在最外层的{}内
      if (n > max){
          max = n
      }
      console.log('最大值是：'+max)
  }
  getMax()   //函数调用

  函数参数 

• 形参：定义函数时在函数名括号中定义的变量称为形参
• 实参：使用函数调用语句，调用函数时，传入的实际参数值
• 语法：

  
  function 函数名(形参1,形参2){
      函数体
  }
  函数名(实参1，实参2)

  参数个数 

  形参多，实参少: 100传给m，n只是声明了这个变量，无值（默认为undefined）

  实参多，形参少：一一对应，多余的实参没有作用

 函数返回值：return语句

中断函数：return

作用：和循环里的break相同，在函数体中，使用return终止函数体代码向下执行

返回值：return 值 

预解析 

• 浏览器JavaScript引擎解析执行JavaScript代码
• 执行JavaScript代码之前，扫描通读JS代码，如果发现声明式函数和var声明的变量，将其提前
• 声明式函数：function 函数名（）{}   预解析成功，var fun = 函数名（）预解析失败
• var声明的变量:  var fun
• 预解析同名情况：声明式函数优先提前 ,如果在最开头将函数赋值，则调用时会报错
• 注：不要出现函数和变量同名的情况

Day05 函数下 

---

作用域

• 什么是作用域：变量起作用的范围
• 全局作用域/全局变量：整个JS都起作用
• 局部作用域/局部变量：作用范围为在函数体内

作用域访问规则 

  先在当前作用域找，若未找到，到上级作用域找，若未找到，接着向上找，直至全局作用域，若全局没有，直接报错为该变量未定义

var num =100     //全局变量/全局作用域
function a(){
    var num1 = 200   //局部变量/局部作用域
    console.log('num1:',num1)  //当前作用域查找，找到赋值
        function b(){
            var num2 = 300   //当前作用域查找，找到赋值300
            console.log('num2:',num)    //全局作用域查找，找到赋值100
            console.log('num1:',num1)  //上级作用域查找，找到赋值200
        }
}
console.log('num:',num)   //打印全局100

递归函数 

• 介绍：函数自身调用自身，称为递归函数
• 注：要有结束递归的条件，不然会变成死递归,要有改变递归条件

递归解决哪些问题？

• 后面结果由前面推导出来，可以采用递归简化实现

 1+2+3=？ 

function f(n){
    if(n == 1){
        return 1   //结束条件
    }
    return f(n-1) + n   //改变条件
}
var sum = f(3)

对象 

面向对象 

现实生活中的对象,对象有自己的特征行为->具体一个事物：张三同学

软件世界的对象->  对象 Object       属性  方法

语法：

        创建对象:对象里存储键/值对

var obj = {}   //创建空对象
var obj = {    //obj称为对象名，也可以叫引用变量 对象里存储键值对
    name:'jack', //姓名属性->属性名 ：属性值
    age:18    //年龄属性->属性名 ：属性值
    sex:'男'   
}
//2.访问属性值
//通过对象名访问对象属性  对象名.属性名 ->属性值
document.write('name：',obj.name)
 
//3.修改属性值
obj.name = 'rose'
document.write('name：',obj.name)
 
 
//4.删除属性
delete obj.name
document.write(obj)
 
 
//5.添加属性
obj.score = 98
document.write(obj)
 
//6.遍历对象 for-in
for(var key in obj){
    //key是属性  key = 'name','age'     obj[key]访问变量key的属性值
   document.write('key',key,'value',obj[key])
}
 
//7.访问属性值，属性名是变量的情况
//通过对象名访问对象属性  对象名.属性名 ->属性值
document.write('name：',obj.name)  //普通情况
document.write(对象名[属性名])   //变量情况
 
var _name = 'name'   //变量情况
document.write(对象名[_name])

练习：创建一个名为Student的学生对象，有各个属性，再添加一个新属性，并通过for-in遍历打印出来 

        var Student ={  //创建一个名为Student的学生对象
            num : 1 ,    //属性名与属性值
            sex : '女' ,
            grade :'璃月',
            score : 98 ,
            name : '申鹤'
        }
        Student.lover = 'me' //添加新属性
        for(var key in Student){
             //key是属性名    Student[key]用于访问属性值value，属性名是变量的情况
            document.write(key,'：',Student[key],' ')  //键值对
        }

复杂数据类型：

• var obj = {name:'jack',age:18} 
• obj 数据类型名 ->Object

 创建对象 new语句

字面量方式：

var obj ={
    name:'jack',
    age:18
}

构造函数方式：

var obj = new Object()  //空对象
obj.name = 'jack',
obj.age = 18

 数组基础Array 

作用：存储一系列有序数据的集合 

语法：

var arr =[] //创建空数组
var arr = [1,1,'jack',true]

var arr =[] //创建空数组
var arr = [1,1,'jack',true]
document.write(arr[0])  //打印第一个 1

数组长度（元素个数）：

• length属性
• arr.length

  //length属性
  //数组名.length
  var arr =[] //创建空数组
  var arr = [1,1,'jack',true]
  document.write(arr.length)

 遍历数组 for： 循环遍历 i  表示数组索引号从 i 开始

var arr =[] //创建空数组
var arr = [1,1,'jack',true]
for(var i = 0; i < arr.length; i++){  //从0开始遍历
    document.write(arr[i])
}

创建数组方式：

• 构造函数：  var arr = new Array() / / 空数组
• 字面量 ： var arr = [ ]  //空数组

  var arr = new Array(1,1,'jack',true)
  for(var i = 0; i < arr.length; i++){  //从0开始遍历
      document.write(arr[i])
  }

 创建数组只有一个元素，表示创建一个空数组长度是5  length为5 

var arr = new Array(5)
document.write('arr.length >>>', arr.length)   //打印结果为：arr.length >>> 5