WEB前端笔记01

HTML

1. HTML5

HTML5 是 HTML(超文本标记语言)的最新版本。

2. <!DOCTYPE>

<!DOCTYPE>是关于页面写入了什么版本的HTML的指令。<!DOCTYPE>标记没有结束标记，它不区分大小写。<!DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。

3. HTML5新特性

3.1 <canvas> <video> <audio> 元素
3.2 支持本地储存
3.3 <section> <article> <footer> <header> <nav> <menu>

4. HTML5 中的 Session Storage

Session storage 存储对象存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。如下所示，我们可以在这里创建“blogName”作为会话并访问Session storage
<script type="text/javascript"> 
  sessionStorage.blogName="OnlineInterviewQuestions"; 
  document.write(sessionStorage.name); 
</script>

5. HTML5 应用程序缓存和 HTML 浏览器缓存区别

新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产，如HTML文件、图像、CSS、JavaScript等。应用程序缓存可以预取完全未被访问的页面，从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能。

6. LocalStorage本地存储在HTML5中的用途

LocalStores 本地存储就是一个轻量级的sqllite数据库。可以在客户端本地存储数据，用于在断开网络连接的情况下读取本地缓存cookies，LocalStores可以将数据长期保存在客户端，直至人工清除为止，接下来演示下实例：

1、使用localStorage对象保存数据：

localStorage.setItem(key , value)

2、使用localStorage获取保存的数据：

localStorage.getItem(key)

3、清除localStorage保存的数据：

localStorage.removeItem(key)

4、清除全部localStorage对象保存的数据：

localStorage.clear()

JS

1. let var const

var -- ES5 变量声明方式
    变量未赋值的时候或者未使用声明变量时为undefined， 变量提升
let -- ES6变量声明方式
    变量未声明前使用会报错
    块级作用域
    禁止重复声明变量否则会报错
const -- ES6变量声明方式
    const为常量声明方式，必须初始化，后面的代码中不能修改该常量的值
    const声明引用类型变量是可以改变的（内存地址不会改动）

2. js数据类型

基本数据类型：Number，String，Boolean，null，undefined， symbol，bigint（后2为ES6新增），基本数据类型是储存在栈中
引用数据类型：Object，Function，引用数据类型是存储在堆内存中

两种数据类型的区别：

    堆比栈空间大，栈比堆运行速度快。

    堆内存是无序存储，可以根据引用直接获取。

    基础数据类型比较稳定，而且相对来说占用的内存小。

    引用数据类型大小是动态的，而且是无限的。

3. map forEach some every filter reduce

   map 返回新的数组,不会改变新数组
   forEach 不会返回数据,允许callback改变原始数组的元素
   but
   `基本数据类型-死都改变不动原数组 `
   `const array = [1, 2, 3, 4];
    array.forEach(ele => {
    ele = ele * 3
    })
    console.log(array); // [1,2,3,4] `
   `引用类型对象数组可以改变`
    const objArr = [{
        name: 'wxw',
        age: 22
    }, {
        name: 'wxw2',
        age: 33
    }]
    objArr.forEach(ele => {
        if (ele.name === 'wxw2') {
            ele.age = 88
        }
    })
    console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}] `
    `引用类型->改变整个单次循环的item NO`
    `const changeItemArr = [{
        name: 'wxw',
        age: 22
    }, {
        name: 'wxw2',
        age: 33
    }]
    changeItemArr.forEach(ele => {
        if (ele.name === 'wxw2') {
            ele = {
                name: 'change',
                age: 77
            }
        }
    })
    console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]`
    `基本类型和引用类型都可以修改的方法`
    `// 基本类型可以欧~
    const numArr = [33,4,55];
    numArr.forEach((ele, index, arr) => {
        if (ele === 33) {
            arr[index] = 999
        }
    })
    console.log(numArr);  // [999, 4, 55]

    // 引用类型也可以欧~
    const allChangeArr = [{
        name: 'wxw',
        age: 22
    }, {
        name: 'wxw2',
        age: 33
    }]
    allChangeArr.forEach((ele, index, arr) => {
        if (ele.name === 'wxw2') {
            arr[index] = {
                name: 'change',
                age: 77
            }
        }
    })
    console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]`

    reduce 计算数组所有值的和 有返回值 不改变原数组

    some 测试数组值是否符合条件，有一个符合就i返回true

    every 测试数组元素是否都满足条件，全部满足就返回true

4. for of 与 for in

   for in  1. index索引为字符串型数字，不能直接进行几何运算
           2. 遍历顺序有可能不是按照实际数组的内部顺序
           3. 使用for in会遍历数组所有的可枚举属性，包括原型
       所以for in更适合遍历对象，不要使用for in遍历数组。
       for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

   for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

   for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
   for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法：for(var key of Object.keys(someObject))
   遍历map对象时适合用解构,例如:
   for (var [key, value] of phoneBookMap) {
       console.log(key + "number is: " + value);
   }