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

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

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