ES6知识点：ES5数组的新方法，ES6中的变量、解构赋值、字符串、数组、includes、箭头函数以及对象
基本介绍
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
我们从node开始，会大量用到ES6中的一些新语法，因此在学习node之前需要先学习一下es6中提供的新语法
javascript的诞生
-
1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做 Mosaic。这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览。
-
1994年10月， Netscape （网景）公司，就是在 Mosaic 的基础上，开发面向普通用户的新一代的浏览器 Netscape Navigator。
-
1994年12月，Navigator 发布了1.0版，市场份额一举超过90%。
-
Netscape 公司很快发现，Navigator 浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。 因为当时网速特别的慢，很多表单的校验不适合放在服务器端进行校验。管理层对于这种脚本语言的设想是：功能不需要太强大，语法要简单，容易学习和使用
-
1995年，Netscape 公司雇佣了程序员
Brendan Eich 布兰登·艾奇开发这种网页脚本语言。 -
1995年5月，Brendan Eich 只用了10天，就设计完成了这种语言的第一版，叫做
LiveScript。它是一个大杂烩，语法有多个来源。- 基本语法：借鉴 C 语言和 Java 语言。
- 数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
- 函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。
- 原型继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。
- 正则表达式：借鉴 Perl 语言。
- 字符串和数组处理：借鉴 Python 语言。
-
为了保持简单，这种脚本语言缺少一些关键的功能，比如块级作用域、模块、子类型（subtyping）等等，但是可以利用现有功能找出解决办法。 后果：对于其他的编程语言，你需要只需要学习该语言提供的各种语法即可。对于javascript，你需要学习解决问题的各种模式，比如原型，原型链实现继承，闭包等等
-
1995年 12月，Netscape 公司与 Sun 公司合作，后者允许将这种语言叫做 JavaScript。把LiveScript改名成了Javascript
-
注意：javascript实质上和java没有什么关系
ECMAScript与Javascript的关系
1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript ，这个版本就是1.0版。
该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript ，有两个原因。一是商标，Java是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA ，不是 Netscape ，这样有利于保证这门语言的开放性和中立性。
ECMAScript，简称ES，是由Ecma国际（欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）按照标准制定的一种脚本语言规范。
JavaScript是按ECMAScript规范实现的一种脚本语言，JavaScript除了实现了ECMAScript规范，还提供了BOM和DOM的操作。
ECMAScript版本历史
-
ES1.0, 1997年06月发布
-
ES2.0, 1998年06月发布
-
ES3.0, 1999年12月发布
-
ES4.0, 由于关于语言的复杂性出现了分歧。放弃发布
-
ES5.0, 2009年12月发布， 增加了严格模式，增加了少量语法，为ES6铺路
-
ES6.0, 2015年6月发布，增加了大量的新概念和语法特性
- 第六版的名字， 可以叫做ECMAScript6.0(ES), 也可以叫做ECMAScript 2015（ES2015）
- ECMA组织决定以后每年6月份都会发布一版新的语法标准，比如ES7(ECMAScript 2016)
- 通过我们说的ES6泛指ES5之后的下一代标准，涵盖了ES6, ES7, ES8…
- 参考书籍： https://es6.ruanyifeng.com/
ES5-数组的新方法
forEach
forEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环.
应用场景：为一些相同的元素，绑定事件处理器！
需求：遍历数组[“张飞”,“关羽”,“赵云”,“马超”]
var arr = ["张飞","关羽","赵云","马超"];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
console.log(element, index, array);
});
map
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
需求：遍历数组，求每一项的平方存在于一个数组中
var arr = [1,2,3,4,5]; // 1 4 9 16 25
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，每个元素都是回调函数的结果。
var newArray = arr.map(function(element, index, array){
return element * element;
});
console.log(newArray);//[1,4,9,16,25]
案例：获取所有的名字
filter
filter用于过滤掉“不合格”的元素
返回一个新数组，如果在回调函数中返回true，那么就留下来，如果返回false，就扔掉
需求：遍历数组，将数组中工资超过5000的值删除[1000, 5000, 20000, 3000, 10000, 800, 1500]
var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，存储了所有返回true的元素
var newArray = arr.filter(function(element, index, array){
if(element > 5000) {
return false;
}else {
return true;
}
});
console.log(newArray);//[1000, 5000, 3000, 800, 1500]
some
some用于遍历数组，如果有至少一个满足条件，就返回true，否则返回false。
需求：遍历数组，判断数组是否包含奇数，[2,4,6,8,10,9]
var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只要有一个回调函数返回true，就返回true
var flag = arr.some(function(element, index, array){
console.log(element, index, array);
if(element %2 == 1){
return true;
}else {
return false;
}
});
console.log(flag);//true
every
every用于遍历数组，只有当所有的元素返回true，才返回true，否则返回false。
需求：遍历数组，判断数组是否都是偶数，[2,4,6,8,10,9]
var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只有当所有的元素返回true，才返回true，否则返回false。
var flag = arr.every(function(element, index, array){
console.log(element, index, array);
if(element %2 == 0){
return true;
}else {
return false;
}
});
console.log(flag);//false
reduce
reduce()方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值
语法：reduce(callback, initValue)
callback: 每个元素都会执行一次的回调函数
initValue: 初始值
callback的4个参数
- prev： 上一次的值，第一次为初始值
- item: 当前值
- index: 下标
- arr: 数组
案例：计算数组所有值的和
ES6
变量
ES6中提供了两个声明变量的关键字：const和let
let的使用
ES6 新增了let命令，用来声明变量。它的用法类似于var。
- let声明的变量只有在当前作用域有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
- 不存在变量提升
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
- 不允许重复声明
let a = 10;
let a = 1;//报错 Identifier 'a' has already been declared
const的使用
const声明一个只读的常量。常量：值不可以改变的量
- const声明的量不可以改变
const PI = 3.1415;
PI = 3; //报错
- const声明的变量必须赋值
const num;
- 如果const声明了一个对象，仅仅保证地址不变
const obj = {
name:'zs'};
obj.age = 18;//正确
obj = {
};//报错
- 其他用法和let一样
1. 只能在当前代码块中使用
2. 不会提升
3. 不能重复
let与const的使用场景
1. 如果声明的变量不需要改变，那么使用const
2. 如果声明的变量需要改变，那么用let
3. 学了const和let之后，尽量别用var
解构赋值
数组解构
以前，为变量赋值，只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
解构默认值
let [a = 0, b, c] = [1, 2, 3];
对象解构
解构不仅可以用于数组，还可以用于对象。
let {
foo, bar } = {
foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
如果变量名与属性名不一致，必须写成下面这样。
let {
foo: baz } = {
foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = {
first: 'hello', last: 'world' };
let {
first: f, last: l } = obj;
f // 'hello'
l // 'world'
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
字符串
模版字符串
传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。
$('#result').append(
'There are ' + basket.count + ' ' +
'items in your basket, ' +
'' + basket.onSale +
' are on sale!'
);
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are ${
basket.count} items
in your basket, ${
basket.onSale}
are on sale!
`);
字符串模版的优点
- 允许换行
- 可以使用插值
${}
字符串方法
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
数组
find
find是ES6新增的语法
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
findexIndex
findIndex是ES6新增的语法
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];
function findFirstLargeNumber(element) {
return element > 13;
}
console.log(array1.findIndex(findFirstLargeNumber));
includes
函数-箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
基本使用
var fn = function(x, y) {
console.log(x + y);
}
相当于
//语法： (参数列表) => {函数体}
var fn = (x, y) => {
console.log(x + y);
}
参数详解
- 如果没有参数列表，使用()表示参数列表
var sum = () => {
console.log('哈哈')
};
// 等同于：
var sum = function() {
console.log('哈哈')
};
- 如果只有一个参数，可以省略()
// 等同于：
var sum = function(n1) {
console.log('哈哈')
};
var sum = n1 => {
console.log('哈哈')
};
- 如果有多个参数，需要使用()把参数列表括起来
var sum = function(n1, n2) {
console.log('哈哈')
};
var sum = (n1, n2) => {
console.log('哈哈')
};
返回值详解
- 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来
var sum = function(n1) {
console.log('哈哈')
};
var sum = n1 => {
console.log('哈哈')
};
- 如果函数体只有一行一句，那么可以省略{}和return
var fn = function(n1, n2) {
return n1 + n2;
}
var fn = (n1, n2) => n1 + n2;
案例
- 有一个数组
[1,3,5,7,9,2,4,6,8,10],请对数组进行排序 - 有一个数组
['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序 - 有一个数组，
[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组
代码演示：
// 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
// 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
// 有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组
let nums = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
// nums.sort((a, b) => {
// // return a - b
// return b - a
// })
// 以下是简写形式
nums.sort((a, b) => a - b)
// console.log(nums);
let strs = ['a', 'ccc', 'bb', 'dddd']
// strs.sort((a, b) => {
// return a.length - b.length
// })
// 以下是简写形式
strs.sort((a, b) => a.length - b.length)
// console.log(strs);
let score = [57, 88, 99, 100, 33, 77,22,96]
// let newScore = score.filter(item => {
// return item > 60
// })
let newScore = score.filter(item => item > 60)
console.log(newScore)
箭头函数的注意点
- 箭头函数内部没有this，因此箭头函数内部的this指向了外部的this
- 箭头函数不能作为构造函数，因为箭头函数没有this
【定义一个对象，定时器打招呼】
苦口婆心一下：箭头函数刚开始用，肯定会有点不习惯，但是任何东西都有一个习惯的过程，慢慢接受就好了，多用，多练
默认参数
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
rest参数
function add(...values) {
}
add(2, 5, 3) // 10
对象
简写
属性简写
方法简写
展开运算符
综合大练习
给定一个数组
let list = [
// wu: 武力 zhi:智力
{
id: 1, name: '张飞', wu: 97, zhi: 10 },
{
id: 2, name: '诸葛亮', wu: 55, zhi: 99 },
{
id: 3, name: '赵云', wu: 97, zhi: 66 },
{
id: 4, name: '周瑜', wu: 80, zhi: 98 },
{
id: 5, name: '吕布', wu: 100, zhi: 8 },
{
id: 6, name: '司马懿', wu: 30, zhi: 98 }
]
-
求数组中所有英雄的武力平均值
-
得到一个新数组，只保留英雄的名字，
['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿'] -
得到一个新数组，新数组中只保留武力值超过90的英雄
-
删除数组中名字为周瑜的英雄
-
判断数组中所有英雄的武力是否都超过60， 最终打印结果：
全是猛将还有弱鸡使用两种方式实现 -
删除数组中名字叫所有智力低于60的英雄
-
找到数组中id为2的英雄，求他的武力+智力的综合
let list = [
// wu: 武力 zhi:智力
{
id: 1, name: '张飞', wu: 97, zhi: 10 },
{
id: 2, name: '诸葛亮', wu: 55, zhi: 99 },
{
id: 3, name: '赵云', wu: 97, zhi: 66 },
{
id: 4, name: '周瑜', wu: 80, zhi: 98 },
{
id: 5, name: '吕布', wu: 100, zhi: 8 },
{
id: 6, name: '司马懿', wu: 30, zhi: 98 }
]
// 求数组中所有英雄的武力平均值 reduce
// let num = list.reduce((prev, now) => {
// return prev + now.wu
// }, 0)
// let num = list.reduce((prev, now) => prev + now.wu, 0)
// console.log(num/list.length);
// console.log(list.reduce((prev, now) => prev + now.wu, 0)/list.length);
// 得到一个新数组，只保留英雄的名字， ['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿']
// let arr = list.map(item=>{
// return item.name
// })
let arr = list.map(item => item.name)
// console.log(arr);
// 得到一个新数组，新数组中只保留武力值超过90的英雄 filter
// let heros = list.filter(item=>{
// return item.wu>90
// })
// let heros = list.filter(item=>item.wu>90)
// console.log(heros);
// 删除数组中名字为周瑜的英雄 filter
// let heros = list.filter(item=>{
// return item.name !='周瑜'
// })
// console.log(heros);
// 如果真的是将原数组当中的周瑜删除掉，应该先找到对应的索引
// let index = list.findIndex(item => {
// return item.name == '周瑜'
// })
// let index = list.findIndex(item => item.name == '周瑜')
// console.log(index);
// list.splice(index,1)
// list.splice(list.findIndex(item => item.name == '周瑜'),1)
// console.log(list);
// 判断数组中所有英雄的武力是否都超过60， 最终打印结果： 全是猛将 还有弱鸡 使用两种方式实现
// let flag = list.every(item => {
// return item.wu > 60
// })
// if (flag) {
// console.log('全是猛将')
// } else {
// console.log('还有弱鸡')
// }
// 删除数组中名字叫所有智力低于60的英雄
// let heros = list.filter(item=>{
// return item.zhi > 60
// })
// console.log(heros);
// 找到数组中id为2的英雄，求他的武力+智力的综合
// let obj = list.find(item => {
// return item.id == 2
// })
let obj = list.find(item => item.id == 2)
console.log(obj)
let res = obj.wu + obj.zhi
console.log(res)
const inventors = [
{
first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{
first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{
first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{
first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{
first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{
first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
{
first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
{
first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
{
first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
{
first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
{
first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
{
first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
要求1：筛选出生日期在16世纪（1500-1599年）的发明家。
要求2：列出发明家的名和姓的数组。[{
first: '', last: ''}]
要求3：根据发明家的出生日期，按照从大到小的顺序进行排序。
要求4：所有的发明家一共活了多少岁。
要求5：按照发明家的年龄大小排序
ast: ‘Planck’, year: 1858, passed: 1947 },
{ first: ‘Katherine’, last: ‘Blodgett’, year: 1898, passed: 1979 },
{ first: ‘Ada’, last: ‘Lovelace’, year: 1815, passed: 1852 },
{ first: ‘Sarah E.’, last: ‘Goode’, year: 1855, passed: 1905 },
{ first: ‘Lise’, last: ‘Meitner’, year: 1878, passed: 1968 },
{ first: ‘Hanna’, last: ‘Hammarström’, year: 1829, passed: 1909 }
];
要求1：筛选出生日期在16世纪（1500-1599年）的发明家。
要求2：列出发明家的名和姓的数组。[{first: '', last: ''}]
要求3：根据发明家的出生日期，按照从大到小的顺序进行排序。
要求4：所有的发明家一共活了多少岁。
要求5：按照发明家的年龄大小排序