ES6听课笔记
ES6语法
1.变量
1.1 变量声明
使用let变量不能重复声明
let star = '亚索'
let star = '盲僧'
//会报错,但是使用var不会报错
var star = '亚索'
var star = '盲僧'
//这就是正常的
1.2 块级作用域
分为三种: 全局作用域,函数作用域,eval作用域
eval作用域在ES5的严格模式里面才会出现的
块级作用域是ES6的新特性
{
let user = "demoUser"
//但是var user = "demoUser"是可以在代码块外面读取的
}
console.log(user)
//这样的就无法获取
1.3 不存在变量提升
如果一个变量在声明之前进行引用
console.log(codeUser);
//var codeUser = "DemoUser" //这样使用不会报错,但是会输出undefined
let codeUser = "DemoUser" //这样使用会直接报错
1.4 不影响作用域链
示例代码:
{
let code = "User"
function fun(){
console.log(code)
}
fun();
//对于这样的情况,代码也可以正常获取到code的内容
}
1.5 实践练习
<body>
<div>
<h2>点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<script>
let items = document.getElementsByClassName("item")
//在这里,使用let定义一个i可以正常给item赋予绑定点击事件,但是如果使用var,因为var定义的变量是全局的,那么这个function中的变量就是全局跟随变化的,点击事件将会失效。
for (let i = 0; i < items.length; i++){
items[i].onclick = function(){
items[i].style.background = "red";
}
}
</script>
<style>
.item {
width: 100px;
height: 70px;
border: 1px solid red;
}
</style>
2.const关键字
- const定义的变量需要赋予默认值
- const修饰的变量建议使用大写字母表示
- const定义的变量不可以修改
- 对于const修饰的对象和数组，对他们进行修改不算做对常量进行修改
const team = ["UZI","MLXG","Ming","Xiaohu"];
team.push("Letme")
//team = "100";
//会报错:Uncaught TypeError: Assignment to constant variable.原因可能是push并没有修改该变量在内存中的引用,但是使用team = "100",则是修改了他的指针导致内存地址发生变化,故而报错
3.变量的解构赋值
ES6允许用户按照一定的规则获取数组\对象的属性
代码实例:
const person = {
name: "刘慈欣",
age: "47",
write: function(){
console.log("撰写小说")
}
}
let {name,age,write} = person;
console.log(name,age)
write();
4.模板字符串
特性:
1.本质上仍是字符串
2.可以直接在字符串中出现换行符
3.拼接字符串的语法不同
const graph = `<div>
<p>这就是我的文字</p>
</div>`
//他的本质其实就是一个字符串
const text = "<p>code</p>"
console.log(graph, typeof graph)
console.log(`${text}拼接字符串`)
5.对象的简化写法
let name = "张三"
let age = 100;
let myMethod = function(){
console.log("这是我的方法")
}
let obj = {
name,
age,
myMethod,
newMethod(){
console.log("新的方法")
}
}
obj.myMethod();
obj.newMethod();
console.log(obj)
//打印的结果: {name: '刘慈欣', age: '47', myMethod: ƒ, newMethod: ƒ}
6.箭头函数的特性
箭头函数使用
function test(){
console.log("Test")
}
//下面的方法和上面的方式相同
const test1 = ()=>{
console.log("Test1")
}
- 有关于箭头函数，this的指向是函数在声明时，所在作用域下的this的值。
示例代码：
//普通函数
function getName() {
console.log(this.name);
}
//箭头函数
let getNameArrow = () => {
console.log(this.name);
}
window.name = "Window_Name";
const self = {
name: 'Deng_Name'
}
//直接调用
// getName();
// getNameArrow();
//使用call调用，call可以强制改变this的指向，使其可以被看作这个对象的方法。
getName.call(self);
getNameArrow.call(self);
//结果是：
// Deng_Name
// Window_Name
- 箭头函数不能作为狗做实例化对象, 只要是函数都可以做为构造函数，但是箭头函数除外
const Person = (a, b) => {
this.name = a;
this.age = b;
}
let me = new Person('Deng', 25);
console.log(me)
//此处就报错了:caught TypeError: Person is not a constructor
- 不能使用argument变量
let fnc = () => {
console.log(arguments)
}
fnc(1,2,3)
//提示：guments is not defined
- 箭头函数的简写
在只有一个形参的时候，小括号可以省略
let getTotal = n =>{
return n+1;
}
console.log(getTotal(1))
//返回值：2
方法体只有一句的时候，大括号可以省略，但是此时return语句必须省略，当前的语句即方法的返回值
let funNum = n => n*n;
console.log(funNum(9));
//结果是81
- 箭头函数的使用 (此处有疑问)
let mydiv = document.getElementById("mydiv");
// mydiv.addEventListener("click", function () {
// console.log("this对象", this)
// let ele = this;
// setTimeout(function () {
// console.log("this对象", this)
// // this.style.background = 'red'
// ele.style.background = 'red'
// }, 1000)
// })
mydiv.addEventListener("click", function () {
console.log("this对象", this)
setTimeout(() => {
console.log("this对象", this)
this.style.background = 'red'
}, 1000)
})
//这里的this 指的是<div id = 'mydiv'>对象
因为箭头函数自己没有this指针，所以他会去寻找外层作用域的this指针，即function的this指针，function的指针是指向的mydiv的对象
箭头函数适合于this无关的地方使用，例如定时器， 数组的回调
箭头函数不适合于this有关的回调，例如事件回调，对象的方法
对象中的箭头函数中的this的指针永远和最外层的对象的所处环境保持一致
7. 函数参数默认值
- ES6函数允许参数赋初始值
function add(a, b = 10, c = 12) {
return a + b + c;
}
console.log(add(1, 2, 3))//6
console.log(add(1, 2))//15
console.log(add(1, null, 2))//输出3
console.log(add(1, undefined, 2))//输出13
- 可以和解构赋值结合
function con({ username, password, addr = '我的地址' }) {
console.log(username, password, addr)
}
con({
username: 'myname',
password: 'mypwd',
age: 35
})
浙公网安备 33010602011771号