前言
以前和大家分享的都是JavaScript的基础,今天就和大家分享的是JavaScript新增的语法ECMAScript,简称es6。
ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现。(前者是后者的规格,后者是前者的实现。但通常两者是可互换的。)
let关键字
-
es6新增了let关键词,用来声明变量。let声明一个块级作用域的变量,而var声明一个函数作用域的变量。简单来说,let声明的变量只作用在它所在的花括号内。let 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用 在 { } 之外,是不能被调用执行的 { } 包括 if 、switch、for、forEach、for...in、while、function
例子如下:首先用var声明的 i 变量,我们可以看到,for循环结束以后,我们仍然可以获取变量i的值。
function fun1() {
var sum = 0;
for (var i = 0; i < 100; i++) {
sum += i;
}
console.log(i) //输出为100
}
fun1();
下面用let,声明一个块级作用域的变量。一对花括号的内部范围即为一个块级作用域。 i的值为undefined,我们获取不到for循环内部的i的值。let有效!
function fun2() {
var sum = 0;
for (let i = 0; i < 100; i++) {
sum += i;
}
console.log(i); //输出为Uncaught ReferenceError: i is not defined...
}
fun2();
-
let 定义的变量,不会进行预解析
// var 的情况
console.log(fun1); // 输出undefined
var fun1 = 6;
// let 的情况
console.log(fun2); // 报错Uncaught ReferenceError...
let fun2= 6;
-
不允许重复声明
let不允许在相同作用域内,重复声明同一个变量,一个变量名称只能定义一次。
-
let 在不同 { } 中,是不同作用域中定义let 变量。此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重复
2.const关键字
在JavaScript中往往管const定义的变量,称为常量
(1).const定义的变量,一旦赋值,不能改变。
例子: 对const定义的变量,重复赋值,会报错
const str = 100;
str = 200;// Uncaught TypeError: Assignment to constant variable.
(2).定义变量的名称,不能重复,否则会报错
const str = 100;
const str = '';//Uncaught SyntaxError: Identifier 'strstr' has already been declared
(3). const定义在{ }中,不能在{ }外调用
if (true) {
const sss = 'sss';
console.log(sss);//sss
}
console.log(sss);//Uncaught ReferenceError: sss is not defined...
(4). const中存储的是引用数据类型的地址,只要地址不改变,可以改变数组,对象中的单元存储的数据
对于数组:给数组中第1个单元,修改存储的数据
const arr 中存储的数组的地址是不改变的,可以执行的
const arr = [1, 2, 3, 4, 5, 6];
arr[0] = '北京';
console.log(arr); //["北京", 2, 3, 4, 5, 6]
对于对象;修改对象中,单元存储的数据,
不是修改 obj中存储的内存地址,是可以执行的
const obj = {
name: '张三'
};
obj.name = '李四';
console.log(obj);//{name: "李四"}
对let和const的小总结:
let 多用于定义 基本数据类型 以及 循环中
const 多用于定义 引用数据类型
3.箭头函数
所谓的箭头函数,是函数的另一种语法形式。
const fun = function(){} 普通函数
const fun = ()=>{} 箭头函数
将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
普通函数
oDiv.addEventListener('click' , function(){
console.log('我是div标签')
})
箭头函数
oDiv.addEventListener('click' , ()=>{
console.log('我是div标签');
})
普通函数(只有一个参数)
oDiv.addEventListener('click' , function(e){
console.log(e);
})
箭头函数(只有一个参数,可以不写(),直接定义一个参数)
oDiv.addEventListener('click' , e=>{
console.log(e);
})
如果执行体中只有一行代码,可以不写{}
const fun = e=>{console.log(e)} 普通箭头函数
const fun = e=> console.log(e) 不写{}箭头函数
4.箭头函数中的this指向
普通函数的this指向
声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数
this都是指向的调用函数时,之前定义的内容
1,声明式 --- 指向的是window
function fun1(){
console.log(this);
}
fun1();
2,匿名函数/赋值式 --- 指向的是window
const fun2 = function(){
console.log(this);
}
fun2();
3,定义在对象中的函数 --- 指向的是对象
const obj = {
fun3 : function(){
console.log(this);
}
}
obj.fun3();
4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
<div>1234</div>
const oDiv = document.querySelector('div');
oDiv.addEventListener('click', function() {
console.log(this);//<div>1234</div>
})
2,箭头函数的this指向
如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
如果父级程序没有this指向(数组,对象....),this指向的是window
//this指向window
oDiv.addEventListener('click', () => {
console.log(this);
})
箭头函数的this,是父级程序,forEach()的this,是window
<ul>
<li>1</li>
<li>2</li>
</ul>
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item, key) {
console.log(this); // 输出的是forEach的函数的this指向
item.addEventListener('click', () => {
console.log(key, this);//key是li的索引下标 Window
})
})
箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
ok,这可累死我了,希望可以帮助你呀!!!