JavaScript学习 第一篇

于 2022-11-28 14:17:45 发布
阅读量273 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128074834
本文详细介绍了JavaScript的基础知识，包括其历史、编写位置、基本语法、数据类型、字符串处理、运算符及类型转换等内容，适合初学者快速上手。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JavaScript学习：重生之我要精通编程语言修仙 第一篇

一、JavaScript简介

1.JavaScript简介
JavaScript：又称Java脚本，诞生于1995年，由Netscape公司开发。一个 完整 的JavaScript的实现是由以下三个部分构成：斜体样式
ECMAScript、DOM、BOM
作用：最开始主要作用是用于处理网页中的前端验证。
前端验证：检查用户输入的内容是否符合一定的规则，
例如：用户名的长度，密码的长度，邮件的格式等。
通常意义上讲：ES,JS,ECMAScript,JavaScript这四者都是指的同一个东西；但是实际意义上JavaScript的含义却要更大一点。
特点：
1.解释性语言
2.类似C和Java的语言
3.动态语言
4.基于原型的面向对象

二、JS的基础

JavaScript的识别是从上至下，优先级依次降低。
script:JS的内容可以写在script里面的
PS：script写在<head>或是写在<body>都可以运行

例子：
alert("这是一个警告框")
document.write("")
console.log("")

PS:
1.document.write()表示向文档里输出内容，1个网页就是一个文档；

2.console.log()表示向控制台输出内容

    <script>
        alert("这是我的第一个JS")
        document.write("你好")
        console.log("欢迎你，召唤师")
     </script>

三、JS编写位置

可以讲JS代码编写到标签的onclick属性中，也可以写到超链接的href属性中
例如： 
<button onclick="alert('')"></button>
<a href="javascript:alert('');"></a>

此外，同CSS一样（共三种编写位置），JS代码也可以先放置在JS文件中，
然后通过外部引入，达到一样的效果
例如：
 <script src="JS.js"></script>

PS：
1.<a href="javascript:"></a>可以空着，不填写内容，方便之后添加样式或脚本；

2.JS代码虽然可以写在标签的属性中，但是它们属于结构与行为耦合，
不方便维护，不推荐使用，可以将JS代码写在script标签中；

3.外部JS文件的引入是比较常用的方法,
既可以在不同的页面中同时引用，又可以利用到浏览器的缓存机制。

4.JS一旦用于引入外部文件，就不能在编写代码了，即使编写了浏览器也会忽略，
如果需要，则可以在创建一个新的script标签，用于编写内部代码。

<head>
    <script src="JS.js"></script>
</head>

<body>
    <button οnclick="alert('恭喜你，找到我啦')">找找我在哪里？</button>
    <a href="javascript:alert('真棒，你找到我了');">猜猜我在哪？</a> -->
</body>

四、JS的基本语法

JS的基本语法:
1.JS中，严格区分大小写；

2.JS中，每一条语句以分号（;）为结尾,如果不写分号（;），
浏览器会自动添加，但是会消耗一些系统资源，而且有时候，
浏览器会加错分号（;），所以在开发中，分号（；）必须写；

3.JS中，会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。
ctrl + / ：单行注释（//）
ctrl + alt + a :多行注释（/* */）

五、字面量和变量

字面量：都是一些不可改变的值（可以理解为常量）
变量：可以用来保存自变量，而且变量的值是可以任意改变的

PS：
1.字面量都是可以直接使用的，但是我们一般都不会直接使用字面量，
而变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，
而且变量还可以对字面量进行描述。

2.在JS中，使用var关键字来声明一个变量：
例如 var a; 

3.在JS中，可以为变量赋值：
例如 a = 100；

4.在JS中，声明和赋值可以同时进行：
例如 var a = 100；

    <script>
        var a;
        a = 345;
        var width = 300;
        // alert(a);
        console.log(a);
        document.write(width);
    </script>

六、标识符

在JS中，所有的可以由我们自主命名的，都可以称为标识符
例如：变量名、函数名、属性名都属于标识符

PS：
命名一个标识符的规则如下：
1.标识符可以含有字母、数字、_、$；
2.标识符不能以数字开头；
3.标识符不能是ES中的关键字或保留字；
4.标识符一般采用驼峰命名法

驼峰命名法：首字母小写，每个单词的开头字母大写，其余字母小写

JS底层保存标识符时实际上时采用Unicode编码，
所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。

<body>
    <img src="../images/关键字和保留字.png" alt="" title="关键字和保留字">
    <img src="../images/其他不建议使用的标识符.png" alt="" title="其他不建议使用的标识符">
</body>

在这里插入图片描述

七、数据类型

数据类型：字面量的类型

PS：
在JS中，一共有六种数据类型
1.String 字符串
2.Number 数值
3.Boolean 布尔值
4.Null  空值
5.Undefined 未定义
6.Object 对象

其中 String、Number、Boolean、Null、Undefined属于基本数据类型
而 Object属于引用数据类型

八、String 字符串

1.在JS中，使用字符串，需要使用引号（""）引起来;
例如 var str = "hello";

2.使用双引号（""）或单引号（''）都可以但是不要混着用;

3.引号不能嵌套，双引号里不能放双引号，单引号里不能放单引号
例如 var x = "他说'hello'";

4.在字符串中，我们可以使用 \ 作为转义字符，当表示一些特殊符号时，
可以使用 \ ，进行转移 
例如 var x = "他说：\"你好，世界！\"";
转义字符常见的用处：
\" 表示 "
\' 表示 '
\n 表示 换行
\t 表示 制表符（相当于按了一次tab键）
\\ 表示 \
\\\\ 表示 \\

5.var x = "hi"; 加上""表示一个字符串
  var x = hi;   不加""表示一个变量

    <script>
        var  x = "你好，世界";
        var x = "他说'hello'";
        var x = "他\ns说：\"你好，世界！\"";
        document.write(x);
    </script>

九、Number 数值

在JS中，所有的数值都是Number类型，
包括整数和浮点数（小数）

PS:
1.检查变量类型 运算符typeof
语法：typeof 变量

2.JS中，可以表示数字的最大值：
Number.MAX_VALUE[1.7976931348623157e+308(308位的数值)]
如果使用Nmuber表示的数字超过了最大值，则会返回一个Infinity(表示正无穷)
使用typeof 检查Infinity，也会返回Number
此外，Infinity本身就是一个字面量
也可以表示数字的最小值：
Number.MIN_VALUE[5e-324(0以上的最小值)]

3.在JS中，如果使用字符串进行数学运算，则会返回NaN
NaN是一个特殊的数字，表示 Not a Number
此外，NaN本身也是一个字面量

4.如果使用JS进行浮点数运算，可能得到一个不精确的结果，
所以千万不要使用JS进行对精确度要求比较高的运算。

    <script>
        // var x = 123;
        // var y = "123";
        // document.write(typeof x);
        // document.write(typeof y);
        document.write(Number.MIN_VALUE);
        // var x = "abc" * "abc";
        // document.write();
    </script>

十、Boolean 布尔值

布尔值只有两个,主要用来做逻辑判断

一个是true,表示真
另一个是false,表示假

例如：var bool = true;或var bool = false;
使用typeof检查布尔值时，会返回Boolean

	<script>
		var bool = true;
		document.write(bool);
	</script>

十一、Null 空值

Null(空值)类型的值只有一个，就是null
例如：var x = null;

    <script>
        var x = null;
        // document.write(x);
        document.write(typeof x);
    </script>

十二、Undefined 未定义

Undefined类型的值只有一个，就是undefined
当声明一个变量，但是并不给变量赋值时，它的值就是undefined
使用typeof检查一个undefined时，也会返回undefined

    <script>
        var a;
        document.write(a);
    </script>

十三、强制的类型转换

指将一个数据类型强制转换为其他的数据类型
类型转换主要指，将其他的数据类型，转换为 String Number Boolean

1.1 转换为 String

方法一：
调用被转换数据类型的toString（）方法

例如：
var a = 123;
a.toString();

注：该方法不会影响到原变量，它会将转换结果返回。
但是要注意：null和undefined没有toString()方法，如果调用他们的方法，会报错。

方式二（推荐）：
调用String函数,并将被转换的数据作为参数传递给函数

例如:String();

注：使用String()函数做强制类型转换时，
对于Number和Boolean实际上就是调用的toString()方法，
但是对于null和undefined,就不会调用toString()方法,
它会将null直接转换为"null",将undefined直接转换为"undefined"。

    <script>
        // var a = 123;
        // var b = a.toString();
        // document.write(typeof b);
        // document.write(b);
        // var a = true;
        // a = a.toString();
        // document.write(typeof a);
        // document.write(a);
        var a = 123;
        a = String(a);
        document.write(typeof a);
        document.write(a);
    </script>

1.2 转换为 Number

方式一：
使用Number()函数

例如：Number();

注：如果时纯数字的字符串，则直接将其转换为数字；

（1）.字符串→数字：
如果字符串中有非数字的内容，则转换为NaN;
如果字符串时一个空串或者是一个全是空格的字符串，则转换为0

（2）.布尔值→数字：
true转成1
false转成0

（3）.Null→数字：
null转成0

（4）.Undefined→数字：
undefined转成NaN

方式二（专门用来对付字符串）：

parseInt()把一个字符串转换为一个整数;
parseFloat()把一个字符串转换为一个浮点数;

parseInt()和parseFloat()作用相似，不同的是parseFloat()它可以获得有效的小数；
如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作

    <script>
        // var a = "123";
        // a = Number(a);
        // document.write(typeof a);
        // document.write(a);

        // var a = "123px ";
        // a = parseInt(a);
        var a = "123.324px";
        a = parseFloat(a);
        document.write(typeof a);
        document.write( a);
    </script>

1.3 转换为 Boolean

方式一：
使用Boolean（）函数
(1).数字→布尔值：

除了0和NaN,其他的都是true
(2).字符串→布尔值：

除了空串，其余的都是ture
(3).Null、undefined→布尔值:

都会转换为false,此外对象也会转换为true.

方式二（推荐）：
为任意的数据类型做两次非运算，即可将其转换为布尔值

例如：
var a = "hello";
a = !!a;

    <script>
        var a = 123;
        a = Boolean(a);
        document.write(a);
    </script>

十四、其他进制的数字

1.在JS中，如果需要表示16进制的数字，则需要以0x开头，0x开头的都是16进制的数字;
例如：var a = 0x10;

2.如果需要表示8进制的数字，则需要以0开头
例如：var a = 070;

3.如果需要表示2进制的数字，则需要以0b开头，但是不是所有的浏览器都支持
例如： var a = 0b10;

注；像"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析，
可以在parseInt()中传递一个第二个参数来指定数字的进制,中间用，隔开
例如:parseInt(a,10);

    <script>
        var a , b , c , d;
        // a = 0xCafe;
        // b = 070;
        // c = 0b10;
        // document.write(a);
        // document.write(b);
        // document.write(c);
        d = "070";
        d = parseInt(d,10);
        document.write(d);
    </script>

十五、运算符

通过运算符可以对一个或者多个值，进行运算并获取运算结果。
例如：typeof就是运算符，可以来获得一个值的类型，它会将值的类型以字符串的形式返回。

1.1 算术运算符

<1>. +:可以以对两个值加法运算，并将结果返回
注：
1.当对非Number类型的值进行运算时，会将这些值转换为Number类型然后运算；

2.任何值和NaN做运算，都得到NaN;

3.如果对两个字符串进行加法运算，则会做拼串;

4.任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作;

5.可以将任意的数据类型+一个""，即可将其转换为String，我们可以利用这一特点，
来将一个任意的数据类型转换为String。这是一个隐式的类型转换，由浏览器自动完成，
实际上它也是调用String（）函数.

<2>. -:可以对两个值进行减法运算，并将结果返回

<3>. *:可以对两个值进行乘法运算，并将结果返回

<4>. /:可以对两个值进行除法运算，并将结果返回

<5>. %:取模运算(取余数)

注：
任何值做-、*、/运算时，都会自动转换为Number，
我们可以利用这一特点，做隐式的类型转换，
可以通过为一个值-0、*1、/1来将其转换为Number，原理和Number()函数一样，使用起来更加简单。

    <script>
        var a = 123;
        a= a + 1;
        a = 456 + 789;
        a = true +false;
        a = 2 + null;
        a = 2 + NaN;
/*      var x ="酒后不知天在水，" + "满船清梦压星河。";
        document.write(x); */
        a = 123 + "1";
        a = "1" + 2 + 3 + 4;
        a = 100 -5;
        a = 100 - true;
        a = 100 - "1";
        a = 2 * 2;
        a = 2 * "8";
        a = 2 * undefined;
        a = 2 * null;
        a = 4 / 2;
        a = 3 / 2;
        a = 9 % 3;
        a = 9 % 2;
        a = 9 % 5;
        document.write("a = "+ a);
    </script>

1.2 一元运算符

只需要一个操作数

+ 正号
正号不会对数字产生任何影响

- 负号
负号可以对数字进行负号的取反(负负得正)

注：对于非Number类型的值：它会将其先转换为Number，然后再运算。
所以，可以对一个其他的数据类型使用+，来将其转换为Number,它的原理和Number()函数一样。

    <script>
        var a = 10;
        a = +a;
        a = -a;
        a = true;
        a = -a;
        a = 1 + +"2" + 3;
        document.write("a = " + a);
        document.write(typeof a);
    </script>

1.3 自增和自减

1.3.1 自增

自增：通过自增可以使变量再自身的基础上增加1
对于一个变量自增以后，原变量的值会立即自增1

自增分成两种：
如后++，即a++；如前++，即++a，无论是a++，还是++a

都会立即使原变量的值自增1。
不同的使a++和++a的值不一样

a++的值等于原变量的值，即自增前的值。（先运算后自增）
++a的值等于原变量新值，即自增后的值。（先自增后运算）

例如 a++;(a++是表达式，不过a的值被修改了)

1.3.2 自减

自减：通过自减可以使变量在自身的基础上减1
自减分为两种：
后--，即a--;先--，即--a

无论使a--还是--a都会使立即使原变量的值自减1
不同的是a--和--a的值不同

a--是变量的原值（自减前的值）
--a是变量的新值（自减后的值）

    <script>
        var a = 10;
        // document.write("a++ ="+ a++);
        // document.write("a =" + a);
        // document.write("++a =" + ++a);
        // document.write("a =" + a);
        var b = 10;
        b--;
        document.write("b-- = " + b);
    </script>

1.4 逻辑运算符

1.4.1 ！非

！非
！可以以用来对一个值进行非运算
所谓非运算就是值对一个布尔值进行取反操作，true变false,false变true

如果对一个值进行两次取反，它不会变化，如果对非布尔值进行运算，
则会将其转换为布尔值，然后再取反。

所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值，
可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean（）一样

1.4.2 &&与

&&与(一假全假)
&&可以对符号两侧的值进行与运算，并返回结果,如果两个值都是ture,
则返回ture(false同理)但只要有一个false，则返回false.

运算规则：
1.两个值中，只要有一个值为false，就返回false，只有两个值都为true时，才会返回true

2.在JS中，&&属于短路的与，如果第一个值为false，则不必再看第二个值

1.4.3 ||或

||或（一真全真）
||可以对符号两侧的值进行或运算，并返回结果

运算规则：
1.两个值中，只要有一个true，就返回true,
如果两个值都为false,才返回false

2.JS中的||属于短路的或，如果第一个值为true,则不会检查第二个值

    <script>
/*         var a = ture;
        a = !a;
        var a;
        a = 10;
        a = !a;
        document.write("a = " +a); */
/*         false && alert("nihao");
        var x = false && true;
        document.write("x = "  +x); */

        var x = false || true;
        document.write("x = "+ x);
    </script>

&&、||非布尔值的情况

对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值。

&&中，查找第一个为false，则返回第一个；
查找第一个为true，不符合条件，则继续查找第二个
（即如果第一个值为true,则必然返回第二个值；如果第一个值为false,则直接返回第一个值。）

||中，查找第一个为true，则返回第一个；
查找第一个为false，不符合条件，则继续查找第二个

    <script>
        // true && true
        var x = 1 && 10;
        // false && true
        var x = 0 && 7;
        document.write("x =" + x);
    </script>

1.5 赋值运算符

<1>. =：可以将符号右侧的值赋值给符号左侧的变量
<2>. +=：a += 5; 等价于 a = a + 5;
<3>. -=：a -= 5; 等价于 a = a - 5;
<4>. *=：a *= 5; 等价于 a = a * 5;
<5>. /=：a /= 5; 等价于 a = a / 5;
<6>. %=：a %= 5; 等价于 a = a % 5;

1.6 关系运算符

通过关系运算符可以比较两个值之间的大小关系，
如果关系成立，它会返回true,如果关系不成立，则返回false
<1>. >大于号
判断符号左侧的值是否大于右侧的
如果关系成立，则返回true;如果关系不成立，则返回false

<2>. >=
判断符号左侧的值是否大于或等于右侧的值

<3>. <
判断符号左侧的值是否小于右侧的

<4>. <=
判断符号左侧的值是否小于或等于右侧的值

    <script>
        var x = 5 > 10;
        x = 10 >= 10;
        x = 1 >= true;
        x = 1 >= "0";
        x = "a" < "b";
        document.write("x =" +x);
    </script>

1.7 相等运算符

相等运算符用来比较两个值是否相等，
如果相等，返回true;否则，返回false

1.7.1 == 相等

==:
1.当使用 == 来比较两个值时，如果值的类型不同，
则会自动进行类型转换，将其转换为相同的类型，然后再比较

2.undefined 衍生自 null
这两个值做相等判断时，会返回true

3.NaN不和任何值相等，包括它本身
但是可以通过isNaN()函数，来判断一个值是否是NaN
如果该值是NaN则返回true,否则，则返回false

1.7.2 ！= 不相等

!=:
1.不相等用来判断两个值是否不相等，如果不相等返回true,否则，返回false;

2.不相等也会对变量进行自动的类型转换，如果转换后类型相等，他也会返回false

1.7.3 === 全等

===:
用来判断两个值是否全等，它和相等类似，不同的是它不会自动做类型转换,
如果两个值的类型不同，直接返回false

1.7.4 !== 不全等

用来判断两个值是否不全等，和不等类似，不同的是它不会自动做类型转换,
如果两个值的类型不同，直接返回false

   <script>
        var a = 10;
/*      document.write(a == 12);
        document.write("<br>");
        document.write("1" == 1);
        document.write("<br>");
        document.write(  true == "\n1");
        document.write("<br>");
        document.write(undefined == null);
        document.write("<br>");
        document.write(NaN == NaN);
        document.write("<br>");
        var b = NaN;
        
        document.write(isNaN(b));

        b = isNaN(b);
        document.write(b);
        document.write("<br>"); */
        
/*      document.write(10 != 5);
        document.write("<br>");
        document.write(10 != 10);
        document.write("<br>");
        document.write("abcd" != "abcd");
        document.write("<br>");
        document.write("1" != 1); */
        
        document.write("123" === 123);
        document.write("<br>");
        document.write("234" !== 234);
    </script>

1.8 条件运算符

条件运算符（三元运算符）
语法：条件表达式 ? 语句1 : 语句2；
执行的流程：
条件运算符在执行时，首先对条件表达式进行求值；

如果该值为true，则执行语句1，并返回执行效果
如果该值为false,则执行语句2，并返回执行结果

如果条件的表达式的求值结果时一个非布尔值，
会先将其转换为布尔值，然后再运算

    <script>
/*      var a = 30;
        var b = 20;
        var c = 50;
        x > y ? alert("a大") : alert("b大")  ;
        var max = a > b ? a : b;
        max = max > c ? max : c;
        document.write("max = " + max); */
        "hello" ? alert("语句1") : alert("语句2");
    </script>

十六、编码

1.在字符串中使用转义字符输入Unicode编码
\u四位编码

2.在网页中使用Unicode编码
&#编码；这里的编码需要的是10进制

    <script>
        var a = "\u2620";
        a = "&#9760";
        document.write("a = " + a);
    </script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值