对于JavaScript组成的认识(一)

JavaScript的组成:

ECMAScript****是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是(European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是javascript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。浏览器对象模型是Window对象。

DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。文档对象模型HTML Document 对象。

1、javaScript组成的介绍:

包括:ECMAScript,DOM,BOM

1.ECMAScript:javascript核心语法,不依赖平台

例如:定义变量,if,switch,for,数组Api,字符串API,正则Api…

2.DOM:(Document Object Model)针对浏览器标签操作 例如:获取id,获取类名,获取标签名
注:操作真实DOM,引起重绘和回流–>才引出虚拟DOM

  重绘:主要指页面颜色的改变,不影响DOM的空间变化 color,background
  回流:指页面元素的尺寸(width,padding,height,margin),位置的变化:left,top,bottom,right等
  
    tranform:translateX(300px)
  
  重绘未必引起回流,但回流一定引起重绘

3.BOM:(Browser Object Model)主要针对浏览器相关API的操作

history: history.go(),history.back() pusState,popState,replaceState
navigator:跟浏览器系统信息相关

   navigator.userAgent
   
 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator    location:主要获取浏览器地址栏相关的信息
   location.search    location.href    location.hash

参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Location

ECMA6/7/8…新增特性
ES6 ES2015 … ES11 ES2020

了解ES6/7/8/9/最新进展:https://github.com/tc39/proposals/blob/master/finished-proposals.md

let和const: 重点

let 定义变量
const 定义常量
面试官: 1.你说一下let和var的区别

相同点:都是定义变量

区别:
1.是否有变量提升 var有变量提升,let没有
2.是否能重复定义 var允许重复定义变量,let不允许重复定义
3.是否有块级作用域 { }
全局作用域:在函数外部定义的范围
局部作用域:在函数内部定义的范围
块级作用域:在{ }大括号中定义范围

2.你说一下let和const的区别

let 定义变量 const 定义常量,是不能修改的,如果要修改,将常量定义成对象的形式,这样,就可以给对象中的属性进行修改
symbol:是ES6新增的基本数据类型
number,string,boolean,null,undefined,symbol(ES6新增)

symbol:定义的值是唯一性

两个symbol类型的值永远不等

例如:
var s1=Symbol()
var s2=Symbol()
s1=== s2
 false

扩展运算符( … )
扩展运算符(也称展开操作符)两层作用:

1.将数组转换成数据列表 [a,b,c,d]--->a,b,c,d
例如:
var arr1=[666,777,888]
var arr2=['hello','vuejs']
var result=[...arr1,...arr2]

2.将数据列表转换成数组 a,b,c,d—>[a,b,c,d]

3.展开对象

var result={
    
    ...obj1,...obj2}
或
result=Object.assign({
    
    },obj1,obj2)

例如:
function sum1(str,...args) {
    
    
  var result=0;
  for(var i=0;i<args.length;i++) {
    
    
    result+=args[i]
  }
   return result;
}

sum1('请输入',20,30,40)
class类
定义一个类:
class Person {
    
    
   constructor(a,b) {
    
    
     //构造器
     this.属性=a
   }

  方法1() {
    
    }
  方法2() {
    
    }
  方法3() {
    
    }
}

继承一个类:
class Child extends Person {
    
    

   constructor(a,b) {
    
    
     super()  //代表父类
     //构造器
     this.属性=a

   }

  方法1() {
    
    }
  方法2() {
    
    }
  方法3() {
    
    }

}

set和map:
set:理解成是一个不重复的数组

将set类型的数据转换成数组:

var s=new Set() Array.from(s) 或[…s]

var s=new Set() s.add() s.has() s.delete() s.size

例如:数组去重:

var arr=[3,34,23,2,2,23,23,3,34,34,34,45]

[...new Set(arr)]

map:理解成是一个对象,增强了对象key的数据类型,以前只能是字符串,现在对象的属性可以是做任意的数据类型!

{
    
    
  "name":'jack',
  '10':'abc',
  'undefined':999
}

var m1=new Map()
m1.set(属性名,) //设置
m1.get(属性名)  //获取
m1.delete(属性名)  //删除


//遍历Map类型获取所有值
for(var [key,value] of m1) {
    
    

  console.log(key)
  console.log(value)
}

Promise:重点

1.用于处理回调地狱的异步解决方案
具体实现:
function waiting() {
    
    

    return new Promise((resolve,reject)=>{
    
    
    
             setTimeout(function() {
    
    
      
                //console.log(2)
                reject('哈哈')
    
            },2000)      

    })

 }


waiting().then(res=>{
    
    
   console.log(1)
   console.log('res:',res)
    console.log(3)

}).catch(error=>{
    
    

   console.log('error:',error)

})

.then
.catch
.race
.finally
Promise.all([waiting(),waiting2(),waiting3()])
   .then(res=>{
    
    


   }).catch(res=>{
    
    

})

async/await(ES2017) 重点

串行执行:必须先执行第一个异步,将第一个异步的结果返回传递给第二个
异步函数,再执行第二个异步的操作过程

//第一个函数
function waiting() {
    
    
    return new Promise((resolve,reject)=>{
    
    
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
    
    
                resolve('第二个接口返回')
            },2000)
    })

 }
//第二个函数
function waiting2() {
    
    
    return new Promise((resolve,reject)=>{
    
    
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
    
    
                reject('第二接口返回')
            },2000)
    })
 }

async function handleFn() {
    
    
   console.log(1)
   //串行执行,先等待第一个函数返回
    let res=await waiting()
    console.log('res:',res)
    
    //再等待第二个函数返回
    let res2=await waiting2(res)
    console.log(res2)
 }

并行:两个接口同时执行
function waiting() {
    
    
    return new Promise((resolve,reject)=>{
    
    
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
    
    
                resolve('第二个接口返回')

            },2000)
     
    })

 }


function waiting2() {
    
    
    return new Promise((resolve,reject)=>{
    
    
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
    
    
                reject('第二接口返回')

            },2000)
     
    })

 }

async function handleFn() {
    
    
   console.log(1)
    //并发执行,waiting(),waiting2()两个接口都成功返回才返回结果
    let res=await Promise.all([waiting(),waiting2()])
     console.log('res:',res)
     console.log('end')
 }

 handleFn().catch(res=>{
    
    

     console.log('error:',res)
 })

猜你喜欢

转载自blog.csdn.net/weixin_48193717/article/details/108391789