文章目录

1、this的强制改变和this指向
2、let和const关键字
3、箭头函数
4、解构和ECMA6字符串
5、数组方法和合并对象
6、集合和英汉词典案例

1、this的强制改变和this指向

this是Javascript语言的一个关键字；随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，每一个函数中都有一个内置的变量this，用于指向当前函数的主人，函数的主人根据上下文关系进行判断；
this指向的形式分为4种：

a.如果是一般函数，this指向全局对象window；

<script>function show(){alert(this);//window}
</script>

b.在严格模式下"use strict"，为undefined；

<script>"use strict";function show(){alert(this);//undefined}
</script>

c.对象的方法里调用，this指向调用该方法的对象；

d.构造函数里的this，指向创建出来的实例；

<script>//this--->personvar person = {username:"zhangsan",show:function(){alert(person.username);alert(this.username);//指向当前的person}}person.show();
</script>

改变this指向的三个方法：

方法1：call()

格式：函数名.call()
参数：第一个参数：传入该函数 this指向的对象，传入什么强制指向什么。第二个参数：原函数的参数往后顺延一位

<script>function show(x, y) {// windowalert(this);alert("x:" + x + ",y:" + y);}show(10, 20);show.call("call",20,40);//也就是最终输出call，然后输出20 40
</script>

方法2：apply()

格式：函数名.apply()
参数：第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组，放入我们原有的所有参数

<script>function show(x, y) {alert(this);alert("x:" + x + ",y:" + y);}show.apply("apply",[20,40]);
</script>

方法3：bind()

bind：预设this指向

<script>function show(x, y) {alert(this);alert("x:" + x + ",y:" + y);}var res = show.bind("bind");//这里只是一个函数的声明，它只是将this由window改为bind，返回值任然是一个函数，并没有调用函数alert(res);res(20,30);
</script>

三者的区别：

<script>function show() {alert(this);}// 相当于我把show函数赋值给按钮的点击事件，那么此时show函数里的this指向的是当前的点击按钮window.onload = function () {document.getElementById("btn").onclick = show;}window.onload = function () {document.getElementById("btn").onclick = function () {show.call("call");};document.getElementById("btn").onclick = function () {show.apply("apply");};// 它的返回值就是一个函数，前两个返回值是调用方法后的返回值document.getElementById("btn").onclick = show.bind("bind");//因此这里叫做bind为预设this指向，是滞后的}
</script>

使用apply()的一个小技巧

之前在使用Math.max()和Math.min()函数的时候，我们只能将数字一个一个传递进去，如果现在的需求是从一个数组中找出最大最小值，怎么做？我们可以使用apply()，因为该函数的第二个参数是原函数的所有参数组成的一个数组，因此可以解决这个问题；

<script>alert(Math.max(10,20,30,40,50));Math.min(23,43);// 以上两个方法他们规定只能传入数字，如果这时候我想查看一个数组中最大最小值// 怎么使用alert(Math.apply(null,[10,20,30,40,50]));
</script>

2、let和const关键字

首先，来看一下关键字var：

var：关键字声明变量，在全局范围内有效；

<script>function show() {var num = 30;alert(num);}show();alert(num);//输出num的值，不报错
</script>

let关键字

关键字是用来声明变量的，只要遇到大括号就形成作用域，在代码块内有效；

<script>if (1) {let num = 1;alert(num);}alert(num);//报错
</script>

二者的区别：for 循环计数器很适合用 let

for (var i = 0; i < 10; i++) {setTimeout(function(){console.log(i);})
}
// 输出十个 10
for (let j = 0; j < 10; j++) {setTimeout(function(){console.log(j);})
}
// 输出 0123456789

首先需要了解setTimeout()的执行机制：

setTimeout()是以异步的方式执行的。在执行for循环的时候，并不是执行一次for循环就立刻执行一次setTimeout()，而会让setTimeout()进入另一条线程进行等待，当主线程（这里就是for循环）执行完后，setTimeout()再依次执行。

因为var是没有块级作用域的，所以在for循环中声明的i会存在于全局作用域中。每一次for循环就会声明一次 i，但后面声明的变量会覆盖前面声明的变量。所以当for循环执行完后（此时setTimeout()还未被执行），函数作用域中的i的值就变成10了；

因为块级作用域的原因，let声明的 i 都会存在于for块级作用域中，每一次for循环都会生成一个块级作用域。变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 12345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）；

<script>var btnArr = document.getElementsByTagName('button');for (var i = 0; i < btnArr.length; i++) {btnArr[i].onclick = function () {alert(i);}}
</script>

如果这里是var，就是点击哪个按钮都出现3，但如果你换成let关键字，形成三个完全不同的作用域，直接访问每一个作用域里面各自的i

const关键字声明一个只读的常量，意味着，一旦声明必须初始化，否则会报错；并且常量的值不能改变；一般来说，是把整个变成当中改变的频率几乎为0，但是又需要定义为变量的值定义为const常量；

const IP = "192.163.12.1";

暂时性死区：

var PI = "a";
if(true){console.log(PI);  // ReferenceError: PI is not definedconst PI = "3.1415926";
}

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错；

3、箭头函数

箭头函数是一种新潮的函数写法，它的作用只是为了简化function和return关键字，没有其他作用，使用了箭头函数之后，代码的可读性变差了，因此不提倡大量的使用它；

<script>// 箭头函数，新潮的函数的写法，也就是说他只是给函数的写法改变了，并没有任何作用/* [注]：适当的省略function和return关键字*/function add(x) {return x + 10;}var add = x => x + 10;alert(add(5));// 箭头函数的使用适量而止//1、无参数无返回值function show() {alert("hello world");}var show = () => {alert("hello world");}//2、有一个参数，无返回值function show(num) {alert(num);}var xxx = num => {alert(num);}//3、有参数，有返回值，如果是有多行代码，还需要有大括号，如果有多个形参，也需要带小括号，使用场景非常有局限性var add = x => x + 10;
</script>

与ES5中的部分函数结合使用：

<script>// 和ES5的部分方法合并使用非常好用var arr = [10, 20, 30, 40, 50];/* var newArr = arr.filter(function (item) {return item > 20;}); */var newArr = arr.filter(item => item > 20);alert(newArr);// map映射var newArr = arr.map(item => item * 1.3);alert(newArr);
</script>

箭头函数改变this指向的问题：

<script>
var person = {username: 'xxx',/* show: function () {alert(person.username);//xxxalert(this.username);//xxx} */show: () => {alert(person.username);//window对象alert(this.username);}}person.show();
</script>

箭头函数中的this指的不是当前函数的主人，是上一层函数的主人；这里由于show方法没有上一层函数，因此this指向的是window对象；

注意：如果箭头函数返回值是一个对象的话，一定要加小括号()

function show() {return {uaername: 'xxx'}}var show = () => ({}
)

因为如果不加小括号，无法识别这是返回值；

4、解构和ECMA6字符串

解构分为中括号解构与大括号解构，是一种赋值的方式，与Python的赋值语法有些类似；
具体写法如下：

<script>/* 中括号解构、大括号解构 */var x = 10, y = 20, z = 30;var [x, y, z] = [10, 20, 30];var [x, [a, b], y] = [10, [20, 30], 40];// 如果没有给b值，它的结果是undifined//大括号解构var { name, age, sex } = {age: 18,name: 'xxx',sex: '男'};
</script>

它的作用有：

<script>// 作用：// 1、交换两数的值var [x, y] = [10, 20];[x, y] = [y, x];// 2、函数可以返回多个值function show() {return ['结果1', '结果2', '结果3'];}var [a, b, c] = show();//3、函数定义参数function showSelf(name, age, sex) {alert("我叫：" + name + ",年龄：" + age + "，性别为：" + sex);}showSelf("小明", 20, '男');function showSelf({ name, age, sex = '男' }) {alert("我叫：" + name + ",年龄：" + age + "，性别为：" + sex);}//没必要拘泥于传参的顺序showSelf({ name: "小明", age: 20, sex: '男' });// 参数可以附带默认值，如果没有传参，就使用默认值
</script>

形参上可以附带默认值，意味着如果没有传入该参数，就使用默认值；

ES6新式字符串：

传统的字符串指的是所有单引号、双引号括起来的字符串，如果字符串分几行书写，直接报错；
新式字符串的写法是反引号''括起来，${变量/表达式/函数调用}占位；
也就是说新式字符串中想怎么写就可以怎么写，换行、缩进都能识别；

var str = `hello world，${arr}，你好吗`;

5、数组方法和合并对象

ES6中一个新的函数Array.from()

类数组对象：所谓类数组对象，最基本的要求就是具有length属性的对象。
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组
该方法有三个参数，Array.from(arrayLike[, mapFn[, thisArg]])，
arrayLik：想要转换成数组的伪数组对象或可迭代对象；
mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数；
thisArg：可选参数，执行回调函数 mapFn 时 this 对象；
该方法的返回值是一个新的数组实例（真正的数组）；

//比如我们获取li元素，获得的结果是一个伪数组，这时候你想要往里面添加元素的时候，就会出现push()不能调用，这时候可以使用from()将伪数组转为一个数组，然后push()元素。
var aLis = document.getElementsByTagName("li");
//这是一个伪数组
alert(aLis.length);aLis = Array.from(aLis);// 没有该方法可以调用
aLis.push("hello");

ES6为Array增加了find()，findIndex()；

find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined；
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1，他们的都是一个查找回调函数。

[1, 2, 3, 4].find((value, index, arr) => {})
[1, 2, 3, 4].findIndex((value, index, arr) => {})

查找函数有三个参数：
value：每一次迭代查找的数组元素；
index：每一次迭代查找的数组元素索引；
arr：被查找的数组；

copyWithin()的语法：

array.copyWithin(target, start, end)

实例
复制数组的前面两个元素到第三和第四个位置上：var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
//输出结果：
Banana,Orange,Banana,Orange,Kiwi,Papaya

合并对象的方法Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, …sources) 【target：目标对象】，【souce：源对象（可多个）】

const object1 = {a: 1,b: 2,c: 3
};const object2 = Object.assign({c: 4, d: 5}, object1);console.log(object2.c, object2.d);
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

【注意：】

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性；
该方法使用详解

6、集合和英汉词典案例

Map对象保存键值对，Key可以是任何值(对象或原始值)，Value也可以是任何值。

Key的比较是基于 “SameValueZero” 算法：NaN 是与 NaN 相等的（虽然NaN !== NaN），剩下所有其它的值是根据 === 运算符的结果判断是否相等。Map底层是hash表结构或相等访问时间的结构；

Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set底层也是hash表结构或相等访问时间的结构；

英汉词典案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>Document</title><style>#div1{width: 200px; height: 200px; padding: 50px; background-color: lightgray; border: 1px solid black; margin: 100px auto}#word{width: 200px; height: 30px; font-size: 18px;}#desc{width: 200px; height: 150px; margin-top: 20px; background-color: lightgreen}</style><script src = 'demo.js'></script><script>//1、将字符串通过换行进行字符串分割var arr = word.split("\n");let map = new Map();for(var i = 0; i < arr.length - 1; i += 2){map.set(arr[i].substring(1), arr[i + 1].substring(6));}window.onload = function(){var oWord = document.getElementById("word");var oDesc = document.getElementById("desc");oWord.onkeyup = function(){var value = map.get(this.value);if(value){oDesc.innerHTML = value;}else{oDesc.innerHTML = "查无此词";}}}</script></head><body><div id = "div1"><input id = 'word' type="text" placeholder="输入英文单词"/><div id = 'desc'></div></div></body>
</html>

ECMA5与ECMA6相关推荐

ECMA5和ECMA6
ECMA5和ECMA6 1.this关键字详解,改变this指向的方法call.apply.bind深度分析 1.this的使用场景每一个函数中,都有一个内置的变量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