#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】

目录

一,表达式和语句

        1.1,表达式和语句区别:

        1.2,程序三大流程控制语句(案例代过)

二,数组

       2.1,声明数组

    2.2,数组求和

2.3,数组求最大值和最小值

2.4,数组的操作(crud ,增删查改) 

2.5,数组的筛选

2.6,数组去0案例

  2.7,综合案例(略)

  2.8,数组实现排序(冒泡排序)

三,函数

3.1,函数的声明,封装,调用

3.2,函数的返回值

3.3,函数细节补充

​编辑

3.4,函数的作用域

​编辑

3.5,作用域变量补充(注意)

3.5.1,补充一:

3.5.2,补充二:

3.5.3,补充三:

3.6,匿名函数

 Webapis 会使用

3.7,立即执行函数

3.8,小案例 

3.9,逻辑中断 

 五,面向对象编程

5.1,对象是什么以及它的特点:

5.2,对象的声明方法

5.3,对象的组成

5.4,对象的操作 增删改查(Crud)

5.4.1, 查的另外一种方法

5.5,方法:

5.6,重点 遍历对象(for  in 语法)

5.7,遍历数组对象

5.8,渲染

 根据数据渲染成表格(略)

5.9,内置对象

5.9.1, 内置对象--生成任意随机数

5.9.2,随机生成颜色

5.10,拓展不同数据类型的储存的方式不同(堆 和 栈)

5.10.1,简单数据类型和复杂数据类型举例


                                                  js基础完结篇 


一,表达式和语句

        1.1,表达式和语句区别:

                 表达式:因为表达式可被求值,所以它可以写在赋值句的右侧

                 语句:而语句不一定有值,所以比如alert() for 和 break 等语句就不能被用于赋值

        1.2,程序三大流程控制语句(案例代过)

案例演示:

语句综合案例





  
  
  Document



  


for循环打印数组:

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第1张图片

补充无限for循环  for(;;)

二,数组

       2.1,声明数组





  
  
  Document



  


    2.2,数组求和

需求:求数组[2,6,1,7,4]里面所有元素的以及平均值





  
  
  Document



  


2.3,数组求最大值和最小值

需求:求数组[2,6,1,77,52,25,7]里面所有元素的最大值以及最小值





  
  
  Document



  






  
  
  Document



  


2.4,数组的操作(crud ,增删查改) 

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第2张图片

文档查具体细节 , MDA文档 

 删除补充

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第3张图片

2.5,数组的筛选

需求:将数组[2,0,6,1,77,0,52,0,25,7] 中大于10的元素选出来,放入新数组





  
  
  Document



  


2.6,数组去0案例

 需求:将数组[2,0,6,1,77,0,52,0,25,7] 中的零去掉





  
  
  Document



  


  2.7,综合案例(略)

  2.8,数组实现排序(冒泡排序)





  
  
  Document



  


三,函数

3.1,函数的声明,封装,调用





  
  
  Document



  


函数命名与变量命名规范相同 

3.2,函数的返回值





  
  
  Document



  


    打断点的位置

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第4张图片                                    

点击行数就可以打断点了

3.3,函数细节补充

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第5张图片

3.4,函数的作用域

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第6张图片





  
  
  Document



  


#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第7张图片

3.5,作用域变量补充(注意

3.5.1,补充一:

如果函数内部,变量没有声明,直接赋值,也可以当全局变量看,但不推荐使用





  
  
  Document



  


3.5.2,补充二:

           不同作用域下变量名相同并不冲突





  
  
  Document



  


       函数内打印的内容为bestwishesn    外部打印的内容是hello  world

3.5.3,补充三:

每当声明一个函数就会产生新的作用域





  
  
  Document



  


                 变量访问原则,先从当前作用域查找如果没有就向外一步一步查找(就近原则)

3.6,匿名函数

 Webapis 会使用





  
  
  Document



  


                                               


                                                 匿名函数必须先声明后调用


3.7,立即执行函数

避免变量污染问题

声明方法:

  • 第一种声明方法
  
  • 第二种声明方法(推荐)
  

使用: 





  
  
  Document



  


                省略调用的步骤,避免与用户变量名冲突

3.8,小案例 

秒数转换案例

  



  
  
  Document



  


3.9,逻辑中断 





  
  
  Document



  


#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第8张图片

 五,面向对象编程

5.1,对象是什么以及它的特点:

  • 对象(object):JavaScript中的一种数据类型,是数据的集合
  • 对象是无序的

5.2,对象的声明方法

  

5.3,对象的组成

  • 属性:特征(名词)
  • 方法:行为(动词)
  

                在对象外面的叫变量 在对象里面的叫属性

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第9张图片





  
  
  Document



  


对象属性没有顺序

属性和值用冒号隔开(英文格式)

属性与属性用逗号隔开(英文格式)

5.4,对象的操作 增删改查(Crud)

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第10张图片





  
  
  Document



  


5.4.1, 查的另外一种方法

  

                                          属性名一点要加‘’

5.5,方法:





  
  
  Document



  


5.6,重点 遍历对象(for  in 语法)

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第11张图片

返回的是字符串类型





  
  
  Document



  


5.7,遍历数组对象

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第12张图片





  
  
  Document



  


5.8,渲染

 根据数据渲染成表格(略)

    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '西安' },
      { name: '小黑', age: 19, gender: '男', hometown: '北京' },
      { name: '小栏', age: 20, gender: '女', hometown: '重庆' },
      { name: '小白', age: 21, gender: '女', hometown: '威海' },
    ]

5.9,内置对象

(Math内置对象)

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第13张图片

                查找内置对象 在MDN 文档中查看

MDNicon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第14张图片

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第15张图片#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第16张图片#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第17张图片

5.9.1, 内置对象--生成任意随机数


 Math.random() 返回0-1之间 [0,1)  ---->小数


  

随机生成0-10之间的数  Math.floor(Math.random()*(10+1))


  

随机生成N-M的随机数函数 


    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }

随机点名案例 自己写






  
  
  Document



  



   去除抽奖过的人,数组的删除方法pop 删除最后一个元素,shift删除第一个元素,splice(起始位置(下标),删除几个元素)






  
  
  Document



  


5.9.2,随机生成颜色


                                                                     视频演示


随机颜色实现


                                                              具体代码如下






  
  
  Document
  



  

5.10,拓展不同数据类型的储存的方式不同(堆 和 栈)

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第18张图片

值类型和引用类型 

5.10.1,简单数据类型和复杂数据类型举例

思考:

  

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第19张图片

 引用数据类型

  

#JavaScript(基础入门保姆级教程)【初级02(基础完结篇)】_第20张图片

简单数据类型的值储存在栈中,引用数据类型的值储存在堆中

你可能感兴趣的:(javascript,开发语言,ecmascript)