什么是js为什么学习 JavaScript?

什么是js为什么学习 JavaScript?

JavaScript 缩写。一种计算机脚本语言，主要在web浏览器(客户端)解释执行，由网景公司开发。
请注意，网景公司的 JavaScript 和微软公司的 JScript 不是同一种东西。
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JS的组成部分
1.ECMAScript标准（ECMA，欧洲计算机制造联合会）
2.BOM 浏览器对象模型 提供与浏览器交互的方法和接口；
3.DOM 档对象模型 提供访问和操作网页内容的方法和接口

DOM D—document（文档） O—object（对象） M—model（模型）
BOM B—browser（浏览器） O—object（对象） M—model（模型）

JS的数据类型
简单数据类型
1.Number 数字类型
2.String 串类型
3.Boolean 布尔类型（true/false）
4.Undefined 未定义类型
表示声明了没有赋值的变量
5.Null 空类型
表示一个空

cookie 的使用
作用
cookie是键值对形式存储的少量信息，那它有什么作用呢？

我们知道，平时上网时都是使用无状态的HTTP协议传输出数据，这意味着客户端与服务端在数据传送完成后就会中断连接。这时我们就需要一个一直保持会话连接的机制。在session出现前，cookie就完全充当了这种角色。也就是，cookie的小量信息能帮助我们跟踪会话。一般该信息记录用户身份。

当然cookie也常记录跟踪购物车的商品信息（如数量）、记录用户访问次数等。
添加cookie示例
获取客户端的Cookie时，只能获取name与value属性，其它属性都不会被提交。

Cookie c = new Cookie("username","peter");// 新建一个Cookie对象
c.setMaxAge(24*60*60);                    // 设置过期时间1天，以秒为单位
response.addCookie(c);                    // 保存cookie到客户端

删除cookie示例
删除某个Cookie时，只需要新建一个只有maxAge和value不一样的同名Cookie，然后添加到response中覆盖原来的Cookie

Cookie cookie = new Cookie("username","peter");// 新建Cookie
cookie.setMaxAge(0);                           // 设置生命周期为0，表示将要删除
response.addCookie(cookie);                    // 执行添加后就从response里删除了

1.cookie 的优点：具有极高的扩展性和可用性
1.通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
2.通过加密和安全传输技术，减少 cookie 被破解的可能性。
3.只有在 cookie 中存放不敏感的数据，即使被盗取也不会有很大的损失。
4.控制 cookie 的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的 cookie。
2.cookie 的缺点：
1.cookie 的长度和数量的限制。每个 domain 最多只能有 20 条 cookie，每个cookie 长度不能超过 4KB。否则会被截掉。
2.安全性问题。如果 cookie 被人拦掉了，那个人就可以获取到所有 session
信息。加密的话也不起什么作用。

JS面向对象
万物皆对象
ECMAScript 有两种开发模式：

面向过程（每一步都要自己完成）
面向对象
“面向对象的方法主要是把事物给对象化，包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使用就是面向对象，（万物皆对象）。”
面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript 没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。

ES5之前js本身是没有class类型的，但是每个函数都有一个prototype属性。prototype指向一个对象，当函数作为构造函数时，prototype则起到类似class的作用。

自从有了ES6后，把面向对象类的实现更像后端语言的实现了，通过class来定义类，通过extends来继承父类，其实ES6类的实现本质上是一个语法糖，不过对于开发简单了好多

JS数组常用方法
在开发中，数组使用频率很频繁，JS数组常用方法有

末尾添加 - push
删除最后一个 - pop
删除最前一个 - unshift
首部添加 - shift
添加或删除 - splice
拼接为字符串 - join
连接若干数组 - concat
循环 - forEach
过滤 - filter
映射 - map
排序 - sort
匹配单个 - some
匹配所有 - every

JS作用域
JS作用域也就是JS识别变量的范围

全局作用域：也就是定义在window下的变量范围，在任何地方都 可以访问，
局部作用域：是只在函数内部定义的变量范围
块级作用域：简单来说用let和const在任意的代码块中定义的变量都认为是块级作用域中的变量，在每一个{}中都可以认为是一个块级作用域
作用域链就是由最内部的作用域往最外部,查找变量的过程.形成的链条就是作用域链
JavaScript属于静态作用域，有时也称为词法作用域。

输入URL到页面加载完中间发生的事情
大致过程是这样的：

通过DNS服务器：url=>ip地址；

到达ip地址对应的服务器；

服务器接收用户的请求；

把处理后的结果返回给客户端；

客户端把结果渲染到浏览器即可，最后页面显示出来

箭头函数的this指向
箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于自己的this,它的所谓的this是捕获其所在上下文的 this 值（即父级的this），作为自己的 this 值
且由于没有属于自己的this,而箭头函数是不会被new调用的，不可作为构造函数使用

async/await
Async 和 await 是一种同步的写法，但还是异步的操作，两个内容还是必须同时去写才会生效不然的话也是不会好使

async加在函数的前边会将普通函数变成一个异步函数，该函数会返回一个promise对象；

await会先阻塞代码执行，等它自身的代码执行完毕之后再执行后边的代码；

async await 的主要应用是在数据的接收，和异步问题的处理，主要还是解决不同执行时机下的异步问题！
async 用于声明一个异步函数

async function someName(){...}

自动将常规函数转换成Promise，返回值也是一个Promise对象
只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
异步函数内部可以使用await

await 暂停异步的功能执行

var result = await someAsyncCall()

放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果
只能与Promise一起使用，不适用与回调
只能在async函数内部使用

深拷贝和浅拷贝的区别

深浅拷贝都是针对复杂数据类型来说的 浅拷贝只拷贝一层（复制引用）深拷贝则是层层拷贝
深拷贝
深拷贝的对象与原对象是完全隔离的，互不影响
深拷贝对于非基本类型的变量
先递归至基本数据类型再拷贝，
可以通过for in object.assign 扩展运算符 array.prototype.slice() array.prototype.concat()等递归函数实现深刻拷贝
浅拷贝
（浅拷贝的内存地址不变，指向堆内存，栈内存保存变量）
浅拷贝是将对象的每个属性进行依次复制，当对象是引用数据类型时，
实质上复制的是引用 会随着原对象发生变化。
浅拷贝：

ES6中的…扩展运算符可以实现
var a = b；赋值也可以实现
Object.assign()实现

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
注意：当object只有一层的时候，是深拷贝

深拷贝：
对象只有一层的情况下 可以使用上方的Object.assign()实现
通过 JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象 也可以实现深拷贝
使用Object.create()方法
直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

JSON和JSONP的区别：
json是一种数据格式，
jsonP则是跨域的一种解决方法

jsonp的全名叫做json with padding，就是把json对象用符合js语法的形式包裹起来以使其他的网站可以请求到，也就是将json封装成js文件传过去。

阻止事件冒泡和取消默认事件
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
而与之相对的是捕获型事件 他的理念正好与冒泡事件相反 事件按照从外层的事件目标到具体的事件目标

使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用event.preventDefault()和 return false 可以取消默认事件。

但对于IE来说

阻止事件冒泡
e.cancelBubble = true
取消默认事件
window.event.returnValue = false;