js基本

Posted akangwx0624

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js基本相关的知识,希望对你有一定的参考价值。

  5.数值转换

      在javascript里面,有3个函数可以将非数值的数据转为数值,分别

      是Number(),parseInt() 以及parseFloat()这3个方法,下面我们将依次对这几个方法进行介绍

      Number0:可以将非数值转为数值

      使用Number()函数的时候,有下面几个规则需要注意:

      .如果是Boolean值, true和false将分 别被转换为1和0

      ●如果是数字,那么就是简单的传入和返回●如果是null值, 那么返回0

      ●如果是undefined, 那么返回NaN

      示例如下:

      console. log(Number(true));//1console. log(Number(false));//0console. log(Number(10));//10console. log(Number(null));//0

      console. log(Number (undefined);//NaN

      如果是字符串,那么又有如下的规则: .如果字符串只包含数字,则将其转为十进制,即1”会变成1,”123"变成123, 而“011"会变为11 (注意这里不会被当成八进制来处理)

      ,如果字符串中包含有效的十六进制格式,如"1.1”, 则将其转换为对应的浮点数值

      。如果字符串中包含有效的十六进制格式,例如"0xf", 则会将其转换为相同大小的十进制整

      如果字符串是空的,则将其转换为0

      如果字符串包含上述格式之外的字符,则将其转换为NaN

      示例

      console. log(Number("1"));//1console. log(Number(*012"));//12console. log(Number("6010"));//8console. loq(Number111"));//7console. log(Number("3.14"));//3.14console. log(Number("0xf"));//15console. log(Numbr*"));//0

      console. log(Number("123Hello"));//NaN

      parselnt0:也是将一个非数值转为数值

      说明相比number0函数,parsent0会更多的看是否有数字,有就会将其转换为数值。 最简单的例子为numbern函数转换"123H elo"时会转换为NaN, arsent)则会将其转换为123.碰到空字符串时,number0函数会将其转换为0,而parseintO则会将其转换为NaN最后是在碰到小数时,会有一个取整的过程。 例如314"会被转换为"3"示例:

      console. log(parseInt("1"));//1console. log(parseInt("12));//1/2console. log(Numtbe(*0"));//8console. log(Numbt1*6111"));//7console. log(parselnt(3.14"));//3. consale loanarselt(*11.//15)

我们的parseInt)从Es5开始还提供了第二个参数,那就是指定参数是多少进制,这样parseInt()函数就可以将指定的进制转换为十进制,如下:

      console. log(parseInt("012"));//12console. Log(parseInt("012" ,8));//10

//如果是16进制数,后面添加上参数16后,字符串前面可以不写

      console. Log(parseInt("AF"));//NaNconsole. log(parseInt("AF",16));//175

除此之外,我们的parseInt()函数的第2个参数还可以是任意值,八进制前面不用加前面的0,十六进制不用加前面的0x

console. log(parseInt("21" ,3));//7console. log(parseInt("18",2));//2console. log(parseInt("11",8));//9console. log(parseInt("AF",16));//175

 

parseFloat0:将非数值转为浮点数

说明: parseFloat(只解析 +进制值,所以没有第二个参数,该函数会将带有小数点的字符串转换为小数。如果没有小数点的数会被转换为整数。同样的parseFloat0也是尽可能转换更 多的数值,例如"123Hello"会被转换为123.示例

      console. log(parseFloat (*21"));//21

      console. log(parseF loat("123Hello"));//123console. Log(parseF loat("0xA"));//8

      console. log(parseF Loat("3.14"));//3.14

  1.字符串介绍

      这是程序里面使用最为广泛的一种类型。ascop里面,可以使用单引号,也可以使用双引

   N

      Let a= "abcd";let b= ‘abcd‘ ;

      这里需要注意个问题, 就是字符串的内容本身包含单引号或者双引号的话,需要和字符串界限符区分开,如下:

      let a= "Hello ‘World‘ ,welcome";//正确Let b= ‘Hello "World" , welcome‘ ;//正碑Let c = "Hello "World" ,welcome";//错误

      当然,我们这里使用转义字符也是一个很好的选择,如下:

      let a= "Hello ‘World‘ ,welcome"://正确let b = ‘Hello“World" welcome‘;//正确Let c二"Hello \"World\" ,welcome";//正确

      字符串这种数据类型非常的霸道,它和其他数据类型相加都会被转换为字符串类型,示例如下:

      Let a = "abcd";Let b=13+ a;Letc=3.14+a;Letd= true +a;

Let f = undefined + a;

console. log(typeof b);//stringconsole. log(typeof c)://stringconsole. log(typeof d);//stringconsole. log(typeof e)://stringconsole. log(typeof f);//string

所以如果我们要让一个非字符串的变量转换为字符串的话, 只需要和个空字符串相加就可以了。

当然,转换字符串事实上我们也有相应的函数来转换,最常见的就是toString0函数。

toString0

说明:该函数会将除了null和undefined以外的数据类型转换为字符串。示例

      Let a= 18,b = true,c = null,d;

      console. log(typeof a. toStr ing());//string

      console. log(typeof b. toString());//stringconsole. log(typeof c. toString));//报错console. log( typeof d. toString());

可以看到,程序报错,因还有一个知识点,就是oString0函数在转换数值的时候因为allundefined并不能通过toString0函数来转换为相应的字符串。是可以带有参数的。可以将数值指定转换

为几进制示例:

      i= 10;

console.console. log(i. toStringogli. tstrin31/1010());//18;//18console. logli.toftring8));//12

这个时候,Jascip还有一个函数是Srino, 这个函数就可以种数据类型都转换为字符事,示例:

      let a= 18,b = true,c = null,d;

      console. log(String(a),  rpef String(a));//18 stringconsole.log(Stri  (b), typeof string))i//true stringconsole.log(string(c), typeof Stringl();//null string

 

console. log(String(d), typeof Str ngl)//undfined string

2.字符串模板字符串模板

ES6中新增了模板字面量是增强版的字符串,它用反引号()标识

let str = Hello World ;

      console. log(str)://Hello Worldconsole. log(typeof str);//string console. log(str.length);//11

以上代码中,使用模板字面量语法创建一个字符串,并赋值给message变量,这时变量的值与一个普通的字符串无异

如果想在字符串中包含反引号,只需使用反斜杠\转义即可

ES6的模板字面量使多行字符串更易创建,因为它不需要特殊的语法,只需在想要的位置直接换行即可,此处的换行会同步出现在结果中

      Let str =Hello World ;

      console. log(str);

变量占位符允许将任何有效的15表达式成入到模板字面量中,并将其结果输出为字符串的一部分

      变量占位符由起始的S(与结束的)来界定,之间允许放入任意的JS表达式。最简单的变量占位符允许将本地变量直接嵌入到结果字符串中

      let name = "xiejie";

      console.log( Hello, $name );//Hello,xiejie

占位符$name)会访问本地变量name,并将其值插入到message字符串中。message变量会立即保留该占位符的结果

既然占位符是JS表达式,那么可替换的就不仅仅是简单的变量名。可以轻易嵌入运算符、函数调用等

      Let count = 10,price = 0.25;

      console. log( $count items cost sl(count*price).toFixed(2)) );//10 items cost $2.50

      2-3-6 symbol类型

      ES5中包含5种原始类型:字符串、数字、布尔值、nulundefindn ES6引|入了第6种原始类型:symbol

      ESS的对象属性名都是字符事,很容易造成属性名冲突。比如,使用了一个他人提供的对象, 想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证了属性名冲突。这就是ES6引入symbol的每个属性的名字都是独一无的,这样就从根本上防止了原因。

      1/简单值

Let str = "Hello World";Let num = 10;Let bol = true;Let myNull = null;

      let undef = undef ined;//复杂值

      letobj=

      name : ‘xiejie‘,age : 18,

      isPassed : true;

      Let arr = [1,2,3,"Hello" , true];

3.访问方式

按值访问

简单值是作为不可细化的值进行存储和使用的,引用它们会转移其值

      let str = "Hello";Let str2 = str;str = null;

 

      console. log(str,str2);//null "Hello"

 引用访问:
      复杂值是通过引用进行存储和操作的,而不是实际的值。创建-个包含复杂对象的变量时,其值是内存中的一个引用地址。引用一个复杂对象时,使用它的名称(即变量或对象属性)通过内存中的引用地址获取该对象值
      let obj = ;let obj2 = obj;
      obj.name = "xiejie";
      console. log(obj .name);//xiejieconsole. Log(obj2.name);//xiejie
      4.比较方式
      简单值采用值比较,而复杂值采用引用比较。复杂值只有在引用相同的对象即有相同的地址时才相等。即使是包含相同对象的两个变量也彼此不相等,因为它们并不指向同一个对象
      示例1:
      Let a= 10;Let b= 10;
      Let c = new Number(10);Let d= c;
      console. Log(a === b);//trueconsole. log(a = c);//falseconsole.log(a = c);//trued=10;
      console. log(d ciconsole. loa(d === c);/= c);//true)://false 

2-4运算符
任何编程语言基本上都离不开运算符。在JavaScript中也是 支持众多运算符的。例如最常见的算数运算符,比较运算符,逻辑运算符等。接下来, 就让我们起来看T下JavaSript中这几种常见的运算符。

2-4-1算数运算符
常见的算数运算符有加减乘除和取模运算。主要需要注意的就是,在动态语言中做除法运算时,能够得到小数。下面是关于算数运算符的示例:

console.log(5 + 3.14);//8.14console. log(6一11);//-5console.log(7 * 3);//21console.Iog(5 ! 2);//2.5console. log(10 % 3);//1

ES6开始新增加了求幕运算,使用两个号代表求幂。以此可以代替以前的Mth.pow()方法
console.log(2 ** 3);//8
2-4-2-元运算符
所谓元运算符,就是指只作用于一个操作数的运算符。和递增递减运算符。

常见的一元运算符有两种,赋值运算符
此外还有自那关于赋值运算符,前面我们已经见到过了。第一系列健情沅管符且休的示例加下:最常见的就是=  代表将右边的内容赋值给左边。

  2.递增和递减

 

除了上面所介绍的赋值运算符以外,常见要注意前置和后置的区别。  元运算符还有递增和递减。在递增递减中,主要需是先参与运算,然后再自增或者自减,示例如下自如果是前置,那么是先自增或自减,然后参与运算。如果是后置,则

 

      前置示例:

 

      leta=2;Letb=10;

 

      letc=--a+b;Let d=a+ b;

 

      console. log(a,b,c,d)://1 10 11 11

 

后置示例:

 

      Let a= 2;letb=10;

 

      letc=a--+ b;Letd=a +b;

 

      console. log(a,b,c,d);//1 10 12 11

 

需要注意的是,我们的自增自减操作符不仅仅局限于数值,其他类型也可以,遵循下面的规则:

 

      , 在应用于一个包含有效数字字符的字符串时,现将其转换为数字值,再执行加减1操作。字符串变量变为了数值变量。

 

      , 在应用于一个不包含有效数字字符的字符串时,将变量的值设置为NaN,字符串变量变成数值变量。

 

      , 遇布尔值faise时, 先将其转换为0再执行加减1操作,布尔值变量变成数值变量。.遇布尔值true时,先将其转换为1再执行加减1操作,布尔值变量变成数值变量。●在应用浮点数数值时,执行加减1操作。

1.关系运算符

 

      ★  白ne小于,大于,小于等于,大于等于数的比较就不用说了,如下

 

      console. log(5 > 3);//trueconsole.og(3 > 5);//false

 

      主要说下字符串的比较,如下:

 

      console.log("e" > "b");//trueconsole. log("C" > "box");//true

 

      这里的比较主要是按照ASCI码来进行比较的。

 

      则转换为NaN如果是一个字符串和个数字进行比较那么会将字符串先转换为数字,如果不能转接为数字,

 

      console.Log("5" > 3);//true, 因为“5"转为了5/任何个数与NaN进行关系比较返回的都是false

 

      N console. log("Hello" > 3);//false, 因为"Hello"转为TNaN

 

      完整的特殊规则如下:

 

      ●如果两个数都是数值,则执行数值比较

 

      ●如果两个数都是字符串,则比较两个字符串对应的字符编码

 

      ●如果一个操作数是数值,则将另个操作数转换为一个數值,然后执行数值的比较

 

      , 如果一个操作数是对象,则调用这个对象的value0f() 方法,用得到的结果按照前面的规则执行比较。如果对象没有value0f() 方法,则调用toString()方法,并用得到的结果根据前面的规则执行比较。

 

      如果一个数是布尔值,则先将其转换为数值,然后再进行比较

1.非

所谓非,就是取反,非真即假,非假即真

let i = true;

console. log(!i);//false

 

非运算符不仅仅只能用于布尔值,其他数据类型也是可以的,如下:

如果操作数是一个对象, 返回talse如果操作数是个空字符串,返回true如果操作数是一个非空字符串,返回taise如果操作数是数值0,返回true

如果操作数是任意非0数值(包括ifnity),返回faise如果操作数是null,返回true如果操作数是NaN,返回rue

如果操作数是undefined,返回true

console. lglfal5l):///console. log(!"blue");//false

console. log( !0)://trueconsole. log( !NaN);//trueconsole. log( /://trueconsole. Log(!12)://false

2.与
作用于两到多个值,并且只有所有的操作数都是真值时,才为irue
consoLe.Log(false && true);//falseconsole.log(true & true);//true
JavaScript里面的与存在短路现象,具体说明如下:
●第一个操作数为真会进入第二个操作数的判断,且无论第二个操作数真假,都会返回第二
个操作数。
●第一个操作数为假:不会进入第二个操作数的判断,直接返回第一个操作数。

来看下面的例子:
console.log(3 && 5);//5
console. log("Hello" 8& 20);//28
console. log("Hello" 8& false);//false
console. log(" 86 "se/;//console. log("Hello" && ‘);///ou
下面是关于与运算符的道经典练习题:
Let a =true;
let b= a & c;//因为a是true,所以会判断第2个数console. log(b);
//ReferenceError: C is notdefined

3.或
同样是作用于两到多个值,但是只要有一个操作数为真, 就返回真
console.log(false I true);//trueconsole.log(true I1 false);//true
JavaScript里面的或同样存在短路现象,具体说明如下:
.如果第一个操作数为真,则不会进入第二个数的判断。所以无论第二个操作数真假,都直接返回第一个操作数
●如果第一个操作数为假,则会进入第二个数的判断。但是无论第二个操作数真假,都直接返
回第二个操作数
来看下面的例子:
console. log(false I1 true);//trueconsole. log("Hello" I1 "");//Helo console. log("Hello" 11 "str");//Helloconsole. log(NaN 11 "");//*/
console.log(0 I "Hello World");//Hello worldconsole. log(" 11 ‘str‘);//strconsole.log(‘‘ 11 false);//false
下面是关于或运算符的道经典练习题:
Let a= false;
Letb=a i C;//因为是false,所以会判断第个数console. log(b);

3-1条件语句
条件语句,主要就是给定一个判断条件, 并在程序执行过程中判断该条件是否成立,然后根据判断结果来执行不同的操作,从而改变代码的执行顺序,实现更多的功能。-般来讲,条件语句可以分为3种单分支语句,双分支语句以及多分支语句,我们个个来看。
3-1-1单分支语句
单分支语句,由一个i组成,如果条件成立,则进入代码块开始执行语句,单分支语句的语法如下:
if(条件)
11条件为真时执行的代码
示例:
I
let age = 20;if(age >= 18)
console. log("你已经是成年人了");

如果条件不是一个布尔值,那么会被自动转换为布尔值
if(1)
console. Log("Hello");

双分支语句:

顾名思义,就是有两个分支线,如果if条件不成立,那么就会跳入到else语句

 

 

 

 

 

 

以上是关于js基本的主要内容,如果未能解决你的问题,请参考以下文章

1.1 js 面向对象的基本概念和基本使用方法

JS的基本数据类型

js中基本包装类型详情

JS学习基本功

JS基本语法

js基本概述