javascript 知识点 第九篇 ES6

九 ES6

一 ES6

1.块级作用域:
        { }包起来的称为块级作用域,但是对象(obj)不是;
2.为什么添加块级作用域:
    1:防止局部变量污染全局
    2:防止变量泄露在全局

    块级作用域{ } 形成一个暂时性的死区
    注:for循环是同步

 var a = 10;
        {
            console.log(a);//10
            {
                var b = 10;
            }
        }
        console.log(b);//10

var oDiv = document.querySelectorAll("div");
        for (var i = 0; i < oDiv.length; i++) {
            oDiv[i].index = i ;
            oDiv[i].onclick = function () {
                console.log(this.index);
            }
        }

二 let 和 const

1.let用于声明块级变量
        注意:
            1.let与const都是只在声明所在的块级作用域内有效(外部的不能访问内部的变量)
            2.同一个{}中不能用let重复定义同一个变量
            错误案例:
            {
            let a = 10;
            let a = 20;
            console.log(a);
            }
            3.let 不会进行变量提升(不会泄露在全局)(先声明后执行)
            4.let定义的变量可以将值保存在块级作用域内(遍历节点)
    2.const 用于声明常量(不可改变的量)
            1.同一个{ }中不能使用const重复定义一个变量
            2.常量不能被修改
            3.const 不进行变量提升

            注:let 和const声明的变量不在挂在window对象上面
            函数在块级作用域里面仍然保持着提升

案例:
var oDiv = document.querySelectorAll('div');
        for(let i = 0, k = oDiv.length; i < k; i++){
            oDiv[i].onclick = function(){
                console.log(i);
            }
        }

三 字符串

ES6字符串模板
        ''
        拼接变量   ${变量}
    
字符串API
    1.includes 字符串搜索
        返回值为:true false 
        var str = 'nihao';
        console.log(str.includes('n'));
    2.startsWith  endWith  判断开头或结尾
	返回的是true 或者false
    3.repeat  复制字符串
    str.repeat(10)

案例1:
var a = 2222;
        var str = ` 
       <div class="goods">
            <a href="#">
                 <img src="${a}" alt="">
            </a>
            <h2>${a}</h2>
            <p>${a}</p>
        </div>`;
        console.log(str);

案例2:
var str = 'nihao';
console.log(str.includes('n'));

var str = "how are you";
        console.log(str.repeat(10));//循环10次
        console.log(str.startsWith('are'));//判断开头,返回值为false

四 数组

1.includes() 返回的是布尔值
        var arr = [1,3,4,6];
                console.log(arr.includes(2));
2.Array.of() 将一组数值转成数组
        var arr = 1235623;
            console.log(Array.of(arr));
3.Array.from() 将伪数组转成数组
        var dom = document.getElementsByTagName('*');
            var arr = Array.from(dom);
            console.log(arr);
4.arr.fill(参数1,参数2,参数3)
        参数1:需要填充的数据
        参数2:填充开始的下标
        参数3:填充结束得下标(不包括)
        var arr = [1,2,3,4,5];
        	var newArr = arr.fill('a',2,4);

5.arr.find(function(value,index,arr){
    return value > 3;
})
        根据条件返回最近得一个值
        
        var newArr = arr.find(function(val,index,arr){
                return val > 3;
            })
        var newArr = arr.find(function(val,index,arr){
                return index > 3;
            })
            console.log(newArr);
6.arr.findIndex(function(value,index,arr{
    return value > 3;
}))

五 对象

1.ES6中,在对象里面消除了function关键字

2.Object.is(obj1,obj2)//检测两对象的索引是否一致

3.Object.assign(obj1,obj2)
    obj1:要合并的对象
    obj2:被合并的对象

案例:
var obj = {
            name:'小明',
            age:20,
            eat:function(){
                console.log('会吃');
            }
        }
        obj.eat();
//ES6
var obj = {
    name:'小明',
    age:20,
    eat(){
        console.log('会吃');
    }
}
obj.eat();

案例
// 引用传递  arr和arr2都会改变(存的是堆中的地址)
        var arr = [1,2,3,4,5];
        var arr2 = arr;
        arr2[0] = 'a';
        console.log(arr2,arr  );
        var  a = 10;
        var b = a;
         b = 20;
         console.log(a,b);

//true
          var obj1 = {
              name:'wang',
              age:'19'
          }
          var obj2 = obj1;
          console.log(Object.is(obj1,obj2));
//false
    var obj1 = {
              name:'wang',
              age:'19'
          }
    var obj2 = {
              name:'wang',
              age:'19'
          }
          console.log(Object.is(obj1,obj2));

六 解构赋值

1.什么是解构赋值?
 解构赋值可将数组的元素或对象的属性赋予给另一个变量，该变量的定义语法与数组字面量或对象字面量很相似。
2.解构数组:
    let arr = [1,2,3,4,5,6];
    let [a,b,c,d,e] = arr;
    console.log(a,b,c,d,e);

    let oDiv = document.querySelectorAll('div');
    let {one,two,three} = oDiv;
    console.log(oDiv);

3.解构对象(可以将对象的属性值单独存在属性中)
   //对象的结构
    let obj = {
        name:'小明',
        age:20,   //数字可以不加引号
        sex:'nan'
    }
    let {name,age,sex} = obj;
    console.log(name);
// 对 对象内部的对象进行解构
    let obj = {
        name:'xioming',
        obj2 : {
            age:20,
            sex:'nan'
        }
    }
    let {obj2:{age,sex}} = obj;
    console.log(sex);

//进行命名,在解构
  let obj = {
        name:'nnn',
        id:001
    }
    //重新命名,在进行打印
    let {name:_name,id:_id} = obj;
    console.log(_name,_id);

当数组的长度不确定时,用arguments

解构赋值:
    注:等号右侧如果不能进行遍历,都不能解构(数值,布尔值,null,undefined,NaN 都不能解构)
    let [a] = 10; 数值
    let [a] = null;
    let [a] = true;
    let [a] = false;
    let [a] = undefined;
    let [a] = NaN;

    let [a] = []; //返回值undefined
    let {a} = {}; //返回值undefined

七 拓展运算符(...)

...作用：(函数传参,当参数的个数不确定的时候,用arguments )
1：对函数的参数解构 
    function fn(...num){
        var sum = 0;
        for(let i = 0 ; i < num.length ; i++){
            sum += num[i];
        }
        return sum;
    }
    console.log(fn(1,2,3,4,5));
-----------------------------------------
    function fn(...num){
        console.log(num);
    }
    let arr = [1,2,3,4,5,6];
    fn(...arr);

2:对象进行合并：
    var obj1 = {
        name : 'wwwwww',
        age : 20
    }
    var obj2 = {
        sex : 'nan'
    }

    // var newObj = {...obj1,...obj2};
    // console.log(newObj,obj1,obj2)
    注：  比较 Object.assign()   和 ...  合并对象的区别
	 //Object.assign 会改变要合并的对象,而...不会
3:对其他数据的保存(c会保存剩余的值)
    function fn(a,b,...c){
        console.log(c);
    }
    fn(1,2,3,4,5,6);

案例:
//1.当数组长度不确实时,用arguments
        function fn(){
            console.log(arguments.length)
        }
        fn(1,2,3,4,5);
//2.对数组参数的解构
        function fn(...num){
            console.log(num)
        }
        fn(1,2,3,4,5);
        //求和
        function fn(...num){
            var sum = 0;
            for(let i = 0;i < num.length; i++){
                sum += num[i];
            }
            return sum;
        }
        console.log(fn(1,2,3,4,5));

        //对数组进行解构,取出数值
        function fn(...num){
            console.log(num);
        }
        let arr = [1,2,3,4,5];
        fn(...arr);

//3.对对象进行合并(...)
        let obj1 = {
            name:'xiaoming',
            age : 20
        }
        let obj2 = {
            sex:'nan',
        }
         let newObj = {...obj1,...obj2};
         console.log(newObj,obj1,obj2);
    //对象进行合并(assign)
        let obj1 = {
            name:'xiaoming',
            age : 20
        }
        let obj2 = {
            sex:'nan',
        }
         let newObj = Object.assign(obj1,obj2);
         console.log(newObj,obj1,obj2);
     //对比Object.assign 和 ... 进行对象合并时的区别:
     //Object.assign 会改变要合并的对象,而...不会
 //3.对其他数据进行保存
         function fn(a,b,...c){
             console.log(c);
         }
         fn(1,2,3,4,5,6);

八 函数参数的默认值

//传参数是,返回参数,没传参数是返回100;  ||短路问题
        function fn(a){
            return a = a || 100;
        }
        console.log(fn(200));
//es6 默认值的赋值
        function fn(a = 100){
            return a;
        }
        console.log(fn());

九 箭头函数(=>)

 箭头函数的特点:
    1.箭头函数内部是没有this指向的。（ 箭头函数内部的this指向，指向的是离它最近的作用域 ）
    //this 指向为obj
            var obj = {
                sex:'nan',
                fn: function(){
                    setTimeout(() => {
                        console.log(this)
                    },20)
                }
            }
            obj.fn();
	//this指向window
         var obj = {
                sex:'nan',
                fn: function(){
                    //定时器的this指向是window
                    setTimeout(function(){
                        console.log(this)
                    },20)
                }
            }
            obj.fn();
    2.在箭头函数里面没有arguments对象的，如果想获取参数的个数，只需对参数解构
             var fn = (...num) => {
                console.log(num.length);
            }
            fn(1,2,3)		
    3:箭头函数不能做为构造函数。(字符串,数组,对象,正则,时间)

    箭头函数的应用:在回调函数

//箭头函数的基本语法
    var fn = () => 100;
    console.log(fn());
//箭头函数的参数
    var fn = (a) => a;
    console.log(fn(10));
    var fn = (n,m) => n*m;
    console.log(fn(10,20));

//箭头函数后面为一个代码块
    var fn = (a,b) => {
        return a + b;
    }
    console.log(fn(10,20));

十 this指向

this指向：
        1：如果没有函数。或者用function关键字定义 fn()调用   this指向window。
        2：如果开启严格模式    this指向的是undefined;
        3: 事件调用函数，this指向绑定事件的对象。
        4: 定时器中   this   指向window
        5: 对象：
            a : 如果对象内部的函数中的this 在函数调用的时候，指向的是当前对象。
            b : 如果 对象内部存在对象，内部对象里面函数内的this指向：内部对象   obj.obj2.fn(); 指向obj2
            c : 对象内部的方法，交给全局变量执行，this指向window
            
            

改变this的指向的方法:
        1:对this进行保存
        2:bind();  返回一个函数,需要调用!!!
        3:call();
        4:apply();

bind\call\apply 的区别
    call() 后面接收多个参数
    apply() 后面接收两个参数.第二个参数为数组

this指向案例:
//1.如果没有函数。或者用function关键字定义 fn()调用   this指向window。
        function fn(){
            console.log(this);
        }
        fn();
        console.log(this);

//2.如果开启严格模式    this指向的是undefined;
        'use strict';
        function fn(){
            console.log(this);
        }
        fn();

//3.事件调用函数，this指向绑定事件的对象。
        document.onclick = function(){
            console.log(this);
        }
        setInterval(function(){
            console.log(this)
        },300)

//4.如果对象内部的函数中的this 在函数调用的时候，指向的是当前对象
        var obj = {
            a :100,
            fn:function(){
                console.log(this);//object
            }
        }
        obj.fn();

// 5.如果 对象内部存在对象，内部对象里面函数内的this指向：内部对象   obj.obj2.fn(); 指向obj2
        var obj = {
            a : 200,
            obj2 : {
                b : 100,
                fn: function(){

                    //this指向obj2
                    console.log(this);
                }
            }
        }
            obj.obj2.fn();
//6.对象内部的方法，交给全局变量执行，this指向window
        var obj = {
            a: 1000,
            fn: function(){
                console.log(this);
            }

        }
        var outerFn = obj.fn;
        outerFn();

//this指向window,所以打印的是1111(面试题)
    var _name ='1111';
    var obj = {
                _name: 1000,
                fn: function(){
                    console.log(this._name);
                }

            }
            var outerFn = obj.fn;//拿到的是fn在地址
            console.log(outerFn);//打印的是fn函数体
            outerFn();//运行的是fn,所以他的this指向是window

案例:(改变this指向)
 //1对this进行保存
        var _this = this;
        document.onclick = function(){
            console.log(_this);
        }

 //2.bind()
        function fn(){
            console.log(this);
        }
        fn.bind(document)();
        //bind()的第二种用法
        var obj = {
            a:1000,
            fn: function(){
                console.log(this);
            }.bind(document)
        }
        obj.fn();
//3.call()
        function fn(){
            console.log(this);
        }
        fn.call(document);
//4.apply()
        function fn(){
            console.log(this);
        }
        fn.apply(document);
//5.往fn1传参,用fn2进行计算
        function fn1(a,b){
            return a + b;
        }
        function fn2(a,b){
            return a * b;
        }
        var res = fn2.call(fn1,10,20);
        console.log(res);

-----------------------------------------------------
        function fn1(a,b){
            return a + b;
        }
        function fn2(a,b){
            return a * b;
        }
        var res = fn2.apply(fn1,[10,20]);
        console.log(res);

十一 Symbol数据类型

 ES6新增:
    symbol 类型
    独一无二的
    常作为一个对象的key(属性),来表示该属性的唯一性
    如果Symbol 作为对象的属性,不能用for in 进行遍历

var obj = {
    name:'xiaoming',
    age:20,
    [Symbol()]:22222,
    [Symbol()]:"aaaaa",
    [Symbol()]:'ddddd'

}
//获取Symbol 属性
var arr = Object.getOwnPropertySymbols(obj);
console.log(arr);
console.log(obj[arr[1]]);   

十二 set 和 map

set:
对数组的包装(可运来对数组去重)
    1：数组去重 
    2：size属性  记录的数组的长度
    3：add()  添加
    4: delete()  删除
    5: clear()   清空
    6: has()   检测是否存在  返回的为布尔值

map :
字典数据结构       属性值:可以是任何类型
    size属性获取长度
    set()设置属性
    get()获取属性
    delete()删除属性
    clear()清空
    has()查找
    values()获取所有的value值
    keys（）获取key值 

var arr = [1,2,1,4,3,4,5,6,7,8,7];
var arrSet = new Set(arr);
console.log(arrSet.size);
arrSet.add('aa');
arrSet.delete(1);
// arrSet.clear();
console.log(arrSet.has(2));
console.log(arrSet);

 var d = new Map();
d.set('name','xiaoming');
d.set('age','20');
d.set('set','nan');
console.log(d.size);
console.log(d);
d.set(true,'aaa');
console.log(d.get(true));
d.set(10,100);
d.delete(true);
// d.clear();
console.log(d.has(10));
console.log(d.values());
console.log(d.keys());