es6有哪些新增跟心得
1、块及作用域 for循环 块指的就是用{}包裹的
2、定义类的语法
3、基本数据类型 boolean string number
4、引用数据类型 数组Array
5、解构赋值 左右结构必须一样,使用左边定义的值,快速的取出数据中对应的数 据值
6、set和map数据结构 set()是给属性赋值的,get()是取得属性值的 被设置和存取的 属性一般是私有 主要是起到封装的作用,不允许直接对属性 操作 set()和get()不一定同时存在,
7、生成器和遍历器 for i in range(5) for i in [0, 1, 2, 3, 4]
8、扩展运算符 …分别表示/
const 与 let 变量
使用var带来的麻烦:
function getClothing(isCold) {
if (isCold) {
var freezing = 'Grab a jacket!';
} else {
var hot = 'It's a shorts kind of day.';
console.log(freezing);
}
}
运行getClothing(false)后输出的是undefined,这是因为执行function函数之前,所有变量都会被提升, 提升到函数作用域顶部.
let与const声明的变量解决了这种问题,因为他们是块级作用域, 在代码块(用{}表示)中使用let或const声明变量, 该变量会陷入暂时性死区直到该变量的声明被处理.
function getClothing(isCold) {
if (isCold) {
const freezing = 'Grab a jacket!';
} else {
const hot = 'It's a shorts kind of day.';
console.log(freezing);
}
}
运行getClothing(false)后输出的是ReferenceError: freezing is not defined,因为 freezing 没有在 else 语句、函数作用域或全局作用域内声明,所以抛出 ReferenceError。
关于使用let与const规则:
使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.
解构
在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量
解构数组的值:
const point = [10, 25, -34];
const [x, y, z] = point;
console.log(x, y, z);
Prints: 10 25 -34
[]表示被解构的数组, x,y,z表示要将数组中的值存储在其中的变量, 在解构数组是, 还可以忽略值, 例如const[x,z]=point,忽略y坐标.
for…of循环
for…of循环是最新添加到 JavaScript 循环系列中的循环。
它结合了其兄弟循环形式 for 循环和 for…in 循环的优势,可以循环任何可迭代(也就是遵守可迭代协议)类型的数据。默认情况下,包含以下数据类型:String、Array、Map 和 Set,注意不包含 Object 数据类型(即 {})。默认情况下,对象不可迭代。
for循环
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < digits.length; i++) {
console.log(digits[i]);
}
for 循环的最大缺点是需要跟踪计数器和退出条件。
虽然 for 循环在循环数组时的确具有优势,但是某些数据结构不是数组,因此并非始终适合使用 loop 循环。
for…in循环
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index in digits) {
console.log(digits[index]);
}
依然需要使用 index 来访问数组的值
当你需要向数组中添加额外的方法(或另一个对象)时,for…in 循环会带来很大的麻烦。因为 for…in 循环循环访问所有可枚举的属性,意味着如果向数组的原型中添加任何其他属性,这些属性也会出现在循环中。
Array.prototype.decimalfy = function() {
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toFixed(2);
}
};
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index in digits) {
console.log(digits[index]);
}
展开运算符
展开运算符(用三个连续的点 (…) 表示)是 ES6 中的新概念,使你能够将字面量对象展开为多个元素
const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"];
console.log(...books);
Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities
展开运算符的一个用途是结合数组
ES6箭头函数
ES6之前,使用普通函数把其中每个名字转换为大写形式:
const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(function(name) {
return name.toUpperCase();
});
箭头函数表示:
const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
name => name.toUpperCase()
);
Symbol类型
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)
Map结构
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
const map = new Map();
map.set({ p: 'hello world'}, 1)
map.set('hello', [1,2,3])
console.log(map.size)
Promise
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
let promise = new Promise(function(resolve, reject) {
setTimeout(()=>{
if(false) {
resolve('ok')
} else {
reject({err: -1, msg: '错误发生了'})
}
}, 1000)
})
promise.then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log('总会执行')
})
Set结构
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。
使用Set结构,实现数组去重
let arr1 = [1,2,2,2,3,4]
let arr2 = [...new Set(arr1)]
console.log(arr2)
扩展运算符
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
数组的操作、合并
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2, 7, 8, 9, 10];
console.log(arr)
var 声明的变量,没有“块级作用域”的限制;
let / const 声明的变量,具有“块级作用域”
{
var a = 1;
let b = 2;
const c = 3;
let fn = function() {
console.log(4)
}
}
console.log(a); // 1
console.log(b); // 报错ReferenceError,undefined
console.log(c); // 报错ReferenceError,undefined
fn(); // ReferenceError: fn is not defined
var 声明的变量存在“变量提升”,let / const没有。
var tmp = new Date();
function fn() {
console.log(tmp);
if (false) {
// var tmp 变量提升
var tmp = 'hello world';
}
}
fn()
const 声明的是常量,不能被修改。
const c = 1;
c = 2; // TypeError报错