es6新特性：

1、向对象添加属性

克隆对象，同时向(浅)克隆对象添加附加属性，如下代码：

const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }userWithPass //=> { id: 10, name: 'Tom', password: 'Password!' }

2、合并对象

我们通过举个例子来说明是如何操作的：

const part1 = { id: 10, name: 'Howard Moon' }const part2 = { id: 11, password: 'Password!' }const user1 = { ...part1, ...part2 }//=> { id: 10, name: 'Howard Moon', password: 'Password!' }

const partial = { id: 100, name: 'Howard Moon' }const user = { ...partial, id: 100, password: 'Password!' }user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3、删除对象的属性

可以结合REST运算符使用析构来删除属性。

onst noPassword = ({ password, ...rest }) => restconst user = { id: 100, name: 'Howard Moon', password: 'Password!'}noPassword(user) //=> { id: 100, name: 'Howard moon' }

4、动态删除属性

可以利用对象属性名，然后removeProperty传递属性名称将属性删除：

const user1 = { id: 100, name: 'Howard Moon', password: 'Password!'}const removeProperty = prop => ({ [prop]: _, ...rest }) => rest// ---- ------// /// dynamic destructuringconst removePassword = removeProperty('password')const removeId = removeProperty('id')removePassword(user1) //=> { id: 100, name: 'Howard Moon' }removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5、调整对象属性的位置

有时属性不符合我们所需要的顺序。使用一些技巧，我们可以将属性推到列表的顶部，或者将它们移动到底部，例如：

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = object => ({ id: undefined, ...object })// -------------// /// move id to the first propertyorganize(user3)//=> { id: 300, password: 'Password!', name: 'Naboo' }

在这个例子里面将id已到了第一位，下面的例子是将password属性移动到最后一位

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { name: 'Naboo', id: 300, password: 'Password!' }

6、默认属性

const user2 = { id: 200, name: 'Vince Noir'}const user4 = { id: 400, name: 'Bollo', quotes: ["I've got a bad feeling about this..."]}const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes })setDefaults(user2)//=> { id: 200, name: 'Vince Noir', quotes: [] }setDefaults(user4)//=> {//=> id: 400,//=> name: 'Bollo',//=> quotes: ["I've got a bad feeling about this..."]//=> }

值得注意的是默认属性值仅在未包含在原始对象中时才会设置，从这个例子的结果来看，我们就知道怎样设置默认值了。或者你也可能需要这样写

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7、重命名对象的属性

在有些场景，比如我们可能需要修改对象属性的大小写，那么我们可以通过这样的方式来重命名

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renamed(user) //=> { id: 500, name: 'Bob Fossil' }//将大写ID改成了小写的

8、条件属性

这个有时候会非常实用，从名字来看，显示是通过条件来控制对象的属性

const user = { id: 100, name: 'Howard Moon' }const password = 'Password!'const userWithPassword = { ...user, id: 100, ...(password && { password })}userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

ECMAScript6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

我们来看看ES6都做了哪些扩展。

Let和const关键字

变量的解构赋值

字符串，数值的扩展

数组，对象的扩展

函数的扩展

for...of

先从let和const这两个关键字看起。

let关键字类似于var,但是他又和var有些不同，主要有两点，

避免了变量提升

只在块级作用域内起作用

来看一段代码

var a = 1;
(function () {
      alert(a);

var a = 2;
})()

这时候弹出的会是undefined，因为在浏览器执行的时候，会有变量提升，也就是会先声明变量a，这段代码实际上是这样的

Var a；

Alert (a);

Var a=2;

而我们使用let关键字，就不会有这个问题，

var a = 1;
(function(){
    alert(a);
    let a = 2;
})();

这个时候浏览器会报错，

因为变量没有提升，所以执行到alert(a)的时候a还是未定义状态，而且因为let只在块级作用域里起作用，所以外部的a也取不到。

然后我们再来看看const。const就是常量的意思，所以他就有了不可更改的属性，尝试给一个常量改变值是会报错的，

const Name='matt';
Name='john';

 

 

const和let一样，只在块级作用域内作用, 不存在变量提升，必须先定义后使用, 不可重复声明, 声明后必须赋值。

const Person={
    'name':'matt'
};
Person.name='john';
Person.age=12;
console.log(Person);

 

这段代码是ok的。怎么const又可以更改了，这就涉及到了传值赋值和传址赋值。你尝试去给Person赋一个新地址会报错的，比如Person={}。但是你只是更改它的属性的话是OK的。

ECMAScript6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

我们来看看ES6都做了哪些扩展。

Let和const关键字

变量的解构赋值

字符串，数值的扩展

数组，对象的扩展

函数的扩展

for...of

先从let和const这两个关键字看起。

let关键字类似于var,但是他又和var有些不同，主要有两点，

避免了变量提升

只在块级作用域内起作用

来看一段代码

var a = 1;
(function () {
      alert(a);

var a = 2;
})()

这时候弹出的会是undefined，因为在浏览器执行的时候，会有变量提升，也就是会先声明变量a，这段代码实际上是这样的

Var a；

Alert (a);

Var a=2;

而我们使用let关键字，就不会有这个问题，

var a = 1;
(function(){
    alert(a);
    let a = 2;
})();

这个时候浏览器会报错，

因为变量没有提升，所以执行到alert(a)的时候a还是未定义状态，而且因为let只在块级作用域里起作用，所以外部的a也取不到。

然后我们再来看看const。const就是常量的意思，所以他就有了不可更改的属性，尝试给一个常量改变值是会报错的，

const Name='matt';
Name='john';

 

const和let一样，只在块级作用域内作用, 不存在变量提升，必须先定义后使用, 不可重复声明, 声明后必须赋值。

const Person={
    'name':'matt'
};
Person.name='john';
Person.age=12;
console.log(Person);

这段代码是ok的。怎么const又可以更改了，这就涉及到了传值赋值和传址赋值。你尝试去给Person赋一个新地址会报错的，比如Person={}。但是你只是更改它的属性的话是OK的。

那什么是传址赋值呢？就好比，你预约了一个装修工（张师傅）到你家进行装修，你把你家的地址告诉了他，他顺着地址来到你家，按照你的要求，把你家的门弄成红色。

 仅仅过了两天，你觉得不好看，你又找了另一个装修工（王师傅），你也把地址告诉他，王师傅来到后也是按照你的要求，把门弄成了绿色。

 

 

最后，不管是张师傅还是王师傅，通过这个地址来到你家的时候，看到的门肯定是绿色的，因为最后一次修改是改成绿色。

写成代码就是

 varZhang = {"door":"red"};

   //次日，你把地址也告诉了王师傅
   var Wang = Zhang;

   //王师傅按照地址，去到后把门改成绿色
   Wang.door = "green";

   //最后不管是张师傅还是王师傅来到你家，看到门都是绿色的
   console.log(Wang);//结果：输出 {door: "green"}
   console.log(Zhang);//结果：输出 {door: "green"}

这就是传址赋值了。

再来看一个ES6的新特性，for…of。平时我们for循环的时候，是这样写的

Arr=[1,2,3,4,5,6]

for(vari=0;i

有了for…of,我们可以更清晰，牛逼得去遍历数组。

for(let itemof Arr)可以达到和上面代码同样得效果。

  我们列举一下for...of的优势：

写法比for循环简洁很多；

可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；

结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型。

比如

var arr= [1,2,3,4,5];
   for(let valueof arr){
        if(value ==3){
            //终止整个循环
           break;
        }
        console.log(value);
    }

这样我们就及时得跳出了循环

只会打印出来1和2.

也可以跳过当前循环，把break改成continue就可以了。我们也可以得到数字类型得索引，

 vararr = [1,2,3,4,5];
   for(let indexof arr.keys()){
        console.log(index);
    }

就可以打印出来0，1，2，3，4.

ES6有很多好玩的新属性，我们暂时说这么多。

常见问题：

1．       ES6的兼容问题?

现在浏览器对Es6的兼容已经很好了，但是肯定还有不兼容的浏览器，目前常见的兼容转换工具是Babel。

2. 什么是代码块？

 任何一对花括号（这玩意：{ }）中的语句都属于一个块，在花括号里面用let定义的所有变量在花括号外都是不可见的，我们称之为块级作用域。

3.什么是变量提升？

在加载程序之前，浏览器会做一些准备工作，变量、函数表达式——变量声明，默认赋值为undefined；

this——赋值；

函数声明——赋值；

这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。这就是变量提升

当下ES6有八大最为显著的特性，（在此举出的特性不是说指其他特性不好。）

一、默认参数（Default Parameters）

二、模板文本（Template Literals）

三、多行字符串（Multi-line Strings）

四、解构赋值（Destructuring Assignment）

五、增强的对象文本（Enhanced Object Literals）

六、箭头函数（Arrow Functions）

七、类（Classes）

八、模块（Modules）

ECMAScript6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

我们来看看ES6都做了哪些扩展。

Let和const关键字，变量的解构赋值，字符串，数值的扩展，数组，对象的扩展，函数的扩展，for...of，先从let和const这两个关键字看起。let关键字类似于var,但是他又和var有些不同，主要有两点，避免了变量提升，只在块级作用域内起作用

1、常用的es6新特性：let && const;let 命令也用于声明对象，但是作用域为局部;iterable 类型。为了统一集合类型，ES6 标准引入了新的 iterable 类型，Array、Map 和 Set 都属于 iterable 类型，具有 iterable 类型的集合可以通过新的for … of 循环来遍历。

2、es6 比 es5 增加了很多特殊的方法，如果你遇到了这些特殊的方法， 你就可以确定它是 es6。如果你的代码中没有引用这些特殊的方法，那我们就可以认为他是es5 的。所以前提你需要了解 es6 的语法才能做判断，高频使用的特性有箭头函数、解构赋值、let、const。

3、es5 的继承是通过原型或者是构造函数机制来实现，es6 用过 class 关键字定义类，里面有构造方法，类之间通过 extends 关键字实现，子类必须在 constructor 方法中调用 super 方法。

　　1. const 与 let 变量

　　let与const声明的变量解决了这种问题，因为他们是块级作用域， 在代码块(用{}表示)中使用let或const声明变量， 该变量会陷入暂时性死区直到该变量的声明被处理。

　　关于使用let与const规则:

　　使用let声明的变量：可以重新赋值,但是不能在同一作用域内重新声明

　　使用const声明的变量：必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.

　　2. 模板字符串

　　可以使用反引号(``)，键盘数字1左面的那个键。来定义一个字符串模板，在其中可以使用${}来存放一个变量或者表达式。

　　3. 字符串新增的一些方法

　　{

　　let str = 'imshusheng.com';

　　// 查看字符串中是否包含某些字符

　　console.log(str.includes('.'));

　　console.log(str.includes('shu'));

　　//查看字符串是否以某个字符串开头

　　console.log(str.startsWith('i'));

　　console.log(str.startsWith('im'));

　　//查看字符串是否以某个字符串结尾

　　console.log(str.endsWith('com'));

　　console.log(str.endsWith('m'));

　　//字符串重复3遍

　　console.log(str.repeat(3))

　　//如果字符串的长度不满20位，则在其后面补字符s

　　console.log(str.padEnd(20, 's'));

　　//如果字符串的长度不满20位，则在其前面补字符s

　　console.log(str.padStart(20, 's'));

　　}

　　4. 函数

　　4.1 默认参数

　　之前的js中， 我们是无法像python、php等语言一样给函数的形参指定默认参数的，我们一般这样解决问题。

　　function xxx(a, b) {

　　b = b || 100;

　　console.log(a);

　　console.log(b);

　　}

　　xxx(1)

　　在ES6中，我们可以这样做了：

　　function xxx(a, b = 100) {

　　console.log(a);

　　console.log(b);

　　}

　　xxx(1)