js总结之ECMAScript

ECMAScript

ECMAScript 是一种标准式定义语法规范
JavaScript 是es的实现，包含es和DOM和BOM、事件等

JS是脚本语言，解释型语言（不需要编译），弱类型语言

命名规范：驼峰命名法（大/小）///GetMsg getMsg

所有的变量相当于给window对象设置属性

ECMA

1、网页引入js的方式

<script src=""></script>

内部js

<script>......代码</script>

2、定义变量

变量：存储信息的容器

var 变量名[=值]

例如：

var a;

var b=100;

var c=2,d='hello world',f='haa';

3、命名的规范

以字母开头，不能包含中文，不能以数字开头，也可以以$或者_开头，不推荐，对大小写敏感，不能使用关键词和保留字(this,var,top,window,break…)

4、数据类型

基本数据类型

• 字符串 string
• 数字 number（弱类型）
• 布尔值 boolean（多用作判断，有两个值true/false）
• undefined undefined（未定义 声明变量未赋值，没有初始化值）
• null(空值空对象） object（目的：未来是一个对象，目前定义时（初始化时）占位）

引用数据类型（数组/对象/函数…）

• object
  例如

var obj2 = {
            name: '张三',
            age: 20,
            isDie: fales,
            eat: function () {
                console.log('张三');
            }
        }
        console.log(obj2.name);//获取属性
        obj2.eat()
        obj2.age = 22//设置属性

注意:
数据类型赋值
基本数据类型：数值覆盖
复合数据类型：引用地址
https://www.cnblogs.com/c2016c/articles/9328725.html

5、输入输出调试方法

alert('1234')//弹出对话框

var inp=prompt('输入框，请输入内容')
alert(inp)//确定是返回输入的内容，取消按钮返回null

confirm('确定框')
var inp=confirm('')
alert(inp)//确认返回ture，取消返回false

var a=10
document.write(a)//在HTML页面输出

6、运算符

• 算数运算符+ - * / %（求模运算符） ++（自增） --（自减）

 var a=10,b=20,c='5'
 console.log(a+b);30//两边都是数字时，进行加法运算
 console.log(a+c);105//字符串拼接
 console.log(5+a+c);//155   5+10+'5'
 console.log(c+a+5);//'5'+10+5==>'510'+5==>'5105'
 console.log(1+true);//2
 console.log(1+null);//1
 console.log(1+undefined);//NaN
 console.log(a-b);
 console.log(a-c);5//自动隐式转换

• ++：

 var a=10  
 console.log(a++);//10

 var a=5,b=6
 a=b++//先用后加，先把b的值给a,b在加一
 console.log(a)//6
 console.log(b)//7

• 一元运算符 + - ++ – 具备隐式转换功能

 var a='20'
 var b=-20
 console.log(-b);//20
 console.log(+a);//20  number  转换为数字的功能
 a++
 console.log(a);//21

• 逻辑运算符 &&与 ||或 !非
• 关系运算符 > < >= <= ==
• 全等比较 （返回一个布尔值） != !== ===

  var a=10,b='10',c=20
  console.log(a>=b);//true  会隐式转换(只比较数值，不比较类型）
  console.log(a===b);//false 全比较

特例：

  console.log(0==false);//true
  console.log(0===false);//false
  console.log(null==0);//false
  console.log(null==false);//false
  console.log(null==undefined);//true
  console.log(null===undefined);//false
  console.log(null==null);//true
  console.log(undefined==undefined);//true
  console.log(0==undefined);//false
  console.log(false==undefined);//false
  console.log(NaN==NaN);//false   NaN不等于任何值

• 赋值运算符 = += -= *= /= %=

• 条件运算符 三目运算（ 三元运算符） 条件？语句1：语句2

  例：

  var score=prompt('输入成绩')
  score>60?alert('及格了'):alert('下次努力')

7、数据类型转换

(1)强制数据类型转换

• 转成整形数字（parseInt)

  转换规则 :看第一位是否是一个数字，如果是就提取，碰到不是数字（包括小数点）的就丢弃，如果第一位不是一个数字，就直接抛出NaN(not a number)//nan的数据类型式number

 var num=prompt('请输入值')
 console.log(num,typeof num);
 num=parseInt(num)
 console.log(num,typeof num);

• 转成浮点型数字（parseFloat)

  转换规则 : 和上一个一样，只是可以保留小数点

  var num=prompt('请输入值')
  console.log(num,typeof num);
  num=parseFloat(num)
  console.log(num,typeof num);

• 转成数字（Number()）

  转换规则 : 看整体是否是全部式数字，可以包含小数点，如果有一个不是，直接NaN

Number 特例
   console.log(Number(null));//0
   console.log(Number(false));//0
   console.log(Number(true));//1
   console.log(parseInt());//NaN；
   console.log(Number());//0
   console.log(Number(''));//0
   console.log(Number(undefined));//NaN

• 转换成字符（String)

  Boolean 转换成布尔值，0 null nan undefined ‘’ (空引号)的值为false

(2)隐式数据类型转换

• 隐式类型转换

8、分支选择结构

• 单分支选择结构

   语句：if(条件){条件满足执行}
  

• 双分支选择结构

   语句：if(条件){条件满足执行}else{条件不满足执行}
  

• 多分支选择结构

   if(条件1){条件1满足执行}else if(条件2){条件2满足执行}....else{以上条件都不满足执行}
  

• switch

   语法：switch(变量）{
             case 值1：语句；break;
             case 值2：语句；break;
             case 值3：语句；break;
             case 值4：语句；break;
             default:默认语句；
                              }
     break  跳出语句  结束当前判断语句
     continue  跳过当前一次循环
  

9、循环语句

• while循环:先验证再循环
  a.初始化变量 循环计数
  b.条件
  c.计数的改变

• for循环：先验证再循环

for(表达式1；条件；计数){满足则执行}

 例：for (var day = 0; day <= 9; day++) {
            document.write('这是' + day + '天<br>')
        }

• do while：先循环再验证

 例：var day = 104
        do {
            document.write('第' + day + '天')
        }
        while (day < 10)

10、跳出循环

• break：跳出循环
• continue：跳过当前一次

11、函数声明与表达式

• 函数：是一个可以反复调用的代码块

• 函数的作用：封装和重用

• 关键词 function

• 定义函数

 （1)函数声明   （具名函数）
 function 函数名(){...要执行的代码块}

  (2)函数表达式   （匿名函数）       
 var 变量名=function(){...要执行的代码块}

12、调用函数

• 函数声明的调用形式：任何位置被调用
  任何位置：同级作用域（函数声明会提升，JS会先把函数搜集起来;父级作用域中定义，子作用域中调用

    function show(){}
    show()//调用   

    show()//调用
    function show(){}

• 函数表达式的调用：按顺序调用（变量提升，JS会先把变量搜集起来）

   var 变量名=function(){}
         变量名()  //调用

• 全局作用域的函数可以在任何位置被调用

   function show(){}
   function fn(){show()}
   fn()//调用

• 函数可以在自己你把调用自己–>递归函数

• 事件调用

   <button onclick="clikme()">...<button>
   <script>
         function clikme(){}
   </script>

注意：
js 会预解析 ，提前搜集所有的变量 ，变量提升到最顶部

 console.log(a);//underfined
    var a=10

 show() //错误，变量提升，show是一个变量，不是一个函数
 var show=function(){}

函数声明也一样存在提升，叫做函数声明提升
函数声明提升比变量提升优先级高
优先级：函数>变量>参数

13、函数参数

• 形参：函数声明时定义的参数，相当于定义变量

• 实参：函数调用时的参数，相当于给参数赋值（实参多余形参对函数不会有任何影响）

• 参数与变量的关系

 function show() {
        a = 10//在函数内部如果没有参数、没有var的情况  是设置全局变量 不推荐
    }
    show()
    console.log(a);//10

 function show(a) {
        console.log(a);//5
        a = 20//修改参数的值
        console.log(a);//20
    }
    show(5)
    console.log(a);//未被定义

function show(a) {
        //变量和参数同名，执行参数，因为变量提升的优先级低于参数
        console.log(a);//5
        var a = 20
        console.log(a);//20
    }
    show(5)

var a = 10
        function show() {
            b = 20//函数内部不使用var，操作变量相当于操作全局变量
                //(如果是var b = 20，就是局部变量，下面的console.log(b); 就不能访问）
        }
        show()
        console.log(a);//10
        console.log(b);//20

• arguments ：
  不声明形参是，再函数内部用来接收所有的实参
  应用在函数的重载
  类似数组的东西，具备数组的长度和下标，没有数组的方法

function show() {
        console.log(arguments);
    }
    show(1, 2, 3, 4)//Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

14、函数的返回值

  function show() {
        console.log('111'); return 5
    }
     console.log( show() )  

每一次函数调用拿的都是返回值

 var result=show()//reture拿的是show函数的返回值

每个函数都有返回值，没有显示声明的，返回值为undefined

• return 后没有值时，返回值是undefined

• return 后的语句不执行，相当于结束函数

 function show() {
        return 2
        console.log(4)
    }
    var fn = show()//2
    console.log(fn)//2

• 返回多个值

  可以用对象或数组表示，对象 return {a:4,b:2}
  不可以 return 4,2//只返回2，返回逗号右边

15、设置函数的默认参数

• 三元运算符

 function sum(a, b) {
            a = a ? a : 0   b = b ? b : 0 //判断b是否为真值，不是的话就为0                         
            console.log(a + b);
        }
        sum(1, 2)
        sum(1)
        sum()

• 短路运算符
  || ：找真，找到就返回，如果所有都是假，则返回最后一个
  &&：找假，找到假就返会这个假值，否则。则返回最后一位

 console.log(1 && 2 && 0)//0
    function show(a, b) {
        a = a || 0
    }

• ES6

 function show(a=0,b=0){console.log(a+b}

16、函数重载

js函数没有函数重载，同名函数会被覆盖。但是可以通过arguments来实现

17、作用域

• 全局作用域 script标签的第一级 全局变量
• 局部作用域（函数作用域）：只在函数内部或子级
• 注
  js没有块级作用域

18、函数注释

函数可以被当作参数（回调函数），或者被当作函数的返回值（闭包）