一篇文章带你快速入门JavaScript（自学者福利）-猿圈-程序猿的知识社区

课程推荐：Java开发工程师--学习猿地精品课程

一、开始之前
1、JavaScript的简史
1）1992年Nombas开发出C-minus-minus，也叫C–，没错，就是C++的另一个兄弟。它是嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase，是一种客户端执行语言。
2）那个时候有好几个版本的Web编程语言，欧洲计算机制造协会为了统一几家语言，定义了ECMA-262规范。从此，Web 浏览器将 ECMAScript 作为 JavaScript 实现的基础。
3）Javascript 是Angularjs、Vue 等技术的基础，它是一门相当完善的编程语言，能够写前端也可以写后端，只是用作前端开发比较多

2、JavaScript的组成
尽管 ECMAScript 是一个重要的标准，但完整的JavaScript其实有三大部分组成：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
顺便提一下，JavaScript的基于对象的编程语言，属于面向对象的一种特殊情况，JavaScript本身提供了很多我们可以直接使用的对象。

3、JavaScript的引入方式
1）直接引入

1
2
3
2）导入js文件
file

1
4、注意：

二、数据类型
1、变量
1）概念：
ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，因此在ES6中用let和const来解决这个问题。

直接定义：全局变量
带var：只有全局作用域和函数作用域概念，没有块级作用域的概念。但是会把{}内也假称为块作用域
带let：只有块级作用域的概念，由 { } 包括起来，if语句和for语句里面的{ }也属于块级作用域。
//整个for循环是父级作用域，循环体内是另一个{}块级作用域
for( let i = 0 ; i < 3 ; i++ )
{
let i = 'hello';　　　　//用var替代let会报错提示已经定义，若没有任何关键字则每次赋值给i，最后只会输出一次abc
console.log(i);　　 // 输出3次abc
}
1
2
3
4
5
6
2）var和let的区别：
第一，就是var是全局作用域和函数作用域概念，而let是块级作用域概念；
第二，let在变量声明之前就访问变量的话，会直接提示 ReferenceError，而不像 var 那样使用默认值 undefined；
第三， var 存在变量提升，而 let，const（后面会提及）声明的变量却不存在变量提升，所以用 let 定义的变量一定要在声明后再使用，否则会报错。

3）暂时性死区（TDZ）：

var a = 99;
if(ture)
{
console.log(a); //ReferrenceError
let a = 66;
}
1
2
3
4
5
6
因为let所声明的变量会锁在它所在的作用域里，不允许访问。意思就是，它会先扫描一遍，把let声明的变量保存起来，但是不允许使用，这时候你访问a，由于此作用域中有a，就不用访问外面的a了，但是你不能在它声明之前访问它。
也就是说，var变量可以多次声明，而let不允许在相同作用域内重复声明。

if(true){
  var d;
  var d;    //不会报错
}

if (true) {
  var c;
  let c; // Uncaught SyntaxError: Identifier 'c' has already been declared
}

if (true) {
  let d;
  var d; // Uncaught SyntaxError: Identifier 'd' has already been declared
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
4）const常量：
const常量与let的作用域是一样的，都是块级作用域。
const 一旦被赋值，就不能再改变，但这并不意味着使用 const 声明的变量本身不可变，只是说它不可被再次赋值，因此const 声明的变量必须经过初始化（定义时就赋值）。

//会报错，Uncaught ReferenceError: ture is not defined
// const zoroo;
// zoroo="ok";
// console.log(zoroo);
//正确定义
const zoroo="ok";
console.log(zoroo);
1
2
3
4
5
6
7
2、数字类型（number）
1）概念

最基本的数据类型；
不区分整型数值和浮点型数值；
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式；
2）NaN表示Not a number，非数字类型

//NaN表示Not a number，非数字类型
console.log(parseInt("hello"));
console.log(parseInt("123hello"));
console.log(parseInt(3.1415926));
1
2
3
4
3、字符串类型（string）
是由Unicode字符、数字、标点符号组成的序列；
JavaScript中没有字符类型
常用特殊字符在字符串中的表达：
字符串中部分特殊字符必须加上右划线
常用的转义字符 \n:换行 ':单引号 ":双引号 \:右划线
以上几条都是字符串类型的几个基础点，在后文介绍“字符串对象”时还有关于字符串更多的用法

4、布尔型、Null和Undefined
1）布尔型
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0

2）undefined型
Undefined 型只有一个值，即 undefined；
当声明的变量未初始化时，该变量的默认值是 undefined；
当函数无明确返回值时，返回的也是值 “undefined”。

3）Null型
Null型只有一个专用值 null，即它的字面量；
值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的；
尽管这两个值相等，但它们的含义不同：undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）；
如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

5、数据类型转换
1）概念：
JavaScript属于松散类型的程序语言，变量在声明的时候并不需要指定数据类型；
变量只有在赋值的时候才会确定数据类型；
表达式中包含不同类型数据则在计算过程中会强制进行类别转换；

数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false
console.log("hello"+2);
console.log("hello"+true);
console.log(2+true);
1
2
3
2）强制数据类型转换

parseInt函数：强制转换成整数例如parseInt("3.1415926")=3 ; parseInt(“12a")=12 ;
parseFloat函数：强制转换成浮点数 parseFloat("123.456")=123.456
eval函数：将字符串强制转换为表达式并返回结果 console.log(eval("1+1")) 结果是2；
console.log(eval("5+6"));会默认转化成数字，结果是11
三、运算符
1、基本概念

加(＋)、减(－)、乘(*) 、除(/) 、余数(% )
-号除了可以表示减号还可以表示负号例如：x=-y
+号除了可以表示加法运算还可以用于字符串的连接例如：“abc”+“def”=“abcdef”
2、递增(++) 与递减(–)

    let i=10, j=20;
    console.log(i++)
    console.log(++i)
    console.log(j--)
    console.log(--j)

1
2
3
4
5
结果是：
file
3、逻辑运算符

等于 ( == ) 、不等于( != ) 、大于( > ) 、小于( < )

大于等于(>=) 、小于等于(<=)

与 (&&) 、或(||) 、非(!)

    let a=NaN;
    console.log(a==NaN);
    console.log(a!=NaN);
    console.log(2==2);
    console.log(2=="2");
    console.log("3">"20"); //最高位的ASCII码

1
2
3
4
5
6
结果：
file

四、控制语句
1、if判断语句
这个与其他编程语言没有太大区别，格式如下：

    v1="灰太狼";
    if(v1=="慢羊羊")
    {
        alert("老家伙");
    }
    else if(v1=="灰太狼")
    {
        alert("狼族统治");
    }
    else
    {
        alert("新任村长")
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
2、switch选择控制
这个与C语言中的switch用法几乎是一样的，格式如下：

    v2=52;
    switch(v2)
    {
        case 13:alert("一生");break;
        case 14:alert("一世");break;
        case 520:alert("五二零");break;
        default:alert("啥也不是");
    }

1
2
3
4
5
6
7
8
3、for循环
JavaScript里的for循环也是和C语言、Java的几乎相同：

    let v3;
    for(v3=0;v3<10;v3++)
    {
        // alert("v3当前的值为："+v3);
        document.write("<br>v3当前的值为："+v3);
    }

1
2
3
4
5
6
这里的documents.write()表示将信息打印到页面内，结果如下：
for循环

4、while循环
可以说是for循环的基础版，for循环有三个参数，第一个是定义的值，第二个判断条件，第三个是每循环一次进行的值操作。
在while循环内，没有第一个和第三个参数。

    var i=1;
    while (i<=7)
    {
        document.write("<H"+i+">JavaScript</H "+i+"> ");
        document.write("<br>");
        i++;
    }

1
2
3
4
5
6
7
以上代码实现的是循环输出H1到H7字体大小：
file

5、异常处理

try：正常进行的部分
catch：出现异常才会执行的部分
finally：无论如何都会执行的部分
try
{
console.log("正常执行！");
//自行抛出一个异常
throw Error("自定义异常！");
}
catch(e)
{
console.log("出现异常！"+e);
}
finally
{
console.log("终将执行的语句！");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
file

五、ECMA对象
1、对象须知
object对象：ECMAScript 中的所有对象都由这个对象继承而来；Object 对象中的所有属性和方法都会出现在其他对象中
11种内置对象：Array ,String , Date, Math, Boolean, Number Function,
Global, Error, RegExp , Object
在JavaScript可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的
file
2、string对象
1）创建字符串的两种方式
一是直接创建字符串，而是用string对象来创建字符串

str1="Hello一号";  //字符串方式
str2=new String("Hello二号");  //字符串对象方式
console.log(typeof str1);
console.log(typeof str2);
console.log(str1.length);  //统计长度的属性

1
2
3
4
5
2）字符串的常用方法

格式编排方法
str1="Hello一号";
console.log(str1.italics()); //斜体
console.log(str1.bold()); //加粗
console.log(str1.anchor()); //变成a标签
1
2
3
4
file

格式转换
var str1="helLO，JAvascript";
var str2=str1.toLowerCase(); //全部变成小写
var str3=str1.toUpperCase(); //全部变成大写
console.log(str2);
console.log(str3);
1
2
3
4
5
格式转换
file
获取指定字符
var str1="welcome to the world of JS!栀子！";
var str2=str1.charAt(28); //获取28这个索引下的字符
var str3=str1.charCodeAt(28); //获取28这个索引下字符的编码
console.log(str2);
console.log(str3);
1
2
3
4
5
file

查询指定字符
var str1="welcome to the world of JS!";
var str2=str1.indexOf("o"); //查询字符o的索引位置
var str3=str1.lastIndexOf("l"); //查询字符l的索引位置
console.log(str2);
console.log(str3);
1
2
3
4
5
file

查询字符串
match返回匹配字符串的数组，如果没有匹配则返回null
search返回匹配字符串的首字符位置索引

var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
console.log(str2[0]);
console.log(str3);

1
2
3
4
5
file

截取字符串
str1="Hello七号";
console.log(str1.substr(1,5)); //从1截取到4
console.log(str1.substring(1,5)); //从1截取到5
console.log(str1.slice(1,5)); //从1切片到5
console.log(str1.slice(-2,7)); //切片位置可以是负数
1
2
3
4
5
file

字符串替换
var str1="abcdefgh";
var str2=str1.replace("def","jjjjjj"); //用jjjjjj替换def
console.log(str2);
1
2
3
file

字符串分割
var str1="一,二,三,四,五,六,日";
var str2=str1.split(","); //用，号将字符串分割开
console.log(str2);
1
2
3
file

字符串连接
var str1="abcd";
var str2=str1.concat("efgh"); //在str1后面接上一段
console.log(str2);
1
2
3
file

3、Array对象
1）一维数组

arr1=[1314,"曾经沧海难为水",{name:"Za huw"}];  //数组内可以放任意元素
arr2=new Array(3);  //大小为3的数组对象
arr3=new Array("数组object对象",true,12345);  //用Array对象方式创建数组
console.log(arr1);
console.log(arr2);
console.log(arr3);

1
2
3
4
5
6
file
2）二维数组

cnarr1=new Array(4);
cnarr1[0]=new Array(7);
cnarr1[0][0]="Monday";
cnarr1[0][1]="Tuesday";
cnarr1[0][2]="Wednesday";
cnarr1[0][3]="Thursday";
cnarr1[0][4]="Friday";
cnarr1[0][5]="Saturday";
cnarr1[0][6]="Sunday";
console.log(cnarr1);

1
2
3
4
5
6
7
8
9
10
第一维的大小为4，索引为0的第二维大小为7
file

3）数组对象的方法
file
file

4）join方法

arr4=new Array("除却","巫山","不是云",11,22,33,4);
console.log(arr4.join("--"));

1
2
file
5）toString方法

vv=new Array(11,22,33,4);
console.log(vv.toString());
console.log(typeof vv.toString())

1
2
3
file

6）concat方法

vv2= Array(123,4,5);
ret=vv2.concat([678,9,10]);
console.log(ret);
console.log(typeof ret);

1
2
3
4
file

7）reverse方法

vv3=[11,22,33,44];
vv4=[5,40,6,1,7];
console.log(vv3.reverse());  //顺序颠倒

1
2
3
file

8）两种排序
不正经的：

vv4=[5,40,6,1,7];
console.log(vv4.sort());

1
2
正经的：

function so(a,b)
{
    return a-b;
}
console.log(vv4.sort(so));

1
2
3
4
5
file
9）push入栈与pop出栈
这两种出入栈方式都是先进后出

arr8=[1,2,3];
arr8.push(4,5,6);  //入栈，加入到最后面
console.log(arr8); 
console.log(arr8.pop());  //出栈，移除最后一个6

1
2
3
4
file
10）unshift入栈与shift出栈

arr9=[8,9,10];
arr10=["world"];
arr9.unshift(4,5,6,7);  //入栈，加入到最前面
arr10.unshift("hello,");  //入栈
arr9.shift();  //出栈，移除第一个
console.log(arr9);
console.log(arr10);

1
2
3
4
5
6
7
file

4、函数对象
1）JS函数概念

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以
2）两种定义方式

复杂版
obj=new Function("name","console.log(\"哈哈哈\"+name)");
obj("平底锅！");
1
2
常用版
function add(x,y,z)
{
return x+y+z;
}
console.log(add(1,2,3,4,5)); //数字多了不会报错，只会取前三个
console.log(add("两情若是长久时，","又岂在","朝朝暮暮。")); //字符串也能相加
1
2
3
4
5
6
file

3）不限参数个数的函数

function add()
{
    sum=0;
    for(i=0;i<arguments.length;i++)
    {
        sum+=arguments[i];
    }
    return sum;
}
console.log(add(1,2,3,4,5,6,7,8,9,10));

1
2
3
4
5
6
7
8
9
10
file
4）匿名函数
说白了就是没有名字的函数，也叫自执行函数；
好处就是简便；
缺点就是易读性差

(function(arv){alert(arv);})("欢迎访问！");
1
这里表示的就是一个没有名字的函数，执行内容在{}内，形参参数是arv；
调用函数时传入的参数是“欢迎访问”
最终结果：
匿名函数
一篇文章当然不太可能完全囊括所有知识点的，但是我所提供的都是常用并且学习JavaScript必须掌握的重点，学会这些知识点，一定是可以达到入门级别的，同时感谢大家的阅读。

文章转载自：https://blog.csdn.net/Viewinfinitely/article/details/105956703?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.pc_relevant_is_cache&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.pc_relevant_is_cache

菜单 学习猿地 - LMONKEY

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

人生苦短我要学Python！

PHP开发工程师

PHP是世界上最好的编程语言!

GO开发工程师

想优雅的写程序，赶紧GO!

大数据开发工程师

弄大数据，就是在搞革命!

前端开发工程师

不仅最好，而且最全!

UI开发工程师

这个世界从来不缺少美，缺少你来创造美!

Linux运维工程师

不只是说说而已！

WEB前端1+X

不仅为考证，轻松做开发

计算机二级（C语言）

一切只为考证！

猿工手册

各种工具精挑细选

猿材料

各种工具精挑细选

猿代码

各种工具精挑细选

猿著课件

各种工具精挑细选

知识题库

知识闯关节节高，刷题涨知识！

阶段练习

单元测试知识学习状况秒掌握！

期末考试

期末测试，学习情况即刻知道！

面试题库

最新的企业技术人员招聘真题练习！

Java专区

2948篇 ｜ 24.5万人浏览

Python专区

2593篇 ｜ 19.5万人浏览

大数据专区

2948篇 ｜ 18.5万人浏览

PHP专区

3953篇 ｜ 27.5万人浏览

Go专区

1382篇 ｜ 12.5万人浏览

Web前端专区

1453篇 ｜ 31.5万人浏览

Linux云计算

1230篇 ｜ 4.5万人浏览

其他专区

53232篇文章 ｜ 11.5万人浏览

搜索

历史记录 清除记录

近期热搜

项目开发全程实录（电商EW_Shop）

8674 人 1年前

轻松学会Laravel-项目篇（商城API）

2022 人 1年前

Python数据分析2.0-金融

325 人 1年前

Python办公自动化2.0

241 人 1年前

使用账号登录

启用更安全省心的  微信登录

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

菜单学习猿地 - LMONKEY

尊享10项VIP特权持续新增

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览

历史记录清除记录

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览