ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端--js基础

2021-01-19 20:02:53  阅读:121  来源: 互联网

标签:console log -- res 前端 NaN js typeof var


一.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;
                
        }
分支结构: switch ... case ...

 

十三 流程控制_循环结构

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...")
        }();
函数_调用

 

标签:console,log,--,res,前端,NaN,js,typeof,var
来源: https://www.cnblogs.com/whc6/p/14299696.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有