时间:暑假第四周
前言
经过上周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梦的小网页,用的响应式布局,效果还挺好的,就是内容还没充实。这周学习的内容不多,时间精力都没上周多,自我检讨一下,明天又是新的一天,给自己立下新的目标,绝不拖延,认真学习。