JS基础学习笔记1(尚硅谷)

下面的内容是本人学习笔记,没有什么可学习性,不喜勿喷。

1、alert弹出窗口

alert("这是我的第一行JS代码");

2、向浏览器输出内容

document.write("这是我的第一行JS代码");

3、向控制台输出内容

console.log("这是我的第一行JS代码");

4、JS代码的位置

<!-- 可以写在HTML元素的属性中 -->
<button onclick="alert('讨厌,点我干嘛!')">点我</button>
<!-- 可以将JS代码写在超链接的href属性中,点击超链接时执行js代码 -->
<a href="javascript:alert('让你点你就点!')">你也点我一下</a>

虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用;
可以将代码写在script标签中;
还可以创建外部js文件中,然后通过script标签引入;写入到外部可以在不同的页面使用,也可以利用到浏览器的缓冲机制
script一旦用于引入外部文件了,就不能在编写代码了,即使编写也会被浏览器忽略;
如果想继续在内部编号,就要创建信的script标签。
从上到写一行一行的执行。

<script src="./javascript.js" type="text/javascript"></script>

5、JS代码的基本语法

注释:

/*
 多行注释,注释的内容不会被执行,但是可以查看
*/
//    单行注释,只对本行有用,养成良好的编写注释的习惯


 /*
    *1、JS中严格区分大小写;
    *2、JS中每一条语句都以(;)分号结尾;如果不写浏览器会自动添加分号,但是会消耗一些系统资源,而且有时候浏览器会加错分号,造成代码执行错误。
    * 3、JS中会忽略多个空格和换行,可以利用空格和换行进行格式化代码;
    * /

6、字面量和变量

字面量是可以直接使用的,但是都不会直接使用字面量。所以,就用变量来保存字面量。
在JS中使用var关键字声明变量。

var a;
a=100;
console.log(a);

7、标识符

在JS中所有的可以由我们自主命名的都可以称为标识符;
例如:变量名、函数名、属性名等;
命名一个标识符需要遵守如下规则:
1、标识符中可以函授字母、数字、下划线-,$ ,智能是前面的几种;
2、标识符不能以数字开头;
3、标识符不能是ES中的关键字或保留字;
4、标识符一般都使用驼峰命名法;
-首字母小写,每个单词的开头字母大写,其余字母小写,例如:helloWord/liMeiHua;
这是规范,不是强制性的。但是建议还是按照规范来设置。
ES底层保存标识符的时候采用的是Unicode编码,所以理论上讲所有的UTF-8中所有的编码都可以设置为标识符;所以中文也可以作为标识符来使用,但是一般不建议用,容易被嘲笑。

8、数据类型

数据类型指的就是字面量的类型:共有六种:
1、String 字符串;
-在JS中使用字符串需要使用引号引起来;
使用双引号和单引号都可以,但是不要混着用。
引号不能嵌套,双引号里面不能放双引号,单引号中不能放单引号,但是可以单引号嵌套双引号,双引号嵌套单引号;
在字符串中可以使用\作为转义字符,表示一些特殊符号时,可以使用转义字符。

str = "我说:\"今天天气真不错\"";
        document.write(str)

2、Number 数值;
-在JS中所有的数值都是Number类型,包括整数和浮点数,
可以使用一个运算符检查一个变量的类型:typeof()

var a=100;
document.write(typeof a);
-JS中表示最大值的用法:  document.write(Number.MAX_VALUE)
如果使用Number超过最大值,返回Infinity,表示正无穷;Infinity是一个字面量;
		var a=Infinity;
        document.write(typeof a);

检查Infinity的类型也是Number类型;
Nan 是一个特殊的数字,Not a Number 不是一个number。也是一个字面量。
使用typeof检查Nan返回的也是Number;
-JS中表示最小值的用法: document.write(Number.MIN_VALUE),表示的0以上的最小值。

计算 在JS中整数的运算可以基本保证

如果使用JS进行浮点数计算,可能得到一个不精准的结果;所有的语言都有这个问题。
所以一般情况下不要使用JS进行对精确度要求比较高的运算;
3、Boolean 布尔值:
-布尔值只有两个:true 真,false 假;主要是做逻辑判断;
使用typeof检测布尔值时,会返回boolean;

var a=true;
document.write(typeof a);

4、Undefined 未定义:
-值就是Undefined,声明了没有赋值的就是未定义;
5、Null 空值:只有一个值就是Null。
-专门用来表示为空的对象;
使用typeof检测null ,会返回object;
6、Object 对象;
前五种属于基本数据类型,object属于引用数据类型。

9、强制类型转换

将一种数据类型强制转换为其它的数据类型:

A将其它数据类型转换为string

方式一:调用被转换数据类型的tostring()方法;
	有一定的局限性:null和undefined两个值没有tostring方法,如果这样调用会报错;
var a=100;
        //调用a的toString()方法;该方法不会影响到原变量;
        var b=a.toString();
        document.write(typeof b);
        document.write(b)

方式二:调用string()函数,并将要转换的数据作为参数;
使用String()函数,对于null和undefined来说,就不会出现上面的情况:
null直接转换为“null”;
undefined直接转换为“undefined”

var a=100;
        a=String(a);
        document.write(a);
        document.write(typeof a);

B将其它数据类型转换为Number

转换方式一:调用Number()函数,注意N是大写的;
-如果是纯数字字符串,则可以直接转换为数字,例如“123”可以转换为123;
-如果字符串中有非数字的内容,则转换为NaN;
-如果是空字符串或者全身空格,则转换为0;
-如果是布尔值,true转换为1,false转换为0;
-Null转换为数字是0;
-undefined转换为数字值是NaN;

 		var a="134";
        a=Number(a);
        document.write(a);
        document.write(typeof a);

转换方式二:专门用来对付字符串的方法:
parseInt() 把一个字符串转换为整数:
-可以将字符中有效的整数提取出来,例如“123px”解析出来数值是123;解析过程中遇到无效的就会终止解析,例如“123a456”解析出来就是123;
parseFloat() 将字符串转换为浮点数;
-可以将字符串中有效的小数部分提取出来;

		var a="134px";
        var b="100.250px";
        a=parseInt(a);
        b=parseFloat(b);
        document.write(a);
        document.write(b);
        

注意:如果非字符串类型的数值使用parseInt和parseFloat,会将数据转换为字符串,然后在转换;

10、进制

0x 开头的表示十六进制,输出的时候都是以十进制输出;
0开头的表示八进制,输出的时候也是以十进制输出;
二进制以0b开头,但是并不是所有的浏览器都支持,并不是经常使用;
类似“070”有的浏览器会当成8进制解析,有的浏览器会当成10进制解析。
可以在parseInt()中传递两个参数:parseInt(a,10);第二个参数表示被解析的数是什么进制的。

11、将其他数据类型转换为Boolean

调用Boolean()函数:
规律:数字转换布尔类型,除了0和NaN是false,其他的都是true;字符串转布尔,除了空串,其他都是true;
null转换为false;undefined转换为false;
对象也会转换为true;

12、运算符

运算符也叫操作符,可以通过运算符可以对一个或多个值进行运算,并获取运算结果:
比如:typeof 就是一个运算符,可以获得一个值的类型;
typeof返回值是string,是用来描述数据类型的。

		var a=123;
        var result= typeof a;
        document.write(result);

算数运算符
加号+ :可以对两个数值进行加法运算,并返回结果。注意:运算符都不会对原变量产生变化。
当对非数值类型的值进行运算时,会先将数值转换为Number在进行运算;
任何值和NaN做运算,结果都是NaN;
两个字符串相加,结果是拼串操作,这是个特殊情况;
任何字值和字符串做加法运算,都会先转换为字符串,在做拼串操作;

特性利用:

 		var a=100;
        a=a+"";
        document.write("a="+a);
        console.log(typeof a);

减号- :可以对两个值进行减法运算;
任何值做-*/运算时都会自动转换为Number类型;
利用这个特性可以做如下操作:

		var a="100";
        a=a-1;
        document.write("a="+a);
        document.write(typeof a);

取模运算%,取余数:

13、一元运算符

一元运算符是只需要一个操作数;
加号+ 正号,正号不会对数字产生任何影响;
负号- 负号,负号可以对数字进行取反;
-对于非Number类型的值:
会先转换为Number,然后在运算;

		var a=100;
        a=+a;
        b=-a;
        var c = true;
        c = -c;
        document.write(a,b,c);

可以对一个其它的数据类型使用+,来将其转换为Number类型,
原理和Number()函数一样。

		var a="100";
        a=+a;
        document.write(a);
        document.write(typeof a);

14、自增和自减

自增:通过自增可以使变量在自身的基础上增加1;
自增运算符:++
对于一个变量自增以后,原变量的值会立即自增1;
自增分成两种,后++(a++)和前++(++a),这两种都能立即使得原变量立即加1,
不同的是:a++的值等于原变量的值,也就是自增前的值;
++a的值是自增后的值;

		var a=100;
        a++;
        ++a;
        document.write(a);
        document.write(typeof a);

自减:通过自减可以使变量在自身的基础上减1;
自减分成两种:后–(a–)和前–(--a)
两种都会立即使变量的值自减1;
不同的是a–和--a的值不同:

15、逻辑运算符(值为布尔值的情况)

JS中有三种逻辑运算符:
	-非! 可以对一个值进行非运算,对一个布尔值进行取反操作,true变false,false变true。如果对一个值进行两次取反,值不会发生变化。
		var a= true;
        a = !a; //取反操作
        document.write(a); //false
        document.write(typeof a); //boolean
	如果对非布尔值进行运算,则将其转换为布尔值,然后在取反。
		var a= 0;
        a = !a;
        document.write(a); //true
        document.write(typeof a); //boolean

可以利用该特点对其它数据类型转换为布尔值,方法就是取两次反:

		var a= "hello";
        a = !!a; //取两次反运算
        document.write(a); //true
        document.write(typeof a); //boolean
	-与&&  可以对符号两侧的值进行与运算,并返回结果:
		运算规则:如果两个值都是true,返回true;如果true和false,只要有一个false,则返回false;
		JS中的“与”是短路的与,如果第一个值为false,则不会再看第二个值;第一个值为true,则会检查第二个值;
		与是找false的运算。
        var result = true && true;
        document.write(result); //true
        document.write(typeof result); //boolean
        ------------------------------------------------
        var result = true && false;
        document.write(result); //false
        document.write(typeof result); //boolean
	-或||  两个都是false返回false,只要有一个是true,就返回true。
	可以简单理解为找true的运算。
	JS中的或属于短路的或,如果第一个值是true,则不在检查第二个值。

16、非布尔值的与或运算(逻辑运算符)

对于非布尔值,进行与或运算,会先转换为布尔值,然后在进行运算,并且返回原值。
与运算,如果两个值都为true,则返回后面的值。

        var result = 1 && 2;
        document.write(result); //2
        document.write(typeof result); //number
        var result2 = 2 && 1;
        document.write(result2); //1
        document.write(typeof result2); //number

与运算,如果两个值中有false,则返回靠前的false。
如果第一个值为true,则必然返回第二个值;
如果第一个值false,则直接返回第一个值。

或运算:如果第一个值为true,则直接返回第一个值;如果第一个值为false,则直接返回第二个值。
或运算是找true的运算。

17、赋值运算符

等号= 可以将符号右侧的值,赋值给左侧的变量;
加等于+= a=a+5等价于a+=5;
减等于-=
乘等于*=
除等于/=
模等于%=

18、关系运算符

通过关系运算符可以比较两个值的大小关系,如果成立则返回true,否则返回false;
大于号>:判断符号左边的值是否大于右侧的值,如果成立返回true,关系不成立返回false;

        var result = 10 > 5;
        document.write(result); //true
        document.write(typeof result); //boolean
 		var result = 10 > 50;
        document.write(result); //false
        document.write(typeof result); //boolean

大于等于>=:判断左侧的值是否大于等于右侧;
小于<:
小于等于<=:
以上规则和数学规则是一样的,就不多说了。

比较特殊的是,非数值情况下,如何运算:

对于非数值进行比较时,会将其转换为数字,然后在比较,
任何值和NaN做任何比较,结果都是false;
如果符号两侧的值都是字符串,不会将其转换为数字进行比较,而会比较字符串的unicode编码,比较字符编号时,一位一位的进行比较,如果两位一样,比较下一位。可以借用这个规则,可以对应为进行排序。比较中文时,没有意义。如果比较两个字符串的数字,可能得到不可预期的结果。如果比较两个字符串型的数字,一定要转型。

19、unicode编码

		//在字符串中使用转义字符输入Unicode编码
        // \u加上四位编码
        document.write("\u2620");  
<!-- 在网页中输出Unicode编码
    &#加上编码;这里的编码需要十进制的。
    -->
    <h1 style="font-size:200px">&#9760;</h1>

20、相等运算符

用来比较两个值是否相等,如果相等返回true,否则返回false;
符号 ==

 		var a=10;
        console.log(a == 4); //false
        console.log(a == 10);//true
        //进行比较时,如果两个值的类型不同,则会自动转换,然后在做比较。
        console.log("1" == 1);//true,将字符串转换成Number。
        console.log(true == "1")//true,将布尔值和字符串都转换成Number。
        console.log(null == 0);//false,这是个特殊情况,没有将null转换成Number
        //nudefined衍生自null
        console.log(undefined == null);//true
        //NaN不和任何值相等,包括他自己本身
        console.log(NaN == NaN);//false

        //判断b是否为NaN
        var b = NaN;
        console.log(b == NaN); //false,这个方法是无法判断的。
        console.log(isNaN(b));//true

不相等,用来判断两个值是否不相等,符号:!=
不相等也会对变量进行自动的类型转换,如果转换后相等,也会返回false;

        console.log(10 != 5);//true
        console.log(10 != 10); //false
        console.log("abcd" != "abcd"); //false
        console.log("1" != 1);//false

全等:=== 用来判断两个值全等,和相等类似,不同的是不会对类型进行转换;
不全等: “”用来判断是否不全等;

21、条件运算符,也叫三元运算符

语法:
条件表达式?语句1:语句2;
执行流程:执行时,首先对条件表达式求值,如果该值为true,则执行语句1,如果该值为false,则执行语句2,并返回执行结果;如果条件语句的表达式不是非布尔值,会将其转换成布尔值在执行。

	  var a=30;
      var b=20//利用这个方法可以获取两个值中的最大值
      var max = a>b?a:b;
      console.log("max="+max);
      var a=30;
      var b=1200;
      var c=90;
      //利用这个方法比较三个值中的最大值
      var max = a>b?a:b;
      max = max>c?max:c;
      console.log("max="+max);

第二种简单写法:

      var a=30;
      var b=10;
      var c=90;
      //不推荐这么写,不方便阅读,但是如果遇到这样的语句,要能看的懂;
      var max = a>b?(a>c?a:c):(b>c?b:c);
      console.log("max="+max);

22、运算符的优先级

逗号的作用,可以用来分割多个语句,一般在声明多个变量的时候使用:
优先级:就和数学中一样,在JS中也有优先级:
先乘除后加减;
在JS中有优先级的表,越靠上优先级越高,优先级越高,越先计算,如果优先级一样,就从左到右开始计算;
这个表不用记忆,如果遇到优先级不清楚的,可以使用括号来改变优先级;

おすすめ

転載: blog.csdn.net/weixin_47401101/article/details/112801742