ES6 个人易忘点1.声明变量 var let const 记住作用域的区别和const不可改变这两点即可 2. 解构赋

1.声明变量

var let const

记住作用域的区别和const不可改变这两点即可

2. 解构赋值

数组解构

letl [a,b,c]=[1,2,3];
let [a,[b,c],d]=[1,[2,3],4];

等号左边和等号右边的形式要统一，如果不统一解构将失败

2.解构的默认值

let [a,foo = true] =[1]; 
console.log(foo); //控制台打印出true

对应位置预先赋值占位

对象解构

let {foo,bar} = {foo:'JS',bar:'CSS'};
console.log(foo+bar); //控制台打印出了“JSCSS”

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

如果在解构之前就定义了变量，这时候再解构会出现问题,解决方法需要在语句中加括号

let foo; 
({foo} ={foo:'JSPang'});

字符串解构

const [a,b]="JS"; 
console.log(a); 
console.log(b);

类似数组

3.对象扩展运算符

对象的解构赋值

对象的解构赋值是把原对象里面的值浅拷贝到新的对象之中

let {a,b,...z} = {a:1,b:2,c:3,d:4};
console.log("a",a,"b",b,"z",z); //a 1 b 2 z {c: 3, d: 4}

（1）对象的解构赋值的拷贝其实是浅拷贝

（2）对象解构赋值的右边必须是对象，否则会报错

（3）解构赋值必须是最后一个参数，否则会报语法错误

（4）带...的解构赋值不会拷贝继承自原型对象的属性

拷贝

取出参数对象的所有可遍历属性，拷贝到当前对象中。

let o={a:1,b:2} 
let o2 = {...o} 
o2 //{a:1,b:2}

3.合并对象

let xy = {...x,...y};
//等同于
let xy = Object.assign({},x,y);

（1）后面的强度比前面的强度强，所以如果有相同属性，在合并后的对象中，后面的会覆盖前面的（2）扩展运算符后边可以跟表达式

4.字符串模板

let name = Tom
let blog = `非常高兴你能看到这篇文章，我是${name}。`;

字符串模板支持HTML标签和运算符其他新函数可以查询这篇教程

5.数组操作

静态操作方法

（1）Array.isArray

作用：判断某个数据是否是数组返回布尔值

(2）Array.from

Array.from方法用于将伪数组（表现像数组但是没有数组的方法）转为真正的数组(类数组对象比如arguments)

动态方法

常用的数组的操作有 map、filter、forEach、some、every、includs、find、findIndex 、reduce

（1）forEach

作用：用于遍历数组，对数组中的每一个元素进行某个操作。没有返回值，也不需要返回值。

语法：

   [].forEach(function(value，index，arr){

  })

举例：

var arr=[1,2,3,4,'html','css','js'];
//箭头函数的写法
arr.forEach(el=>console.log(el+1));
//结果:
//2,3,4,5,'html1','css1','js1'

（2）forEach

作用：创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果。

语法：

   [].map(function(value，index，arr){

  })

举例：

var list = [1,2,3,4];
var newList = list.map(ele =>{
    return ele*2
});
console.log(list,newList) // [1,2,3,4] [2,4,6,8]

注意:

在回调函数中，一定要使用return返回
map方法调用之后，会返回一个全新的数组，原来的数组不变。

(3) filter

作用：就是用于进行过滤，筛选出符合条件的元素，组成一个新的数组返回。

格式：

   [].filter(function(value，index，arr){

  })

var list = [1,2,3,4];
var newList = list.filter(ele => ele > 2);
console.log(list,newList) // [1,2,3,4] [3,4]
</script>

(4)find/findIndex

find

找出第一个符合条件的数组成员。依次执行该回调函数，找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回 undefined。

    var ele = [1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
    }) 
    console.log(ele) // 10

findIndex

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的下标，如果所有成员都不符合条件，则返回-1。

<script>
    [1, 5, 10, 15].findIndex(function(value, index, arr) {
      return value > 9;
    }) // 2
</script>

（5）every与some

every()与some()方法都是JS中数组的迭代方法。

every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。

some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

（6）includes

includes 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

（7）reduce

作用：将前一项和后一项的值进行运算，返回累积的结果

语法

[].reduce(function(prev，next){…})

其中，prev表示前一项，next表示后一项。

运算规则：

默认情况下，会把数组的第一个元素作为prev的初始值。

每循环一次，把累积的结果赋给prev，next就变为下一个数组元素

var arr3 = [10,22,23,25,50];

  const total = arr3.reduce(function(pre,next){
        console.log(pre+"----"+next);
        return pre+next;
    })
    console.log(total);

6.函数

1.函数默认值

// es6 写法
//函数的默认值一般写在最右边
function log(x ,y="world"){
    console.log(x,y);
}
log('hello'); //hello  world

2.箭头函数

箭头函数 ES6 允许使用“箭头”（=>）定义函数。箭头函数实际还是函数

var add =(a,b=1) => a+b;
console.log(add(1));

3.{}的使用

在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上{}括号。

var add =(a,b=1) => {
    console.log('jspang')
    return a+b;
};
console.log(add(1));

箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。
箭头函数没有this

7.对象

1.对象赋值

ES6允许把声明的变量直接赋值给对象

let name="js";
let skill= 'web';
var obj= {name,skill};
console.log(obj);  //Object {name: "js", skill: "web"}

2.ES6的新变量命名方式

let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill);

3.自定义对象方法

对象方法就是把兑现中的属性，用匿名函数的形式编程方法。这个在以前就有应用，我们这里只是简单的复习一下。

var obj={
    add:function(a,b){
        return a+b;
    }
}
console.log(obj.add(1,2));  //3

4.对象比较

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

===为同值相等，Object.is()为严格相等。

5.Object.assign( )合并对象

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。Object.assign有返回值返回值是目标对象(target)

  const target = { a: 1 };
    const source1 = { b: 2 };
    const source2 = { c: 3 };

    Object.assign(target, source1, source2);
    console.log(target) // {a:1, b:2, c:3}

浅拷贝 Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

  const obj1 = {a: {b: 1}};
    const obj2 = Object.assign({}, obj1);

    obj1.a.b = 2;
    obj2.a.b // 2

ES6 个人易忘点