day15-ES6

es6定义变量的关键字：let 和 const

var 和let const定义变量区别：

1. let 和 const 不能重复定义变量
2. let 和 const 声明的变量不能进行与解析（只能声明之后调用）
3. let 和 const 声明变量存在块级作用域，在{ }中声明的变量只能在{ }中使用，不能在{ }外使用
   ===》因为在es6中每一个{ } 就是一个块级作用域

let 和 const的区别：

1. let 定义的是变量，可以先定义变量后赋值
2. const 定义的是常量，定义变量的时候，一定要赋值，后期也不可以修改

箭头函数

• 声明式定义函数 function 函数名（）{ }
• 赋值式定义函数 var fun = function（）{ }
• 箭头函数：就是对函数表达式的一种简写
  var fun = function( ){ } ==> var fun = ( ) =>{ }
  setInterval(function( ){ })
  ==> setInterval( ( )=>{ } )
  map(function( ){ })
  ==> map( ( )=>{ } )

箭头函数的结构：
var fun=（ ）=> { }
【1】形参写在箭头圆括号中
【2】函数体写在花括号中
【3】当形参只有一个的时候 可以忽略圆括号不写
【4】当函数体只有一句话的时候 可以忽略花括号不写

箭头函数的注意点：
【1】箭头函数中没有 argument 这个关键字
【2】箭头函数中的 this 跟调用函数没有关系，主要看这个函数定义在什么位置

主动调用的时候 fun函数中this指向window
如果是事件驱动调用的时候 fun函数中this 指向的事件源
在fun中定义的箭头函数 ，这个箭头函数中的this 跟随fun中this  

解构赋值（对象）

解构：快速地把对象或者数组中的数组分解出来使用

let obj = {
                name: "aaa",
                age: 18,
                info: {
                    id: 123456,
                    className: { index: 1 },
                },
            };
// let name  = obj.name;
// let age = obj.age;
// console.log(name,age);==>aaa 18
 // 把obj中的age解构出来赋值给变量age
 // let { age } = obj;
 // console.log(age);==>18
 // 把obj中的name属性解构出来 把值赋值给 userName这个变量
 // let { name: userName } = obj;
 // console.log(userName);==>aaa
  // 多重解构，解构obj中的info属性中 id属性
 let {
         info: { id },
            } = obj;
console.log(id);==>123456
//多重解构（三重），解构obj中的className 中index属性
let {info:{className:{index}}} = obj;
 console.log(index);==>1

数组的解构

 let arr = [["a", "b", "c"], 2, 3, 4, 5];

            // 从左到右一位一位进行解构
            // res1 解构数组中的第一项
            // res2 解构数组中的第二项
            // let [res1,res2] = arr;
            // console.log(res1,res2);

            // 多重解构 数组
            // let [[res1,res2]] = arr;
            // console.log(res2);

            // var n1 = 10;
            // var n2 = 20;
            // var  n3 = n1;
            // n1 = n2;
            // n2 = n3;
            // console.log(n1,n2);

            // 如果不用第三个变量怎么交换 数据(面试经常提问)
            var n1 = 10;
            var n2 = 20;
            [n1,n2] = [n2,n1]
            console.log(n1,n2);

字符串的方法

let str = "  sjdsjskjhdsajjh  ";
            // let res = str.indexOf('z');
            // console.log(res);

            // let res = str.includes('z');
            // console.log(res);

            // let arr = [1,2,3,4,65];
            // console.log(arr.includes(10));
            // includes() 判断字符串中是否存在某个指定的字符
            // 判断数组中是否存在 指定的数据
            // 返回值：布尔值，存在就返回true 不存在就返回false

            // startWith() 判断字符串是否是以指定的字符开头
            // 返回值：布尔值，是就返回true，否则就返回false
            // let res = str.startsWith('a');
            // console.log(res);

            // endWith() 判断字符串是否以指定的字符结尾
            // 返回值：布尔值，是就返回true，否则就返回false
            // let res = str.endsWith("h");
            // console.log(res);

            // 去掉字符串两边空格的方法 trim() 
            let res = str.trim();
            console.log(res);
            console.log(str);

…运算符

【1】扩展运算符
【2】合并运算符：把这个符号写在函数的形参位置的时候，叫做合并运算符
把函数所有的实参合并在一个数组中

// let fun = function () {
            //     console.log(arguments);
            // };

            // let fun = (...arr) => {
            //     // arguments 会报错，在箭头函数中不存在arguments
            //     // console.log(arguments);
            //     console.log(arr);
            // };
            // fun(1, 2, 3, 4, 5, 6, 7);

            // 数组中使用扩展运算符
            // let arr = [1,2,43,34,56,100,78,32,2];
            // console.log(...arr);
            // let res = Math.max(...arr);
            // console.log(res);

            // 字符串中使用扩展运算符
            // let str = 'wekrhweh';
            // let arr = str.split('')
            // let arr = [...str]
            // console.log(arr);

            // 对象中使用扩展运算符
            let obj = {
                className: "2101",
                address: "教室8",
            };
            let p1 = {
                name: "a1",
                age: 18,
                ...obj,
            };
            let p2 = {
                name: "a2",
                age: 20,
                ...obj,
            };
            let p3 = {
                name: "a3",
                age: 22,
                ...obj,
            };
            // console.log(p1);

            // 伪数组使用扩展运算符 改变为真数组
            // let btn = document.getElementsByTagName("button");
            // btn = [...btn];
            // btn.forEach(function(item,index){
            //     console.log(item);
            // })

对象的简易书写

• 当使用变量来作为对象的属性值的时候，并且属性和变量名一样的时候，可以忽略属性值不写

let obj = {
                // name:name
                name,
                // age:age
                age,
            };
            console.log(obj);

this指向

• 普通函数
  【1】如果函数用事件驱动调用的时候，this指的是绑定事件的元素
  【2】直接调用的时候 this指向window
  【3】自调用函数里面的this指向window
• 箭头函数：跟调用函数没有关系，主要看这个箭头函数定义位置的this指向
• 自调用函数
  【1】（function（）{ }）（）
  【2】！function（）{ }（）
  【3】~function（）{ }（）

强行改变this的指向

直接调用的时候，this指向window
需要改变，把fun函数中的this指向obj这个对象
强行改变fun函数中的this指向，需要用call（） apply（） bind（）
【1】call（）函数的语法：
fun.call（obj） 会直接执行fun函数
参数：可以有多个参数
参数1：函数中this想要执行的对象
参数2：给函数中第一个形参赋值
参数3：给函数第二个形参赋值
【2】apply（）函数的语法：
函数名.apply(obj,[ ]) 会直接执行函数
只有两个参数
参数1：this想要指向的对象
参数2：数组，数组里面的数据 就是一一对应的给函数的形参赋值

 this.name = name;
                this.age = age;
                console.log(this);
                // fun();
            // funH函数中this指向 obj，name = 老田 age = 38
            // fun.call(obj,'老田',38);

            // fun.apply(obj, ["莹姐", 18]);

【3】bind（） 函数的语法：
函数名.bind（obj）不直接执行函数
返回值：跟原来函数一模一样，但是函数中的this指向改变
想要给原来的函数传递参数：给返回值的函数传递参数

var res =  fun.bind(obj)('aa',22);
            // res('aa',22);
            // console.log(res);

判断数据类型

Object.prototype.toString.call(你要判断的数据)

console.log(Object.prototype.toString.call(null));
            console.log(Object.prototype.toString.call([1, 2, 3, 4, 5]));
            console.log(Object.prototype.toString.call({ name: "aa" }));
            console.log(Object.prototype.toString.call(1));
            console.log(Object.prototype.toString.call("wewr"));
            console.log(Object.prototype.toString.call(true));
            console.log(Object.prototype.toString.call(/^123$/));

            console.log(Object.prototype.toString.call(function () {}));

            // NaN 是number数据类型
            console.log(Object.prototype.toString.call(NaN));

json数据格式

json数据：所有的计算机语言都是别json格式 ’ [ { “属性” : “属性值” } ] ’
前端不能识别后端的数据结构，后端也不能识别前端的数据结构，如果前后端要进行数据的交互的时候，需要json

• JSON.parse() 把json数据转化为前端的数据
• JSON.stringify（）把前端的数据转化为json数据

 var arr = [{ name: "老谢", age: 48 }];
            console.log(arr);
            console.log(JSON.stringify(arr));

set集合

set集合类似于数组的集合，set集合中的数剧是唯一的
定义set集合：new Set（）
Set（参数） 参数只能为一个可遍历的数据

let arr = [1,2,2,1,2,3,2,4];
let s = new Set(arr);
s = [...s];
console.log(s);

for of循环

const items = [
                ["name", "张三"],
                ["title", "Author"],
            ];

            const map = new Map();

            items.forEach(([key, value]) => {
                // item===>[key,value]
                // console.log(key);
                // console.log(value);
                map.set(key, value);
            });

            // let arr = [1,2,3,4];
            // map.set(arr, [1, 2, 3, 4, 5]);
            // console.log(map);

            // let obj = {};
            // obj[arr] = [1,2,3,4,5];
            // console.log(obj);

            // console.log(map);

            // for(let key in map){
            //    console.log(key);
            // }

            // console.log(map);
            // for(let key of map){
            //     // key  得到就是 map集合中 key 和value的组合、以数组的形式返回
            //     console.log(key);
            // }

            let arr = [1, 2, 3, 4, 5];
            let set = new Set(arr);
            console.log(set);
            for (let key of set) {
                // key 就是set集合中的每一个数据
                console.log(key);
            }

            // set 集合不可以通过索引的形式来获取 集合中数据
            // for (let i = 0; i < set.size; i++) {
            //     console.log(i);
            //     console.log(set[i]);
            // }