前端学习——js基本语法

0215：

一、初识javascript

1.1什么是js

1.javascript 是运行在客户端（不需要配置环境）的脚本语言。

2.脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。（翻译一行，执行一行）

3.现在可以基于Node.js技术进行服务器端编程。（可以做前台，可以做后台）

1.2js作用

1.3 HTML/CSS/JS的关系

1.HTML/CSS标记语言——描述类语言

• HTML决定网页结构和内容（决定看到什么）
• css决定网页呈现的样式。

2.JS脚本语言——编程类语言。

实现业务逻辑和页面控制（决定功能）

1.4 浏览器执行js简介

浏览器分为两部分：渲染引擎和js引擎

（1）渲染引擎：用来解析html和css，俗称内核。

（2）js引擎：也称为js解释器，用来读取网页中的js代码，对其处理后运行。

浏览器本身不会执行js代码，而是通过内置js引擎（解释器）来执行js代码，js引擎执行代码时逐行解释每一句源码（转化为机器语言），然后由计算机去执行，所以js语言归为脚本语言，会逐行解释执行。

1.5js组成

1.ECMAScript：js基本语法

2.DOM（document object module）：页面文档对象模型：对对象中个各种元素进行操作。

3.BOM（Browser）：浏览器对象模型。对浏览器窗口互动进行操作。

1.6 js书写位置

（1）行内式：直接写到元素内部（html使用双引号，js使用单引号）

（2）内嵌式：

   (3) 外部js写法： 创建js文件。然后在html页面中引入。

1.7 js输入与输出

输入：prompt（‘’） 

弹框：alert（‘’）

控制台输出：console.log（‘’）

1.8 变量

（1）声明多个变量用逗号隔开

（2）只声明，不赋值：输出undefined

（3）不声明不赋值，直接使用，会报错

（4）不声明，直接赋值使用，可以使用的。

2.数据类型

2.1.（1）js的数据类型是在程序运行过程中，根据右边变量值的数据类型来判断的。

（2）js是动态语言，变量的数据类型是可以变化的。

（3）不同类型的数据占用空间不同，所以要区分数据类型。

2.2.js数据类型

（1）简单数据类型：Number、Boolean、String、Undefined、Null

（2）复杂数据类型：Object

2.2.1 Number

（1）前面带0，表示8进制。0x表示16进制。

（2）最大值 Number：Number.MAX_VALUE；最小值：Number。MIN_VALUE

(3)无穷大，无穷小：Infinity，-Infinity

（4）NaN:  not a number

（5）isNaN()   //这个方法用来判断非数字，不是数字，返回true，是数字返回false。

2.2.2 String 字符串型

（1）转义字符，用\开头。

（2）str.length   属性，可以计算字符串长度。 var str = “jkjkjk”  console.log(str.length)

2.2.3 Boolean型

（1）在参与加法运算的过程中，true当作1来看，false当成0来看。

2.2.4 Undefined型  未定义数据类型

（1）undefined和字符串相加，看成字符串拼接

（2）undeifined和数字相加，最后结果是NaN

2.2.5 null 空值

（1）与字符串相加，看成字符串拼接。

（2）与数字相加，为空，返回数字。

2.3 typeof  获取数据类型。

（1）console.log(typeof num)

（2）其中，null返回object

（3）prompt（）输入的值为字符型。可以通过typeof检测数据类型，防止在进行一些加法等操作时出现问题。

2.4 数据类型的转换

2.4.1转换为字符串类型：

（1）数字转字符串：（1）变量.toString()      （2）String(变量)    （3）变量+'' (隐式转换)

2.4.2 转换为数字型

（1）parseInt(变量)  得到的是整数，直接取整，截断，可以去掉整数后面的字符。如果首字符不是数字，就输出为NaN

（2）parseFloat(变量) 得到的是小数。其余的与上面相同。

（3）Number(变量)  强制转换。

（4）隐式转换  （利用+-*/） '123'-'120'  '123'*1

2.4.3 转换为Boolean型

Boolean(变量)   

代表空、否定的值会被转化为false，如：''、0、NaN、null、undefined。其余的都会被转换为true。

2.5 标识符（变量、属性、函数、参数）、关键字、保留字（预留的关键字）

3.运算符

3.1（1）小数运算会出现问题，尽量不要把浮点数参数运算。也不要直接把浮点数进行相等比较。

（2）前置自增，先加一，后运算。   后置自增，先返回原值，再加一。

（3）比较运算符：返回true或false。  ==默认转换数据类型，会把字符串型的数据转换为数字型。

===全等，！==不全等：要求两边值和数据类型都要相同。

（4）逻辑运算符和短路运算（有一部分表达式不进行运算）。

逻辑与短路运算：&&  如果表达式1结果为真，返回表达式为2。如果表达式1为假，返回表达式1。

复习：''、0、null、undefined、NaN 都为假。

||：如果第一个表达式结果为真，返回第一个表达式的值。如果第一个结果为假，返回第二个表达式的值。

 （5）运算符优先级：

&&高于||，先*/%后+-

4.流程控制：

三种流程控制结构：顺序、分支、循环。

（1）三元表达式：  条件表达式  ？表达式1  ：表达式2

（2）switch语句：一定要写break，否则不会退出循环，会继续执行。

switch（表达式）{

case value1：执行语句1；break；

case value2：执行语句2；break；

.....

default:执行最后一句。

}

（3）switch与if else 的区别：

 断点调试：

5.循环

 do{

        循环体

}while（条件表达式）   //先执行一次循环体，再判断条件。如果条件表达式为真，则执行，否则，跳出循环。

 （1）continue：退出本次循环，继续执行剩余次数循环。

（2）break：立即跳出整个循环。

6.数组

6.1 创建数组：

（1）利用new创建数组。  var 数组名 = new Array();

（2）利用数组字面量创建数组[] 。var 数组名 = []

（3）数组中的数据用逗号分隔，可以放各种数据类型的数据元素。

6.2 获取数组元素个数。  数组名.length

6.3 新增数组元素

（1）通过修改数组length属性进行扩容。如果没有赋值，则输出为undefined

（2）修改索引号。直接添加就可以！！！妙啊！！！

7.函数

7.1函数创建：

function 函数名（参数）{

        函数体

}

（1）形参(形式上的参数)：在声明函数的小括号里面是形参。（形参可以看做不用声明的变量）

(2)实参（实际的参数）：在函数调用的小括号里面是实参。

• 如果实参个数多于形参个数：那么会取到形参的个数
• 如果实参个数少于形参个数：多余的形参定义为undefined，最终的结果是NaN

（3）return函数只能返回一个值，返回的结果为最后一个值。——>如果要返回多个值，可以用数组来返回。

如果函数没有返回值，则输出为undefined

7.2. arguments 的用法：

（1）当我们不确定有多少个参数传递的时候，可以用arguments来获取。arguments  是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

（2）arguments是一个伪数组，并不是真正意义上的数组。只有函数有arguments对象

• 具有数组的length属性
• 按照索引的方式进行存储的。
• 它没有真正数组的一些方法：pop（），push（）等。

arguments练习：求任意个数的最大值。

7.3 函数的声明方式：

（1）利用函关键字自定义函数（命名函数）

（2）函数表达式(匿名函数)：

var 变量名 = function(){};

• fun是变量名，而不是函数名
• 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数。
• 函数表达式也可以进行传递参数。

8 js作用域

8.1 什么是作用域

（1）就是代码名字（变量）在某个范围内起作用，目的是为了提高程序的可靠性，更重要的是减少命名冲突。

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

（2）js的作用域（es6）之前：分为  全局作用域和局部作用域。

• 全局作用域：整个script标签，或者是一个单独的js文件。
• 局部作用域（函数作用域）：在函数内部就是局部作用域 这个代码的名字只有在函数内部起效果和作用。

（3）变量的作用域：根据作用域的不用，变量分为全局变量和局部变量。

• 全局变量：在全局作用域下的变量。在全局下都可以使用

注意：如果在函数内部没有声明，直接赋值的变量也属于全局变量。

• 局部变量：在局部作用域下的变量，后者在函数内部的变量就是局部变量。函数的形参可以看作是局部变量
• 从执行效率来看全局变量和局部变量：

              ～全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。

              ～局部变量  当程序块执行完毕后就会销毁，比较节约内存资源。

（4）js是没有块级作用域的。只有全局作用域和局部作用域。es6中新增了块级作用域。

块级作用域：{ }//当前js中没有块级作用域。像if、else、for等的花括号中定义的变量，在全局范围内也是可以使用的。

（5）作用域链：内部函数访问外部函数的变量，采用的是链式查找的方式来决定取哪个值。这种结构称为作用域链。（就近原则）

//逐级往上查找，先查找外部函数，再查找全局作用域

9 预解析

9.1.js引擎（解释器）在运行js时分为两步：预解析和代码执行。

（1）预解析   js引擎会把js里面所以的var和function提升到当前作用域的最前面。

（2）代码执行：按照代码书写的顺序从上往下执行。

9.2 预解析分为  变量预解析（变量提升）和  函数预解析（函数提升）

（1）变量提升  就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。

(2)函数提升 就是把所有的函数声明提升到当前作用域的最前面，不调用函数。

——>所以函数在调用前声明或者是在调用后声明都不会报错。通过关键字function声明

通过var定义的变量，称为函数表达式。函数表达式的调用必须写在函数表达式的下面。

10. 对象

10.1 对象是一个具体的事物。

在js中，对象是一组无序的相关属性和方法的集合。对象是由属性和方法组成。

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

10.2 为什么需要对象：

如果要保存一个人的完整信息，可以使用对象。使用对象表达更清晰。

10.3 创建对象的三种方式：

10.3.1利用字面量创建对象{}

1.(1)里面的属性和方法采取键值对的形式：   键 属性名 ： 值 属性值

（2）多个属性或方法用逗号分隔

（3）方法冒号后面跟的是一个匿名函数

（4）调用对象的属性：对象名.属性名   或者   对象名['属性名']

          调用对象的方法：对象名.方法名（）

2.变量、属性、函数、方法的区别：

相同点：变量和属性相同，都是用来存储数据的。

不同点：变量，单独声明并赋值，使用的时候直接写

               属性，在对象里面不需要声明，

10.3.2 使用new Object 创建对象

var obj = new Object();obj.uname = 'zx';obj.age = 18;obj.sayHi = function(){console.log('sayHi')}

利用=赋值的方式，加入方法和属性。

10.3.3 用构造函数创建对象

1.为什么要使用构造函数：

        因为前两种方式每次只能创建一个对象。里面很多的属性和方法是大量相同的，我们只能复制。因此我们可以利用函数的方法，重复这些相同的代码，把这种函数称为 构造函数。

        又因为这个函数不一样，每次封装的不是普通代码，而是对象。

        构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

2.利用构造函数创建对象

• 构造函数，首字母要大写
• 构造函数不需要return，就需要返回结果。typeof(ldh)   得到的是对象。
• 调用构造函数，必须使用new
• 只要new Star()调用函数就可以创建对象。
• 属性和方法前面必须添加this

3. 构造函数和对象的区别

对象是个具体的事物

构造函数是泛指的某一大类，类似于java语言里面的类（class）

利用构造函数创建对象的过程，称为对象的实例化。

4.new关键字的执行过程

• new构造函数可以在内存中创建一个空的对象
• this 就会指向刚才创建的空对象
• 执行构造函数里面的代码，给这个空对象添加属性和方法
• 返回这个对象

10.4 遍历对象

1.使用for...in...遍历对象

一般用k或者key

11.js的内置对象

js中的对象分为3中：自定义对象、内置对象、浏览器对象。其中前两种内容是js的基础内容，属于ECMAScript；第三个浏览器对象属于js独有的，js API中会讲解。

        内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。

        内置对象最大的有点就是帮助我们快速开发。

        js中提供了多个内置对象：Math、Date、Array、String等。

        学会查阅MDN文档，（W3C也可以）MDN：MDN文档网址https://developer.mozilla.org/zh-CN/

• 查阅方法的功能、参数的意义和类型、返回值的意义和类型、通过demo进行测试。

11.1 Math内置对象

参数中带中括号，说明参数可有可没有。

Math数学对象不是一个构造函数，所以不需要使用new来调用，而是直接使用里面的属性和方法即可。

11.1.1 案例 封装自己的数学对象

11.1.2相关方法

1.Math.abs()  存在隐式转换。会把字符串型转换为数字型。

2.三个取整方法：

（1）Math.floor()  地板 向下取整，往最小了取

（2）Math.ceil() 天花板 向上取整 ，往最大取

（3）Math.round()   四舍五入。其他数字都是四舍五入，但是.5是往大了取。因此，Math.round(-1.5)是-1。Math.round(1.5)是2。

3.随机数方法Math.random()

• 返回一个随机小数。[0,1)    
• 方法里面不跟参数
• 可以实现 两个数之间的随机整数，并且包含这两个整数在内。包含公式。（自己看文档）
• 随机点名

4.猜数字游戏

11.2 Date 日期内置对象

是一个构造函数，必须使用new来调用创建日期对象。

1.使用 var date = new Date();

 （1）如果没有参数，得到系统的当前的时间。

（2）如果有参数，参数常用的写法：

数字型：2019，10，01.  或者是。   字符串型：'2019-10-1 8:8:8'

其中数字型的返回的月份数会比输入的大一个月份。

2.日期格式化

3.获取日期总的毫秒数(时间戳)

Date对象是基于1970年1月1日（世界标准）起的毫秒数。

不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒数。

3.倒计时案例（）!!!!!!重点案例

• 用时间戳来做。用户输入的时间总的毫秒数减去现在时间总的毫秒数，得到就是剩余时间总的毫秒数。
• 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时、分、秒）

11.3 Array内置对象

1.创建数组的两种方式;Array也是一个构造函数。

（1）字面量方式：var arr = []；或者是里面加值，用逗号分开

（2）使用new方式

2.检测是否为数组

（1）instanceof  运算符 可以用来检测是否为数组。

（2）Array.isArray(参数)  返回的是true 或者false。H5新增的方法 ie9以上版本支持

3.添加数组元素方法

（1）push()  在我们数组的末尾，添加一个或者多个数组元素。

• push可以给数组追加新的元素
• push()参数直接写 数组元素就可以了。
• push完毕以后，返回的结果是数组的长度。
• 原数组也会发生变化。

arr.push(1,2,3)

(2) unshift()是在数组的前面添加元素。

4.删除数组元素。

（1）pop()

• 可以删除数组中的最后一个元素。一次只能删除一个元素
• pop（）没有参数
• pop完毕以后，返回的结果是删除的元素。
• 原数组也会发生变化。

（2）shift()  删除的是数组中前面的元素。

5.数组排序

（1）翻转数组。array.reverse();

(2)冒泡排序。array.sort();但是 该函数只能对首位数进行排序。

如果要进行排序，要对其做如下处理：

6.数组索引：

（1）arr.indexOf(数组元素)   //返回数组元素的索引值。从前往后查找。如果数组中有两个重复的数组元素值，只返回第一个索引值。如果数组中没有该数组元素，返回-1。

（2）arr.lastIndexOf(数组元素)   //从后面往前面查找.

案例：数组去重

7.把数组转换为字符串

（1）toString()  把我们的数组转换为字符串。arr.toString() ，得到的结果是用逗号进行分隔的。

（2）join（分隔符）什么都不写，默认为用逗号分隔。

8.其他函数

（1）concat()  //连接两个或多个数组，不影响原数组。返回一个新的元组。

（2）slice()  数组截取slice（beigin,end）,返回被截取项目的新数组。

（3）splice（）数组删除splice（从第几个开始，要删除个数），返回被删除项目的新数组，注意，这个会影响原数组。

其中，slice和splice目的基本相同，可以重点看一下splice（）！！！！

12.基本包装类型和字符串

var arr = 'andy';

console.log(arr.length)

问题：为什么简单数据类型会有length属性呢？

1.定义：把简单数据类型包装为复杂数据类型，叫做基本包装类型。这样基本数据类型就有了属性和方法。js提供了三种特征的引用类型。String、Number、Boolean。

2.过程：（1）生成临时变量，把简单类型包装为复杂数据类型。

var temp = new String('andy');

(2)把临时变量的值给声明的字符变量。

str = temp；

（3）销毁这个临时变量

temp = null；

3.字符串的不可变性

指的是里面的值不可变，虽然看上去改变内容，但实际上是地址变了，内存中新开辟了了一个内容空间。因此，不要大量对字符串进行赋值和拼接操作，比较占用内存资源。

4.根据字符返回位置。

字符串所有方法，都不会修改字符本身（字符串是不可变的），操作完成会返回一个新的字符串。

练习：返回字符位置。

查找adhsjdhskdhsdsjdssdsfff该字符串出现的所有位置，以及次数。

5.根据位置返回字符。

（1）charAt(index)  //返回指定位置的字符。

（2）charCodeAt（index）//获取指定位置处字符的ASCII码。可用于判断用户按下键盘的哪个键。比如说做游戏开发，判断用户按了左右上下键。

（3）str[index]   //获取指定位置处字符。  HTML5.IE8+支持和charAt()等效。

6.案例！！！统计出现次数最多的字符。

7.字符串操作方法：

（1）concat()  //用于连接两个或者多个字符串，等效于+拼接字符。

（2）substr(start,length)  //两个参数分别为，截取的起始位置和截取几个字符。

课下自己看slice（start，end）//从start位置开始，截取到end位置，其中end取不到。

     substring(start，end)   //从start位置开始，截取到end位置。end娶不到，基本和slice相同，但是不接受负值。

（3）替换字符replace('被替换的字符','替换为的字符')，只会替换为第一个字符。

案例：把字符串中的o全部替换为a

(4)将字符转换为数组。split('分隔符')   前面学过join（）将数组转换为字符串。

（5）toUpperCase()//转换为大写

toLowerCase()//转换为小写。

13.简单数据类型和复杂数据类型

13.1.简单介绍

其中null比较特殊，通过typeof（）查看其数据类型，可以发现其为object。 

用处：如果有个变量我们以后打算储存为对象，暂时还没想好放啥，这个时候就给null。

 13.2 堆和栈

 

（1）简单数据类型，是存放在栈里面，里面直接开辟一个空间，存放的是值。如果复制的话，var num = 10 。var b = num;相当于在栈中重新开辟了一个空间，并将num的值复制到b所指的空间。因此，修改b的值，与a没有关系。  

（2）复杂数据类型 。首先在栈中开辟空间，栈中存放的是16进制的地址，指向堆。复杂数据最终是存放在堆中的。

         比如var  arr = [1,2,3] 。首先在栈中开辟一个空间，变量的名字arr指向这个空间，同时，这个空间内，存放的是一个16进制的地址，这个地址指向堆中的数据。堆中开辟了一个空间，在这个空间，存储着数据1,2,3。

        如果复制的话。看下面的代码： 

                                                         简单数据类型传递的是数据，复杂数据类型传递的是地址。！！！！                                                                                                            

html和css  540

js:500

DOM BOM 167（暂不用）

jquery:77（咱不用）

ajax:101

Vue开发：

Node.js：96

Vue2+Vue3全套556

React 178

微信小程序 192

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！