基础部分一些重要点

1. 编写位置

1. 可以写在标签的属性中

   <button onclick = "alert("点我")"></button>
   

2. 可以写在超链接的href属性中

   <a href = "javascript:alert('点我')"></a>
   

3. 写在script便签中

   <script>
       alert('点我')
   </script>
   

4. 可以引入外部js文件，通过script标签引入，一般引入外部文件了，就不能在里面编写代码了，即使编写了浏览器也会忽略，如果需要则可以创建一个新的script标签用于编写内部代码

   <script type = "text/javascript" src="js/script.js">
   	alert('我是猪')   //无效
   </script>
   

2. 语法注意点

1. JS中每一条语句以（ ；）结尾，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以开发中分号必须写
2. JS会忽略多个空格或者换行，所以我们可以利用空格或者换行对代码进行格式化

3. 字面量和变量

介绍

字面量：都是一些不可改变的值，字面量都是可以直接使用的。但是我们一般不会直接使用

变量：可以用来保存字面量，而且变量的值是可以任意改变的，变量更加方便使用，所以在开发的时候一般都是通过变量去保存一个字面量，而很少直接使用字面量

4. 数据类型

介绍

数据类型指的就是字面量的类型

JS中共有6种数据类型：

1. String 字符串
2. Number 数值
3. Boolean 布尔
4. Null 空值
5. Undefined 未定义
6. Object 对象

其中String、Number、Boolean、Null、Undefined都属于基本数据类型，Object属于引用数据类型

4.1 String

1. 在JS字符串需要使用引号引起来，使用单引号或者双引号都可以，但是不要混着用
2. 引号不能嵌套，单引号中不能放单引号，双引号中不能放双引号，但是单双引号可以嵌套使用
3. 在字符串中我们可以使用==（ \ ）==作为转义字符，当表示一些特殊符号时可以使用‘\’进行转义
   • \n 表示换行
   • \t 表示制表符
   • \\ 表示\

4.2 Number

介绍

1. 在JS中所有的数值都是Number类型，包括整数和浮点数（小数）

2. 可以使用一个运算符typeof来检查一个变量的类型，检查字符串时，返回String，检查数值时，返回Number

3. 如果表示的数值超过了最大值，则会返回一个Infinity，Infinity是一个字面量，表示无穷大，使用typeof检查Infinity也会返回Number，Infinity表示正无穷，-Infinity表示负无穷

4. NaN是一个特殊的数字，表示Not a Number，使用typeof检查NaN也会返回Number

5. 在JS中整数的运算基本可以保证精准，如果使用JS进行浮点计算，可能得到一个不精准的结果，例如0.1+0.2，因此千万不能使用JS进行对精准度要求比较高的运算

4.3 Null、Undefined

介绍

1. Null类型的值只有一个，就是null，null这个值专门用来表示一个空的对象，使用typeof来检查null值时候，会返回Object
2. Undefined类型的值只有一个，就是undefined，当声明一个变量，但是并不给变量赋值时，他的值就是一个undefined，使用typeof来检查null值时候，会返回Undefined

4.4 强制类型转换String

1. 方式1：调用toString（）方法，注意null和undefined这两个值没有toString（）方法，调用他们的方法会报错
2. 方式2：调用String（）函数，对于Number和Boolean来说其实就是调用toString（）方法，但是对于null、undefined来说就不会调用，可以成功转换

4.5 强制类型转换Number

1. 字符串转Number：使用==Number（）==函数
   • 纯数字的字符串，直接转换为对应数字
   • 如果字符串中含有非数字的内容，则转换为NaN
   • 如果是空字符串或者是全空格的字符串，则转换为0
2. 布尔值转Number：使用==Number（）==函数，true转换为1，false转换为0
3. null转为0
4. undefined转为NaN
5. 专门用来对付字符串的：
   • parseInt（）：把一个字符串转换为一个整数
   • parseFloat（）：把一个字符串转换为一个浮点数，他可以获得有效的小数
   • 对于非String使用parseInt（）或者parseFloat（），它会先将其转换为String然后再操作

4.6 其他进制数字

介绍

1. 在JS中，如果需要表示16进制的数字，则需要0x开头
2. 如果需要表示8进制数字，则需要以0开头
3. 如果要表示2进制数字，则需要以0b开头，但是不是所有浏览器都支持
4. 像070这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
5. 可以在parseInt（）中传递第二个参数，来指定数字的一个进制

4.7 转换为Boolean

使用Boolean（）方法

1. 数字 ---- > 布尔：除了0和NaN，其余的都是true
2. 字符串 ----> 布尔：除了空串，其余的都是true
3. Null和undefined ----> 布尔：false
4. 对象也会转换为true

5. 算数运算符

介绍

1. 当对非Number值进行运算时，会将这些值转换为Number再运算，任何值和NaN作运算，都是NaN，如果对两个字符串进行加法运算，则会做拼串，将两个字符串做一个拼接操作。
2. 任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作，我们可以利用这一特性，将任意的数据类型+一个“ ”转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String
3. 除了字符串的加法，其余的运算都转换为Number

6. 立即执行函数

<script>
    (function (){
    
    
        console.log('111')
    })()
</script>

7. 作用域

7.1 全局作用域

1. 使用var关键字声明的变量，会在所有的代码执行之前被声明
2. 使用函数声明创建的函数，他会在所有的函数执行之前就被创建，所以我们可以在函数声明前就调用：function A（）{}，而使用函数表达式创建的函数则不会，var a = functionA（）{}
3. 在全局作用域中，创建的变量都会作为window对象的属性保存

7.2 函数作用域

1. 当在函数作用域中操作一个变量的时候，它会先在自身作用域中寻找，如果有就直接使用，如果没有就向上一级作用域寻找，直到找到全局作用域，如果依然没有，则会报错
2. 在函数中要访问全局变量可以使用window对象
3. 在函数作用域中也有声明提前的特性，函数声明也会在函数中的所有代码执行之前执行
4. 在函数中，不使用var声明的变量都会称为全局变量，相当于window对象的属性了
5. 形参就相当于在函数作用于中声明了变量

8. this

介绍

1. 解析器在调用函数时候，每次都会向函数内部传递一个隐含的参数，这个参数就是this，this指向的是一个对象
2. 这个对象我们称为函数执行的上下文对象
3. 根据函数的调用方法不同，this会指向不同的对象：
   • 以函数的形式调用时，this永远都是window
   • 以方法的形式调用时，this就是调用方法的对象

9. 原型对象

介绍

1. 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

2. 如果函数以普通函数调用，prototype没有任何作用

3. 当函数以构造函数的形式调用时，它所创造的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过**__ proto__**来访问该属性（双下划线）。

4. 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

5. 当我们访问对象的一个属性或方法时，他会先在对象自身中寻找，如果有则直接使用，如果没有则去对象的原型对象中寻找，找到就使用。

6. 以后创建构造函数时，可以将这些对象共有的属性和方法统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加属性方法，也不会影响到全局作用域，就可以使每个对象都具有属性和方法。

7. 原型对象也是对象，所以它也有原型。当我们使用一个对象的属性或方法时，会先在自身中找，如果没有，则去原型对象中找，如果还是没有，则去原型的原型对象中找，直到找到Object对象的原型。

10. 数组

10.1 数组的四个方法

1. push（）：向数组的末尾添加一个或多个元素
2. pop（）：删除数组的最后一个元素，并将删除的元素作为返回值返回
3. unshift（）：向数组开头添加一个或多个元素，并返回新的数组长度
4. shift（）：删除数组的第一个元素，并将删除的元素作为返回值返回

10.2 forEach（）

介绍

1. forEach（）方法需要一个回调函数作为参数
2. 数组中有几个元素函数就执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来
3. 浏览器会在回调函数中传递三个参数：
   • 第一个参数，就是当前正在遍历的元素
   • 第二个参数，就是当前正在遍历的元素的索引index
   • 第三个参数，就是我们正在遍历的数组
4. 这个方法只支持IE8以上的浏览器，如果需要兼容IE8，则不要使用forEach

10.3 slice（）和splice（）

介绍

1. slice（）：可以从数组中返回选定的元素，该方法不会影响原数组，而是将截取到的元素封装到新的数组返回，左开右闭。

   • 参数：

     • 截取开始的位置：start

     • 截取结束的位置：end

       let arr=["a","b","c","d","e"];
       console.log(arr.slice(0, 3)); //["a", "b", "c"]
       

2. splice（）：可以删除数组中的指定元素，会影响到原数组，会将指定元素从原数组中删除，并将被删除元素作为返回值返回。

   • 参数：

     • 第一个：开始位置的索引

     • 第二个：删除的个数

     • 第三个及以后：可以传递新的元素，这些元素将会自动插入到开始位置索引的前边位置。

       <script>
           let arr=["a","b","c","d","e"];
           console.log(arr.splice(0, 3,'aaa'));
           console.log(arr);  //["aaa", "d", "e"]
       </script>
       

11. call、apply

介绍

1. 这两个方法都是函数对象的方法，需要通过函数对象来调用
2. 当对函数对象调用call（）和apply（）时，都会调用函数执行，即相当于func（）
3. 在调用call（）和apply（）可以将一个对象指定为第一个参数，此时这个对象将会成为这个函数执行时的this
4. call（）可以将实参在对象之后依次传递，apply（）方法需要将实参封装到一个数组里统一传递

<script>
    let obj={
    
    name:'obj调用'}
    let obj2={
    
    name:'obj2调用'}
    function A(a,b){
    
    
        console.log(this.name)
    }
    A.call(obj,1,2)  //obj调用
    A.apply(obj2,[1,2])  //obj2调用
</script>

12. arguments

介绍

1. 在调用函数时，浏览器每次都会传递进两个隐含的参数，一个是函数的上下文对象this，一个是封装实参的对象arguments
2. arguments是一个类数组对象，他也可以通过索引来操作数据，获取长度
3. 在调用函数时，我们所传递的实参都会在arguments中保存
4. arguments.length可以用来获取保存实参的长度
5. 即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦：
   • arguments[0]：表示第一个实参
   • arguments[1]：表示第二个实参
6. arguments有一个属性：callee，这个属性对应一个函数对象，就是我们当前正在执行的函数对象

13. Dom

通过document对象调用

1. getElementById（）：通过id属性获取一个元素节点对象
2. getElementByTagName（）：通过标签名获取一组元素节点对象
3. getElementsByName（）：通过name属性获取一组元素节点对象

style

1. 通过JS修改元素的样式：元素.style.样式名 = 样式值

2. 在CSS命名中，有-连接的需要将样式名修改为驼峰命名，去掉-然后-后的子母大写

3. 通过style属性读取和设置的样式都是内联样式，因此具有较高的优先级，所以会立即显示，但如果在样式中写了!important，此时样式会有最高的优先级，此时会导致JS修改样式失败。

4. 读取样式：元素.style.样式名

5. 读取元素当前正在显示的样式：元素.currentStyle.样式名，但只有IE浏览器支持它，

6. 在其他的浏览器中可以使用**getConputedStyle（）**方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。需要两个参数：

   • 第一个：要获取样式的元素
   • 第二个：可以传递一个伪元素，一般都传null

   该方法会返回一个对象，对象中封装了当前元素对应的样式，如果获取的样式没有设置，则会获取到一个真实的值而不是默认值，比如，没有设置width，它不会获取到auto，而是一个长度，这个方法不支持IE8及以下浏览器

7. 通过currentStyle和getComputedStyle（）获取到的样式都是只读的，不能修改，如果要修改必须通过style属性。

14. 事件对象及绑定

介绍

1. 当事件的响应函数被触发时，浏览器每次都会将一个事件对象event作为实参传递给响应函数
2. 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向…
3. 在IE8中，响应函数被触发时，浏览器不会传递event；在IE8及以下的浏览器中，是将event作为window对象的属性保存的
4. 可以通过将event的cancelBubbl设置为true，即可取消事件冒泡
5. event中的target表示触发事件的对象。

事件的委派

1. 事件的委派是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
2. 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

事件的绑定

1. 通过addEventListener（）这个方法为元素绑定响应函数，可以同时为一个元素的相同事件绑定多个响应函数，这样当事件触发时，响应函数将会按照函数的绑定顺序执行。

2. 参数：

   • 事件的字符串，不要on

   • 回调函数，当事件触发时该函数会回调

   • 是否在捕获阶段触发事件，需要一个布尔值，一般传false

     btn.addEventListener("click",function(){
             
             
         alert(1);
     },false)；
     btn.addEventListener("click",function(){
             
             
         alert(2);
     },false)；
     btn.addEventListener("click",function(){
             
             
         alert(3);
     },false)
     

3. 在IE8中也可以使用attachEvent（）这个方法来绑定事件，参数：

   • 时间的字符串，要on
   • 回调函数

   它也可以同时为一个事件绑定多个处理函数，不同的是他是后绑定先执行，执行顺序和addEventListener（）相反，即弹出3.2.1

15. Bom

location

1. 如果直接打印location，可以获取到地址栏的信息
2. assign（）：用来跳转到其他的页面，作用和直接修改location一样
3. reload（）：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
4. replace（）：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成历史记录。