目录
一、变量提升
var关键字定义变量会有变量提升的问题
//这里a未定义,不报错有打印结果undefined
console.log(a); // undefined
var a = 10;
//打印fn调用也存在变量提升
function fn() {
var a = 3;
console.log("fn().a="+a)
}
console.log(fn())//undefined
二、let定义变量
let定义变量的特点
1. 暂时性死区
在let声明的前面访问不到(暂时性死区)(必须声明之后再使用)
console.log(a);//Uncaught ReferenceError: a is not defined
let a = 10;
2. 不可以重复声明
let a = 10;
let a = 1;//Uncaught SyntaxError: Identifier 'a' has already been declared
3. 块级作用域
(1)var域let声明变量的作用域在for循环中不相同
for (var i = 0; i < 3; i++) {
console.log(i);//0,1,2
}
console.log(i);//3
//for本身是一个父的作用域,而for里面是一个子的作用域
for (let i = 0; i < 3; i++) {
let i = 10;
console.log(i);//10 10 10
}
console.log(i);// Uncaught ReferenceError: i is not defined
(2)let在两个大括号之间就是一个作用域
{
// let在两个大括号之间就是一个作用域
let a = 10;
let b = 4;
console.log(a, b);//10,4
}
let在for循环中的使用
点击每一个li显示打印结果
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
添加点击事件
var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function() {
console.log(i);//点击任何li都会打印5
}
}
上面点击任何li都会打印5,因为for循环一次性执行到5了。
解决方案一:
采用自定义属性,给每一个li添加index属性
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function() {
console.log(this.index);//点击打印相应的索引值
}
}
解决方案二:
闭包实现变量的缓存
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = (function(i) {
return function() {//闭包
console.log(i);
}
})(i);
}
解决方案三:
- let声明块级作用域
for (let i = 0; i < aLi.length; i++) {
aLi[i].onclick = function() {
console.log(i);
}
}
三、const声明变量
1、用于声明常量:
- 一经声明,后面不再修改的变量
const userName = '张三';
userName = '李四';
//Uncaught TypeError: Assignment to constant variable.
2、声明引用类型
声明引用类型变量,只要不更改地址,改属性是允许的。
下面修改地址,报错:分配给常量变量
const obj = { a: 1 };
obj = {a: 10}//Uncaught TypeError: Assignment to constant variable.
修改属性是没问题的
const obj = { a: 1 };
obj.a = 10;
console.log(obj.a);//10
3、声明赋值
声明时,必须赋值否则报错。
//Uncaught SyntaxError: Missing initializer in const declaration
const USERNAME ;
四、Rest参数
(1)Rest就是为解决传入的参数数量不一定, rest parameter(Rest 参数) 本身就是数组,数组的相关的方法都可以用。
注意:
(2)ES6推荐 使用rest参数。不要使用arguments
function fn(...arr) {
console.log(arr); //(5) [1, 2, 3, 4, 5]
}
console.log(fn(1, 2, 3, 4, 5));//undefined
- arguments参数
function fn() {
var num = 0;
// 类数组,但不是数组
console.log(arguments);
// Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
for (var i = 0; i < arguments.length; i++) {
num += arguments[i];
}
return num;
}
console.log(fn(1, 2, 3, 4, 5));//15
五、箭头函数
阮一锋 函数扩展 5. 箭头函数 http://es6.ruanyifeng.com/#docs/function
5.1、定义
- 箭头函数相当于匿名函数,并且简化了函数定义。
- 并且没有自己的this,arguments,super或 new.target。
- 这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
格式
() => {}
使用
下面两种定义方式效果相同。
let fn = function() {};
console.log(fn);//ƒ () {}
let fn = () => {};
console.log(fn);//() => {}
5.2、带参数的箭头函数
下面两种写法一样
let fn = (a) => {
return a * 3;
}
console.log(fn(3));//9
let fn = a => a * 3;
console.log(fn(5));//15
5.3、返回值为对象的箭头函数
let fn = () => ({
a: 1,
b: 2//设置默认值
})
console.log(fn());//{a: 1, b: 2}
let fn = (a, b) => {
return {
a:a,
b:b
}
}
console.log(fn(12,14));//{a: 12, b: 14}
5.4、使用箭头函数进行数组排序
思想:才用arr.sort(arr)函数进行排序。
var arr = [43, 5, 7, 43, 28, 986, 4, 1];
arr.sort(function(a, b) {
return a - b;
});
arr.sort((a, b) => a - b);
console.log(arr);//(8) [1, 4, 5, 7, 28, 43, 43, 986]
5.5、箭头函数中的this
function fn() {
console.log(this); // obj
setTimeout(function() {
console.log(this); // window
}, 1000);
setTimeout(() => {
console.log(this); // obj
}, 1000);
}
var obj = {
fn: fn
}
obj.fn();
5.6、箭头函数的参数
不能使用arguments,只能使用rest。
let fn = (...arr) => {
//console.log(arguments);
//Uncaught ReferenceError: arguments is not defined
console.log(arr);//(3) [1, 2, 3]
};
fn(1, 2, 3);
5.7、箭头函数赋值不能用new
箭头函数赋值对象不能用new,会报:Uncaught TypeError: Person is not a constructor。
let Person = function (){};//Person {}
//不能用new关键字,new声明会报错
//var Person = () => {};
//Uncaught TypeError: Person is not a constructor
console.log(new Person());
5.8、箭头函数和普通函数的区别
重点注意的问题
主要区别在this指向问题
- 普通函数的this: 指向调用它的那个对象,例如 obj.func ,那么func中的this就是obj
- 箭头函数
2.1 不能作为构造函数。
2.2 不能使用new。
2.3 没有this,arguments箭头函数
2.4 箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向 ,如 call() , bind() , apply()(或者说箭头函数中的this指向的是定义时的this,而不是执行时的this。)
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
console.log(this.name); // My Object
return function(){
return this.name; // The Window
};
},
b: () => {
return this.name; // the window
},
c: function() {
return () => {
return this.name; //My Object
}
}
}
六、解构赋值
解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。
let a = 1;
let b = 2;
let c = 3;
//上面赋值和下面赋值效果相同
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);//1 2 3
//下面的数组元素未赋值
let [y] = [];
console.log(y); // undefined
// 数组元素给默认初始值
let [y = 3] = [];
console.log(y); // 3
let [y = 3] = [5];
console.log(y); // 5
//官方教程
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}
6.1、注意:
特殊的对象赋值。
let {a: b} = {a: '1'}
console.log(b);//1
console.log(a)//Uncaught ReferenceError: a is not defined
let {random, floor} = Math;
console.log(random());//0.1054632111171554
console.log(floor(12.4));//12
6.2、对象内函数赋值
let U = {
add: function() {
console.log('add');
},
fn: function() {
console.log('fn');
}
};
U.add();//add
U.fn();//fn
//赋值
let {add, fn} = U;
add();//add
fn();//fn
6.3、对象解构赋值rest
let o = {a: 1, b: 2, c: 3, d: 4, f: 7};
let {b, ...pzh} = o;
console.log(b, pzh);//2 {a: 1, c: 3, d: 4, f: 7}