👦个人简介：张清悠，字澄澈，号寻梦客，爱好旅行、运动，主攻前端方向技术研发，副攻Unity 3D、C++、Python人工智能等
📝个人寄语：学会不为过程的缓慢而焦虑，即使暂时未能如你所愿，但只要你在努力，你就在不断成长！
🙏个人公众号:清悠小猿(海量源码尽在其中，欢迎关注)
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)
})
这是更新的初学者认知前端脚本语言JavaScript的第一篇文章，正在持续更新中，希望对正在路上的你，有所帮助，欢迎留言评论，一起致力于IT行业，加油！！！
![推荐系统[八]算法实践总结V1：淘宝逛逛and阿里飞猪个性化推荐：召回算法实践总结【冷启动召回、复购召回、用户行为召回等算法实战】](https://ucc.alicdn.com/images/user-upload-01/44083e4c130841f894e36366a71f8d96.png?x-oss-process=image/resize,h_160,m_lfit)
