一篇文章带你快速入门JavaScript（自学者福利）

文章目录

一、开始之前
二、数据类型

1、变量
2、数字类型（number）
3、字符串类型（string）
4、布尔型、Null和Undefined
5、数据类型转换

三、运算符
四、控制语句
五、ECMA对象

1、对象须知
2、string对象
3、Array对象
4、函数对象

一、开始之前

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）直接引入

<script>
    alert("hello JS");
</script>

2）导入js文件

<script  src="test.js"></script>

4、注意：
<script>标签一般放在<body>标签内，也可以放在与<body>和<head>标签同级
JavaScript使用来注释/* */ //
使用{}来封装代码块
每个语句结束后可加‘;’号，也可不加分号

二、数据类型

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
    }

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;
}

因为let所声明的变量会锁在它所在的作用域里，不允许访问。意思就是，它会先扫描一遍，把let声明的变量保存起来，但是不允许使用，这时候你访问a，由于此作用域中有a，就不用访问外面的a了，但是你不能在它声明之前访问它。
也就是说，var变量可以多次声明，而let不允许在相同作用域内重复声明。

<script>
    if (true) {
      let a;
      let a; // Uncaught SyntaxError: Identifier 'a' has already been declared
    }

    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
    }
</script>

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);

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));

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);

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)

结果是：
递增递减
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、if判断语句
这个与其他编程语言没有太大区别，格式如下：

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

2、switch选择控制
这个与C语言中的switch用法几乎是一样的，格式如下：

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

3、for循环
JavaScript里的for循环也是和C语言、Java的几乎相同：

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

这里的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++;
        }

以上代码实现的是循环输出H1到H7字体大小：
while循环

5、异常处理

try：正常进行的部分
catch：出现异常才会执行的部分
finally：无论如何都会执行的部分

try
        {
            console.log("正常执行！");
            //自行抛出一个异常
            throw Error("自定义异常！");
        }
        catch(e)
        {
            console.log("出现异常！"+e);
        }
        finally
        {
            console.log("终将执行的语句！");
        }

异常处理

五、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程序大多数功能都是通过对象实现的

2、string对象

1）创建字符串的两种方式
一是直接创建字符串，而是用string对象来创建字符串

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

2）字符串的常用方法

格式编排方法

	str1="Hello一号";
    console.log(str1.italics()); //斜体
    console.log(str1.bold());  //加粗
    console.log(str1.anchor());  //变成a标签

格式编排

格式转换

	var str1="helLO，JAvascript";
    var str2=str1.toLowerCase();  //全部变成小写
    var str3=str1.toUpperCase();  //全部变成大写
    console.log(str2);
    console.log(str3);

格式转换

获取指定字符

	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);

获取字符

查询指定字符

	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);

查询字符串

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);

查询字符串

截取字符串

	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));  //切片位置可以是负数

字符串替换

	var str1="abcdefgh";
    var str2=str1.replace("def","jjjjjj");  //用jjjjjj替换def
    console.log(str2);

字符串分割

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

字符串连接

	var str1="abcd";
    var str2=str1.concat("efgh");  //在str1后面接上一段
    console.log(str2);

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);

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);

第一维的大小为4，索引为0的第二维大小为7

3）数组对象的方法
数组1
数组2

4）join方法

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

join
5）toString方法

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

tostring

6）concat方法

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

concat

7）reverse方法

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

8）两种排序
不正经的：

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

正经的：

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

9）push入栈与pop出栈
这两种出入栈方式都是先进后出

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

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);

4、函数对象

1）JS函数概念

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

2）两种定义方式

复杂版

	obj=new Function("name","console.log(\"哈哈哈\"+name)");
    obj("平底锅！");

常用版

	function add(x,y,z)
    {
        return x+y+z;
    }
    console.log(add(1,2,3,4,5));  //数字多了不会报错，只会取前三个
    console.log(add("两情若是长久时，","又岂在","朝朝暮暮。"));  //字符串也能相加

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));

不限个数
4）匿名函数
说白了就是没有名字的函数，也叫自执行函数；
好处就是简便；
缺点就是易读性差

(function(arv){alert(arv);})("欢迎访问！");

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

这是本人写的第一篇文字过万的文章，也的确是花了好几个小时来测试代码，然后将知识点总结起来，最后就是在博客里码字了。从下午一直做到了凌晨，当然本人的知识也有限，如有错误请各位进步者指出，不必手下留情。