es6有哪些新增跟心得

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报错