概述
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。
Let 和const 定义
变量常量的严格区分,let用来申明变量,const用来申明常量
const常量
const定义常量后无法修改,否则运行会报错
const PI =Math.PI;
// const 定义常量后无法修改
PI =100;
// 浏览器运行报错
console.log(PI);
变量穿透
javascript 没有java 那么严格,一些情况局部变量超出范围也能使用,比方说这里的i
for(var i =0; i<=5;i++){
console.log(i);
}
console.log(i);
// 浏览器控制台输出 1,2,3,4,5
为避免变量穿透应使用let
for(let i =0;i<=5:i++){
console.log(i);
}
console.log(i);
// 浏览器控制台运行到输出外部的i时,会提示报错
ES6语法:模板字符串
传统 : 使用 ‘’ 或者 “ ” 进行字符串拼接
es6 使用 ``反引号
定义的对象用${}来区分,
在``中,换行操作同样有效,其不需要传统的换行符\n,直接回车就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 字符串涉及到动态部分
var person ={
name : "我",
address : "这里",
link: "www.kuangstudy.com"
}
let address = "2021.2.18"+person.name +"在"+person.address+"看"+person.link;
console.log(address)
// ES6 模板字符串 ,浏览器中也会换行
let address2 = `2021.2.18${person.name}
在${person.address}
看${person.link}`;
console.log(address2)
</script>
</body>
</html>
函数默认参数
调用方法时参数可省略,也可以方法中参数后面加上默认值
// 函数默认参数
// a,b 默认undefined .下面设置默认值 a=100, b=100
function sum(a=100,b =100){
return a+b;
}
var result = sum(11);
console.log(result); // 函数默认参数
// a,b 默认undefined .下面设置默认值 a=100, b=100
function sum(a=100,b =100){
return a+b;
}
var result = sum(11);
// 浏览器输出111
console.log(result);
箭头函数
特点
- 不需要function关键字来创建函数
- 没有多余逻辑体的情况下,返回可省略return关键字
- 继承当前上下文的 this 关键字
<script>
// 箭头函数 ,在(uniapp,脚手架,小程序大量使用)
// 传统使用 声明式的定义
function sum (a=100,b=100){
return a+b;
};
// 传统使用 表达式的定义
var sum =function(a=100,b=100){
return a+b;
}
// 箭头改造1
var sum =(a=100,b=100)=>{
return a+b;
}
// 箭头改造2
// 没有逻辑体 可以直接省略
var sum = (a=100,b=100) => a+b;
var result = sum(11);
console.log(result)
var arr = [1,2,3,4,5];
var newArr = arr.map(function (obj) {
return obj*2;
});
console.log(newArr);
// 改造
var newArr2 = arr.map((obj)=> obj *2);
console.log(newArr2);
// 改造
// 如果参数只有一个可以省去 ()
var newArr3 =arr.map(obj=>obj*2);
console.log(newArr3)
</script>
对象初始化简写
一个对象中key 和value的名字相同的情况下可以省略
对象中的value如果是个函数,也可以省略function
var title ="你好";
var link ="www.kuangstudy.com";
let info ={
title:title,
link:link,
go:function () {
console.log("我开车来公司上班");
}
}
// es6 简写
// 如果key和变量名字一样,可以只定义一次
// 如果value是一个函数,可以把function 去掉
var title1 ="你好";
var link2 ="www.kuangstudy.com";
let info2 ={
title1,
link2,
go() {
console.log("我开车来公司上班");
}
}
对象解构
传统es5通过. [] 方式获取到对象的属性值
es6中通过 解构{} 获得对象的属性值
注:解构中的属性名称要和被解构的对象的属性名相同,否则会输出undefined,需要不相同的话,可以用冒好跟上别名
<script>
var title1 ="你好";
var link2 ="www.kuangstudy.com";
let info2 ={
title1,
link2,
go(){
console.log("我开车来公司上班");
}
}
//通过. 的方式
console.log(info2.title1);
console.log(info2.link2);
info2.go();
//通过[]的方式
console.log(info2["title1"]);
console.log(info2["link2"]);
info2["go"]();
//es6对象解构,属性名称要与对象中一致
//需要不一致,则可以用冒好加小名
var {title1, link2:nihao,go} = info2;
// 还原代码
// var title =info2.title1
// var link =info2.link2
console.log(title1,nihao);
go();
// 为什么要两种方式 [] 和 .
// .后面的会被认为是字符串,[] 内可以为数字和变量
</script>
对象传播操作符
<script>
var person ={
name :"you",
address:"here",
phone:1234567,
link: "xxx",
go(){
console.log("go to work");
}
}
// name,address 已经被解构出来了,剩余的给person2
var {name,address,...person2} =person;
console.log(name)
console.log(address)
console.log(person2)
// 对象属性融合
var person3 ={
...person,
age: 123
}
console.log(person3);
</script>
数组map和reduce方法使用
数组中新增了map和reduce方法。
map
<script>
var arr =[1,2,3,4,5,6];
//对数组每个元素*2
//传统方式
var newArr =[];
for (let i = 0; i < arr.length; i++) {
newArr.push(arr[i]*2);
}
console.log(newArr);
//es6语法 map ie浏览器不支持
var arr3 =arr.map(function (obj) {
return obj*2
})
console.log(arr3)
// 箭头函数
var arr4 =arr.map(obj => obj*2);
console.log(arr4)
var users=[{name:"小学",age: 10 },{name:"小学",age: 10 },{name:"小学",age: 10 }];
var newUsers =users.map(obj=>{
obj.age =obj.age+1;
// 增加属性
obj.check =true;
return obj;
})
console.log(newUsers);
</script>
reduce
reduce(function(),初始值(可选)) :
接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是 第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数
<script>
// es6累加 ,ie浏览器不支持
var arr =[1,2,3,4,5,6];
var newArr = arr.reduce(function(a,b){
return a+b;
})
console.log(newArr);
</script>