前端--js基础1

一.js的引入

    <!-- js的第一种引入方式 内嵌 (推荐)
    <script>
        // alert("js的第一种引入方式")          // 浏览器弹出
        // console.log("js的第一种引入方式")    // 控制台打印
        // document.write("js的第一种引入方式") // 页面显示
    </script> 
    -->

    <!-- js的第二种引入方式 导入    
    <script src="./ceshi.js"></script> 
    -->

    <!-- js的第三种引入方式 事件
    <div onclick="alert('hello world')"> 点我 </div> 
    -->


    <!-- js的第四种引入方式 行内 (不推荐)
    <a href="javascript:alert('hello world2')">点我</a> 
    -->

二. 注释变量

一.注释

1.单行注释

// 两个 '//' 代表单行注释

2.多行注释

/**/  把内容写到 /*内容*/

二. 变量

var关键字指定当前变量的作用域,全局或者局部不写var可以,默认指定全局变量,没有局部的概念 var一定写上

var a = 100
var a=1,b=2,c=3
console.log(a)
console.log(b,c)    

变量的命名:

var $ = "特殊的变量名"
console.log($)
var $a = 123
console.log($a)

三. 数据类型

/*
            数据类型:分为两大类 
            基本数据类型(原始类型) + 引用数据类型(复杂类型)
            基本数据类型: Boolean , Number , String , null , undefined
            引用数据类型: Object [Array , function , Date , RegExp]
            本质上一切皆是对象
*/

1.Boolean 布尔类型

var a = true
var a = false

console.log(a,typeof(a))

2.Number数字类型

        // NaN Number类型中特殊的关键字 => not a number
        /*
            NaN注意点:
            1.NaN 和 数字不能参与运算
            2.除了NaN!=任何值为真,剩下的比较都是假的
        */

        var a = 0b10
        var a = 0o10
        var a = 0x10
        var a = 100
        var a = 3.15
        var a = 3.15e3
        // Infinity  无限大
        var a = 3.9e99999999999999999999999999999999999999999999999999
        // -Infinity 负无限大
        var a = -3.9e99999999999999999999999999999999999999999999999999
        console.log(a,typeof(a))

        var a = 100 - "abc"
        var a = NaN + 1
        var a = NaN == NaN
        var a = NaN != NaN
        var a = NaN != 1
        console.log(a,typeof(a))

3.字符串类型

var a = 'hello js'
console.log(a , typeof(a))

var a = "hello \n js"
console.log(a , typeof(a))

var name = "安妮宝贝"
var str = `你在么${name}      
你在干什么
想我了没有`
 console.log(str, typeof(str))

四.Object 对象类型

1.字典

        var obj = {}

        // (2)js对象(字典)
        var obj = {"a":1,"b":2,"c":3}

        // (3)添加/修改对象
        obj["a"] = 100
        obj["d"] = 300
        console.log(obj,typeof(obj))
        console.log(obj instanceof Object)

2.数组

// (1)定义空对象(数组)
        var arr = []

        // (2)js对象(数组)
        var arr = [1,2,3,4]

        // (3)添加/修改对象
        arr[0] = 100
        arr[4] = 3000

        console.log(arr,typeof(arr))
        console.log(arr[6])
        console.log(arr instanceof Array , 333)

3.function函数

        function func(){
            console.log("func ... ")
        }
        func()
        console.log(func instanceof (Array,Number,Function) , 333444)

5.特别的关键字

        // null 空(等价python中的None)
        var a = null;
        console.log(a ,typeof(a));

        // undefined 未定义的
        var b;
        var b = undefined ;
        console.log(b, typeof(b)) ;

五. 强制转换Number

1.强制转换整型:parseInt 数字开头即可转换,布尔型转换不了

        var n = 1234
        var n = "ppppp"        // NaN
        var n = "9999"         // 9999
        var n = "99pppp"       // 99
        var n = "pp12"         // NaN
        var n = "109.34"       // 109
        var n = "109.123asdfasd2" // 109
        var n = "asdfasd2109.123" // NaN
        var n = []                // NaN
        var n = {}                // NaN
        var n = true              // NaN
        var res = parseInt(n)
        console.log(res,typeof(res))

2.强转浮点型

parseFloat 数字开头即可转换 , 布尔型转换不了,可保留小数
        var n = 1234              // 1234
        var n = "ppppp"        // NaN
        var n = "9999"         // 9999
        var n = "99pppp"       // 99
        var n = "pp12"         // NaN
        var n = "109.34"       // 109.34
        var n = "109.123asdfasd2" // 109.123
        var n = "asdfasd2109.123" // NaN
        var n = []                // NaN
        var n = {}                // NaN
        var n = true              // NaN
        var res = parseFloat(n)
        console.log(res,typeof(res))

3.Number 

可以转换布尔类型,也可以转换纯数字字符串
        var n = false       // 0
        var n = true        // 1
        var n = "123"       // 123
        var n = "123.123"   // 123.123
        var n = "123sdf"    // NaN 
        var res = Number(n)
        console.log(res,typeof(res))

六.强制转换String

"""
单纯的在数据两边套引号,表达字符串
"""

        var str = 1000;
        var str = 3.434
        var str = []
        var str = {}
        var str = undefined
        var str = null
        var str = NaN
        var res = String(str)
        console.log(res , typeof(res))

七.强制转换Boolean

// 布尔值为假的7中情况
var a = 0
var a = 0.0
var a =''
var a = false
var a = null
var a = NaN
var a = undefined


/注意点
var a = [] # 真的
var a = {} # 真的
var res = Boolean(a)
console.log(res , typeof(res))

八.自动类型转换

1.Bnuber + Boolean

        var res = 10 + true
        var res = 19.76 + true
        var res = 10 + 3.4
        console.log(res , typeof(res))

2.Number + Boolean + String

        // 对于字符串的自动转换,+号的作用是拼接
        var res = true + "122"
        var res = 100 + "199"
        var res = 33 + 44 + "10"
        var res = 33+ "11" + 88
        console.log(res , typeof(res)) 

3.除了+号 其他的符号都可以参与运算

        var res = 100 - "199"
        var res = 100 / false
        var res = 3 * "5"
        var res = 3 * "abc"  // NaN
        console.log(res ,typeof(res))

九.js的运算

1. ++ -- 递增 递减

        // num++ 先赋值在自增
        var num = 10
        var res = num++;
        console.log(res,num)

        // ++num 先自增在赋值
        var num = 10
        var res = ++num
        console.log(res,num)

        // num-- 先赋值在自减
        var num = 10
        var res = num--
        console.log(res,num)

        // ++num 先自减在赋值
        var num = 10
        var res = --num
        console.log(res,num)

2. === !==  && or not

        // (2) === !== (全等于,不全等于) 严格比较两样东西: (1) 比较值的大小 (2)比较值的类型
        var res = "1" === 1
        var res = "1" !== 1
        console.log(res)

        // (3) && => and  || => or   ! => not
        var num = 10
        if(3<num && num < 5){
            console.log("ok1")
        }

        if(num < 3  || num >= 10){
            console.log("ok2")
        }

        var num = 0
        if(!num){
            console.log("ok3")
        }

3.三元(目)运算符

// var res = 表达式?真值:假值
var age = 18;
var res = age >= 18?"成年人":"青少年"
console.log(res,typeof(res))

十.数据类型的创建时的注意事项

        var x1 = new Object();    // 一个新的 Object 对象
        var x2 = new String("abcd");    // 一个新的 String 对象
        var x3 = new Number();    // 一个新的 Number 对象
        var x4 = new Boolean();   // 一个新的 Boolean 对象
        var x5 = new Array();     // 一个新的 Array 对象
        var x6 = new RegExp();    // 一个新的 RegExp 对象
        var x7 = new Function();  // 一个新的 Function 对象
        var x8 = new Date();      // 一个新的 Date 对象
        console.log(x1,typeof(x1))
        console.log(x2,typeof(x2)) // object

        var ceshi = "abcd"         // string
        // 比较值的大小
        var res = ceshi == x2
        // 严格比较 : 1.大小 2.类型
        var res = ceshi === x2
        console.log(res)

推荐使用后者,速度更快,不会出现逻辑错乱 (推荐)

        var x1 = {};            // 新对象
        var x2 = "abcd";        // 新的原始字符串
        var x3 = 0;             // 新的原始数值
        var x4 = false;         // 新的原始逻辑值
        var x5 = [];            // 新的数组对象
        var x6 = /()/           // 新的正则表达式对象
        var x7 = function(){};  // 新的函数对象

        var ceshi = "abcd"
        var res = ceshi == x2
        var res = ceshi === x2
        console.log(res)

十一. 流程控制_分支结构

var wangyongjuan = "富婆";

1.单项分支

        if(wangyongjuan == "富婆"){
            console.log("意味着捐很多钱")
        }

2.双项分支

var wangyongjuan = '青春的小女生'
if(wangyongjuan=='富婆'){
  console.log('意味着娟很多钱')  
}else{
  console.log('被娟很很多钱')  
}

3.多项分支

        var age = 1
        if(0 < age && age < 10){
            console.log("儿童时代")
        }else if(10 <= age && age < 18){
            console.log("青少年时代")
        }else if(18<=age && age < 40){
            console.log("壮年时代")
        }else if(40 <= age && age < 90){
            console.log("广场舞时代")
        }else{
            console.log("入土时代")
        }

4.巢状分支

        var youfang = true;
        var youche = true;
        if(youfang){
            if(youche){
                                    console.log("富婆,老子要嫁给你~")
            }
        }

十二. switch_case

        // 获取星期几
        var date = new Date()
        console.log(date)
        var res = date.getDay()
        console.log(res , typeof(res))
        res = "1"
        // switch 属于严格类型比较: (1)大小 (2) 类型
        switch(res){
            case 1 :
                 console.log("星期一")            
            case 2:
                 console.log("星期二")
                 break;
            case 3:
                 console.log("星期三")
                 break;
            case 4:
                 console.log("星期四")   
                 break;         
            case 5:
                 console.log("星期五")
                 break;
            case 6:
                 console.log("星期六")
                 break;
            default:
                console.log("星期日")
                break;
                
        }

十三 流程控制_循环结构

1. for 循环

 /*         1      2          3
            for(初始值;判断条件;自增自减的值){
                code ... 
            }
            先执行1,2,满足条件进入到循环体中执行代码
            执行一遍之后,回到3号进行自增自减
            在回到2号判断条件是否满足
            如果满足,执行
            如果不满足,不执行,依次类推...
            最后不满足 循环终止;        
*/

 for(var i = 1;i<=100;i++){
            console.log(i)
        }

        // 跳过55
        for(var i = 1;i<=100;i++){
            if(i == 55){
                continue;
            }
            console.log(i)
        }

2 while 循环

var i = 10
        while(i <=20){            
            if(i == 18){
                break;
            }
            console.log(i)
            i++
}

3.for(var i in Iterable){} 作用: 遍历数据

var arr = ["耿择时","家营和","孙翔宇","张银","王生父"]
        for(var i in arr){
           console.log(i) 
           console.log(arr[i])
        }
        console.log("<===========3===========>")
        // obj : 默认获取是键
        var obj = {"gzs":"耿择时","jyh":"家营和","sxy":"孙翔宇"}
        for(var i in obj){
            console.log(i)
            console.log(obj[i])
}

4.for(var i of Iterable){} 作用: 遍历数据

// arr : 默认获取的是数组中的值 
        var arr = ["耿择时","家营和","孙翔宇","张银","王生父"]
        for(var i of arr){
           console.log(i) 
        }

        // var i of/in Iterable 都可以处理数组和字符串
        for(var i of "abcdefg"){
            console.log(i)
        }

十四.函数_参数

一 函数

1. 普通函数

//方式一 存在预加载机制,提前把函数加载到内存中,在运行代码
        func1()
        function func1(){
            console.log("我是func1")
        }

2. 匿名函数

//匿名函数没有预加载机制,必须先定义在调用
var func2 = function(){
  console.log('我是func2')  
}
func2()

3. 不推荐 (必须先定义在调用)   

        // var func3 = new Function("alert(1213);document.write(1234);console.log(55667)");
        // console.log(func3,typeof(func3));
        // func3()

4.箭头函数(ES6新增了解)

        function ceshi(x,y){
            return x+y
        }
        var res = ceshi(1,2)
        console.log(res)

        var ceshi = (x,y) => {return x+y;}
        console.log(ceshi(3,9))

5. 闭包函数

function outer(){
  var father = '王健林'
  function inner(){
        console.log(`你的爸爸${father}`)  
    }
    return inner

}    
var func = outer()
func()

二 函数的参数

1.不会报错,区分与python

        function func_new1(a,b,c){
            console.log(a,b,c)
        }
        // func_new(1,2,3)
        func_new1()
        console.log(111)

2.不会报错,区分与python

        function func_new2(){
        }
        func_new2(1,2,3,4)

3.arguments 计算累加和

        function func_new3(){
            // js中arguments 相当于 python的*args收集参数 ,打包成可迭代对象
            console.log(arguments)
            var total = 0
            for(var i of arguments){
                console.log(i)
                total += i
            }
            return total
        }

        var res = func_new3(1,2,3,5,6,7)
        console.log(res)

十五.函数_调用

 function func(){
            console.log("函数在运行1...")
        }

        // 1.正常调用
        func();

        // 2.函数立即执行 (普通函数)
        (function func(){
            console.log("函数在运行2...")
        })();

        // 3.函数立即执行 (匿名函数)
        (function(){
            console.log("函数在运行3...")
        })();

        // 4.函数立即执行
        !function(){
            console.log("函数在运行4...")
        }();
        
        ~function(){
            console.log("函数在运行5...")
        }();

        +function(){
            console.log("函数在运行6...")
        }();
        
        -function(){
            console.log("函数在运行7...")
        }();