let和const命令
在es6中可以使用let声明变量,用法类似var
块级作用域
let声明的变量,只在let命令所在的代码块内有效
{
let a = 10;
var b = 10;
}
console.log(a); //a is not defined
console.log(b); //10
不存在变量提升
let所声明的变量一定在声明后使用,否则报错
var命令会发生变量提升现象,即变量可以在声明之前使用,值为undefined。
//var的情况
console.log(a);//输出undefined
var a = 30;
//let的情况
console.log(a);// 报错ReferenceError
let a = 30;
不允许重复声明
let a = 10;
let a = 20;
console.log(a); //报错
function func(a) {
let a; // 报错
}
块级作用域解决循环计数问题
var arr = []
for(var i = 0; i < 10; i++){
arr[i] = function(){
return i;
}
}
console.log(arr[5]());//10
变量i只用来控制循环,但是循环结束后,它并没有消失,用于变量提升,泄露成了全局变量。
//解决方式一:使用闭包
var arr = []
for(var i = 0; i < 10; i++){
arr[i] = (function(n){
return function(){
return n;
}
})(i)
}
//解决方式二:使用let声明i
var arr = []
for(let i = 0; i < 10; i++){
arr[i] = function () {
return i;
}
}
const基本用法-声明只读的常量
const只声明不赋值,就会报错。
- 块级作用域
- 暂时性死区
- 不可重复声明
const a = 10;
a = 20;//报错
const b; //报错
在默认情况下用const,而只有你在知道变量值需要被修改的情况下使用let
模板字符串
通过模板字符串识别js代码,解决传统的 JavaScript 语言输出繁琐的问题
let htmlTel = `<ul>
<li>
<p>id:${id}</p>
<p>name:${name}</p>
</li>
</ul>`;
解构赋值
解构赋值是对赋值运算符的一种扩展。它通常针对数组和对象进行操作。
数组解构
ES6允许我们这样写:
let [a,b,c] = [1,2,3];
/*相当于
let a = 1;
let b = 2;
let c = 3;
*/
如果解构不成功,变量的值就等于undefined
let [foo] = [];
let [bar, foo] = [1];
//foo的值都会等于undefined
对象解构
let node = {
type:'text',
name:'hhh'
}
let {type,name} = node;
console.log(type,name)//text hhh
let obj = {
a:{
name:'张三'
},
b:[],
c:'hello world'
}
//可忽略 忽略b,c属性
let {a} = obj;
//剩余运算符 使用此法将其它属性展开到一个对象中存储
let {a,...res} = obj;
console.log(a,res);
默认值
let {a,b = 10} = {a:20};
用途
交换变量的值
let x = 1;
let y = 2;
let [x,y] = [y,x];
从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
提取JSON数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
//对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者
console.log(id, status, number);
// 42, "OK", [867, 5309]
函数的扩展
带参数默认值的函数
ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法
function log(x,y){
y = y || 'world';
console.log(x,y);
}
log('hello');//hello world
log('hello','china') //hello china
log('hello','')//hello world
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
默认的表达式可以是一个函数
function getVal(val) {
return val + 5;
}
function add2(a, b = getVal(5)) {
return a + b;
}
console.log(add2(10));
rest参数
ES6 引入 rest 参数(形式为...变量名
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
上面代码的add
函数是一个求和函数,利用 rest 参数,可以向该函数传入任意数目的参数。
***箭头函数 ***
ES6允许使用箭头=>
定义函数
let f = v=>v;
//等同于
let f = function(v){
return v;
}
// 有一个参数
let add = value => value;
// 有两个参数
let add = (value,value2) => value + value2;
let add = (value1,value2)=>{
return value1 + value2;
}
// 无参数
let fn = () => "hello world";
let doThing = () => {
}
//如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
let getId = id => ({id: id,name: 'mjj'}) //注意
let obj = getId(1);
使用注意点
-
没有this绑定
let PageHandler = { id:123, init:function(){ document.addEventListener('click',function(event) { this.doSomeThings(event.type); },false); }, doSomeThings:function(type){ console.log(`事件类型:${type},当前id:${this.id}`); } } PageHandler.init(); //解决this指向问题 let PageHandler = { id: 123, init: function () { // 使用bind来改变内部函数this的指向 document.addEventListener('click', function (event) { this.doSomeThings(event.type); }.bind(this), false); }, doSomeThings: function (type) { console.log(`事件类型:${type},当前id:${this.id}`); } } PageHandler.init(); let PageHandler = { id: 123, init: function () { // 箭头函数没有this的指向,箭头函数内部的this值只能通过查找作用域链来确定 // 如果箭头函数被一个非箭头函数所包括,那么this的值与该函数的所属对象相等,否则 则是全局的window对象 document.addEventListener('click', (event) => { console.log(this); this.doSomeThings(event.type); }, false); }, doSomeThings: function (type) { console.log(`事件类型:${type},当前id:${this.id}`); } } PageHandler.init();
-
箭头函数中没有arguments对象
var getVal = (a,b) => { console.log(arguments); return a + b; } console.log(getVal(1,2)); //arguments is not defined
-
箭头函数不能使用new关键字来实例化对象
let Person = ()=>{} let p1 = new Person();// Person is not a constructor