前端开发知识点小总

变量声明

 var 声明一个变量，可赋一个初始值

 let 声明一个块级作用域的局部变量，可赋一个初始值

 const  声明一个块作用域的制度命名的变量

 变量的名字又叫做“标识符”，`必须以字母、下划线（_）、或者$开头，大小写敏感`

 若没有为变量赋初始值，则默认为undefined

 若没有声明变量而直接使用，抛出ReferenceError错误。

 当变量值为undefined时，布尔值的环境是false

 当变量值为null 时，布尔值环境为false。

数据类型

Boolean 布尔
null 对大小写敏感
undefined 空类型，变量未定义时候的值
Number 数值类型
String 字符串类型
Symbol(ES6新增)表示一种唯一且不可变得数据(对象)

字面量

• 字面量是用来表示如何表达这个值
• 变量赋值时右边的都是字面量

  1. 数组字面量
  2. 布尔字面量
  3. 浮点数字面量
  4. 对象字面量
  5. 整数字面量
  6. 正则字面量
  7. 字符串字面量

全局变量

//ES5
var a  = 'ES5'
window.a //'ES5'

//ES6
let b = 'ES6'
window.b // undefined

变量作用域

• ​ 这里面有一个变量提升的问题，他和函数提升类似

// ES5及之前

console.log(a); // undefined

var a = 1;

console.log(a); // 1

// ES6开始

console.log(b); // Uncaught ReferenceError: b is not defined

let b = 2;

console.log(b); // 2

函数声明有两种方式

//一种
function a(){
    console.log("a");
}
var a = function(){
    console.log("a");
}
---------------------------
//二种
   (function(){
        console.log("匿名");
    }());

常量

• 使用const 来声明一个只读的常量

• const声明的变量不能直接修改值，但是对于对象和数组，却是不受保护可以修改的

• 一个完整的javascript实现由3个部分组成：核心ECMAScript，文档对象模型DOM,浏览器对象模型BOM。

JavaScript具有特点：一种解释性脚本语言，主要用于向HTML页面添加交互行为，可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

变量

在javascript中，变量是存储信息的容器，变量存在两种类型的值，即为原始值和引用值。

1. JavaScript的原始类型，即Undefined，Null，Boolean，Number和String型。

2. 字符串String是JavaScript的基本数据类型。

3. 数据类型表示数据的类型，JavaScript语言的每个值都属于某一种数据类型。

4. JavaScript的数据类型分两类：值类型（原始值），引用数据类型（引用值）。

5. 值类型：字符串string，数字number,布尔boolean，对空null，未定义undefined，symbol为es6引入的一钟新的原始数据类型，表示独一无二的值。

6. 引用数据类型：对象object，数组array，函数function。

7. JavaScript提供typeof运算符用于判断一个值是否在某种类型的范围内。
   Undefined类型只有一个值，即为undefined。

8. 当声明的变量未初始化时，该变量的默认值是undefined。

9. Null类型只有一个值为null，值undefined实际上是从值null派生来的，所以JavaScript将他们定义为相等的。

10. null与undefined表示这两个值相等，但含义不同。

11. undefined是声明了变量但未对其初始化时赋予该变量的值，null表示尚未存在的对象。

    console.log( null == undefined); // true
    

12. Boolean类型的两个值是true和false。

13. Number类型，所有数学运算返回的都是十进制的结果。

14. Number.MAX_VVALUE和Number.MIN_VALUE，它们定义了Number值集合的外边界。

15. 如果生成的数值结果大于Number.MAX_VALUE时，将被赋予值Number.POSITIVE_INFINITY，表示不再有Number值。生成的数值小于Number.MIN_VALUE，会被赋予值Number.NEGATIVE_INFINITY，表示不再有Number值。

16. 有表示无穷大的值为Infinity。

17. Number.POSITIVE_INFINITY的值为Infinity,Number.NEGATIVE_INFINITY的值为-Infinity。

18. 使用isFinite()方法判断参数值是否是有穷的。

19. 特殊的NaN，表示非数。与无穷大一样，NaN也不能用于算术计算。注意,NaN与自身不相等。

20. String类型，是唯一没有固定大小的原始类型，字符串字面量是用双引号或者单引号声明。

遍历

for···in 和for····of 的区别

let a = [2, 3, 4, 5];

for (k in a) {
    console.log(k); //k只是下标
    console.log(a[k])
}

for (i of a) {
    console.log(i) //直接是值
}

部分js方法

forEach()

let a = [1,3,5,7];
a.forEach(function(val, index, arr){
    arr[index] = val * 2
})
a // [2, 6, 10, 14]

filter()

let a = [1, "", "aa", 2, 6];
let res = a.filter(function(val, index, arr){
    return typeof val == "number";
})
res;//[1, 2, 6]

map()

let a = [1, 3, 5]; 
let b = a.map(function(val, index, arr){  
    return val + 1; 
}) 
b; //[2, 4, 6]

·

拓展算符(…)

• 非常有用

console.log(...[1, 2, 3]);   // 1 2 3 
console.log(1, ...[2,3], 4); // 1 2 3 4

// 通常情况 浅拷贝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]

// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]

fill()填充

1. 用于用指定值填充一个数组
2. 用来初始化空数组，并抹去数组中已有的元素
3. fill()的第二个和第三个参数指定填充的起始位置和结束位置

new Array(3).fill('a');   // ['a','a','a']
[1,2,3].fill('a');        // ['a','a','a']
[1,2,3].fill('a',1,2);//  [1, "a", 3]

entries(),keys(),values()

1. entries()对键值对遍历
2. keys()对键名遍历
3. values()对键值遍历.

includes()

1. includes()用于表示数组是否包含给定的值
2. 第二个参数为起始位置，默认为0，如果负数，则表示倒数的位置，如果大于数组长度，则重置为0开始。

[1,2,3].includes(3,3);    // false
[1,2,3].includes(3,4);    // false
[1,2,3].includes(3,-1);   // true
[1,2,3].includes(3,-4);   // true

flat()

展开二维多维数组

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

js事件三个阶段

事件流

1. 事件冒泡流
2. 事件捕获流

事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段
事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。

• 捕获，事件由页面元素接收，逐级向下，到具体的元素
• 目标，具体的元素本身
• 冒泡，元素本身，逐级向上，到页面元素

1. 事件捕获，当使用事件捕获时，父级元素先触发，子元素后触发。
2. 事件冒泡，当使用事件冒泡时，子级元素先触发，父元素后触发。

事件冒泡和事件捕获

1. 事件发生会产生事件流
2. DOM事件流：DOM结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件。
3. 事件流顺序有两种类型：事件冒泡和事件捕获。

addEventListener("click","doSomething","true")
//true 代表事件捕获
//false代表事件冒泡
表示事件在那个阶段才响应

拖拽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mouse</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #dd {
            width: 120px;
            height: 120px;
            background: #00ff00;
            position: absolute;
            text-align: center;
            line-height: 120px;
        }
    </style>
    <script>
        var dd;
        var mflag = false;

        function ondown() {
            dd = document.getElementById('dd');
            mflag = true;
        }

        function onmove(e) {
            if (mflag) {
                dd.style.left = e.clientX - 60 + "px";
                dd.style.top = e.clientY - 60 + "px";
            }
        }

        function onup() {
            mflag = false;
        }
    </script>

</head>
<onmousemove onmousemove="onmove(event)">
    <div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;">
        鼠标拖拽
    </div>
</onmousemove>
</body>

</html>

DOM操作

1. 创建节点

// 创建节点：
document.createElement("h1");
document.createTextNode(String);
document.createAttribute("class");

2. 添加节点

element.appendChild(Node);

element.insertBefore(newNode, existingNode);

3. 删除节点

element.removeChild(Node)

属性操作：获取当前元素的父节点，获取当前元素的子节点，获取当前元素的同级元素，获取当前元素的文本，获取当前节点的节点类型，设置样式。

• 获取当前元素的父元素

element.parentNode

• 获取当前元素的子节点

element.chlidren

• 获取当前元素的同级元素

element.nextElementSibling

element.previousElementSibling

• 获取当前元素的文本

element.innerHTML

element.innerText