版权声明：转载-复用,请联系博主微信:qiang510939237 https://blog.csdn.net/qiang510939237/article/details/89163531
一. ES6中提供了两个声明变量的关键字：const 和 let
ES6 用let来声明变量,它的用法类似于var。
1.1 let的使用
- 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
1.2 const的使用
const声明一个只读的常量。常量：值不可以改变的量
- const声明的量不可以改变
const PI = 3.1415;
PI = 3; //报错
- const声明的变量必须赋值
const num;
- 如果const声明了一个对象，仅仅保证地址不变
const obj = {name:'zs'};
obj.age = 18; //正确
obj = {}; //报错
- 其他用法和let一样
只能在当前代码块中使用
不会提升
不能重复
let与const的使用场景
1. 如果声明的变量不需要改变，那么使用const
2. 如果声明的变量需要改变，那么用let
3. 学了const和let之后，尽量别用var
=========================================================================================================
二. 模板字符串
模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。
// 1. 通过``可以定义一个字符串
let str = `hello world`
// 2. 模板字符串内部允许换行
let str = `
hello
world
`
// 3. 模板字符串内部可以使用表达式
let str = `
你好，我是${name}
`
=========================================================================================================
三. 箭头函数
***箭头函数的注意点***
1. 箭头函数内部没有this，因此箭头函数内部的this指向了外部的this（很爽）
2. 箭头函数不能作为构造函数，因为箭头函数没有this
ES6标准新增了一种新的函数：Arrow Function（箭头函数）
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
3.1 基本使用
- function 删掉, () 后面加个 =>
let fn = function() {
console.log(123);
}
相当于
//语法： (参数列表) => {函数体}
let fn = () => {
console.log(123);
}
3.2 参数详解
- 如果没有参数列表，使用()表示参数列表
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('哈哈')
};
3.3 返回值详解
- 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来
var sum = n1 => {
console.log('哈哈')
console.log('哈哈')
};
- 如果函数体只有一行一句，并且需要返回这个值，那么可以省略{}和return
var fn = function(n1, n2) {
return n1 + n2;
}
var fn = (n1, n2) => n1 + n2;
***箭头函数里的this问题 ***
以前 this => 谁调用this所在的函数,this就指向谁
<script>
// 1. es6 箭头函数 => 箭头函数没有自己this => 用的是箭头函数,外部的this
// 2. 箭头函数里面没有自己的this,所以箭头函数也不能做构造函数使用
// 构造函数es5
// let Person = function(){
// this.name = 'zs';
// this.age = 20;
// }
// 构造函数 es6 的箭头函数
// let Person = () => {
// this.name = 'zs';
// this.age = 20;
// }
// let p = new Person()
// console.log(p);
// let obj = {
// name: 'zs',
// sayHi: function () {
// console.log(this)
// // 延时器
// // es5 函数 => this => 指向的window
// // es6 箭头函数 => 箭头函数没有自己this => 用的是箭头函数 外部的this
// setTimeout(() => {
// console.log(this);
// }, 1000)
// }
// };
// obj.sayHi()
// let fn = () => {
// console.log(this)
// }
// fn()
</script>
========================================================================================================
ES6 综合练习 ( 箭头函数和遍历数组的几个方法一块使用 )
案例一.
1. 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
2. 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
3. 有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组
1.
let arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
arr.sort((a, b) => a - b)
// arr.sort(function (a,b) {
// return a - b
// })
console.log(arr)
2.
let arr = ['a', 'ccc', 'bb', 'dddd']
arr.sort( (a,b) => a.length - b.length)
// arr.sort(function (a,b) {
// return a.length - b.length
// })
console.log(arr)
3.
let arr = [57, 88, 99, 100, 33, 77]
arr = arr.filter( item => item >= 60)
// arr = arr.filter(function (item) {
// return item >= 60
// })
console.log(arr);
=========================================================================================================
案例二.
给定一个数组
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 }
]
//1.求数组中所有英雄的武力平均值 (总值/个数)
let total = 0
list.forEach(function(item){
total += item.wu
})
list.forEach(item => total += item.wu)
console.log(total/list.length);
//2.得到一个新数组，只保留英雄的名字， ['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿']
list = list.map(function(item){
return item.name
})
list = list.map(item => {
return item.name
})
console.log(list)
//3.得到一个新数组，新数组中只保留武力值超过90的英雄
list = list.filter(item => item.wu >= 90)
console.log(list)
//4.删除数组中名字为周瑜的英雄
list = list.filter(item => item.name != '周瑜')
console.log(list)
//5.判断数组中所有英雄的武力是否都超过60， 最终打印结果： 全是猛将 还有弱鸡 (使用两种方式实现)
let b = list.every(item => item.wu >= 60)
b ? console.log('都是猛将') : console.log('还有弱鸡');
//6.删除数组中名字叫所有智力低于60的英雄
list = list.filter(item => item.zhi >= 60)
console.log(list)
//7.找到数组中id为2的英雄，求他的武力+智力的综合
let hero = list.find(item => item.id == 2)
console.log( hero.wu + hero.zhi)