ECMA5和ECMA6

ECMA5和ECMA6

1.this关键字详解，改变this指向的方法call、apply、bind深度分析

1.this的使用场景

​ 每一个函数中，都有一个内置的变量this，这个this中存储着当前函数的主人，所以，要知道this是谁，就要通过上下文分析，当前函数的主人是谁。this永远存储的是当前函数的主人。

全局函数中指向window

function show(){
	alert(this); //[object Window]
}
show();

对象方法中指向该对象

var person = {
                username: "钢铁侠",
                show: function(){
                    alert(person.username);
                    alert(this.username);
                }
            }

事件绑定中，指向目标对象

window.onload = function(){
   var oBtn = document.getElementById("btn1");
   oBtn.onclick = function(){
       alert(this.innerHTML);
   }
}

call apply bind

call

​ 格式：函数名.call();

​ 参数：

​ 第一个参数：传入该函数this指向的对象，传入什么强制指向什么

​ 第二个参数开始：将原函数的参数往后顺延一位。

show.call("call", 20, 40);

apply

​ 格式：函数名.apply()

​ 参数：

​ 第一个参数：传入该函数this指向的对象，传入什么强制指向什么

​ 第二个参数：数组 数组，放入我们原有所有的参数

show.apply("apply", [20, 40]);

bind 预设this指向

function show(x, y){
	alert(this);
	alert(x + ", " + y);
}
var res = show.bind("bind");

// res(40, 50);
show.bind("bind")(40, 50)

例：

function show(){
	alert(this);
}

window.onload = function(){
	var oBtn = document.getElementById("btn1");
	/* oBtn.onclick = function(){
		show.call("call"); 
	} */

/* oBtn.onclick = show.bind('bind');//点击按钮才会弹出bind
*/


// oBtn.onclick = res;
}

apply方法使用的小技巧

var arr = [10, 20, 30, 40, 50];
alert(Math.min.apply(null, arr));//输出10
alert(Math.max.apply(null, arr));//输出50

ECMA6新增语法

阮一峰ECMA6详解：https://es6.ruanyifeng.com/

let关键字

​ 用来替代var的关键字，但其作用域更小

​ let 关键字是用来声明变量 更过分，只要遇到大括号就形成作用域

​ 【注】let关键字声明的变量，所在作用域叫做块级作用域。

​ var 关键字声明变量 将变量或者形参所在函数的大括号作为作用域处理。

const声明常量

相当于java里的final关键字

箭头函数

先看区别吧，原来的写法 
    var test = function(x){ 
        return x+2; 
      } 
使用箭头函数： 
var test = x=>x+2;
【注】看起很简单吧？ 省略了function、return关键字和大括号。 使用方法跟以前一样没区别 test(5); 结果： 7

缺点：

第一：箭头函数是不能new的，它的设计初衷就跟构造函数不太一样

第二：箭头函数如果要返回一个JSON对象，必须用小括号包起来

var test = ()=>({id:3, val=20})

箭头函数现在非常流行，但我并不推荐使用。箭头函数降低了代码的可读性，使代码阅读起来更加困难。

但箭头函数也并非全无用处，它配合某些数组方法使用起来器容易看懂也更加方便。比如：

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

var arr = [10, 20, 30, 40, 50];

var newArr = arr.filter(item => item > 20);

var newArr = arr.map(item => item * 1.3);

​ 箭头函数需要注意的部分

​ 1、箭头函数，不能用new

​ 2、箭头，如果返回值是一个对象，一定要加()；

​ 3、箭头函数中的this，指向的是上一层函数的主人。

Destructuring解构

中括号解构

var [x,y,z] = [10,20,30];
alert(x+","+y);		//10,20

var [x, [a, b], y] = [10, [20,30], 40];
alert(a + ", " + y);	//20,30

大括号解构

var {name, age, sex} = {
    age: 18,
    name: "钢铁侠",
    sex: "男"
};

alert(name);	//钢铁侠
alert(age);		//18
alert(sex);		//男

使用解构的好处：

​ 1、交换两个数

​ 2、函数可以返回多个值

​ 3、函数定义参数，和传入参数的顺序改变

​ 【注】参数可以带默认值

​ 4、快速取出数组中的某一个元素。

var [x, y] = [10, 20];
[x, y] = [y, x]

function show(){
	return ["结果1", "结果2", "结果3"];
}

function showSelf({name, age, sex = "男"}){
               alert("我叫" + name + "，今年" + age + ",是一位" + sex + "性");
            }
            showSelf({
                age: 18,
                name: "小明",
                sex: "女"
            }) 

字符串的新方法

字符串模板, 使用反引号`表示，使用${变量|函数}嵌入代码

node.innerHTML = `你好，我的名字叫${username} 接下来是我的自我介绍：${introduce()}` ;

数组的一些新方法

将伪数组转为数组：

var list = Array.from(document.getElementsByTagName("li"));

find()

​ 功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历。

​ 返回值：找到的元素。

findIndex()

​ 返回值：找到的元素的下标。

arr.copyWithin

​ 第一个参数：从哪个下标开始

​ 第二个参数和第三个参数是：范围 [start, end)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            arr.copyWithin(2, 4, 9);
            alert(arr);  //1,2,5,6,7,8,9,8,9,10

Object.assign

Object.assign 合并对象

​ 【注】将所有传入的对象，都合并到第一个对象中。

​ 浅拷贝:只拷贝地址（Object.assign是浅拷贝）

​ 深拷贝:将复合数据类型重新生成一份，进行拷贝

Set和Map集合

集合：

​ 1、不重复

​ 2、无序

Set

let imgs = new Set();	//创建集合

imgs.add(100);
imgs.add(100);
imgs.add("hello");
imgs.add("hello");
imgs.add(true);
imgs.add(new String("world"));
imgs.add(new String("world"));

集合遍历

for(let item of imgs.keys()){
	console.log(item);	//遍历键
}

for(let item of imgs.values()){
	console.log(item);	//遍历值
} 

for(let item of imgs.entries()){
	console.log(item);	//遍历键与值
} 

数组变成集合

var set = new Set([10, 20, 30, 40, 50, 40, 30, 20, 10]);

集合变数组 将数据结构展开成数组

var arr = [...set];

数组去重

var arr = [10, 20, 30, 40, 50, 40, 30, 20, 10];
arr = [...new Set(arr)];
alert(arr);

Map

创建

let map = new Map();

添加数据

map.set("张三", "打渔的");
map.set("李四", "种地的");
map.set("王五", "挖煤的");
map.set("李四", "打猎的");

取值

alert(map.get("王五"));

遍历 通过for of

for(let [key,value] of map){ 
	console.log(key,value);
}