【JavaScript基础系列】决定你的人生能走多远的,是基础。

简介: 前言    javaScript门槛非常低,一点语法,一个dom,一个bom就可以使用它开发大部分js应用,再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式,但是我们始终不能忘记的一点是,决定上层建筑的,是经济基础。

前言

   javaScript门槛非常低,一点语法,一个dom,一个bom就可以使用它开发大部分js应用,再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式,但是我们始终不能忘记的一点是,决定上层建筑的,是经济基础。 决定你的javaScript能走多远的,是基础。所以我决定在我的博客开一个关于javaScript基础系列。详细得,解读其中的基础,再次刨开它的心脏细细研究。与大家共勉。

第一篇 字符串一

   我们从字符串开始介绍。

  字符串(String)  基础概念:一串有意义的字符集合叫做字符串,在js中使用单引号‘string’ 或者双引号 "string"表示字符串。它是js五个基本类型之一,姑且可以认为它是js基本类型中特性最多的,技巧最多的基本类型。其他的如Number、boolean、null、undefined,其使用方式,引用方法,概念都没有字符串来得多。

  了解js中的字符串的使用原理

  一、字符串的表达形式。

    ① 通过字面表达式定义的字符串。

     1 var str = "这是一串字符串"; 

    声明了一个变量str ,给这个变量指定值字符串 “”; 

    ②通过js内置的String构造函数,

1 /*****************************
2                 通过构造函数定义的字符串,
3                 实际上可以叫做字符串对象,
4                 在chorme中返回一个字符拆分的对象
5 */
6                 var str = new String("hello world"); 
7                 console.log(str);

  二、字符串与字符串对象(为什么普通字符串可以调用构造函数的方法?)。

  通过字面表达式定义的字符串与通过js内置的String构造函数生成的字符串,它们在使用的时候,行为似乎是一致的,但是,在更正确的表达中,它们是不同的,通过字面表达式我们直接给变量赋予了一个字符串值,而通过构造函数,我们得到的是一个String对象。

  下图是内置的String构造函数在chorme中返回一个字符拆分的对象:

  

  而字面量方式则是:

  

  通过对两个方式的typeof对比,我们可以看到:

/*****************************
                通过构造函数定义的字符串,
                实际上可以叫做字符串对象,
                在chorme中返回一个字符拆分的对象
            */
                var str = new String("hello world"); 
                console.log(str);  //上图1

            /*****************************
                通过typeof检查的字符串对象,返回了object
            */
                var _type = typeof str;
                console.log(_type)  //object

            /*****************************
                不使用构造函数,直接赋值呢?
                它就是一个基本值,
                typeOf返回string
            */
                var str1 = "hello world";
                console.log(str1); //上图2

                var _type1 = typeof str1;
                console.log(_type1)  //string

 

它们是否相等?答案是不相等,

console.log(str === str1); //false


那么我可以这么简单的理解:new操作符只会返回对象,new String()永远都是一个对象,而对象是不会和字符串相等的。

有一点经验的同学应该可以看出,这里如果使用==的话,str==str1,返回的是true。这是因为js中的类型转换机制决定的,它隐式的调用了字符串对象的valueOf方法。我们可以做一个小实验:

/***************************
                如果我重写str的valueOf方法将它指向一个新的值
            */
            console.log("before ",str == str1);//true
            str.__proto__.valueOf = function(){
                return "javaScript!";
            }
            console.log("after ",str == str1);//false
       console.log(str+str1) //javaScript!hello world

我更改了str的原形对象中的valueOf方法,使它总是返回一个新字符值 "javaScript!",最后再和str1用==比对的时候,返回了false。

目前为止可以得出结论是,字符串和字符串对象不相等,甚至不是同一个概念,一个是基本类型值,一个是构造函数生成的字符对象,但在js机制中,比较时隐式的使用了valueOf方法,调用拼接时也隐式调用了valueOf方法。

js以这种方式给字符串“继承”了一些方法,能看到的做法是,js在使用字面表达式定义的字符串调用方法时,悄悄的给它包了一层字符串对象的壳。

通过调用__proto__属性就可以看出
//通过调用__proto__属性就可以看出
                
                console.log(str1.__proto__ === str.__proto__); //true 他们继承的对象是相等的

字符串与字符串对象的使用方式一致,typeof得到的值不同,在使用字面表达式定义的字符串调用方法时,js会隐式调用new String(),这就是为什么基础类型能够调用对象方法的原因。

通过这个理解方式,我们就不难理解为什么一个数字、一个字符串能调用内置方法了。

 三、字符串下标

  字符串是有下标的。由于上面介绍的字符串与字符串对象的关系,任意字符串都可以通过下标访问到对应的位置的单个字符。下图在chorme中打印的一个字符串对象:

 

  可以看到一共11个字符从0到10,需要注意的是它并不是数组。而是一个属性名为0-10的对象。

/*****************************
                 可以通过下标访问字符串字符
                 这里字符串对象和字符串同样能使用下标访问,
                 这是因为javascript编译时,会在适当的时候将字符串包装成字符串对象,
                 这样一般的字符串就也可以调用String构造函数的方法了
            */
                console.log(str[0]); //h
                console.log(str1[0]); //h

我们可以, 通过for循环打印每一个字符,也可以,通过数组的方法借用将字符串转换成数组:

Array.prototype.slice.call(str)
//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

但是需要注意的是,如果你直接修改str[11] = "!"的话,只会在对象中新增了一个名为11的属性,并不会修改到字符串本身的值。

str[11] = "!";
console.log(str.valueOf()) // hello world  修改失败!

为什么js要这么干?将字符串存储两份,一份是一个一个的对象属性字符集,另一份指向原始值,也就是上图的 [[PrimitiveValue]].。

我觉得它们有一个先后关系,先生成一个一个的对象属性,再由对象属性的一个个字符拼接成 [[PrimitiveValue]];

 

单元总结

  真正的基础是什么?我觉得是它的内在原理,它的实现思路以及实现方式,所以文中并没有给出更多的字符串操作方法,

  本章介绍了字符串调用方法的来历,介绍了字符串下标的原理。下一章讲什么,待定,博主是一边回顾基础,一边理解,一边写博客,当然也有很多不正确的地方,感谢大家包容,更感谢大家指正。

  最后

  ==============================================================================================

  一首诗

  我想写一首诗,

  歌颂风,

  颂唱雨。

  只是,

  我的桌子上没有一支笔,

  诗没有笔可能代表着,

  也许远方不那么远,

  它就在笔上飞扬。

  ================================================================================================

  转载请注明出处。 9月12日划水的下午

 

  

  

 

======================================================== 转载请注明出处。
目录
相关文章
|
JavaScript
JS基础之解构赋值
解构赋值 在js中,我们经常会将对象或者数组里面的一部分数据作为参数传递给函数,如果我们使用传统的.方法会很麻烦。
|
移动开发 JavaScript 前端开发
JavaScript基础知识梳理-上
对JavaScript基础知识梳理-上
198 31
JavaScript基础知识梳理-上
|
存储 JavaScript 前端开发
JavaScript基础(一篇入门)
JavaScript基础(一篇入门)
194 0
JavaScript基础(一篇入门)
|
JavaScript 前端开发
2021琴理工作室JS基础教学(三)
当网页被加载的时候,浏览器就会创建文档对象模型,也就是dom 而dom可以看做一颗树
63 3
2021琴理工作室JS基础教学(三)
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符(三)
文章目录 JavaScript 入门基础 - 运算符(三) 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
132 0
JavaScript 入门基础 - 运算符(三)
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型(二)
JavaScript 入门基础 - 变量 / 数据类型(二)
92 0
JavaScript 入门基础 - 变量 / 数据类型(二)
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍(一)
JavaScript 入门基础 / 概念介绍(一)
119 0
JavaScript 入门基础 / 概念介绍(一)
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
JavaScript 前端开发
vue js文字跑马灯基础版本
提供两种解决思路
263 1
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
121 0
原生js制作选项卡详解,适合无基础的人学习