JS重学—基础知识

108 阅读5分钟

这是我参与更文挑战的第17天,活动详情查看: 更文挑战

1,JS特点

 编译: 速度快,移植行性不好
 解释:跨平台,稍微慢
 JavaScript解释性语音, 单线程

2,主流浏览器

IE  内核 trident

chrome  内核  webkit/blink

firefox 内核  Gecko

opera  内核  presto

Safari  内核 webkit

3,基础知识

 (1),预编译

   1,函数声明整体提升

   2,变量声明提升

​ (2), 函数预编译过程:

          1,创建一个AO对象,即执行期上下文

          2,找形参和变量声明,

          3,形参和实参统一

          4,找函数声明

      全局预编译过程: 
           1,创建一个GO对象

           2,找变量

           3,找函数

​ (3), 作用域

   [[scope]] 指的就是我们所说的作用域,其中存储了执行期上下文集合,这个集合呈链式解构,我们称作:作用域链

​ (4),立即执行函数

    形式: (function(){}())

    形式二:(function(){})()

    注意:只有表达式才能被执行符号执行:比如+-*()

    \+ functon test(){}()

​ (5),对象

   1,构造函数内部三段式

      (1new操作符

      (2) 在函数体前面加上 var this = {}

      (3return this

​ (6), 原型

   Person.prototype = {}

   2,绝大多数对象都会继承自Object.prototype

​ (7),call和apply

   1, 作用:改变this的指向

   2, 区别:call需要把实参安装形参个数传递进去, apply需要传递一个数组,arguments类数组

​ (8), this

    1,函数预编译过程: this -> window

    2,全局作用域里: this -> window

    3,call和apply可以改变函数运行时this的指向

    4,谁调用函数,this就是谁


​ (9), 克隆

    1,判断是不是原始值  typeof 返回值: 
    2,判断是数组还是对象
    3,建立相应的数组和对象

​ (10), 类数组

   1,类数组必须有length属性

   2push: Array.prototype.push 

   3, splice: Array.prototype.splice

#### **1,闭包**
   当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链不释放,造成内存泄漏

4,ES6

 (1), 定义变量
    let : 块级作用域

     {}, if(){}, while(){},for(){},  

    1let声明的变量,没有变量提升功能,不存在的  

    2,在代码块内,只要let定义的变量,在变量之前使用,都会报错  

    3let不能重复第一变量  

    const: 定义的是常量,不能修改

    1const定义的变量必须有值,不能为空,不能后复制

​ (2), 解构赋值
 注意:左右两边,结构格式要保持要一致

    1,解构可以给默认值 let [a,b,c='默认值'] = ['aa','bbb']

    2,解构可以定义别名 let {name,age,job:aaa} = {namge:'zlm',age:14,job:'老师'}

​ (3),字符串模板
    1, 优点:可以随意的换行

    2,取值方式 `${name}`

    3, 字符串查找,str.indexOf(要找的东西) 返回索引为止,没找到等于-1

     str.includes(要找的东西) 返回值:true/false

    4, str.startWith(检测)  检测字符串是否以谁开头

       str.endsWith(检测) 检测字符串是否以谁结尾

       str.repeat(次数) 字符串重复次数

       str.padStart('整个字符串长度',填充的东西) 往前填充

       str.padEnd('整个字符串长度',填充的东西) 往后填充
       
​ (5), 函数默认参数
    1,function show({x=0,y=1,z=2}) {} 函数参数默认已经定义,不能再使用let,const定义声明

    2,扩展运算符,rest运算符  ...

      [1,2,3,4,5] -> ...[1,2,3,4,5]   => 1,2,3,4,5

      1,2,3,4,5 -> ...1,2,3,4,5   => [1,2,3,4,5]

    3,箭头函数 注意:1this问题:定义函数所在的对象,不再是运行时,所在的对象了

                    2,箭头函数里面没有arguments类数组

                    3,箭头函数不能当构造函数
​ (6),数组 

   1ES5中新增循环 

      arr.forEach((val,index,arr) => {

          console.log(val,index,arr)

       })

       arr.map() 参数和forEach一样,区别是有返回值

       arr.filter() 过滤  过滤一些不合格的元素,如果回调函数返回true,就留下来

       arr.some()类似查找功能,数组里面某一个元素符合条件,就返回true

       arr.every() 数组里面的所有元素都要符合条件,才返回true

       arr.reduce() 从左往右,数组求和,平方等等

       arr.reduceRight()

  2,ES6中新增循环 arr.keys() 数组下标    arr.entries()数组某一项

       for( let val of arr) {

          console.log(val)
       }

       for(let index of arr.keys()){

           console.log(index)

       }

      for(let item of arr.entries()){

           console.log(item)

       }

       for(let [key,val] of arr.entries()){

           console.log(key,val)

       }

    3, 转换成数组,扩展运算符

       (1) let arr = [...arr]

       (2) let arr = Array.from(arr)  // 作用:把类数组对象转换成数组 ,个人观点,具备length这个东西,就可以用

       (3) Array.of() 把一组值转换成数组

       (4) arr.find() 查找  找出第一个 符合条件的数组成员,如果没有找到,返回undefined

      (5) arr.fill() 填充
​ (7), 对象
    1,对象的简介语法

       let json = {
           name,   // name:name
           age,
           show(){
               return this.name;
           }
       }

    2, Object.is('a','a')   比较两个东西是否相等

    3, Object.assign() 用户合并对象,参数合并,复制一个对象

    4Object.keys(), Object.entries(), Object.values()

       解构:       let { keys,values, entries} = Object

    5, Promise 承诺,许诺

    1,作用:解决异步回调问题

      new Promise(function(resolve,reject){
         // resolve 成功调用
         // reject 失败调用
      })
      本人用法:
      new Promise().then(res => {
      }).catch(err=>{
      })
      Promise.resolve('aaa') 将现有东西转成一个promise对象,resolve状态,成功状态
      等价于: new Promise((resolve,reject) => {
          resolve('aaa')
      })

​ (8), 模块化

    1import 可以是相对路径,也可以是绝对路径

    2import模块只会导入一次,无论你引入多少次

    3,有提升效果,import会自动提升到顶部,首先执行

​ (9), 类

     1class的构造函数,一旦调用new,肯定会执行

     2ES6类是没有与解析,提升功能的

     3, this的矫正  fn.call(‘this指向谁’,args1,args2)

                  fn.apply('this指向谁',[args1,args2])

                   fn.bind()

     4, 静态方法就是类身上的方法  static aaa() {} , person.aaa() 由类直接调用

     5,继承 extends

​ (10), Symbol   一种新的数据类型

    1let syml = Symbol('aaa')

    2, Symbol 不能new ,返回的是一个唯一的值,是一个单独的数据类型,就叫symbol,属于基本类型,相当于key,私有的东西

    3, generator() 生成器函数

        1,解决异步问题,深度嵌套的问题

        2, yield 产出

        3, 自动遍历generator ,return的东西,不会遍历

    4, async 

        1, await只能放到async函数中

        2,相比genrator语义化更强    

5,总结

​ JavaScript记得基础知识,包括底层原理,还需要继续学习,上面记录一下自己重学JS的学习笔记。加油,少年!!!