标签：总结 ES6 console log 10 let todo 我们 name
ES6 第一课 let以及它的声明特性：
1：代码总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let关键字</title>
</head>
<body>
<script>
// <!--todo vs6 声明我们的变量 -->
let a;
let b, c, d;
let e = 100;
let f = 512, g = "jhjd", h = [];
// 在我们的es6中我们的变量不能重复的声明,但是使用我们的var 关键字的话是可以的
var star = "罗志祥";
var star = "小猪";
// todo --------> 在我们的se6中的块级作用域
{
let girl = "你的名字";
}
// todo if else else if ....的话只要是在我们的块级作用域中使用我们的let 也是我们的块级作用域
// console.log(girl);
// 3: todo ------> 在我们的let 中不存在变量提升
// todo 4: 我们的块级作用域是不影响我们的作用域链的
{
let school = "黄涛";
function fun(){
console.log(school);
}
fun(); // todo -----------> 函数的调用
}
</script>
</body>
</html>
效果：
let的颜色切换练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let的实践练习</title>
</head>
<body>
<!--todo 在我们的这个body标签中添加我们的div标签 -->
<div class="container">
<h2 class="page-header">点击切换我们的颜色</h2>
<div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px" ></div>
<div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px"></div>
<div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px"></div>
</div>
</body>
<script>
// todo 第一步的话就是获取我们的div的元素对象
let items = document.getElementsByClassName('item');
// todo ------> 便利并绑定我们的事件
for(let i = 0; i<items.length; i++) {
// todo ---------> 添加我们的事件绑定器
items[i].onclick = function () {
//todo -----> 修改当前元素的背景颜色
// this.style.background = "pink";
items[i].style.background = "pink";
}
}
</script>
</html>
效果：
ES6 解构赋值：在遇到我们的方法频繁的被调用的时候就是使用我们的解构赋值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的赋值解构</title>
</head>
<body>
<script>
/*
* todo -----> 在我们的es6中允许按照一定的模式从数组中和对象中提取值，对变量进行赋值
* todo 被称为解构赋值，
*
* */
// 数组的结构
const F4 = ["影响力","韭菜的自我修养","稀缺"];
let [xhao , liou , zhao] = F4;
console.log(xhao);
console.log(liou);
console.log(zhao);
// 对象的解构
const zha = {
name :'你的名字',
age : '不详',
xiaopin:function (){
console.log("我可以演品");
}
};
// todo 在我们的这个位置的话就是设置我们的解构式
let {name,age,xiaopin} = zha;
console.log(name);
console.log(age);
console.log(xiaopin);
// 在我们的这个位置调用我们的函数
xiaopin();
</script>
</body>
</html>
在我们的结果展示：
es6的模板字符串：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES中的摸版字符串</title>
</head>
<body>
<script>
let str = "我是一个模板字符串";
console.log(str,typeof str);
// todo ---------> 以上是我们的模板字符串的声明格式
/*
* 1： todo ----> 在我们的内容中可以直接有换行符
* */
let string = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`
//todo 我们的es6的话还可以进行我们的模板的拼接
let lovest = '你的名字';
let out =`${lovest}abcdefg`;
console.log(out);
</script>
</body>
</html>
结果展示：
ES6对象的简化写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6对象的简化写法</title>
</head>
<body>
<script>
// ES6 中允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
// 这样些更加的简便
let name = "huangtao";
// 创建我们的这个东西
let change = function (){
console.log("我可以改变你");
}
const school = {
name,
change,
// todo 的话还有一个简化就是我们的方法声明的简化
//在我们的es6中可以将我们的:function都省略掉
// improve:function (){
// console.log("我们可以提高你的技能");
// }
improve(){
console.log("我们可以提高你的技能");
}
}
console.log(school);
</script>
</body>
</html>
结果的展示：
ES6 的箭头函数及其声明的特点：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Es6Z中的箭头函数</title>
</head>
<body>
<script>
// todo 在我们的es6中允许我们使用箭头来定义函数
// todo -----> 以前声明一个函数
let fun = function (){
}
// 使用我们的es6来声明我们的函数
let fn = (a,b) =>{
// 这就是我们使用es6定义出来的函数
return a + b;
}
let result = fn(1,2);
console.log(result);
/*
* 箭头函数的特点
* 1： this 是静态的, this 在声明时始终指向所在作用域下的this的值
* 2： 设置我们的window对我们的对象的操作
* */
function getName(){
console.log(this.name);
}
let getName2 = ()=>{
console.log(this.name);
}
window.name = "他的名字";
const scholl = {
name:"action"
}
getName();
getName2();
// 使用我们的call方法调用,我们的call方法可以指向函数内部的值的
getName.call(scholl);
// 箭头函数的话始终指向我们的初始定义的值
getName2.call(scholl);
// todo -------------》 在我们的这个位置的话就是实例化我们的对象
// let Person = (name,age) =>{
// // todo----------> 在我们的这个位置的话就是
// this.name = name;
// this.age = age;
// }
// let me = new Person("xiao",30);
// console.log(me);
// todo 在我们的箭头函数里面的话不能使用argument变量
// 如下所示：
// let fu = () =>{
// console.log(argument);
// }
// fu(1,2,3);
// todo 箭头函数的简写，党我们的形参有且只有一个的时候可以将我们的（） 省略
let add = n =>{
return n + n ;
}
console.log(add(9)); // 赋值为9
// 当我们的代码提只能有一条语句的时候可以将我们的{}省略
let pow = (n) => n*n;
console.log(pow(9));
</script>
</body>
</html>
标签：总结,ES6,console,log,10,let,todo,我们,name 来源： https://blog.csdn.net/qq_45973003/article/details/118069063
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。