ES6学习（一）

时间：暑假第四周

---

前言

经过上周ES6的入门，这周开始学习基础知识了。学的内容不是很多，这周乱七八糟的事情太多了，浪费了太多的时间，自己的自制力在这周也逐渐瓦解，所以这次博客的内容质量不是很高，下周我会加倍努力学习，补上进度，然后完成华为官网。

---

提示：以下是本周学习内容总结

一、let

特点：

• 在块作用域内有效
• 不能重复声明
• 不会预处理, 不存在提升
• 应用：循环遍历加监听

   let age = 12;
   //let age = 13;//不能重复声明
   console.log(age);
   let btns = document.getElementsByTagName('button');
   for(let i = 0;i<btns.length;i++){
           btns[i].onclick = function () {
               alert(i);
           }
   }

二、const

• 定义一个常量
• 不能修改
• 保存不用改变的数据
• 一定要赋初始值，一般常量要大写（潜规则）
• 对于数组和对象的元素修改，不算做常量的修改，不会报错

	const school = {
    		 name,
        	 change,
     		 improve(){
       			console.log('我们可以提高你的技能');
       }
    }

三、变量的解构赋值

es6允许按照一定模式从数组和对象中提取值，对变量进行赋值

// 1.数组的结构
const F4=['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
console.log(xiao);
//console.log(liu);
//console.log(zhao);
//console.log(song);

//2.对象的解构
const zhao = {
    name : '赵本山',
    age : '不详',
    xiaopin:function(){
        console.log('我可以演小品');
    }
};
let {name,age,xiaopin} = zhao;
console.log(name);
console.log(age);

四、模板字符串

模板字符串 : 简化字符串的拼接
引入新的声明字符串的方式 [``]

• 模板字符串必须用 `` 包含
• 变化的部分使用${xxx}定义

let obj = {
     name : 'anverson',
     age : 41
}
console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);
console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);

五、简化对象写法

• ES6中允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
• 内容里面可以直接出现换行符

let x = 3;
let y = 5;
//普通的写法
//let obj = {
//    x : x,
//    y : y,
//    getPoint : function (){
//        return  this.x + this.y
//  	}
//};
//简化的写法
let obj = {
    x,
    y,
    getPoint(){
        return this.x
    }
};
console.log(obj, obj.getPoint());

六、箭头函数

• 不能作为构建实例化对象
• 不能使用arguments变量

<script type="text/javascript">
//  声明函数
 let f=function f(){
  console.log("一般函数")
 }
// 箭头函数
let jian=()=>{
    console.log("箭头函数")
}
// 调用函数
jian()
//this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
    console.log(this.name)
}
let getName2=()=>{
    console.log(this.name)
}
//设置window对象的name属性
window.name='你好'
const school={
    name:"hello"
}
//直接调用
getName();
getName2()
//call方法调用
getName.call(school);
getName2.call(school)
// 箭头函数的简写
//   当只有一个参数的时候，省略小括号
let t= n =>{
    return n+1
}
console.log(t(1))
//省略花括号，当代码体只有一句语句的时候,此时return必须省略，而且语句的执行结果就是函数的返回值
let pow =(n)=> n*n;
console.log(pow(2))
</script>

七、函数参数默认值

ES6中允许给函数参数赋初始值

//形参初始值，具有默认参数一般靠后
 function add(a,b,c=8){
       return a+b+c
   }
   let result=add(1,2)
   console.log(result)

八、rest参数

用于获取函数的实参，代替ES5中的arguments

//rest参数必须放在参数的后面
   function data(a,b,...args){
       console.log(args)
   }
   data('da','adja','jaja')

九、… 扩展运算符

…运算符可以将数组转换成逗号分隔的参数序列

let e=['嗯嗯','哦哦','好的']
   //声明一个函数
   function c(){
       console.log(arguments)
   }
   c(...e)
   const r=['2','3']
   //数组的合并
   const er=[...e,...r]
   console.log(er)

十、symbol

ES6引入的一种新的原始类型Symbol，表示独一无二的值，他是javascript语言的第七种数据类型，是一种类似字符串的数字类型(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
Symbol的特点：
1、Symbol属性对应的值是唯一的，解决命名冲突问题
2、Symbol值不能与其他数据进行计算，包括同字符串拼串
3、for in, for of遍历时不会遍历symbol属性。
使用：
1、传参标识
2、为对象添加Symbol属性
3、内置Symbol值

• 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
• Symbol.iterator
• 对象的Symbol.iterator属性，指向该对象的默认遍历器方法

// 创建Symbol
 let s=Symbol('哈哈')
 console.log(s)
 let s2=Symbol('哈哈')
 console.log(s===s2)//flase
 //为对象添加Symbol属性
 let youxi={
   name:'狼人杀',
   [Symbol('say')]:function(){
     console.log("我可以发言")
   },
   [Symbol('look')]:function(){
      console.log("我可以自爆")
   }
 }

总结

提示：这里对文章进行总结：
以上是我对这周学习内容的总结，还学习了其他零碎的知识，包括学长讲的钉钉穿透，gitee上传代码操作步骤，其中仓库我会建立，但不会上传文件到gitee里面，当时没搞懂，后来就放一边搁置了。然后我还搞了一个哆啦A梦的小网页，用的响应式布局，效果还挺好的，就是内容还没充实。这周学习的内容不多，时间精力都没上周多，自我检讨一下，明天又是新的一天，给自己立下新的目标，绝不拖延，认真学习。