一、浏览器兼容问题

微软开发的浏览器：

IE 6~11 内核：trident
ES3兼容IE的比较多
ES5的规范不兼容 IE6~8
ES6规范内容不兼容IE
Edge 非IE内核，它是 Chromium 内核（和谷歌的webkit内核很相似）

谷歌浏览器：blink（webkit分支）

火狐：Gecko

在真实项目开发中，我们使用ES6语法，如果需要兼容IE（>=IE10）,我们需要基于 babel 模块,把ES6的语法转换为ES5...

网址：babeljs.io/

二、解构赋值

ES6新语法规范：解构赋值

解构对象

- 对数组进行解构
- 对对象进行解构

代码：let {xxx，xxxx}=obj；
代码含义：声明xxx和xxxx两个变量，分别获取obj对象中"同名"的属性值
变量：防止与外界声明变量重名，可以“xxx：变量名”来改变获取的属性名；
也可以赋值默认值，直接在左侧类型里边把‘变量=0’即可。

白话理解：就是让‘=’左侧出现和右侧值相类似的解构，然后快速取出某一部分的值，赋值给对应的变量。

let obj = {
    x:10,
    y:20,
    name:'zhufeng',
    0:10
}

/* let {x,name} = obj;
声明x和name 两个变量,分别获取obj对象中"同名"的属性值 */

/* let {age = ''} = obj; */
//给他默认值

let {y:myY} = obj;
//为了防止声明的变量和外界冲突,



// let arr = [10,20,30,40];
// let [a,...b] = arr;  //利用‘剩余运算符’把数组中剩余的内容全部赋值给b这个新数组

// let arr = [10]
// let [a,b = 0] = arr;
// console.log(a,b);  // 10 0 解构赋值中默认值‘b=0’，如果b不存在，则结果不是undefined 而是默认值0

面试题

【a/b交换数据】

var a = 12,
    b = 13;
// 解决方案一,使用第三个变量去接收数据
let c = 0;
  c=a;
  a=b;
  b=c;
//解决方案二:数学运算(求和) a = a+b; b = a-b; a = a-b;
a=a+b;
b=a-b;
a=a-b;
//解决方案三:通过ES6的解构赋值,[b,a] = [a,b]
[b,a] = [a,b]

三、JS中的两种编程方式

在面试时问到for循环和forEach的区别主要是考察函数式编程和命令式编程的区别

1、函数式编程

函数式编程：把需要实现的功能封装成方法（内置API/自己封装的API），直接调用方法去处理；
只关注What（结果），无需关注How！！！
优先推荐使用函数式编程
好处：开发效率高、方便维护、低耦合高内聚...
弊端：无法灵活掌控循环过程（例如无法终止循环、或者间隔N项循环）

//例子：
arr.forEach((item,index)=>{
  //...
});

2、命令式编程

命令式编程：关注程序的具体实现（类似于底层）
只关注how，不关注what！！！
好处：可以灵活把控每一个步骤（项目中有需要灵活把控的需求，都使用命令式编程）
弊端：开发效率低，代码冗余度高...

//例子：
for(let i = 0;i <arr.length;i++){
  //...
}

四、匿名函数具名化：更规范的写法

匿名函数的两种形式

- 自执行函数
- 变量声明的函数

在函数内部加名字后期可以自己调用（外边调用不到）！一般递归操作时使用
具名化后的名字，并没有在宿主环境中声明，外边还是用不了（和真正的实名函数还是有区别的），一般函数名的值不可以修改
作用：可以使写法更规范

五、零碎知识点总结

对象属性名的类型：字符串、Symbol
类数组转数组方法：
1）Array.from（类数组）
2）[...类数组]
3）for循环一个个取出
4）[].slice.call(类数组)
ES6模板字符串 “``”
作用：可以很方便的实现字符串的拼接
在工作中我们用的是 bootstrap UI组件库构建的结构和样式「不用学」
www.bootcss.com/

1、JS中，设置自定义属性的两大方案：

1）设置在DOM元素上

<div class="hang" index="2">
box.setAttribute('index',2)  //设置自定义属性
box.getAttribute('index')		//获取自定义属性名的属性值
box.removeAttribute('index')	//删除选取属性名

2）给每一个DOM元素对象都是一个对象（堆内存）

box.index=2;   //给对象的堆内存空间中设置一个叫做index的成员，值是2
box.index
delete box.index

注意：以上两种方案不能混淆使用（就是一号方案设置的属性不能拿二号方案获取的方法获取）

2、vscode插件

open indefault brower 预览

- 采用的是file文件协议，不是标准的web协议（网址开头是file）
- 不能发送Ajax请求

open with liver server 预览

- 是http标准web协议，可以发送Ajax请求
- vscode会自动在本地启动一个web服务，帮我们预览项目（建议做哪个项目，vscode工程目录中只有这个项目的代码）
- 开启了热更新：代码一改，浏览器自动刷新

3、JSON

json只是一种数据格式，不是新的数据类型：JSON格式的对象、JSON格式的字符串

- 属性名用“双引号”包起来，属性值是字符串的，也是基于“双引号”包起来
- window（GO）存储的转换JSON方式
  JSON：{stringify，parse}
  JSON.stringify（对象）：把对象转换为JSON格式的字符串
  JSON.parse（JSON格式的字符串）：把JSON格式的字符串转换为对象

let obj = {
  "x": 10,
  "y": 20,
  "name": "珠峰培训"
};

4、Ajax

使用的时候我们一般分为四个步骤

1、创建Ajax实例
let xhr=newXMLHttpRequest;

2、打开连接：发送请求之前的准备

xhr.open('GET', './product.json', false); //（获取方式，获取地址，同步（false）或者异步）

3、监听请求的变化，获取服务器返回的数据

xhr.onreadystatechange = () => {
            let {
                readyState,
                status,
                responseText
            } = xhr;
            if (readyState === 4 && status === 200) {
                //请求成功 //responseText存储服务器的返回值(JSON格式的字符串)
                // console.log(responseText);//打印出存储的返回值
                data = JSON.parse(responseText);
                console.log(data);
            }
        };

4、发送请求

xhr.send();

第二十章 浏览器兼容、解构赋值、JSON、匿名函数具体化及Ajax