zoukankan      html  css  js  c++  java
  • JS--我发现,原来你是这样的JS(引用类型不简单[下篇],基本包装类型与个体内置对象)

    一.介绍

    本篇是续上一篇的,引用类型的下篇,本篇主要是说基本包装类型和个体内置对象。如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完。如果你想学好一门技术,要不忘初心,方得始终。

    二.基本包装类型

    先说明基本包装类型也是属于引用类型,是接着上一篇的,强调一下.

    然后我们记住两句话:
    1.基本包装类型是为了方便操作基本类型值而出现的.
    2.有一瞬间你出现,转眼却离去.

    1.说说这基本包装类型有什么吧,就这3个

    1. Boolean
    2. Number
    3. String

    2.有人会疑惑这些家伙不是基本类型吗?怎么变成基本包装类型了?

    对,就是要把你搞蒙,不然怎么显得js高深莫测呢。
    看看例子:

    //有没有觉得这东西是不是很方便,但又很奇怪为什么能这么干
    var str  = "hello ry"
    console.log(str.length);  //8  一个属性,直接给出字符串长度
    console.log(str.substring(6));  "ry"  //一个剪切字符串的方法
    

    上面的例子我们看到,str的值明明是一个基本类型值(String),为什么会有属性,为什么会有方法?

    我们记住的第一句话:基本包装类型是为了方便操作基本类型值的:
    js在被设计出来时搞了这个叫基本数据包装类型的东西,当对基本类型值访问读取时,后台会自动创建其对应的基本包装类型对象(没错是对象),使得它能进行一些属性和方法的调用。

    第二句话:有一瞬间你出现,转眼却离去
    就是基本包装类型从创建对象到该对象销毁就一瞬间,之后便逝去了,也就是只有存在于那一行代码执行时(比如:str.length)。

    //在前几篇有个这样的例子,这也说明基本包装类型对象只存在于一行代码执行过程
    var person = "ry";
    person.age = 123;  //这时创建了基本包装对象,我们能为属性赋值
    console.log(person.age);  //undefined  到了下一行代码对象便不见了,其属性值也就没了
    

    再来句通俗的话:String,Number,Boolean 他们有两重身份:基本类型和基本包装类型。但是我们用的时候都是基本类型的(只要我们不去主动创建基本包装类型对象),当需要读取和操作这基本类型值时,他就变身(哈哈,变身),变成一个基本包装类型的对象,变身就厉害了吧,这时它能做的事就更多了。

    三.基本包装类型细说

    刚才算是介绍清楚基本包装类型了,希望大家能看懂。接下来详细说说这3个基本包装类型:String,Number,Boolean(也就是说他们变身后能干神马)

    还有很重要的点,我们一般都不直接创建基本包装类型的对象,这样容易分不清你是操作着基本类型值,还是引用类型。

    1.Boolean类型

    这个基本包装类型,对应布尔值的基本类型。

    a.创建这个类型对象

    一如既往的new,只要是对象都new了

    //这是Boolean类型对象,这家伙用处不大,上面说了一般都不这样直接创建,这东西给js语言后台弄就对了。
    var b = new Boolean();
    

    虽然不直接创建它,但是我们还是要了解它,不是吗,为什么?为了人民日益增长的美好生活的需要。哈哈不是吗。

    知识点来了:看注释

    //这家伙是基本包装类对象,是对象
    var b = new Boolean(false);   //他是false的对象
    //但是会出现
    console.log(b && true);  //true  
    //因为在布尔表达式中对象的布尔值是true,也就是说b这对象将转为true(而不是它的值false)
    
    

    还有

    //这是基本类型值
    var t1 = true;
    //这是基本包装类型对象,是对象
    var t2 = new Boolean(true);
    //typeof测试
    console.log(typeof t1);  //boolean
    console.log(typeof t2);  //object , typeof 对所有对象都返回object
    //instanceof
    console.log(t1 instanceof Boolean); //false ,t1是值类型不是对象,所以返回false
    console.log(t2 instanceof Boolean); //true
    

    2.Number类型

    a.创建对象:知道能创建对象,但我们尽量不要创建对象

    var n = New Number(10);
    

    b.方法:知道有什么方法就好了,因为我们用的也就是这些方法。

    1.toString():传入参数是告诉它返回多少进制

    //这是基本类型
    var num = 10;
    //读取操作时变身,有能力了,是Number对象的能力
    console.log(num.toString(8));  //12  返回了八进制的数
    console.log(num.toString(2));  //1010  返回二进制
    console.log(num.toString(16));  //a  返回十六进制
    

    2.toFixed(): 传入一个参数(0-20),表示返回的数显示几位小数

    var n = 123;
    console.log(n.toFixed(2));  //123.00
    

    3.toPrecision():传入一个参数数字, 返回一个合适这个数字不是的位数的格式

    var n1 = 123;
    console.log(n.toPrecision(2));   //'1.2e+2'
    console.log(n.toPrecision(4));  //'123.0'
    console.log(n.toPrecision(3));  //'123'
    

    3.String类型

    直接上属性和方法

    1.length : 返回字符串长度

    var str = "hello lovely girl";
    console.log(str);  //17
    

    2.charAt 和 charCodeAt()

    //charAt() 接受一个参数,返回字符串的该参数位置下标的值
    var str = "hello";
    str.charAt(2);  //l
    //charCodeAt() 和charAt不同的是返回的是字符编码
    str.charCodeAt(2); //108  这是l的字符编码
    //还有一种更简单的方法得到字符串对应下标的值,像数组一样用方括号
    str[2];  //l
    

    3.concat() 拼接字符串,返回新的字符串

    var str = "I ";
    //在str上加上字符串
    var str1 = str.concat("love you");
    console.log(str1);  //I love you
    
    //当然我们都习惯直接用+号来完成这操作
    var str2 = str+"love you";
    console.log(str2); //I love you
    

    4.剪切字符串:slice() , substr() , substring() 传入一或两个参数,返回新的字符串,不会影响原来字符串

    //slice(),substring() 1参数是开始位置,2是结束位置(不指定默认到最后)
    var str = "welcome";
    str.slice(3);  //come
    str.slice(3,4); //c
    str.substring(3); //come
    str.substring(4,6); //om
    //substr() 1参数是开始位置,2是返回的字符数量
    str.substr(3,4); //come  3位置开始的4个字符
    str.substr(1,3); //elc
    

    5.indexOf()和lastIndexOf(),查找字符,返回字符第一次出现的位置

    //indexOf只传一个参数,默认从0位开始找
    var s = "hello";
    s.indexOf("l");  //2  从前面开始找l第一次出现在2
    s.indexOf(a);  //-1
    
    //lastIndexOf() 只传一个参数,默认从后面开始找
    s.lastIndexOf("l");  //3  从后面开始找l第一次出现在3
    
    //接受两个参数,第二参数表示从第x位开始查找
    s.indexOf(l,1);  //2   第二参数表示从第1位开始查找
    s.lastIndexOf(l,2);  //2   第二参数表示从第2位开始查找
    
    //第二个参数应用,通过循环使用这两方法,找到后增加第二个参数的值来继续寻找字符,最后能把所用的该字符位置找出来
    

    6.trim():删除前置及后缀所有空格,返回新的字符串

    var str = "  welcome to my blog    ";  //前后有很多空格
    var str2 = str.trim(str);
    console.log(str2);  //"welcome to my blog"
    

    7.字符串大小写转换 toLocaleUppperCase,toUpperCase,toLocaleLowerCase,toLowerCase

    var str = "beautiful";
    //大写,两个方法差不多
    console.log(str.toLocaleUpperCase());  //   "BEAUTIFUL"
    console.log(str.toUpperCase());        //   "BEAUTIFUL"
    //小写,两个方法差不多
    console.log(str.toLocaleLowerCase());  //   "beautiful"
    console.log(str.toLowerCase());        //   "beautiful"
    

    8.替换字符串的方法:replace()

    var text = "bat,cat,sat,fat";
    //第一参数是匹配要替换字符串,第二参数是替换成的字符串
    var result = text.replace("at","oo");
    console.log(result); "boo,cat,sat,fat";  //只替换了第一个
    
    result = text.replace("/at/g" , "oo");
    console.log(result);  "boo,coo,soo,foo";  //加了正则表达,替换了全部
    

    9.localeCompare() : 比较两个字符串,通过字符串在字母表的顺序排列

    var str1 = "back";
    var str2 = "bat";
    var str3 = "abc";
    console.log(str1.localeCompare(str2));  //-1  "back" 排在 "bat" 前面 返回-1
    console.log(str1.localeCompare(str1));  //0  "字符串相等返回0
    console.log(str1.localeCompare(str3));  //1  "back" 排在 "abc" 后面 返回1
    

    10.formCharCode() : 接受编码转为字符串

    console.log(String.formCharCode(104,101,108,108,111));  //hello
    

    String类型的字符串的方法很多,这里只是简单的举例了他们的使用方法,需要深入建议看看文档哦

    四.单体内置对象

    内置对象上一篇前面讲了Object , Array , Function,RegExp,Date等,下面还有两个(Global 和 Math)

    1.Global对象

    最特别的对象,你看不见摸不着,对了,但是就是存在。
    怎么理解:golbal是全局的意思,所以对于在全局作用域定义的属性和方法都是Global对象的属性和方法。

    比如一些函数:isNaN(),isFinite(),parseInt(),parseFloat()等都是Global的方法。

    a.再说一些Global方法:

    1.encodeURI()和EncodeURIComponent() : URI编码方法,他们都是对URI进行编码的,以便发送给浏览器

    var uri = http://www.xxx.com/ry yuan/
    //encodeURI方法:只处理空格,把空格转成了%20
    console.log(encodeURI(uri));  //"http://www.xxx.com/ry%20yuan/"
    //encodeURIComponent方法: 只要是非数字都转成编码
    console.log(encodeURIComponent(uri));  //"http%3A%2F%2Fwww.xxx.com%2Fry%20yuan%2F"
    

    2.eval() 方法: 可以执行解析JavaScript字符串(慎用,少用)

    eval("console.log('hello')");  // hello  , 等价于console.log('hello');
    

    b.再说说window对象

    ES中没有指出如何访问Global对象,但是web浏览器中window对象是Global对象的部分实现,所以我们再浏览器中常说的全局属性和方法是window,也是这个原因

    var str = "nice to meet you";
    console.log(window.str);  //"nice to meet you" , 用window访问其str属性没毛病
    

    2.Math类型的对象

    这个对象主要用来辅助完成简单和复杂的运算

    a.Math对象的属性:很多下面举例几个常用:

    console.log(Math.E);  //2.718281828459045  自然底数e  
    console.log(Math.PI); //3.141592653589793  π 
    console.log(Math.SQPR);  //开根号2 
    console.log(Math.LN2);   //2的自然底数  
    console.log(Math.LN10);   //10的自然底数  
    

    b.Math类型的方法

    1.min()和max() : 用于确定一组值的最小值和最大值

    var max = Math.max(1,2,3,4,5,6);  
    console.log(max)  //6
    
    var min = Math.min(1,2,3,4,5,6);  //1
    console.log(min)  //1
    
    //要找数组的最大值,可以这样做
    var arr = [1,23,33,12];
    var result = Math.max.apply(Math,arr);
    //console.log(result);  //33
    

    2.舍入方法:Math.ceil() , Math.floor() , Math.round()

    //Math.ceil()  向上舍入
    console.log(Math.ceil(1.2));  //2
    console.log(Math.ceil(1.5));  //2
    console.log(Math.ceil(1.8));  //2
    
    //Math.floor()  向下舍入
    console.log(Math.floor(5.1)); //5
    console.log(Math.floor(5.6)); //5
    console.log(Math.floor(5.9)); //5
    
    //Math.round()  四舍五入
    console.log(Math.round(8.1)); //8
    console.log(Math.round(8.5)); //9
    console.log(Math.round(8.7)); //9
    

    3.生成随机数的方法: random() 返回大于等于0 小于1的随机数

    console.log(Math.random());  //0.8261111731972886  随机数
    console.log(Math.random());  //0.2343731972234522  随机数
    
    //一条公式:值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值);  怎么说,看下面
    //如果我想返回从1-10的其中一个随机数
    console.log(Math.floor(Math.random()*10+1))  //1-10 可能值总数10,第一个可能值是1
    //如果我想返回从1-10的其中一个随机数
    console.log(Math.floor(Math.random()*90+10)) //10-100   可能值总数90,第一个可能值是10
    

    4.还有很多方法:

    //x的绝对值Math.abs(x)
    //x平方Math.sqrt(x)
    //x的n次幂Math.pow(x,n)
    //正弦余弦正切Math.sin(x), Math.cos(x),Math.tan(x)
    //等等
    

    五.说说

    本篇结束,对,引用类型也就到这里了落幕,接着还会继续前进的,老铁们,觉得写得好就推荐一下,关注一下吧,yoyo。

    同系列前几篇:
    第一篇:JavaScript--我发现,原来你是这样的JS(一)(初识)
    第二篇:JavaScript--我发现,原来你是这样的JS(二)(基础概念--躯壳篇)
    第三篇:JavaScript--我发现,原来你是这样的JS(三)(基础概念--灵魂篇)
    第四篇:JavaScript--我发现,原来你是这样的JS(四)(看看变量,作用域,垃圾回收是啥)
    第五篇:JavaScript--我发现,原来你是这样的JS(引用类型不简单,且听我娓娓道来)

    本文出自博客园:http://www.cnblogs.com/Ry-yuan/
    作者:Ry(渊源远愿)
    欢迎转载,转载请标明出处,保留该字段。

  • 相关阅读:
    [Express 5] Create a express 5 application with node 14
    [Bash] Batch Rename Every File in a Directory with zsh
    [CSS 3 + JS] Create a Function to Convert JS Numbers into CSS Hex Colors
    [Express] Handle Syncronous and Asyncronous Errors in Express
    [ML L12 N15] Regularization & Lasso Regression
    [CSS 3] Responsive Text with vw unit
    [XState] Guarded Transitions
    [XState] Drag and Drop example (data-state, attr in css)
    fckeditor如何能实现直接粘贴把图片上传到服务器中
    ckeditor如何能实现直接粘贴把图片上传到服务器中
  • 原文地址:https://www.cnblogs.com/Ry-yuan/p/7747103.html
Copyright © 2011-2022 走看看