js基础笔记

页面中引入JS的四种方法

1 script 标签引入，类似于  <style type=’text/css’>

  <script  type=’text/javascript’>

     写相应的JS代码

  </script>

 2 通过script引入外部的文件

 <script src=’1.js’>不要写代码因为要引入外部的文件，这里就算写了也不执行 </script>

   src     表示要引入的文件的路径

   type   text/javascript  表示要引入文件的类型

   language  javascript 表示文件所使用的语言

   charset    标示引入文件的字符集

   defer     延迟加载导入的文件，当整个页面加载成功后再执行引入的文件

   async     异步加载文件   

3 通过给元素添加事件的方式添加js

  <div onclick=’js代码’></div>

4 通过给a超链接href属性添加js代码

 <a href=’javascript:js代码’></a>

 

 js代码的引入位置，一般是放在body体结束的位置前，因为js一般是操作页面元素的，需要将页面的元素先加载成功，才能操作；类库的话需要提前引入。

在window中，文件的后缀名其实就是为了区分文件的不同类型的。

js基本语法

 测试所需掌握的几个方法

 1 alert()  弹框

 2 console.log()   在控制台打印要测试的内容

 3 document.write() 向文档中输出测试内容

变量类型

  变量中存放的东西是有类型要求的，根据类型的不同可以将变量分为七种类型

  

  根据定义变量时是否需要事先声明变量类型，可以将编程语言，分为强类型语言和弱类型语言。我们的js是弱类型的

  强类型语言，如C语言，使用前，一定是知道变量类型的

  弱类型语言，不需要事先声明变量的类型，可以存放任意指定的类型。

三大类 8小类

普通类型

1 整型  1 2 3 4 45 5 5

2 浮点型  1.2  3.4  7.55

3 布尔类型   true false

4 字符串

复合类型

     5 数组  array(1,2,3,4,5)就是一组数的集合

     6 对象  就是类的实例化

特殊类型

     7 资源 如数据库 文件  画图

     8  null  就是空

js中的变量有六种类型 be so fun  如此有趣

 1） b   boolean  布尔类型  这种类型就两个值  一个是true,一个是fase

     这种类型就是表示两个状态，真 假  对错 爱不爱是否  胖瘦  高矮 ........

 2） s   string    字符串类型

     字符串，就是字符组成的串。在程序中如何声明字符串，常用的两种方法

     一般使用单双引号表示一个字符串

     单双引号表示字符串的区别？

     1 单双引号都不能解析变量

     2 单双引号都能解析转义符号

      转义符号表示一直特殊意义的符号 如\n  换行  \r回车     \t  水平制表符，都是在程序中有特殊意义的符号

     3 单引号不能嵌套单引号，但可以嵌套双引号；双引号不能嵌套单引号，但可以嵌套单引号

 3） o   object    对象类型

     对象就是属性和方法的集合。属性就是变量，方法就是函数。

     var obj = new Object();

     obj.name = ‘’;   添加对象属性

     obj.sing = function(){

      添加对象的方法、功能

     }

 4） f   function   函数类型

     函数就是完成指定任务的已命名的代码块。函数要执行必须调用。

     function 函数名(形参){

要实现的功能代码

 

     }

 5） u   undefined  undefined类型

这种类型表示当变量没有赋值或者赋值一个undefined类型

这种类型的值只有一个值，这个值就是undefined

undefined 和 null的区别？

1在js中undefined 是一种变量类型，而null不是

2 undefined 表示一个变量没有赋值或者赋值为undeined,而null表示一个空对象

 

 

 6） n   number   数字类型

     可以人为将数字类型分为三种子类型

     1 整型  

     整型就是整数，就是表示不包含小数点的数字

     整型的进制表示

     十进制    八进制前加0表示   十六进制  前加0x表示

     将字符串转换为整型数的三种情况

     1） 纯数字字符串   var str =‘123’；    parseInt(str) ====>  123

         纯数字类型的字符串转换为整型数为 字符串的值  ，类型为number

     2)  前面为数字后面为其他字符  var str=’123abc’;    parseInt(str) ====>  123

         将后面的字母截取掉，只取前面的数字

 3） 前面为非数字，后面为数字的字符串转换   var str=’abc123’;    parseInt(str) ====>  NaN

         结果为NaN

总结：只要转化为数字，就看前面的数字部分，后面非数字部分截取掉，如果第一位就是非数字，那转换后的结果一定是NaN

2  浮点数   浮点型就是含小数点的数字

   两种表示方法

   普通计数法

   科学计数法

    1.234e3  e表示指数，就是10；e后面的数表示多少个10相乘e2 10*10=100  e3   10*10*10==>1000，e后面的数字最大为308

       e前面的数表示精度，小数点后的数位越多这个数越精确

    当数字超过了这个范围，就变成了infinity 无穷大  -infinity 负无穷大 无限趋近于0

    无限接近于0的数 1e-308

   字符串转换为浮点数的三种情况  parseFloat()  parse 转换的意思 float 浮点数也是带小数点的数

   1）纯数字字符串  字符串的值就是转换后的数字的值，转换后类型是number

   2) 字符串前面是数字，后面是非数字，截取前面的数字部分转换 ，后面非数字不要

   3）字符串前面是非数字，后面是数字，转换结果为 NaN

     parseFloat(str)

     3 NaN

     不是一个数字

      需要记住

        1 不要将NaN跟任何值做运算，因为得到的还是NaN

        2 不要将NaN跟任何值比较，因为自己都不等于自己

        3 使用isNaN()来判断一个变量是否是NaN

注释

    注释是给人看的，不是给程序看的。分为单行注释和多行注释，多行注释不可以嵌套多行注释

单行注释  //

多行注释  /*    */

语句

   一条指令就是一条语句。我们js中使用;或者换行符表示一条语句结束，但不建议大家使用换行符来结束一条语句，因为万一日后压缩文件就会报错

类型转换

  强制类型转换

  1） 其他数据类型转换为字符串

       如果是数字类型，类型转换为string ,值为原数字的值

       布尔值的true转换为字符串为true,false转换为字符串为false

       对象如果要转化为字符串不能通过String()，需要序列化

       函数类型变量转换为字符串的值是函数体

       undefined类型变量转换后为字符串的undefined

  2） 其他数据类型转换为数字

       bool类型转换为数字，true变成1  false变成0

       字符串类型转换为数字

如果是纯数字类型的，直接转换

如果前面是数字后面是字母，NaN 跟 parseInt不一样

如果前面是字母后面是数字，NaN

         2e2 是数字的科学计数法 转换后为200

       undefined转换为数字为NaN

3） 其他数据类型转换为布尔值  非常重要，一定要记住

       字符串类型 除了空字符串其他情况转换为bool类型后值都是true

       数字类型  0  0.0 NaN 三种为false

       对象类型  null

       undefined 转换为bool类型也会false

  总结：其他数据类型转换为bool类型为false的情况有七种0   0.0  NaN  ''  null  undefined  false

自动类型转换

 程序中的几种环境

 1)数值环境，其他类型会自动转换为数字

  + 在js中有两个作用，一个是连接两个字符串，一个是做算数运算的加法运算。 如果运算符两边的操作数都是数字，这种情况下做为加法运算，如果操作数有一个为非数字，那作为字符串连接符参与运算。 如果当前环境是数值环境，参与运算的数如果有非数字需要先转换为数字后才能参与运算

  ‘123’  直接转换为数字的123

   ‘123abc’   ‘abv123’  转换为NaN 参与运算

 2)字符串环境，其他类型会自动转换为字符串

   参与运算的操作数需要转换为字符串然后才能参与运算

    100+’1000’    ====>   ‘100’+’1000’  ===>  1001000

 3)布尔环境，其他类型会自动转换为bool值

    记住其他数据类型转换为bool类型为false的情况  0 0.0 NaN‘’  null   undefined  false

一 什么是运算？

由一个或多个值经过一系列的操作，变成另一个值的过程就叫运算。

二 什么是运算符？

在运算过程中，参与运算的符号叫做运算符

三 操作数？

在运算过程中，参与运算的数叫做操作数

四 运算符的分类  

  按照操作数的个数，可以将运算符分为一元运算符，二元运算符，三元运算符。

  我们一般是按照运算符的功能进行分类：算字赋比逻位他

   1算数运算符

      + - */ % ++ --

      如果是除法运算，除号前面的数叫被除数，后面的数叫除数，除数不能为0

  % 求余运算也叫取模运算,就是为了得到余数，得到一个不大于除数的数

  ++ 自增  在值原来的基础上加1

  ++在前，表示先+1，再赋值；++在后，先赋值，再+1

  --  自减    i--  i= i-1;在值原来的基础上-1

  --  在前，表示先-1，再赋值；--在后，先赋值，再-1

  思路就是画图

   2字符串运算符

     + 在js中，+号有两个作用，既可以作为算数运算符的加号也可以作为字符串连接符

   3赋值运算符

     =  将等号右边的值赋值给等号左边的变量  一定跟 ==和 ===的情况区分好

     += 是一种简写  a=a+2;  a+=2;在变量自身值的基础上加等号右边的值

     -=             a=a-2;   a-=2  在变量自身值的基础上减去等号右边的值

     *=             a=a*2;  a*=2;  在变量自身值的基础上乘上等号右边的值

     /= a=a/2;  a/=2;  在变量自身值的基础上除以等号右边的值

     %= a=a%2;  a%=2;  取变量除以等号右边值后的余数

   4比较运算符

     > 大于

     < 小于

     >= 大于等于

     <=     小于等于

     ==     等于     只比较值，不比较类型

     !=     不等于

     ===   全等于    不管比较值，还比较类型，除非值和类型都相等，否则就是不相等

    ！==   不全等于

   5逻辑运算符

      与  &&  左右都为真，结果才为真；只要有一边为假，结果就是假

      或  ||   左右都为加，结果才为假；只要有一边为真，结果就是真

      非  ！

   6位运算符

   7其他运算符

函数

一 函数的定义？

  函数就是一段完成指定任务的已命名的代码块。

二 函数的作用？

   提高开发效率

   提高代码可读性

   降低代码的复杂度

   降低软件的维护成本

三 函数的分类

   函数按照是否需要自定义，分为系统函数和自定义函数

   系统函数就是系统已经帮你写好的函数，如alert()  document.write()  console.log()  Math.random() .........  使用系统函数非常简单，不需要知道内部是怎么实现的，只需要知道这个系统函数的作用，他能帮你实现什么功能就可以了

   自定义函数：就是自己写的函数。因为系统函数毕竟有限，不可能把所有的现实问题都用系统函数来解决，有些问题就需要自己定义函数，通过调用自定义的函数来实现想要的功能。

四 自定义函数的声明

   声明自定义函数有3种方法

1  使用function关键字

function 函数名(){

函数体

}

2  使用匿名函数

   var 变量名 = function(){函数体}；

3  构造函数声明

   var 变量名 = new Function(‘参数1’,’参数2’,’函数体’);

五 函数调用

   如果是采用第一种声明方式，调用的方法就是函数名()

   如果是采用第二种声明方式，调用方法是变量名()

   如果采用第三种声明方式，调用方法是变量名()

   调用位置

   如果是采用第一种声明方式，调用可以在声明之前。因为函数是预加载的，就是说当代码还没有执行，函数已经被加载到内存中，当代码执行到调用时，就可以直接在内容中找到函数的声明。

   如果采用第二种匿名函数的声明方式，不能在函数声明之前调用函数

   如果采用第三种构造函数的声明方式，也不能再函数声明之前调用

 

六 函数执行的本质

   函数调用的本质就是在当前位置将程序的当前状态压栈，然后找到函数的定义，执行函数定义中的语句，执行结束后，返回到刚才程序暂停的位置，继续往下执行

   函数的特点

   函数要执行必须调用，而且可以调用多次，可以在任意位置调用。

 

七  函数命名规范

   函数的命名遵循数字字母下划线，首字母不能为数字，严格区分大小写，且不能使用关键字。

  除以上要求外，还要遵循，如果是普通函数需要遵循小驼峰命名法

  firstName   如果一个名字是由多个单词组成的，除第一个单词外，其他单词首字母大写，这种命名方法叫做小驼峰命名法

  如果是构造函数一般采用大驼峰命名法。所有单词的首字母全部大写。FirstName

 

  函数如果重复定义，后面的函数会覆盖前面的函数，调用时就执行的是后面的函数。

八 函数的参数

   1函数定义时的参数叫形参，形参是形式上的，在内存中没有，是占位用的。

   函数调用时的参数叫实参，实参是真实存在的，在内存中有值，目的是给形参赋值。

   2 形参实参的个数问题

     如果形参跟实参的个数一致，实参给形参一一赋值

     如果形参的个数大于实参，多余的形参就会取默认值undefind

     如果形参的个数小于实参，多余的实参忽略

     不要试图给形参设置默认值，虽然不会报错，但JS不允许。

   3 arguments  实参数组对象，只能在函数内部使用

     arguments[i]  获取第i+1个实参的值

     arguments.length  获取实参的个数

     arguments.callee  获取实参的调用函数

 九 返回值

按照函数是否有返回值，可以将函数分为功能执行函数（没有返回值）和返回值函数（有返回值）

任何函数都要返回值，函数的返回值通过return得到，return的可以是任何的东西，如果一个函数中没有return，那函数的返回值就是undefined.

return 在函数中有两个作用，第一个可以返回函数的返回值，第二个作用，终止后面代码的执行

 

 十 作用域

   作用域就是变量起作用的范围，表示在那个位置是否找能到这个变量

   我们根据作用域的不同，将变量分为局部作用域和全局作用域。

   

   全局作用域就是从变量声明的位置开始，直到程序结束的位置。

   局部作用域只能在函数内部有效，函数外部无效

   作用域总结

   1 在函数内部通过var声明的变量叫做局部变量

   2 在函数外部声明的变量叫做全局变量

   3 在函数内部变量前如果没有var ,那这个变量是全局变量。原理，先在当前函数内部找这个变量的声明，如果找不到，就沿着作用域链往上找，直到找到最顶级window.如果都没找到，就那声明一个此变量名的全局变量；如果找到了，就覆盖原来的全局变量。

   4 如果函数内部有一个跟函数外部同名的变量，在函数外部，执行的是函数外部的全局变量，在函数内部，执行的函数内部的局部变量。

   5 在函数内部可以改变函数外部的变量，只需要在函数内部不通过var声明这个变量，给这个变量重新赋值，就可以改变函数外部的变量

   6 如果在函数内部和函数外部通过var定义了同名变量，在函数内部，调用的是函数内部的这个局部变量，在函数外部调用的是函数外部的全局变量。如果在函数内部给这个变量重新赋值，只会改变函数内部的局部变量，不会改变函数外部的全局变量，同理，给函数外部的变量赋值，也只会改变函数外部的全局变量，不会改变函数内部的局部变量。

   7 在函数内部声明的变量，其实声明和赋值是分两步的，不管变量在函数体的哪个位置出现的，他最终一定是在第一行声明的，当程序执行到指定赋值语句时再赋值

   8 不可以在一个函数中声明两个同名变量，但可以在两个函数中声明同名变量，因为这两个函数的作用域不同，就是不同的变量

原型链图解

   内置对象

一 什么是内置对象？

内置对象就是 ECMAScript规范中一定实现了的对象和类

二 js中内置对象有多少？12个

1 Array 数组内置对象，提供了一系列的属性和方法可以对数组进行操作

2 String 字符串内置对象，提供了一系列的属性和方法可以对字符串进行操作

3 Number 数字内置对象，对数字进行操作

4 Boolean 逻辑内置对象，对逻辑值进行操作

5 Date    日期内置对象，对日期时间进行操作

6Math    数学内置对象，对对象进行数学处理

7 RegExp  正则内置对象，对事物的规则进行验证的

8ERROR   错误内置对象，对系统中的错误进行处理的

9 Function 函数内置对象，用于构造其他对象类型的

10Golbal  全局内置对象，表示全局对象的

11 Arguments 实参数组对象，表示传入函数的实参的

12 Object   所有的内置对象都继承自Object

 

三 Array 数组内置对象

1 什么是数组？

数组就是一组有序的值的集合。

下标、键、key、索引？

表示数组中某个值在集合中的位置

值、value?

表示某个位置对应的容器中存放的内容

下标和值统称为键值对或者元素

数组的特点

数组是一组有序值的集合，所以数组的下标必须从0开始，而且必须连续，如果有对应下标的数组元素没有赋值，那这个元素是存在的，但值是undefined

数组跟对象的区别？

数组是一组有序值的集合，而对象是一组无序值的集合。

数组的下标是连续的数字，而对象的属性值只要是合法的字符串，不需要必须是数字而且连续

在php中，有两种数组，一种叫索引数组（下标为数字的数组），一种叫关联数组（下标为字符串的数组），其实js中的数组就是一种索引数组，而对象就是关联数组

2 声明数组的两种方式？

  第一种 new Array

  1)var arr = new Array();//声明空数组

  2）var arr = new Array(10);//当参数只有一个值的时候，表示的是数组的长度

  3）var arr = new Array(1,2,3,4,5,5,5);当参数有多个值是，表示的是数组的元素

  第二种 数组字面量

  1） var arr = [10,20,30,40];

3 数组中元素的值可以是任意类型

4 二维数组和多维数组

  如果一个一维数组中的元素又是一个一维数组，这个数组叫做二维数组

  把一维数组理解成一个一行多列的表格，把二维数组理解成一个多行多列的表格

  二维数组中有元素为一维数组，这种数组叫做三维数组，可以用一个立方体来理解三维数组

 

5 数组常用的属性和方法

  属性

   length 获取数组的长度

  方法

  1 concat()

  作用：链接一个或多个数组

  参数： 可以是数组也可以是字符串

  返回值：链接后的新数组

  不会影响原数组

  2 join()

   作用：将数组变成一个字符串

   参数；链接元素的连接符，如果没写参数，是通过，号连接的

   返回值：由原数组的元素组成的字符串

   不会影响原数组

  3 pop()

   作用：删除数组中的最后一个元素

   返回值：被删除的那个元素

   会改变原数组，原数组中最后一个元素被删除了

  4 push（）

   作用：向数组的末尾添加一个或多个元素

   参数：要添加的元素，可以为数组

   返回值：新数组的长度

   会改变元素组

  5.shift() 在 头部压入

  6.unshift() 在头部删除

具体方法见，js方法汇总

字符串

一 字符串的定义？

字符组成的串叫做字符串。

二 声明字符串的三种方式？

 1 使用单引号

 2 使用双引号

 3 使用new String()

三 字符串的特点

 1 单双引号都不能解析变量，但能解析转义符号 \n \r  \\  \/  \’   \”

 2 单引号中不能嵌套单引号，双引号中不能嵌套双引号，但可以通过转义的方式添加

 3 可以将字符串理解成一个特殊的数组，可以通过指定的下标取出对应位置的字符。

   可以像遍历数组一样遍历字符串

四 字符串相关的属性和方法

字符串一定是只读的，不管使用什么方法，永远不可能改变原字符串

1 length  获取字符串的长度

2 charAt（） 获取指定位置的字符

3 charCodeAt() 获取指定位置字符的编码

4 indexOf()    从前往后，获取第一个指定字符的位置

5 lastIndexOf() 从前往后，获取最后一个指定字符的位置

6 fromCharCode() 根据字符编码获取字符

7 slice(起始位置 ，结束位置)要前不要后，截取字符串

8 substring(起始位置，结束位置)要前不要后 截取字符串

9 substr(起始位置，截取长度)

slice  substring substr的区别和联系？

相同点：这三个方法都可以截取字符串，如果第二个参数省略，表示截取到字符串结束

不同点：slice和substring的参数都是位置，而substr的第二个参数是长度

slice和substr这两个方法的第一个参数都可以为负，表示从后往前数下标，而substring的参数不能未负，但他的参数可以前面的比后面的大，这种情况下会对调

 

10）转换为大写

   toUpperCase()

11） 转换为小写

   toLowerCase()

剩了四个跟正则相关的字符串方法，在正则时讲

1  match()  获取字符串中跟正则匹配的字串

2  search()  获取字符串中跟正则匹配的子串的第一个字符的下标

3  replace()  用指定的字符替换掉字符串中跟正则匹配的子串

4  split()     用指定的字符分割字符串