ES6学习笔记

let/var

事实上var的设计可以看成javaScript语言设计上的错误。但是这种错误多半不能修复和移除，以为需要向后兼容。

大概十年前，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字：let.

ES5中的var是没有块级作用域的（if/for）

ES6中的let是由块级作用域的（if/for）

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1. 不允许重复声明
2. 块儿级作用域
3. 不存在变量提升
4. 不影响作用域链

块级作用域

js中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关。

针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

var：

点击点击点击点击

控制台一直显示第4个按钮被点击var没有在（if，for）中没有块级作用域，用闭包可以解决问题
闭包解决：
ES5之前因为if和for都没有块级作用域的概念，所有在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。
ES6中，加入了let，let它是有if和for的块级作用域。

const的使用

const 关键字用来声明常量，const 声明有以下特点

1. 声明必须赋初始值
2. 标识符一般为大写
3. 不允许重复声明
4. 值不允许修改
5. 块儿级作用域

使用const修饰的标识符为常量，不可以再次赋值。

什么时候使用？

当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性

建议：

在ES6开发中，优先使用const，只有需要改变某一个标识符的时候才使用let

const的注意

const a = 20;
a = 30; //错误，不可以修改const name; //错误，const修饰的标识符必须赋值常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
const obj={name : 'why',age : 18,
}
obj = {}   //错误，不能修改
obj.name = 'what'  //可以修改	

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const lin = {name: '林志颖',tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
//复杂解构
let wangfei = {name: '王菲',age: 18,songs: ['红豆', '流年', '暧昧', '传奇'],history: [{name: '窦唯'},{name: '李亚鹏'},{name: '谢霆锋'}]
};
let {songs: [one, two, three], history: [first, second, third]} = 
wangfei;

ES6对象字面量增强写法

//1.属性的增强写法
const name = "why";
const age = 18;
//ES5
const obj = {name : name,age : age
}
//ES6
const obj = {name,age
}//2.函数的增强写法
//ES5
const obj = {run : function(){}
}
//ES6
const obj = {run(){}
}

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

1. 字符串中可以出现换行符
2. 可以使用 ${xxx} 形式输出变量

// 定义字符串
let str = `

沈腾
玛丽
魏翔
艾伦`;
// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;

rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替arguments

/**
* 作用与 arguments 类似
*/
function add(...args){console.log(args);
}
add(1,2,3,4,5);
/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);

spread 扩展运算符

/**
* 展开数组
*/ 
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let skillOne = {q: '致命打击',
};
let skillTwo = {w: '勇气'
};
let skillThree = {e: '审判'
};
let skillFour = {r: '德玛西亚正义'
};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！