学习视频链接:
https://www.bilibili.com/video/BV1BU4y147pS?p=18
let和const
let和const用来代替var,let表示变量,const表示常量 。
建立这么一个文件:test.html
//以往会有这样的写法
<script>
for(var i=0;i<5;i++){
console.log(i);
};
console.log(i);
</script>
在浏览器打开,会看到输出了5,这就是变量穿透
如果换成let
<script>
for(let i=0;i<5;i++){
console.log(i);
};
console.log(i);
</script>
如果我们对const进行修改也会一样报错:
<script>
const PI = 3.14;
PI = 1;
</script>
字符串的拼接
之前的写法:
<script>
var person = {
name : "SCY",
qq: "142",
}
let str = '我是'+person.name+', qq号是'+person.qq;
console.log(str);
</script>
Es6的写法:
<script>
var person = {
name : "SCY",
qq: "142",
}
let str =`我是${person.name}, qq号是${person.qq}`;
console.log(str);
</script>
效果都是一样的:
带默认参数的函数
测试代码:
<script>
function sum(a=10,b=20 ){
return a+b;
}
var res1 = sum(1,2),res2 = sum();
console.log(`res1 = ${res1}, res2 = ${res2}`);
</script>
运行结果:
箭头函数
这里对比下几种不同的函数写法
<script>
// 1:声明式
function add1( a, b){
return a+b;
};
// 2:表达式
var add2 = function( a, b){
return a+b;
}
// 3:箭头函数
var add3= (a = 100,b = 300)=>{
return a+b;
};
console.log( add1(1,2) );
console.log( add2(3,4) );
console.log( add3(5,6) );
</script>
运行结果
箭头函数对于不同函数参数的简略写法如下。
<script>
// 无参数的函数
var sum1_2 = function(){
console.log(1+2);
}
// 箭头改造如下
var Sum1_2 = ()=>{ console.log(1+2); }
//测试一下
sum1_2();
Sum1_2();
// 有参数(一个参数括号可以省略)
var output = function(a){
console.log(a);
};
// 箭头改造如下
var Output = a=>{console.log(a)};
output(2);
Output(2);
//两个参数的话()不可以省略
var sum = function(a,b){
return a + b;
};
// 箭头改造如下
var Sum= (a,b)=>{
return a + b;
};
console.log(sum(3,4));
console.log(Sum(3,4));
// 如果没有逻辑体,只有返回值可以简化如下
var sum1 = function(a,b){
return a + b;
};
// 箭头改造如下
var Sum1 = (a,b)=>a+b
console.log(sum1(7,8));
console.log(Sum1(7,8));
</script>
测试一下是这样的:
对象初始化简写
如果一个对象中的key和value的名字一样的情况下可以定义成一个。
<script>
function person(name, age) {
//原来的写法是return {name:name,age:age};
// 对象简写:
return { name, age };
};
var json = person("SCY", 20);
console.log(json.name, json.age);
</script>
测试结果是这样的:
对象解构
两种获取对象元素的方式:
<script>
var question = "NXHS?";
var ans = "KCY" ;
let SCY= {
question,
ans,
go(){
console.log(`WXH${ans}` );
}
}
//通过.的方式
console. log(SCY. question);
console.log(SCY. ans);
SCY.go( );
//通过[]的方式
console.log(SCY["question"]);
console.log(SCY["ans"]);
SCY["go"]();
//es6对象解构
var {q , a, f } = SCY;
console.log(q);
console.log(a);
f();
</script>
运行结果:最后一种方法视频没问题,我自己电脑出问题了,可能是浏览器不支持,暂不深究。
传播操作符号…
这里的测试代码直接抄教程的
<script>
// 1: 定义一个对象
var person1 = {
name: '小飞飞',
age: 16,
};
// 2: 对象解构
var {name,age} = person1;
// =========================== ... 对象融合=====================
var person2 = {
...person1,
gender:1,
tel:13478900
};
console.log(person2);
// =========================== ... 对象取值=====================
// ... 对象取值
var person3 = {
name:"李四",
gender:1,
tel:"11111",
address:'广州'
};
// ...person4 把剩下没取走给我。
var {name,gender,...person4} = person3;
console.log(name)
console.log(age)
console.log(person4)
</script>
运行结果
ES6的语法:数组map和reduce方法使用(了解)
可以看这个网页的:https://kuangstudy.com/bbs/1351463043300708353