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,20var [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);
}

ECMA5和ECMA6相关推荐

ECMA5与ECMA6
文章目录 1.this的强制改变和this指向 2.let和const关键字 3.箭头函数 4.解构和ECMA6字符串 5.数组方法和合并对象 6.集合和英汉词典案例 1.this的强制改变和this ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
HTML实现包含公共部分：通过ECMA6的模块化，纯前端实现类似jsp:include的功能
以前一直是用 jsp:include 的方式来引入 html 头部的公共部分 php也有类似的方式但以上两种,个人感觉都并不纯粹,本着折腾的精神,优化原有代码,解耦合使用 ECMA6 的模块化方式 ...
[ES6] 细化ES6之 -- ECMA6是什么
ECMA6是什么 JavaScript 语言的下一代标准 ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. ECMAScript 和 JavaS ...
谈谈JavaScript的ECMA5中forEach
一.ECMA5中新增了forEach()方法 JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组首先想到的当然是for(var i=0;i<count;i++),在ECMA ...
Web前端JavaScript笔记（7）ECMA6新增数组方法
新增数组方法: 1. Array.from(): 将伪数组转化为真数组 <script>window.onload = function () {let tag_li = documen ...
JavaScript 解构以及ECMA6
目录解构和ECMA6字符串中括号解构大括号解构解构对传统的颠覆(好处) ECMA6字符串新增数组方法和合并对象新增数组方法 Array.from( ) find( ) findIndex( ...
ECMA及ecma5下新增的数组
ECMA标准 ECMAJavascript 1.严格模式 [注]严格模式下,浏览器会对JS的要求更加苛刻 "use strict":写在哪个作用域下,这个作用域下的所有代码都遵从严 ...
ECMA5新增的数组方法
var arr = [2,3,5,4,1,6];// alert(arr.indexOf(5));var newArr = [];arr.forEach(function(item,index,arr ...

ECMA5和ECMA6

ECMA5和ECMA6

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

1.this的使用场景

全局函数中指向window

对象方法中指向该对象

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

call apply bind

apply方法使用的小技巧

ECMA6新增语法

let关键字

const声明常量

箭头函数

Destructuring解构

字符串的新方法

数组的一些新方法

Object.assign

Set和Map集合

Set

Map

ECMA5和ECMA6相关推荐

最新文章

热门文章