ES6学习笔记(1)——快速入门
文章目录
前言:什么是ES6?
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5
版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。
快速入门
1.let关键字
格式: let 变量名 = 值
注意: let 是在代码块内有效,var 是在全局范围内有效,在代码块外部调用代码块let定义的变量将报错
<script>
//es6里面如何定义变量
// var a = 1; 原来的定义变量
//es6定义变量
//1.创建代码块,定义变量
{
var a = 10;
let b = 20;
//let定义的变量只能在
console.log(b);
}
//2 在代码块外面输出
console.log(a);
console.log(b);//Uncaught ReferenceError: b is not defined
</script>
控制台输出:
2.const关键字
格式: const 变量名 = 值
注意:const关键字定义的是常量,不能修改,且必须一次性赋值。
<script>
//定义常量
const PI = 3.14;
console.log(PI);
// const a;//常量定义了必须赋初始值
const a;
console.log(a);
</script>
控制台输出:
结果是直接报错,连定义的PI也不能输出了。
测试了先定义后赋值,也不允许
<script>
const b;
b = 1;
console.log(b);
</script>
3.数组解构:
ES6给出了新的一次性定义多个变量的方式,可以简化传统的冗长的写法
格式: let [变量1,变量2…] = [值1,值2…]
注意:左右两边括号里的变量和值必须一一对应。
<script>
//传统写法
var a=1,b=2,c=3;
console.log(a,b,c);
//es6写法
let [x,y,z] = [1,2,3];
console.log(x,y,z);
</script>
控制台输出:
4.对象解构:
格式: let{key1,key2…} = 对象
<script>
//定义对象
let user = {"name":"lucy","age":18};
//传统方法从对象中获取值
console.log(user.name,user.age)
//es6写法·
let{ name, age} = user;
console.log(name,age);
</script>
控制台输出:
5.模板字符串`
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
格式: · 内容 ·
(`是反引号,是键盘上ESC下面的按键,不是单引号)
<script>
//使用 ` 符号可以实现换行
let str1 = `hello,
es6`
console.log(str1);
//2.在 `符号里面可以使用表达式获取变量值
let name = "lucy";
let age = 20;
let str2 = `hello,${name},age is ${age}`;
console.log(str2)
//3.在`符号里面可以调用方法
function fun(){
return "hello es6";
}
let str3 = `demo, ${fun()}`;
console.log(str3);
</script>
控制台输出:
6.声明对象简写
<script>
const name = "lucy";
const age = 10;
//传统方式
const person = {"name":name,"age":age};
console.log(person);
//es6写法
const person2 = {name,age};
console.log(person2);
</script>
控制台输出
7.对象简写
<script>
//传统方式定义的写法
const person1 = {
say:function(){
console.log("hello es6");
}
}
person1.say();
//es6写法:可以省略function
const person2 = {
say(){
console.log("hello es6");
}
}
person2.say();
</script>
控制台输出:
8.对象的拓展运算符…
拓展运算符**(…)**用于取出参数对象所有可遍历属性然后拷贝到当前对象。
<script>
//对象拷贝
let person1 = {"name":"lucy","age":18};
//person1中的内容会复制给person2
let person2 = {...person1};
console.log(person1);
console.log(person2);
//合并对象
let name = {"name":"mary"};
let age = {"age":16};
let person3 = {...name,...age};
console.log(person3);
</script>
控制台输出
9.箭头函数
箭头函数:类似于Java里面的lambda表达式
格式: var 方法名 = 参数 => 函数体(返回值)
<script>
//箭头函数 var 方法名 = 参数 => 函数体(返回值)
//传统方法
var fun = function(m){
return m;
};
//使用箭头函数创建
var fun2 = m => m;
console.log(fun(8));
console.log(fun2(8));
//复杂的方法
var fun3 = function(a,b){
return a+b;
}
console.log(fun3(1,2));
//箭头函数简化
var fun4 = (a,b) => a+b;
console.log(3,4);
</script>
控制台输出