ES6新特性
韩顺平老师课程的笔记跟我自己的一丢丢理解
文章目录
- 一.var、let 介绍
-
- 1.var
- 2. let
- 3. let 和 var
- 4.总结
- 二.const常量
- 三.解构赋值
-
- 1.基本介绍
- 2.数组解构
- 3.对象解构
- 四.模版字符串
-
- 1.基本介绍
- 2.例子
- 五.对象相关新特性
-
- 1.声明对象简写
- 2.对象方法简写
- 3.对象拓展运算符
- 六.箭头函数
-
- 1.基本介绍
- 2.箭头函数使用
-
- 案例一
- 案例二
- 箭头函数+对象解构
一.var、let 介绍
从3个角度说明
1）变量定义
2）变量覆盖
3）作用域问题
1.var
- var 定义变量使用，有各种问题
<script type="text/javascript">
//1.变量可以在未定前，进行控制台输出【即先输出，后定义】
//这个也叫做 变量提升
//在下边才定义，但是在上一句就已经拿来用了。
//编译器会认为，定义了，只是取不到这个值
//这种现象叫做变量提升
//console.log("name",name); 使用 ，【逗号】，可以输出对象的完整信息
//console.log("name" + name); 使用+[加号]，字符串的拼接，
//如果name是一个对象，输出的就是一个object信息，而不会输出对象的 完整信息
console.log("[+]name = " + x);
console.log("[,]name = ",x);
var name = "tom";
//2.var可以进行多次定义【变量覆盖】
var color = "blue";
var color = "red";
//原则上讲，变量不可以重名
//这里输出的是red,
console.log("color = ",color);
//3.作用域问题
{
var grade = 5;
console.log("代码块内部 grade = ",grade);
}
//这里依旧会输出 grade的值
console.log("代码块外部 grade = ",grade);
console.log("x = ",x);
var x = "blue";
script>
2. let
- let
<script type="text/javascript">
//1.变量可以在未定前，进行控制台输出【即先输出，后定义】
//将会报错，let不存在变量提升
//can't access lexical declaration 'name' before initialization
console.log("name = ",name);
let name = "大白";
//2.let不可以进行多次定义【变量覆盖】
//报错Uncaught SyntaxError: redeclaration of let color
let color = "red";
let color = "blue";
console.log("color = ",color)
//3.作用域问题
//let 存在作用域，let代码只作用域作用域内
{
let grade = 5;
console.log("代码块内 grade = ", grade);
}
//报错 Uncaught ReferenceError: grade is not defined
console.log("代码块外 grade = ", grade);
script>
3. let 和 var
- var 和 let放到一起比较
<script type="text/javascript">
// (1) let 声明的变量, 在代码块中，则作用域在代码块中
// (2) var 声明的变量, 在代码块中，作用域没有限制
{
var name = "小白";
let job = "java 工程师";
console.log("代码块内 name=", name);
console.log("代码块内 job=", job);
}
console.log("代码块外 name=", name);
//报错Uncaught ReferenceError: job is not defined
console.log("代码块外 job=", job);
// 1. var 可以声明多次
// 2. let 只能声明一次
var num1 = 100;
var num1 = 200;
//输出200
console.log("num1 = ",num1);
let num2 = 600;
//Uncaught SyntaxError: redeclaration of let num2
//会报错
let num2 = 900;
console.log("num2 = ",num2);
// let 细节 3
// 1. let 不存在变量提升
// 2. var 存在变量提升
// x is not defined
console.log("x=", x);
var x = "tom";
//报错Uncaught ReferenceError: can't access lexical declaration 'z' before initialization
console.log("z=", z);
let z = "mary";
script>
4.总结
- let 声明的变量有严格局部作用域
- let 只能声明一次, var 可以声明多次
- let 不存在变量提升, var 存在变量提升
二.const常量
<script type="text/javascript">
// 1. 常量在定义时，需要赋值
// 2. 常量赋值后不能修改
const PI = 3.14;
console.log("PI = ", PI);
script>
三.解构赋值
1.基本介绍
1)解构赋值是对赋值运算符的扩展
2)是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
3)主要有两种形式: 数组解构和对象解构
2.数组解构
<script type="text/javascript">
let arr = [1, 2, 3];
//查看某个变量的类型
console.log("arr的类型 = ", arr);
//数组解构【取出元素】
//1.传统
let x = arr[0], y = arr[1], z = arr[2];
console.log("x = ", x, ",y = ", y, ",z = ", z);
//2.ES6风格
let [a, b, c] = arr;
console.log("a = ", a, ",b = ", b, ",c = ", c);
let [num1, num2, num3] = [100, 200, 300];
console.log("[num1, num2, num3]=", num1, num2, num3);
script>
3.对象解构
<script type="text/javascript">
/**
* 1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致
* 2. 也可解构对象部分属性，比如 let{age} 这样就只取出 age 属性
* 3. 还有其它的形式,比如方法上使用对象解构
*/
let monster = {
name:'孙悟空',
age:3000
};
//1.传统方式取出属性
console.log(monster.name , " " ,monster.age)
//2.ES6新特性
//1. 把 monster 对象的属性, 赋值给{name,age}
//2. {name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致
//3. 使用{} 包括, 不要使用[]
//4. {name,age} 顺序是无所谓
let{name,age} = monster;
console.log("-------------");
console.log(name," ",age);
//下面这个写法也可以
//let {name, age} = {name: '牛魔王', age: 800};
//如果这样使用，仍然要保证名称和对象的属性名一致
//函数结构
function f1({name,age}){
console.log("f1-name = ",name," f1-age = ",age);
}
f1(monster);
let obj = {
className : "卡西诺",
height: 180
}
let {className} = obj; // 得到卡西诺
let {height} = obj; // 得到180
// 剩余运算符
let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4};
// a = 1
// b = 2
// demo = {c: 3, d: 4}
script>
四.模版字符串
1.基本介绍
1)模板字符串使用反引号 ` 将字符串包裹
2)可作为普通字符串
3)可用来定义多行字符串，即可以将换行字符串原生输出
4)字符串插入变量和表达式, 使用 ${}
5)字符串中调用函数
2.例子
<script type="text/javascript">
//1.字符串，换行会原生输出
let str1 = `for(int i = 0;i < 10;i==){
System.out.println("i = " + i);
}`;
/**
* str1 = for(int i = 0;i < 10;i==){
* System.out.println("i = " + i);
* }
*/
console.log("str1 = ",str1)
//2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式
let name = `小孙`;
//(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换
//(2) 然后可以得到最后解析的字符串
let str2 = `姓名:${name}`;
let str3 = `1+2=${1+2}`;
let num1 = 20;
let num2 = 30;
let str4 = `${num1}+${num2}=${num1+num2}`;
console.log("str2=", str2);
console.log("str3=", str3);
console.log("str4=", str4);
3. 字符串中调用函数
function sayHi(name){
return "hi" + name;
}
let name2 = "小马";
let str5 = `sayHi返回的结果是=${sayHi("小孙")}`;
let str6 = `sayHi返回的结果是=${sayHi(name2)}`;
console.log("str5=", str5);
console.log("str6=", str6);
script>
五.对象相关新特性
1.声明对象简写
<script type="text/javascript">
const age = 800;
const name = "孙悟空";
//1.传统定义对象
let monster = {
name:name,
age:age
};
//2.ES6定义对象
//1. {name, age} : 表示对象的属性名是 name 和 age
//2. 属性 name 的值是从变量/常量 name 来的
let monster02 = {name,age};
//monster02 = Object { name: "孙悟空", age: 800 }
console.log("monster02 = ",monster02)
script>
2.对象方法简写
<script type="text/javascript">
//1.传统，对象方法定义
let monster = {
name:"孙悟空",
age:18,
sayHi:function (){
console.log("信息 name = ",this.name," age = ",this.age);
}
}
monster.f1 = function (){
console.log("test....")
};
//信息 name = 孙悟空 age = 18
monster.sayHi();
//test....
monster.f1();
//2.ES6新特性
let monster2 = {
name:"贝吉塔",
age:18,
sayHi(){
console.log("信息 name = ",this.name," age = ",this.age);
},
f1(){
console.log("f1()");
}
};
//信息 name = 贝吉塔 age = 18
monster2.sayHi();
//f1()
monster2.f1();
script>
3.对象拓展运算符
<script type="text/javascript">
let cat = {
name:`小花猫`,
age:3
};
//只是让cat2指向cat的空间【属于浅拷贝】
let cat2 = cat;
//修改cat2也会导致cat改变
cat2.name = "大花猫";
//cat = Object { name: "大花猫", age: 3 }
console.log("cat = ",cat);
//cat2 = Object { name: "大花猫", age: 3 }
console.log("cat2 = ",cat2);
//拷贝对象【深拷贝】
//深拷贝:拷贝过来的对象之间 不影响
let cat3 = {...cat};
cat3.name = "中等花猫";
//cat = Object { name: "小花猫", age: 3 }
console.log("cat = ",cat);
//cat3 = Object { name: "中等花猫", age: 3 }
console.log("cat3 = ",cat3);
//合并对象
let monster = {
name:"姜望",
age:18,
skill:"三妹真火"
};
let car = {
brand:"宝马",
price:2634643
};
//这个属于深拷贝，参考下列代码
let monster_car = {...monster,...car};
monster_car.brand = "奔驰";
//car = Object { brand: "宝马", price: 2634643 }
console.log("car = ",car);
//monster_car = Object { name: "姜望", age: 18, skill: "三妹真火", brand: "奔驰", price: 2634643 }
console.log("monster_car = ",monster_car);
script>
六.箭头函数
1.基本介绍
1)箭头函数提供更加简洁的函数书写方式。
2) 基本语法是:(参数列表) => { 函数体 }
3) 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略() 4) 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
5) 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
6)箭头函数多用于匿名函数的定义
2.箭头函数使用
案例一
<script type="text/javascript">
//1.传统函数
let f1 = function (n) {
return n * 2;
};
console.log("传统 f1(2) = ", f1(2));
//2.ES6，箭头函数使用
let f2 = (n) => {
return n * 2;
};
console.log("es6 f2(2) = ", f2(2));
//上面的es6 函数写法，还可以简化
//箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
//函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
let f3 = n => n * 3;
console.log("es6 f3(2) = ", f3(2));
//箭头函数多用于匿名函数的定义
//函数也可以传给一个变量，类似于java的匿名内部类，仅仅使用一次的那种
//把f4当做一个函数
function hi(f4) {
console.log(f4(900));
};
//将n=> n + 100作为函数给了f4
/**
* function f4(n){
* return n + 100;
* }
*
* 900 + 100 = 1000
*/
hi(n => n + 100);
hi(n => n - 100);
script>
案例二
<script type="text/javascript">
//1.传统 n-m加起来
var f1 = function (n, m) {
var res = 0;
for (var i = n; i <= m; i++) {
res += i;
}
return res;
}
console.log("传统 = ",f1(1,10));
//2.ES6 箭头函数
let f2 = (n, m) => {
let res = 0;
for (let i = n; i <= m; i++) {
res += i;
}
return res;
}
console.log("ES6 = ",f1(1,10));
script>
箭头函数+对象解构
<script type="text/javascript">
const monster = {
name: "红孩儿",
age: 1000,
skill: ['红缨枪', '三位真火']
};
//要求:在方法形参取出 monster 对象的 skill 属性
// 传统方式
function f1(monster){
console.log("传统 monster.name = ",monster.name,
" ,monster.age = ",monster.age," ,monster.skill = ",monster.skill);
}
f1(monster);
//箭头函数
let f2 = ({skill}) => {
console.log("skill = ",skill);
}
/**
* 1.f2传入对象monster
* 2.f2的形参是{skill},
* 3.所以es6解构特性会把monster对象的skill属性解构的skill形参
* 4.对象解构的前提是 {skill}的skill 和 monster的skill属性是一致的
*/
f2(monster);
//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
let f3 = ({age, name, skill}) => {
console.log("skill=", skill, " age=", age, " name=", name);
}
f3(monster);
script>
未完待续