一文搞定JavaScprit

193 阅读5分钟

JavaScrpit

输入输出与变量

1.介绍
    是什么?JavaScrpit是客户端编程语言(弱类型编程语言) (HTML+CSS标记语言)
    做什么?网页特效,表单验证,数据交互
    组成:ECMAScript+WebAPIS(DOM+BOM)
    运行环境: 浏览器(DOM+BOM+内置对象+XHR)
              Node.js(fs,path,内置对象,其他API)
    书写位置:</body>上方,三种引入方式(同CSS)
    多行注释:shift+alt+A 
​
2.输入与输出
    2.1输入
        prompt()   提示框
        confirm()  确认
    2.2输出
        window.alert("弹窗") //window对象可省略
        document.write('<h1>可以写入标签</h1>')
        console.log('控制台日志打印')
    注:执行顺序alert和prompt会优先执行(window对象的变量提升)
​
3.字面量(只出现在等号右边)
    ''/[]/{键值对1,键值对2,...}/ (){}  字符串/数组/对象/函数(键值对=变量:值)
​
4.变量
    4.1什么是变量?☆☆☆
        变量本质:变量就是一块内存空间
        内存空间(栈(stack)[变量,常量池],堆(heap))
            基本类型-->栈内存中
            引用类型-->堆内存中(记忆:对象一堆)
        内存回收
            内存回收:垃圾回收算法
            内存泄漏:判断与解决
    4.2声明
        声明+赋值  let x=20;
       多个变量声明 let a,b,c; (此时typeof(a)值为undefined)
    4.3var,let,const的区别(面试题)
        var可以先使用在声明,且可以重复声明
        const声明常量必须赋值,且不可再次修改值,位于于栈中的常量池里
        作用域 var:该函数体内  let:所处块级 const:所处块级
    4.4规则与规范
        规则:不能以数字开头,只能以字母(包括$),数字,下划线组成
        规范:小驼峰命名法 eg:userName       

数据类型

    1.数据类型
        1.1基本数据类型  
            number 
            string '字符串1' "字符串2"
                   `模板字符串${variable}`          
            boolean
            undefinednull(object类型,属于bug)
                定义未赋值  undefined+1 //NaN
                定义值为空  null+1      //1
        1.2引用数据类型  Object对象(数组,对象,函数)
    2.算术运算
        a=2%5(结果为2)
        NaN (not a number)错误的数学运算,一般代表Bug   
   3.类型转换
        隐式转换
            + 任何数字和字符串相加都是字符串 口诀:数字相加,字符相连
            其他运算符(- * / +(作为正号))都会转换成数字型 
                eg:console.log(+'123') //123
                  console.log(1 -'1')//0
        显式转换
            1.转成数字
                Number(str)
                    里面含有非数字,则转换失败(NaN)[严格]
                    Number(true)//1 Number(null)//0
                parseInt(str) parseFloat(str):转换到不是数字为止[没那么严格]
            2.转成字符串
                String(number)
                number.toString()

运算符与分支

1.运算符
    简写:num=num+2---等价于 num +=2 (* / % 同理)
    元级运算符(根据所需表达式个数)
        一元运算符  i++先使用再自加  ++i先自加再使用
                  前++ 先加1 后参与运算
                  后++ 先参与运算 后自己在+1 
                     i++ + ++i +i
                    1    3   3  =7
                  独立使用
        三元运算符(if的简写)  表达式? 1:0
        
    逻辑运算符  能判断真假是便返回
​
    比较运算符 
        ==只比较值 ===全等(类型+值)   !==不全等 (4!=='4')//true 
        小数比较会有精度问题
    表达式
        表达式:运算符组成的式子,会有运算结果,.写在式子右边
        语句:不一定有值
        区别:有无运算符.
    
2.流程控制
    2.1选择
        if(表达式真){} 
            表达式为真 除了0和空字符串,其他数字和字符串都为真
        switch(数据){case 值:{ break} default:  }
            数据和值是全等关系
            switch-case穿透现象:穿透现象简化代码
    
    2.2while(){}循环
        变量初始化,条件判断,变量变换量
        let i=1 while(i<=3){doucument.write("<br>") i++}
        转义字符 document.write(i+'\t')
​
注意事项:小数运算会有精度问题,字符串和数字(除了0和空字符串)都为真
        case每句都要break,不然沙漏穿透
​

循环与数组

1.for循环
    for(变量初始化,判断条件,变量更新){
        代码块
    }
    初始值只执行一次,然后 执行 条件,代码块
​
    双重for:
        外层执行一次,内层执行多次
        外层循环控制行数,
        内层控制每排星星的个数
    for(let i=1;i<=5;i++){
        //
        for(let j=1;j<=i;j++){
            doucument.write('☆')
        }
    }
2.数组
    数组下标
    求最大小值   //擂台战之假设法
  数组方法
    1.增加与删除
    增加返回数组长度,删除返回删除元素值
    指定删除返回删除元素组
    a.push('100分',"90分");
    a.pop();
    a.shift();
    a.unshift("添加元素");
    a.splice(index,num); //删除指定元素
    a.splice(1)//从1index删到最后
    

函数

函数
1.(){}
    函数的本质:是一个带参数的对象,是function类的实例,
             内置了一个arguments对象(类数组)用来接受参数
    同名函数声明覆盖,后面那个生效(同CSS)
    
2.参数
    形参
        函数传参原理:实参给形参赋值
        形参默认值为undefined,为局部变量
        形参与实参不匹配: 没什么影响,只会多的实参不会生效(多出的实参为undefined) 
3.返回值
    return 
    不写return调用,返回值为undefined
4.作用域
    全局
    局部 链式查找:(就近原则)
5.几种函数
    5.1匿名函数(函数表达式:将函数赋值给变量)
        匿名函数需要先声明在使用(是let导致的)
            let fn=function(){}
            fn()            
    5.2立即执行函数(防止全局变量污染)
            (function(){})(); 声明+使用
6.逻辑中断
    && 遇假返回
    || 遇真返回,否则一直往前走
7.类型转换
    注意:(字符串-数字)---NaN  eg:console.log('pink老师'-1);//NaN
    7.1显示转换 转换为布尔型
        '',0,undefined,null,NaN转换为布尔值后都是false,其余则为true
     7.2隐式转换
          (!0) -->Boolean(!0)  //true
        null+1-->Number(null)+1//1
其他:
    多线程模拟:
        宏任务:栈中执行的代码为宏任务 (快)
        微任务:在下一个宏任务开始之前需要执行的任务
    

对象

对象
    1.介绍
        引用数据类型,无序集合
        赋值:字面量{变量:值,变量:值}
        对象组成:属性+方法(都可省略)
        书写:嵌套{{},{},}对象数组=[{},{}]
        声明: 字面量{},new关键字
    2.属性
        2.1 键值对  (key:value)
            变量:值  右边的值可以是任意类型(对象,)  
        2.2增删改查
            对象.属性名(赋值可以实现增改查)
                对象.属性名       (查)
                对象.新属性名=值  (增)
                对象.属性名=值    (改)
                del 对象.属性名   (删)
        2.3变量名查询(JSON里面会用到)
            对于多词属性或则 - 等属性,点操作就不能用了
            适用于解析变量
            uname-->'uname' 变量-->变量名        
            对象['变量']
        2.4遍历对象 
            for(let key in obj){
                k//键
                obj[k]//值
                 //obj.key==>undefined //obj["key"]==>undefined
            }
            拿到的是key,而不是value
    3.方法
        3.1本质:匿名函数赋值eg:say:function(){} 
            (ES6中提出了可省略关键字function,向Java后端看齐)
    4.内置对象
        内置对象可通过打印该对象查看所有属性方法.
        Math对象 属性:PI 
                方法: 
                (返回最接近的整数)
                向上取整天花板ceil(x)  向下取整 地板floor() 四舍五入round(1.49)1//1
        Random() [0,1)
            随机区间:取与不取
    5.堆与栈
        值类型存在栈中
        对象类型存在堆中
        变量声明为赋值存在于栈中
        栈: 快值驿站
        堆: 对象一堆
    sort:本质是对字符串进行排序
        参考菜鸟文档