[JavaScript知识库]Javascript 基础语法学习笔记

一，初识
1：引入js

（1）外联

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

?（2）内联
?

   <script>
        //内联
    </script>

（3）行内

<div onclick="alert('nihao')"></div>

2，注释

?????????//单行?

?????????/*多行*/

3.警告框

?????????????alert（）；警告框

????????????confirm（）；选择框

????????????prompt（）；输入框

????????????console.log();控制台输出

二，变量

1，变量是程序在内存中申请 的一块用来存放数据的空间

2，使用：

声明变量??var?age

赋值??????age=18；

变量的初始化??var?age?=?18；??（声明并且赋值称为变量的初始化）

3语法扩展

更新变量

var?age=?18；

??age?=?20；



声明多个变量

var?age?=?18，name?=?‘’佩奇’’；

4变量命名规范

4.1由字母，数字，下划线，$组成

4.2严格区分大小写

4.3不能以数字开头，不能使用关键字，保留字

4.4遵守驼峰命名法

5临时变量

var?temp?;

var?app1?=?10;

var?app2?=?20;

temp?=?app1;

app1?=?app2;

app2?=?temp;

temp就像是一个中介，暂时储存临时变量

三 数据类型

1????

js 变量的数据类型，是由js引擎根据 = 右边变量的值（字面量）的数据类型来判断的

2，js是动态语言，变快的数据类型可以变化的

例：

var?age?=?18；??

?age?=?"佩奇"；

3基本数据类型
?

number?数字型

boolean?布尔值

string??字符串

undefined?未定义

null??空值

3.1 ?number

包含整数，小数，负数

八进制用 ?0 表示

十六进制 ?0x

Number.MAX_VALUE???最大值

Number.MIN_VALUE???最小值

Infinity?无穷大

-Infinity?无穷小

NAN?(not?a?number)?不是一个数字

is??NAN?()；判断是否数字???false?是数字????true不是数字类型

3.2 string

字符串引号嵌套 ?外单内双 ?外双内单

\转义字符 ???\n 换行

字符串长度 ?length

字符串拼接 ??+ ????如 ；‘1’+‘2’ ??返回值‘12’

字符串和任何数据类型 ?+ 都会转换为字符串

3.3boolean

布尔型有两个值，true false 其中true 表示真，false假

true当 1 计算 ， false当0 计算

4 undefined 和 null

Undefined 和 nan 和数值 相加 为NAN

Null 和数值相加 返回相加的数值

5 typeof 获取变量类型

?typeof + 变量

6字面量

字面量是一种直接出现在程序中的数据值

7 转换为字符串

tostring（）

string（）

+

8转换为数字型
?

parselnt();

parseFloat();

Number();

js隐式转换????-???*??/

9 转换为布尔型

''，?0?，NAN?，undefined，null??代表为空，否定的值转换为false?

其余转换都为?true

10 ?标识符

标识符是就是为 变量，函数，参数取的名字

关键字

js 本身已经使用的单词

保留字

js为未来预留的可能会用到的单词

四 运算符

4.1运算符也被称为操作符 ，是用于实现赋值比较和执行算数运算功能的符号

4.2算数运算符

+?-?*?/?%

4.3表达式 和返回值

由数字 运算符，变量等组成的式子，称为表达式

结果为返回值

4.4一元运算符

a++???后置自增?先返回原值后自加

++a???前置自增?先自加后返回值

a--

--a?

4.5 比较运算符
?

<??<=  小于 小于等于

>?>=   大于 大于等于

== 等于

===??全等

!=   不等于

!==  不全等

=  赋值

4.6逻辑运算符

&&?逻辑??与?简称?与?或and

???||??逻辑或???or

&&两边都为true?返回true?否则?false

||?两边都为false?返回?false??否则?true

！??取反

4.7 赋值运算符

=?

+=

-=

*=

/=

%=

4.8 运算符优先级

1 ?（）

2 ???一元运算符

3 ??算法运算符

4 关系运算符

5 相等运算符

6 逻辑运算符

7 赋值运算符

8 ，

五 流程控制

5.1

顺序结构 ?按顺序执行

分支结构 判断执行

循环结构 判断后是否循环执行

5.2 ?分支结构

1

if（）语句

???if（条件表达式）{

???????????条件表达式为真?执行语句

}

2 ?if else

?if?????else?语句

if（条件表达式）{

??条件表达式为真?执行语句



}else{

??条件表达式为假?执行语句

}

3 ?if else if

if??else?if??语句

if（条件表达式）{

??条件表达式为真?执行语句



}else?if（条件表达式）{

??条件表达式为真?执行语句

}else{

????条件表达式为假?执行语句

}

4 三元表达式

条件表达式???表达式1（true）：表达式2（false）

5 switch

switch（表达式）{

Case?valu?1?:

执行语句

Break；

Case?valu?2:

执行语句

break；

}

5.2循环结构

1 for循环

for（初始化变量，条件表达式，更新表达式）{

??循环体}

2? 双 for循环

for（初始化变量，条件表达式，更新表达式）{

??循环体

for（初始化变量，条件表达式，更新表达式）{

??循环体

}

}

注意：外部循环一次，里面for循环整轮

3 ?while 循环

while?（条件表达式）{

循环体

（更新表达式）

}

4 do while 循环

do{

循环体

}while（条件表达式）；

总结 ；如果是用来计次数，跟数字相关用for

while do while 可以用来做更复杂的判断条件

5 continue ?break

Continue?；跳出本次循环，继续执行下面的循环

break ；跳出整个循环（循环结束）

6数组

6.1数组（array）；就是一组数据的集合，储存在单个变量下的优雅方式

6.2数组创建

?1 利用字面量创建

var?arr?=?[];

2利用new创建

var?arr?=?new?Array();

3数组的索引

索引，下标，用来访问数组元素序号

数组名【索引】

arr[2];

4遍历数组

遍历就是把数组元素从头到尾访问一次



?for?(let?i?=?0;?i?<?array.length;?i++)?{

?????????????????console.log(array[i]);

?????????????}

5新增数组，元素，修改length长度

arr.length?=?5?;?多余的显示“undefind”

6 新增数组元素，修改索引号，追加数组元素

?arr[3]?=?'数组索引号3内容'；

七 函数

函数就是封装了一段可以被重复执行调用的代码块

目的；就是让代码可以复用，

7.1 ?使用函数

声明函数

function?fun?(){

????函数体；

}



调用函数

fun();//函数名()

注意：如果实参的个数一直，则正常输出结果

若实参的个数多于形参个数，会去到形参的个数

如果实参的个数小于形参，多于的形参定义为 ?undefined 最终的结果就是NAN

7.2 函数的返回值

function?fun()?{

????return?需要返回的结果

}

?fun();

注；return 会把返回结果给函数调用，但是return后的代码不会执行

7.3 ?
?

arguments

不确定有多少个参数传递的时候可以使用?arguments来获取，

arguments?当前函数的内置对象，arguments中储存了传递的所有实参

arguments?展示形式是一个伪数组?因此可以遍历

伪数组的特点，具有lenght属性，按索引方式储存数据，但是不具备?push?pop?等方法

7.4 函数的声明方式2 ，函数表达式（匿名函数）

var?fun?=?function?()?{

????

}

//fun?是函数名，函数表达式也可以传递参数

八 作用域

8.1

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

???Js的作用域（es6之前）：全局作用域 局部作用域

全局作用域：就是整个script标签，或者是一个单独的js文件

局部作用域；就是在函数内部的就是局部作用域范围，只在函数内部起效果，和作用

8.2

变量作用域 ；根据作用域的不同，变量分为全局变量和局部变量

在全局作用域的声明的变量就是全局变量

在（局部作用域）函数内部声明的变量就是局部变量

注：在函数内直接赋值也是全局变量，

全局变量在浏览器关闭是清除，局部在使用后，不占内存

8.3 作用域链

作用域链；内部函数访问外部变量采用的是链式查找方式，这种结构称之为 作用域链

九 ?预解析

9.1 js引擎运行js分为两步；预解析 ，代码执行

预解析：就是js引擎会把js里面所有的var和function提升到当前作用域的最前面

9.2 预解析 为 变量预解析（变量提升 ） ??，函数预解析（函数提升）

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

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

十 ?对象

对象式由属性和方法组成的

10.1创建对象的三种方式

1利用字面量{}创建

var?obj?=?{

????name:'佩奇',

????age:12,

????sayHi:function?(){

????????//方法

????}

}

使用对象

obj.name//对象名.属性

obj['name']//对象名['属性']

使用对象的方法

obj.sayHi();//对象名.方法名

2 利用new object 创建

????????var?obj?=?new?Object();

????????obj.属性?=?'属性值';

????????obj.方法名?=?function?(){};

3 构造函数创建对象

function?构造函数名?大写(){

????this.属性?=?值;

????this.方法?=?function(){};

}

var?obj?=?new?构造函数名;

注；构造函数需要首字母大写， ??不需要return 就能返回结果

例子

function?Star?(?name,age?,sex)?{

????this.name?=?name;

????this.age?=?age;

????this.sting?=?function?(){



????}

}

var?star?=?new?Star('刘大海',28,'男');

console.log(star);

10.2

遍历对象 ?

for?(let?k?in?object)?{

????//k是属性?,?object?是对象??

???object[k];//对象属性值

}

对象是复杂数据类型

十一 ?js 内置对象

内置对象就是js 语言自带的

11.1 ?数学对象 Math

Math.PI//圆周率

Math.max//最大值

Math.min//最小值

Math.floor//向下取整

Math.ceil//向上取整

Math.round//四舍五入

Math.abs//绝对值

随机生成一个数

function?getRandom?(min,max){

????//随机生成两个数之间的?数

????return?Math.floor(Math.random()*(max-min+1)+min)

}

11.2 ?Date();日期 ?（构造函数）

??????var?date?=?new?Date();

????????date.getFullYear()//年

????????date.getMonth()//月??0-11

????????date.getDate()//日

????????date.getDay()//星期??0-6

????????date.getHours()//时

????????date.getMinutes()//分

????????date.getSeconds()//秒



????????date.valueOf()//时间戳

????????date.getTime()//时间戳

????????var?data?=?+new?Date()//时间戳

????????Date.now()//时间戳

????????转换公式：

????????d?=?parseInt(总秒数?/?60?/60?/?24);//天

????????h?=?parseInt(总秒数?/?60?/60?%?24);//时

????????m?=?parseInt(总秒数?/?60?%60?);//分

????????s?=?parseInt(总秒数?%?60?);//秒

十二 数组

??var?arr?=?new?Array();//空数组

??var?arr?=?new?Array(2);//数组长度为2

??var?arr?=?new?Array(2.3);//数组元素为?2?3?

????????
12.1 reverse(arr) ?数组翻转



12.2 instanceof 运算符可以用来检测是否为数组
         var?arr?=?[1,2];

????????console.log(arr.reverse());



????????console.log(arr?instanceof?Array);



12.3

console.log(Array.isArray(arr));

12.4 添加 删除 数组元素

????var?arr?=?[1,2];

????????push();//像数组末尾添加一个或者多个元素

????????arr.push(4);

????????unshift();//像数组第一个位置添加元素

????????arr.unshift(0);

????????push,unshift?完后返回的是新数组长度，原数组会发生改变

????????console.log(arr);

?????????pop()//删除数组最后一个元素，一次只能删除一个

?????????arr.pop();

?????????shift();//删除数组第一个元素

?????????arr.shift();

?????????console.log(arr);

pop?shift?之后返回的结果是?删除的那个元素，元素组会改变

12.5 数组排序

??????var?arr?=?[5,8,3,2];

????????arr.sort(function?(a,b)?{

??????????return??a-b;

return??b-a;//降序排列



????????})

????????console.log(arr);

12.6 indexof(元素)；返回该数组索引号，并且只返回满足条件的第一个，若找不到返回-1

数据去重?????

?var?arr?=?[5,8,5,3,2,8,3,2];

????????var?newarr?=?[];

????????for?(let?i?=?0;?i?<?arr.length;?i++)?{

??????????if(newarr.indexOf(arr[i]?)===?-1){

??????????????newarr.push(arr[i]);??

??????????}

????????}

????????console.log(newarr);//结果[5, 8, 3, 2]

Lastindeof（） 从后向前找

12.7 数组转换为字符串

??????var?arr?=?[5,8,5,3,2,8,3,2];

????????var?a?=?arr.toString();

????????var??b?=??arr.join('*');

????????console.log(b);

????????console.log(typeof?a);

????????console.log(typeof?b);

12.8

?concat();合并两个或者多个数组

?concat(arr1,arr2,arr3);

12.9

splice(从第几个索引开始,删除个数(可以选填),插入元素(可选));

???????arr.splice(2,2,8);//从索引为二的开始删除，删除两个，添加一个元素8

被删除的元素组成一个新的数组

十三 ?字符串对象

13.1 字符串的不可变：指的是里面的值不可变，虽然看上去可以改变内容，但是其实是地址值变了，内存中新开辟了一个内存空间，

13.2

str?.indexOf(要查找的字符，起始的位置）

lastindexOf?从后向前找

13.3根据位置返回字符

???var?str?=?'ndianfinsnf';

?????????var?a?=??str.charAt(5);

?????????console.log(a);//返回的是索引为5的?f?

???var?n?=??str.charCodeAt(6)

?????????console.log(n);//返回的是索引为6的?ASCii值??



?str[5]//h5新增的方法，和charAt()一样

???????console.log(?str[5]);

13.4 拼接字符串

????concat(str1,str2,str3)

????????//拼接字符串，但是一般开发中中?+??操作比较多

13.5 substr 截取字符串

????var?str?=?'ndianfinsnf';

????????substr(开始截取的位置索引号，截取的个数)第二个参数不写默认截取到最后一个

???????var?b=?str.substr(2);//

???????console.log(b);

13.6 ?split（）

???????var?str?=?'nd,an,fins,nf';

????????var?b=?str.split(',');

????????console.log(b);

13.7 repiace

????var?str?=?'nd,an,fins,nf';

????????str.replace('被替换的字符','替换成的字符')//注意只会替换第一个字符

????????var?sr?=?str.replace('n','d');//替换字符

?????????console.log(sr);

13.8

??var?str?=?'nd,an,fins,nf';

????????var?b?=?str.toUpperCase();//转换为大写字母

????????console.log(b);

????????var?a?=?str.toLowerCase();//转换为小写字母

????????console.log(a);

十四 ?简单数据类型和复杂数据类型

14.1

简单类型又叫基本数据类型或者 值类型 ，复杂数据类型又叫引用数据类型

值类型: 简单数据类型/基本数据类型，在存储时变量中储存的是值本身， 因此叫做值类型，string，number，boolean，undefined，null

引用类型：复杂数据类型，在储存时变量中储存的仅仅是地址值（引用），因此叫引用类型，通过new关键字创建的对象，（系统对象，自定义对象）比如Object，Date Array等

14.2 堆和栈

?堆和栈空间分配

1 栈 （操作系统）：由操作系统自动分配释放存放在函数的参数值，局部变量的值等，其操作方式类似于数据结构中的栈；

???简单数据类型存放在栈里面

2堆（操作系统）：存储复杂数据类型（对象）；一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

??复杂数据类型存放在堆里面

?

注意：js没有堆和栈的概念，只是通过堆和栈理解代码执行机制，便于学习

14.3

?简单数据类型传参，直接在栈存储值

?复杂数据传参，在栈开辟一个空间储存的是十六进制的地址值，地址值指向堆的一个开辟空间

?