原文博客地址,迎接进修交换:
点击预览
声明变量
能够运用let、const关键字声明变量,而不引荐运用var声明变量
var声明变量的题目:
- 能够屡次反复声明同一个变量名,存在掩盖的风险
- 在全局声明的变量会挂在全局对象上
- var不能形成块级作用域,比方:if、for局限外依旧能够运用var声明的变量
- var声明的变量具有变量提拔(hoisting)特征— 许可运用在前,声明在后
var存在许多题目,let横空出世。
let许可建立块级作用域,let声明的变量只在它地点的代码块内有用
{
let test = 10;
var foo = 1;
}
console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // 1
在if中运用:
if(false){
let test = 10; // 只在这个代码块内有用,形成了块级作用域
var foo = 1;
}
console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // undefined
在for中运用,i只能在轮回体内运用,轮回体外会报错:
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i); // ReferenceError: i is not defined
const声明变量同let声明变量一样,在块级作用域有用。差别的是,const用来声明常量,一旦声明赋值后,变量不能被从新赋值:
const test = 123;
test = 10;
console.log(test); // Uncaught TypeError: Assignment to constant variable.
如果赋的值是援用范例,那末能够经由过程变量来修正援用范例的值:
const test = {};
test.a = 1;
test.b = 2;
console.log(test); // {a: 1, b: 2}
总结let和const:
- 声明的变量不具有变量提拔(hoisting)特征
- 只在声明地点的块级作用域内有用
- 不许可反复声明
- 暂时性死区(TDZ)所声明的变量绑定在定义的地区,运用let敕令声明变量之前,该变量都是不可用的
- const 在声明时必需被赋值值
解构赋值
ES6 许可依据肯定情势,从数组和对象中提取值,对变量举行赋值,这被称为解构。经由过程这类体式格局能够防止在对象赋值时发生中心变量。
数组的组织赋值
function test(){
return [1,2,3,4];
}
var [a,b] = test();
console.log(a,b); // 1,2
test函数实行后,返回的是一个数组。取数组前两个值离别存在变量中,依据解构赋值的划定规矩,在左侧声明变量,放在中括号中,会把右边数组中的值一一对应赋值给左侧的变量。
对象的解构赋值
function test(){
return {a:1,b:2,c:3};
}
var {a,b} = test();
console.log(a,b); // 1,2
test函数实行后,返回的是一个对象。离别掏出对象中属性为a和b的值,依据解构赋值的划定规矩,在左侧声明变量,放在大括号中,变量名要和属性名保持一致。
函数参数的解构赋值
function test({a,b}){
console.log(a,b);
}
test({a:1,b:2,c:3})
在形参中定义变量,获得实参对象指定的属性。
默认值
能够给变量设置默认值和另声明一个变量
var {a:otherVar,b,d='默认值'} = {a:1,b:2,c:3};
console.log(d); // 默认值
console.log(otherVar); // 1
console.log(a); // Uncaught ReferenceError: a is not defined
运用=给变量赋一个默认值,如果右边对象中没有与之对应的属性,则按默认值来。
运用:从新声明一个变量,会把匹配到的a的值赋给新的变量otherVar,此时在表面运用时刻,不能运用a。
也能够连着一同运用:
var {a,b,d:foo='默认值'} = {a:1,b:2,c:3};
console.log(foo); // '默认值'
模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。
定义字符串
var str = `<li>
hello
</li>`
在模板字符串中拼写HTML组织,无需斟酌回车换行。
在模板字符串中要衬着某个变量的值,能够写在占位符${}中
var message = 'hello';
var str = `<li>
${message}
</li>`
打印出:
"<li>
hello
</li>"
${}中能够写入恣意的表达式(表达式是能够被求值的代码),比方:
var message = 'hello';
var str = `<li>
${message}
${1+1}
${1 > 2 ? true : false}
${
[1,2,3].map(function(item){
return item*2
})
}
</li>`
但不能在${}中写入if和for如许的语句。
箭头函数(Arrow Functions)
在ES6中,箭头函数就是函数的一种简写情势,许可运用“箭头”(=>)定义函数。
之前声明函数:
function foo(){
return 1;
}
革新为箭头函数:
let foo = () => 1;
上面运用“箭头”(=>)定义的函数,左侧的()包裹函数的形参,如果定义的函数没有形参或许多个形参,肯定要运用括号:
// 没有参数,要运用()
let test = () => 1;
// 多个参数,要运用()
let foo = (a,b) => a + b;
let bar = (a,b,c) => a + b + c;
如果形参只要一个,能够省略括号:
let foo = a => a;
“箭头”(=>)的右边是函数体代码,会在函数实行后作为函数的返回值,不须要显现的运用return
let foo = (a,b) => a + b;
console.log(foo(1,2)); // 3
以上的简写体式格局,使代码变得异常简约,不由得再来个例子:
let arr = [1,2,3];
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2,4,6]
有多行代码,能够写在一对{}中,手动挪用return返回值:
let foo = (a,b) => {
console.log(a)
console.log(b)
return a + b;
}
当要返回的是对象时,又不想手动挪用return,记得加上()保证是一个对象团体,而不被误以为是函数体:
var obj = () => ({a:1,b:2})
console.log(obj()); // {a:1,b:2}
箭头函数中this指向
箭头函数内的this,绑定定义时地点的作用域的this,并非在挪用时刻决议this的指向。
document.onclick = function (){
setTimeout(function (){
console.log(this); // 定时器实行的函数,在非严厉情势下this指向window
},1000)
}
如果要在setTimeout中运用点击时的元素,一般须要存一个变量。
document.onclick = function (){
var that = this;
setTimeout(function (){
console.log(that); // that变量存的就是触发事宜的元素
},1000)
}
如果运用箭头函数,统统讲变得异常简朴:
document.onclick = function (){
setTimeout( () => {
console.log(this);
},1000)
}
箭头函数是在事宜处置惩罚函数中定义,事宜处置惩罚函数this指向的是触发事宜的元素,所以这个this,也就是触发事宜的元素。
运用箭头函数的特征:
- 函数体内的this值,绑定定义时地点的作用域的this
- 不能够看成组织函数
- 不能够运用arguments对象
函数参数默认值
许可在形参声明时,写入默认值,申明这个值是可选的。
传统做法:
/*
参数:
a是必填项
b可选的
*/
function fn(a,b){
b = b || 10;
return a + b;
}
以上的体式格局是参数b如果没传入的话,值就为10;
如许写会有一个题目,如果传到函数的参数为0,则b的值依旧为10,准确的应该是0才对,由于||运算符左侧不建立,就返回右边的值,左侧为0则不建立,就返回10了。
ES6中,许可给函数参数默认值:
function fn(a,b=10){
return a + b;
}
在形参中直接写上b=10即可。
扩大运算符(spread)和Rest操作符
扩大运算符和Rest操作符都指的是…,依据上下文的语境差别,剖析体式格局也差别。
数组扩大运算符
将一个数组转为用逗号分开的参数序列。
var arr = [1,2,3,4];
console.log([...arr]); // [1,2,3,4]
把数组的每一项扩大到另一个数组中。
也能够从数组中找到最大值:
var arr = [1,2,3,4];
console.log(Math.max(...arr)); // 会顺次把数组的每一项传入到函数中
对象扩大运算符
扩大运算符(…)用于掏出参数对象的一切可遍历属性,拷贝到当前对象中,相当于浅复制。
var arr = {a:1,b:2,c:3};
console.log({...arr});
应用对象的属性是唯一的特征,背面定义的掩盖前面的属性,能够修正一个属性的值:
var arr = {a:1,b:2,c:3};
console.log({...arr,a:'修正了'});
Rest操作符
在运用解构赋值时,会把盈余的值,放在一个数组中:
var arr = [1,2,3,4];
var [a,...b] = arr;
console.log(a); // 1
console.log(b); // [2,3,4]
如果是对象,会把盈余的属性放在新对象中:
var o = {a:1,b:2,c:3};
var {a,...d} = o;
console.log(a); // 1
console.log(d); // {b:2,c:3}
在函数的形参中运用,会把盈余的形参都放在数组中:
function fn(a,...b){
console.log(a); // 1
console.log(b); // [2,3,4]
}
fn(1,2,3,4)
Rest操作符可取到arguments,把实参传入到一个数组中,而不是arguments类数组中:
function fn(...b){
console.log(b); // [1,2,3,4]
}
fn(1,2,3,4)
注重,Rest操作符只能写在参数的末了,不能写在开首或中心,不然会报语法错误:
function fn(a,...b,c){
console.log(a); //
console.log(b);
console.log(c)
}
fn(1,2,3,4); // Uncaught SyntaxError: Rest parameter must be last formal parameter
对象的简约示意法
变量名和属性名雷同,可直接写入变量名:
var a = 10;
var b = 20;
var o = {
a,
b
}
console.log(o); // {a:10,b:20}
定义函数可省略function关键字
var o = {
fn(){}
}
相当于:
var o = {
fn: function () {}
}
以上属于个人明白,若有误差迎接斧正进修,感谢。