前端知识如何入门？带你夯实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="text/javascript" language="JavaScript">
    //在控制台输出“hello world！”
    console.log('hello world!');
</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文件中。

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

三. 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中的运算符

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

强制转换：

parseInt() ：将字符串转换成整数。
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语句

let score = 80;
if(score>=90){
    console.log('优秀');
}else if(score>=80&&score<90){
    console.log('良好');
}else if(score>=60&&score<80){
    console.log('中等');
}else{
    console.log('不及格');
}

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 数组内置对象

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

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 字符串内置对象

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

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 日期内置对象

示例：

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 数学内置对象

//返回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.5482https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482

Hulake_

关注

18
点赞
踩
50

收藏

觉得还不错? 一键收藏
打赏
16
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录