zoukankan      html  css  js  c++  java
  • JS--我发现,原来你是这样的JS(三)(基础概念--灵魂篇)

    一、介绍

    • 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容。
    • 红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂更不容易,要熟练js更是难,中间需要不断的积累与重温。
    • 本书不是读一两遍就能把这书吃透,需要多读,可谓温故而知新,可以为师矣。

    很多人看这些厚的书都是三天打鱼两天晒网,很少能看下去,能记住的东西往往前3章的内容,所以我写博客就是为了能和大家一起来读这本书,一起学JS。

    二、基本概念(灵魂篇)

    上一篇是躯壳篇讲的是一些了解性的东西,而接下来便说内涵(数据类型和操作符),换作中文来看就如同让你理解词和含义,语句的含义,就像将这些字和语句注入灵魂。
    同系列:
    第一篇:JavaScript--我发现,原来你是这样的JS(初识)
    第二篇:JavaScript--我发现,原来你是这样的JS(基础概念--躯壳篇)

    三、数据类型

    js的数据结构有6种,5种基本类型和一种复杂类型。js中不支持任何自定义的数据类型,所以说就这6种就够了。

    5种基本数据类型:

    • Undefined
    • Null
    • Boolean
    • Number
    • String

    1种复杂类型:

    • Object类型

    1.1 typeof操作符

    该操作符可以检测某变量是什么数据类型。

    typeof返回的值:

    • "undefined" -- 表示这个值没有被定义
    • "string" -- 表示这是一个字符串
    • "number" --表示这是一个数字类型
    • "boolean" --表示是一个布尔型
    • "object" --表示这是一个对象
    • "function " --表示这是一个函数

    特别:对于null,typeof null 会返回"object",因为null表示的是一个空对象的引用

    typeof使用例子:

    var str = "hello";
    var a;
    console.log(typeof str)  //"string"
    console.log(typeof 666)  //"number"
    console.log(typeof a)  // "undefined"
    console.log(typeof null)  // "object"
    

    1.2 Undefined类型

    undefined 类型的值只有一个,undefined。当使用var对变量声明但没有进行初始化的时候默认的值就是undefined。

    var value ;
    console.log(typeof value);   // "undefined" 
    
    //特别:对于没有声明的变量typeof 返回的值也是undefined,例如:
    //下面的a没被声明
    console.log(typeof a);    //"undefined"
    

    1.3 Null类型

    Null类型也是只用一个值null,null是一个空对象指针。所以使用typeof检测时会返回object。

    console.log(typeof null);   //"object"
    

    注意点:

    1.null的使用:在定义的变量将会用来保存一个对象时,那初始化为null,这样我们就知道该变量将来会引用一个对象。

    2.实际上undefined值是派生值null的,因此对他们进行相等性测试会返回true:

    console.log(null == undefined);  //true
    

    1.4 Boolean类型

    boolean类型有两个值 true和false,其他类型的值都有与这两个值等价的值,就是说其他类型的值都能转成这两值中的其中一个。通过转型函数Boolean()

    注意点:

    任何类型的数据都可以调用Boolean()方法,都能返回一个true或false,至于返回什么,有一定的规则,规则如下:

    //对于Undefined
    console.log(Boolean(undefined));  //false
    //对于String,非空字符串返回true,空字符串返回false
    console.log(Boolean(""));   //false
    console.log(Boolean("hahaha"));   //true
    //对于Numble类型,任何非0数字返回true,0和NaN返回false
    console.log(Boolean(123));  //true
    console.log(Boolean(0));  //false
    //对于Object,任何对象都返回true
    console.log(new Array());  //true
    

    1.5 Number类型

    Number 类型就是数字的类型,各种数字都是该类型,包含整数,浮点数。

    常见的数字:

    //整数
    var intNum = 10;
    //八进制0开头
    var num1 = 066;
    //十六进制0x开头
    var num2 = 0xA;
    //浮点数
    var floatNum = 0.6;
    //极大的数4123000,使用科学表示法e,e6表示10的6次方
    var floatNum2 = 4.123e6;
    //最大值
    Number.MAX_VALUE;   //1.7976931348623157e+308
    //最小值 
    Number.MIN_VALUE;   //5e-324
    //超出最大值时,表示为正无穷
    Infinity
    //超出最小值时,表示为负无穷
    -Infinity
    //NaN (Not a Number) 非数值
    NaN
    //判断非数值的函数isNaN()
    console.log(isNaN(10))  //false
    console.log(isNaN("10")) //false,isNaN()会尝试将字符串转为数字,此处"10"能转为10
    console.log(isNaN("bey"));  //true , "bey"不能被转成数字
    

    1.6 String类型

    String用于表示由零或多个16位Unicode字符组成的字符序列,即字符串。

    字符串由单引号(' ')或双引号(" ")包含。但首尾不能是不同的引号,比如一单一双。

    错点:

    //这样会报错
    var str = 'javasritp";
    

    特点:

    1.拼接字符串使用'+'号

    var str1 = "hello";
    var str2 = str1 + "world";
    console.log(str2); // "hello world"
    

    2.其他类型的数据转换为字符串使用toString()函数

    var num = 123;
    var str = num.toString();  //数字123通过toString转为了字符串
    console.log(str);  //"123"
    //使用""拼接其他数据类型可以转换成String
    var s = 23+"";  //"23"
    

    1.7 Object类型

    ECMAScript中的对象其实就是一组数据和功能的集合。通过new操作符后跟要创建的对象类型的名称来创建。

    //创建一个Object对象
    var  o = new Object();
    

    关键:

    这里的Object相当于祖宗一样,创建Object的实例并没有什么用处。他像是java中java.lang.Object 对象一样。

    特点:

    每个Object类型的实例共有的属性和方法:

    • constructor: 保存着用于创建当前对象的函数。
    • hasOwnProperty:用于检测给定的属性在当前对象的实例中是否存在。
    • isPrototypeOf : 用于检查传入的对象是否是当前对象的原型
    • propertyIsEnumerble : 用于检查给定属性能否使用for-in来枚举
    • toLocaleString() : 返回对象的字符串表示。
    • toString() : 返回对象的字符串表示。
    • valueOf() : 返回对象的字符串,数值,或布尔表示。通常和toString() 返回的值相同。

    四、操作符(运算符)

    接下来是操作数据值的操作符。包含算术操作符,位操作符,关系操作符,相等操作符。

    1一元操作符

    只能操作一个值的操作符称为一元操作符。

    1.1递增与递减:

    形式: 这就是自增自减,使用两个加号(++)或两个减号(--)

    var num = 5;
    num++;   //相当于num = num+1; 此时num = 6;
    num--;   //相当于num = num-1; 此时num = 5;
    

    注意点:递增减的前置型(加减号在数值前面)和后置型(加减号在数值后面);
    1.没区别的情况:当只有唯一一条递增或递减操作时,前后不影响结果

    
    var num1 = 5;
    var num2 = 5;
    num1++;   //执行后num1的值会变成6
    ++num2;   //执行num2的值会变成6
    

    2.有区别情况:当操作数在一条语句中进行不仅仅是递增或递减操作时

    var val1= 5;
    var val2 = 5;
    var val3 = 20;
    var sum1 = val1-- + val3;   //sum1等于25
    var sum2 = --val2 + val3;   //sum2等于24
    //此处的val1 和 val2 的值相同但最后结果不同.
    //val1是后置,通俗点讲就是放到最后才进行自减操作.所以顺序是原来的val1值(5)和val3相加后赋值给sum1,最后val1才自减。
    //val2是前置,通俗点讲前置最大,先进行了自减操作。所以顺序是val1自减,后和val3相加最后赋值给sum2
    

    1.2一元加号和减号

    形式:在一个数值前使用一个加号或减号。

    var num = 100;
    //用+正数还是正数,负数还是负数
    +num;  //100
    //用减号就变成相反数
    -num;  //-100
    

    注意点:当操作的不是数字时,使用+,-可以使其执行转换,类似于Number() 函数。

    //对于+号
    var str = "10";
    str = +str;  //值会变成数字10
    var str2 = "hello";
    str2 = +str2 //值为NaN,因为不能转为数字
    var boo = false;
    boo = +false;  //值变为0
    
    //对于-号,也差不多,只是变成相反数
    var s = "100";
    s = -s; //值为-100
    

    2.加性/乘性运算符(加,减,乘,除,取模)

    1.加号(+):进行加法运算
    2.减号(-):进行减法运算
    3.乘号(*):进行乘法运算
    4.除号(/):进行除法运算
    5.求模(%):求余数

    30+20;  //50
    30-10;  //20
    30*20;  //600
    30/10;  //3
    25/6 ;  //1`
    

    3.布尔操作符

    布尔操作符有三个:非,与,或

    3.1逻辑非

    1.符号:!
    2.功能:非操作会返回一个布尔值,功能对布尔值取非,即相反。它会对值转成布尔值。

    console.log(!false);  //true
    console.log(!0);  //0的布尔转换是false,进行非操作后就是true
    console.log(!"hh")  //非空字符串布尔是true,进行非操作后就是false
    
    //小技巧,使用两!!可以类似于Boolean函数,对任何数值进行布尔转换
    console.log(!!"hello");  //true
    console.log(!!0);  //false
    

    3.2逻辑与

    1.符号:&&
    2.功能:进行与操作需要两个值,当两个值布尔值都为true时才会返回true,否则返回false,并且它是一个短路操作符(当第一个值为false时,就不用再判断第二个值)

    console.log(false&&true); //false
    console.log(false&&false); //false
    console.log(true&&false); //false
    console.log(true&&true); //true
    

    3.注意点: &&(与)操作不一定回返回布尔值一下是特殊情况:

    • 如果第一个操作数是一个对象的时候,返回第二个操作数
    • 如果第一个操作数是null,返回null
    • 如果第一个操作数是NaN,返回NaN
    • 如果第一个操作数是undefined,返回undefined。
    //数组对象
    var arr = new Array();
    //字符串
    var str = 'hello';
    console.log(arr&&str) //'hello'
    console.log(null&&str) // null
    console.log(NaN&&str)  //NaN
    console.log(undefined&&str) //undefined
    

    3.3逻辑或

    1.符号:||
    2.功能:进行与操作需要两个值,当存在有一个值的布尔值为true则返回true,否则false,或操作也是短路操作符,放当第一个操作值为true时,直接返回true,不用检查第二个操作值。
    3.注意点:如果有一个操作数不是布尔值, ||(或)操作不一定回返回布尔值一下是特殊情况:

    • 如果第一个是对象,则返回第一个操作数
    • 如果第一个数是false,则返回第二个数
    • 如果两个数都是对象,返回第一个操作数
    • 如果两个操作数是NaN,返回NaN
    • 如果两操作数是undefined, 返回undefined。
    var arr  = new Array();
    console.log(arr||"str");  //返回arr空数组[]
    console.log(NaN||NaN) ; //NaN
    console.log(false || "str") //"str"
    
    

    4 关系操作符

    1.关系操作符有,大于(>),小于(<),小于等于(<=),大于等于(>=)
    2.注意点:

    //1.对于数值转换,直接进行比较,返回true或false
    34>23;  //true
    //2.对于两个字符串比较,是通过从前往后逐个比较其字符编码值(ascll码)大小
    "Biasd"<"adsf";  //true, 因为B字符编码为66小于a字符编码97
    //3.对于字符串和数字比较,会将字符串转为数字
    "23"<3;  //false , "23"会转成23,然后和3比较
    "a"<3 //false  , "a"转为NaN,NaN和任何操作数比较都为false
    

    5.相等操作符

    相等操作符有相等()和不相等(!=),全等(=)和不全等(!==)

    相等和不相等是先转换后比较,而全等和不全等是仅比较不转换

    5.1相等和不相等转换重点:

    //1.如果有一个操作值为布尔值,则将该布尔值转为数值,true转为1,false转为0
    true == 1 ;  //true
    //2.null 和 undefined相等
    null == undefined ; //true
    //3.有一个操作数为NaN时,一定返回false
    NaN == 1;  //false
    //4.两个NaN比较也返回false
    NaN == NaN ;  //false
    //5.两个值是对象时,若不是指向同一对象就返回false
    
    

    5.2全等和不全等重点:

    可以看出全等是3个等号,所以比较严格,不会像相等一样进行转换。通俗的说:你不是就不是。

    //相等和全等的比较
    "55" == 55 ;  //true,相等情况下,"55"可以转换
    "55" === 55 ;  //false,全等情况,"55"不转换为数字,所以数据类型不同,直接返回false
    
    //关于null 和 undefined,上面相等比较时时两个值相等,但全等比较就不等
    null === undefined ;  //false
    

    6.条件操作符(三元操作符)

    1.模板:表达式1?表达式2:表达式3。
    2.使用说明:当表达式1为true时,返回冒号前的表达式2的结果,false就返回冒号后表达式3

    //例子:
    var num = 3>2?1:0;   //num的值为1
    

    7.赋值操作符

    1.简单的赋值操作由(=)号表示

    var val = 10;  //对val赋值为10
    

    2.复合赋值操作

    var num = 10;
    num = num+10;
    //上面那句可以用下面一句替代
    num += 10;
    

    8.逗号操作符

    1.使用逗号操作符可以在一条语句执行多条操作;
    2.使用逗号操作符进行赋值,赋值时总会返回表达式最后一项

    //同时对三个变量声明并赋值
    var num=1, num2 = 2 , num3 = 3;
    //赋值时总会返回表达式最后一项
    var n = (32,12,5,1,2);   //最后n被赋值为2
    

    五、最后几句

    这次的博客篇幅比较多介绍数据类型和操作符,可以多看几次,也可以专看注意点,重点等,已经特别标出。看完这里基本概念已经完了。接下来还会继续更新笔记,敬请关注。写一篇博客不容易,花费很多心思,如果觉得写得好,关注一下,给个赞吧,让我有动力继续写博,哈哈。

    本文出自博客园:http://www.cnblogs.com/Ry-yuan/
    作者:Ry(渊源远愿)
    欢迎访问我的个人首页:我的首页
    欢迎访问我的github:https://github.com/Ry-yuan/demoFiles
    欢迎转载,转载请标明出处,保留该字段。

  • 相关阅读:
    ----localStorage的同步与异步----
    ----vue2.0实现别人通过ip访问自己运行的项目----
    ----vue之搜索框与防抖函数的封装----
    ----vue项目打包之浏览器存在缓存问题----
    ----vue组件name的作用小结----
    ----HTML5本地储存--利用storage事件实时监听Web Storage----
    ---- vue之filter ----
    ----vue项目配置环境----
    ----git-ssh 配置和使用----
    python『学习之路03』装饰器
  • 原文地址:https://www.cnblogs.com/Ry-yuan/p/7501214.html
Copyright © 2011-2022 走看看