前端知识如何入门？带你夯实JavaScript基础

曾经终败给现在 2023-09-28 13:43 11阅读 0赞

**目录**

一. javaScript简介

1.1 javaScript语言的特点：

1.2 javaScript语言的版本

1.3 JavaScript的组成部分

二. javaScript基本结构

2.1.javaScript基本结构

2.2 javaScript在页面中的位置

2.3 网页中引用JavaScript的方式

三. javaScript基本语法

3.1 变量的声明与赋值

3.1.1.使用let声明变量

3.1.2.使用var声明变量

3.2 js中的数据类型

3.3 特殊值 NaN、Infinity

3.4 js中的运算符

3.4.1 ==与===

3.4.2 js中的数据类型转换

四. 流程控制语句

4.1 if语句

4.1.1 if-else语句：

4.1.2 多重if else语句

4.2 switch语句

4.3.while语句

4.4.do while语句

4.5.for语句

五. 函数

5.1 函数的声明与调用

5.2 函数的参数与返回值

5.3 js中的作用域

5.3.1 js中有什么样的作用域

5.3.2 声明变量时let与var的区别

六. 数组

6.1 创建数组

6.2 使用数组

七. 常用内置对象

7.1 Array 数组内置对象

7.2 String 字符串内置对象

7.3 Date 日期内置对象

7.4 Math 数学内置对象

7.5 Global内置对象

八. 前端学习专栏

--------------------

## 一. javaScript简介 ##

### **1.1 javaScript语言的特点：** ###

>  *  脚本语言：JavaScript是一种解释型的脚本语言，它不同与java、C等语言先编译后执行，而JavaScript可以直接执行。
>  *  基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
>  *  简单:JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
>  *  跨平台：JavaScript与操作系统无关，只要有一个js引擎（运行环境），就可以运行js代码。目前大多数浏览器都自带js引擎，所以可以在浏览器中运行js代码。
>  *  嵌入式：需要在html页面上操作html元素，因此需要调用浏览器提供的操作html元素的接口（html dom接口），因此开发时要同时兼备html+css+javascript+dom的技能。

### **1.2 javaScript语言的版本** ###

> ECMAScript定义了javaScript的语法，由ECMA（欧洲计算机制造商协会）来定义。 目前最新版本是ES2015，俗称ES6。

### **1.3 JavaScript的组成部分** ###

> JavaScript的三个主要组成部分是：
> 
>  *  ECMAScript(核心)
>  *  DOM（文档对象模型）
>  *  BOM（浏览器对象模型）。

--------------------

## 二. javaScript基本结构 ##

### 2.1.javaScript基本结构 ###

> 在一个html页面中，javaScript代码可以写在script标签中。

>  **注意：**
> 
>  *  script标签中的type属性与language属性都可以省略。
>  *  行尾可以写分号，也可以不写； 但是，初学者建议都要写分号。
>  *  单行注释：// 多行注释： //

### 2.2 javaScript在页面中的位置 ###

> 可以将JavaScript代码放在html文件中任何位置。
> 
>  *  放在head部分: 最常用的方式是在页面中head部分放置script元素，head部分会先加载，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。所以进行页面显示初始化的js必须放在head里面。
>  *  放在body部分: JavaScript代码在网页读取到该语句的时候就会执行。也就是按照顺序执行。
>  *  script标签可以有多个。

### 2.3 网页中引用JavaScript的方式 ###

> 可以把HTML文件和JS代码分开,并单独创建一个外部JavaScript文件（简称JS文件），其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

> 注意：在JS文件中，不需要script标签,直接编写JavaScript代码就可以了。

> JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

--------------------

## 三. javaScript基本语法 ##

### 3.1 变量的声明与赋值 ###

> javascript是弱数据类型语言，声明时不需要指定数据类型。数据类型完全由值类型决定。

#### 3.1.1.使用let声明变量 ####

> 声明变量语法： let 变量名 = 变量值；

let num = 10;
    console.log(num);

> 注意：
> 
>  *  let是关键词，后面跟变量名。表示声明一个变量，
>  *  变量的数据类型由所赋值的类型来决定。

> 变量的命名规范：
> 
>  *  变量必须使用字母、下划线( \_ )或者美元符( $ )开始。
>  *  然后可以使用任意多个英文字母、数字、下划线或者美元符组成。
>  *  变量名区分大小写，如:A与a是两个不同变量。
>  *  不能使用JavaScript关键词与JavaScript保留字。
>  *  变量名最长为255个字符（实际上可以超过）。

#### 3.1.2.使用var声明变量 ####

> 声明变量语法： var 变量名 = 变量值；

var num = 10;
    console.log(num);

> 注意：有关var与let的区别，在函数作用域中在做讲解。

### 3.2 js中的数据类型 ###

> js中的数据类型有六种：
> 
>  *  undefined-未定义类型：未被赋值的变量，值为undefined
>  *  boolean-布尔类型：值为true/false
>  *  number-数字类型：任何数字（NaN也是number类型，表示“非数”）
>  *  string-字符串类型：值用引号（单引号或者双引号）括起来
>  *  object-对象类型：null、数组、Date等
>  *  function-函数类型：function函数

> 注意：以上数据类型中，undefined、boolean、number、string也被称为原始数据类型。

> 可使用typeof获取变量数据类型：

let num;   
    console.log(typeof num)       //返回undefined
    num = 10;
    console.log(typeof num)       //返回number
    num = 'abc';
    console.log(typeof num)       //返回string
    num = true;
    console.log(typeof num)       //返回boolean
    function getDate(){}
    console.log(typeof getDate)   //返回function
    num = [];
    console.log(typeof num)       //返回object
    num = new Date();
    console.log(typeof num)       //返回object
    num = null;
    console.log(typeof num)       //返回object

### 3.3 特殊值 NaN、Infinity ###

>  *  NaN，即非数值(Not a Number)是一个特殊的值，用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。

console.log(parseInt('a'));                 //NaN

>  *  NaN和任何数据进行运算结果仍然是NaN。因此，想要判断一个变量是不是NaN时，不能使用这种形式：a==NaN，而要使用isNaN()函数：isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值，如果可以转就返回false:

console.log(isNaN(5));     //false
    console.log(isNaN('5'));   //false
    console.log(isNaN('a'));   //true

>  *  Infinity 即无穷，是一个特殊的值

console.log(10/0);    //Infinity

### 3.4 js中的运算符 ###

![e5839015c87784a28310edd3f1eb7189.png][]

#### 3.4.1 ==与=== ####

> == 相等运算符 运行时，“==”操作符会自动将两端的操作数转换为同一种数据类型后再作比较。

console.log(1=='1');    //true

> === 严格相等（等同运算符 ） “===”是严格意义上的相等，两个值和它们的类型完全一致时才返回true。

console.log(1==='1');    //false

#### 3.4.2 js中的数据类型转换 ####

>  *  隐式转换：减、乘、除可自动进行隐式转换。

let num1 = '10';
    let num2 = '5';
    console.log(num1-num2)    //5
    console.log(num1*num2)    //50
    console.log(num1/num2)    //2

>  *  强制转换：
> 
> 1.  parseInt() ：将字符串转换成整数。
> 2.  parseFloat() ：将字符串转换成浮点数。

let str1 = '10';
    let str2 = '10.5'
    console.log(parseInt('10')+parseFloat('10.5'));  //20.5

--------------------

## 四. 流程控制语句 ##

### 4.1 if语句 ###

#### **4.1.1 if-else语句：** ####

let score = 60;
    if(score>=60){
        console.log('及格了');
    }else{
        console.log('不及格');
    }

#### **4.1.2 多重if else语句** ####

### 4.2 switch语句 ###

let level = 1;
    switch (level) {
        case 1:
            console.log('第一名')
            break;
        case 2:
            console.log('第二名')
            break;
        case 3:
            console.log('第三名')
            break;        
        default:
            console.log('重考')
            break;
    }

### 4.3.while语句 ###

let i = 0;
    while(i<5){
        console.log(i);
        i++;
    }

### 4.4.do while语句 ###

let num = 123456;
    do{
        console.log(num%10);
        num = Math.trunc(num/10);   //Math.trunc()方法去除数字的小数部分，保留整数部分。
    }while(num!=0);

### 4.5.for语句 ###

for(let i=0;i<5;i++){
        console.log(i);
    }

--------------------

## 五. 函数 ##

### 5.1 函数的声明与调用 ###

> 声明函数有多种方式，常用的有两种：

**1）function 函数名( )\{ //函数体; \}**

> 注意：
> 
>  *  function：定义函数的关键字。
>  *  函数名后的小括号中写参数。
>  *  如果函数体中有return语句时，就表示函数有返回值。

function add(){
        console.log('我是一个函数');
    }
    add();

**2）let 函数名 = function()\{ //函数体; \}**

> 注意：此两种方式是完全等效的

let add = function(){
        console.log('我是一个函数');
    }
    add();

### 5.2 函数的参数与返回值 ###

>  *  由于js中参数不用声明数据类型，所以函数参数可以直接写
>  *  只要函数体内有return语句，那么函数就有返回值。

//第一种方式
    function add(num1,num2){
        return num1 + num2;
    }
    console.log(add(10,20));

//第二种方式
    let add = function(num1,num2){
        return num1 + num2;
    }
    console.log(add(10,20));

### 5.3 js中的作用域 ###

#### 5.3.1 js中有什么样的作用域 ####

> 在javaScript中，只有函数作用域，没有块级作用域。下面使用var来声明变量进行演示：

if(true){
        var num1 = 10;
    }
    function say(){
        var num2 = 20;
    }
    console.log(num1);     //10   （if块没有独立作用域，所以可以访问）
    console.log(num2);     //Uncaught ReferenceError: num2 is not defined

#### 5.3.2 声明变量时let与var的区别 ####

> 为了在javaScript中也能使用块级作用域，ES6中新增了let关键词。使用let声明的变量就存在块级作用域。

if(true){
        let num1 = 10;
    }
    function say(){
        let num2 = 20;
    }
    console.log(num1);     //Uncaught ReferenceError: num1 is not defined
    console.log(num2);     //Uncaught ReferenceError: num2 is not defined

--------------------

## 六. 数组 ##

### 6.1 创建数组 ###

> 创建数组有多种方式：

//1、创建数组时不指定长度
    let arr = new Array();   
    //2、创建数组时指定长度（一般不使用）
    let arr = new Array(5);  
    //3、创建数组时直接赋值
    let arr = new Array(10,20,30);   
    //4、创建数组时直接赋值
    let arr = [66,80,90,77,59];

> javaScript中的数组有如下特点：
> 
>  *  数组下标从0开始。
>  *  虽然创建数组时，指定了长度，但实际上数组都是可变长度的，即使超出指定长度也不会有任何问题。
>  *  数组存储的数据可以是任何类型。
> 
> 综上所述：javaScript中的数组，更像是java中的集合。

let arr = new Array(5);  
    arr[5] = 10;
    arr[6] = 'hello';
    console.log(arr[5]);      //10
    console.log(arr[6]);      //hello

### 6.2 使用数组 ###

> 数组中有一个属性length，此属性返回数组的长度。所以，可以使用length属性对数组进行遍历操作。

let arr = [55,23,89,65,11];  
    console.log(arr.length);        //5
    //遍历数组
    for(let i=0;i<arr.length;i++){
        console.log(arr[i]);
    }

--------------------

## 七. 常用内置对象 ##

> javaScript语言给我们内置了很多封装好的通用接口，是以对象的属性和方法、函数的形式存在。

### 7.1 Array 数组内置对象 ###

![fd8c3d34b1255e22fb918048d5403b4c.png][]

> 下面对一些常用方法做示例：

*  push()方法：

let arr = [55,3,89,9,11];  
    arr.push(99);            //向数组中追加一个元素
    console.log(arr);        //55,3,89,9,11,99

*  sort()方法：

//sort()方法按照字符串规则排序
    let arr1 = ['SMITH','WARD','MARTIN','CLARK','TURNER'];
    arr1.sort();
    console.log(arr1);     //"CLARK", "MARTIN", "SMITH", "TURNER", "WARD"
    //所以，当对数字进行排序时，就会出现问题，此时，可以自定义排序规则函数进行排序
    let arr2 = [55,3,89,9,11];
    arr2.sort(rule);
    function rule(num1,num2){
        return num1-num2;
    }
    console.log(arr2);     //3, 9, 11, 55, 89

*  join()方法

let arr = [2020,08,04];
    let result = arr.join('-');
    console.log(result);        //2020-8-4

*  splice()方法

//从数组中间删除元素：splice(开始位置,删除元素长度)
    let arr1 = [1,2,3,4,5,6,7,8,9];
    arr1.splice(2,3);
    console.log(arr1);    //运行结果：1,2,6,7,8,9
    //在数组中间插入元素：splice(开始位置,删除元素长度,新插入元素… …)
    let arr2 = [1,2,3,4,5,6,7,8,9];
    arr2.splice(2,0,31,32,33);
    console.log(arr2);   //运行结果：1,2,31,32,33,3,4,5,6,7,8,9
    //替换数组中某个元素：splice(开始位置,要替换的元素长度,替换元素… …)
    let arr3 = [1,2,3,4,5,6,7,8,9];
    arr3.splice(2,1,33);
    console.log(arr3);    //运行结果：1,2,33,4,5,6,7,8,9

### 7.2 String 字符串内置对象 ###

![8c4d87eed8031b15f52adebfab441ce1.png][]

> 下面对一些常用方法做示例：

*  charAt()方法

let str = 'hello';
    for(let i=0;i<str.length;i++){
        console.log(str.charAt(i));      //h e l l o
    }

*  indexOf()方法

let str = 'hello.js';
    console.log(str.indexOf('.'));       //5

*  substring()方法

let str = 'zhangsan@163.com';
    console.log(str.substring(str.indexOf('@')+1));                    //163.com
    console.log(str.substring(str.indexOf('@')+1,str.indexOf('.')));   //163

*  split()方法

let str = '2020-08-04';
    let arr = str.split('-');
    console.log(arr);             //"2020", "08", "04"

### 7.3 Date 日期内置对象 ###

![4a8740a9fe005356f310d72c0cfcb2dc.png][]

> 示例：

let mydate = new Date();
    console.log(mydate);  //Tue Aug 04 2020 17:15:22 GMT+0800 (中国标准时间)

> 实战应用：获取当前日期：

function getCurDate() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        return year + "-" + month + "-" + day;
    }
    console.log(getCurDate());

### 7.4 Math 数学内置对象 ###

![ae1019596646d8362622bfae77448a6b.png][]

//返回0-9的随机整数
    console.log(Math.floor(Math.random()*10));

### 7.5 Global内置对象 ###

> Global(全局)对象是ECMAScript中一个特别的对象，此对象不可直接访问。 在ECMAScript中，不属于任何其他对象的属性和方法，都属于Global。

*  parseInt() 将字符串转换成整形

let str = '100';
    console.log(parseInt(str)+1);       //101

*  parseFloat() 将字符串转换成浮点型

let str = '100.5';
    console.log(parseFloat(str)+1);       //101.5

*  eval() 将一个字符串解析为javascript代码并执行

console.log(eval('1+2'));            //3

--------------------

## **八. 前端学习专栏** ##

[https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482![icon-default.png_t_M5H6][]https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482][https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]

[e5839015c87784a28310edd3f1eb7189.png]: https://img-blog.csdnimg.cn/img_convert/e5839015c87784a28310edd3f1eb7189.png
[fd8c3d34b1255e22fb918048d5403b4c.png]: https://img-blog.csdnimg.cn/img_convert/fd8c3d34b1255e22fb918048d5403b4c.png
[8c4d87eed8031b15f52adebfab441ce1.png]: https://img-blog.csdnimg.cn/img_convert/8c4d87eed8031b15f52adebfab441ce1.png
[4a8740a9fe005356f310d72c0cfcb2dc.png]: https://img-blog.csdnimg.cn/img_convert/4a8740a9fe005356f310d72c0cfcb2dc.png
[ae1019596646d8362622bfae77448a6b.png]: https://img-blog.csdnimg.cn/img_convert/ae1019596646d8362622bfae77448a6b.png
[icon-default.png_t_M5H6]: https://csdnimg.cn/release/blog_editor_html/release2.1.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M5H6
[https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]: https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482