ES6基础知识

一、声明变量

var a = 1; // var 是variable的简写，可以理解成变量的意思。 -----> 全局声明，都可以拿到。
let b = 2; // let 在英文中是“让”的意思，也可以理解为一种声明的意思。 -----> 开启部分作用域，只在当前作用域有效
const c = 3; //const 在英文中也是常量的意思。 ----->常量可以简单理解为不变的量。声明之后不可改变

二、变量的解构赋值

1、定义

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

2、数组的解构赋值

  let [a,b,c]=[1,2,3]
    // 等价于下面的单独赋值
    // let a = 1;
    // let b = 2;
    // let c = 3;
    console.log(a,b,c) // 1 2 3

3、 对象的解构赋值

let {foo,bar} = {foo:'小花',bar:'大花'};
console.log(foo+bar); //大花小花

let foo;
// {foo} = {foo:'小花'}; 当提前定义过变量时，解构会报错，需要使用()包裹
({foo} = {foo:'小花'});
console.log(foo); //小花

4、字符串的解构

const [a,b,c,d,e,f]="这是一个测试";
console.log(a);//这
console.log(b);//是
console.log(c);//一
console.log(d);//个
console.log(e);//测
console.log(f);//试

5、解构的默认值

   let [a,b="小花"]=['大花']
    // 此时 对a进行了赋值， b未赋值，则给默认值'小花'
    console.log(a + b); // 大花小花
    
    // 需要注意的是undefined和null的区别：

    let [a,b="小花"]=['大花',undefined];
    console.log(a + b); // 大花小花


    let [a,b="小花"]=['大花',null];
    console.log( a + b); //大花null

注意：
1、数组模式和赋值模式统一; 即 等号左边和等号右边的形式要统一，如果等号两边形式不一样，很可能获得undefined或者直接报错。
2、需要注意的是undefined和null的区别

三、扩展运算符和rest运算符

1、对象扩展运算符（…）

  //可以传入多个值，并且就算方法中引用多了也不会报错
    function xiaohua(...arg){
        console.log(arg[0]);
        console.log(arg[1]);
        console.log(arg[2]);
        console.log(arg[3]);
    
    }
    xiaohua(1,2,3); // 1 2 3 undefined

数组赋值，将arr1的值赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。

    let arr1 = ['www', 'baidu', 'com'];
    let arr2 = arr1;
    console.log(arr2);//["www", "baidu", "com"]
    arr2.push('xiaohua');
    console.log(arr1, 'arr1');//["www", "baidu", "com", "xiaohua"] "arr1"
    console.log(arr2, 'arr2');//["www", "baidu", "com", "xiaohua"] "arr2"

利用对象扩展运算符简单的解决这个问题，此时arr1的值没有改变

    let arr1 = ['www', 'baidu', 'com'];
    let arr2 = [...arr1];
    console.log(arr2); //["www", "baidu", "com"]
    arr2.push('xiaohua');
    console.log(arr1, 'arr1'); //["www", "baidu", "com"] "arr1"
    console.log(arr2, 'arr2'); //["www", "baidu", "com", "xiaohua"] "arr2"

2、rest运算符

    function ceshi(first,...arg){
        console.log(arg);
    }
    ceshi('no','i','l','o','v','e','y','o','u');//["i", "l", "o", "v", "e", "y", "o", "u"]
    // rest运算符 可以用 ... 表示，运算符把逗号隔开的值序列组合成一个数组

其中for循环可以用 for...of；for…of的循环可以避免我们开拓内存空间，增加代码运行效率。 结果如下图：

    function ceshi(first,...arg){
        for(let val of arg){
            console.log(val);
        }
    }
    ceshi('no','i','l','o','v','e','y','o','u');

image.png

四、字符串模板

1、字符串拼接

支持html标签；支持运算符;结果如下：

    let a = '大花';
    let c = '小花';
    let b = `${a}不喜欢${c}</br>${c}喜欢${a}</br>`;
    let d = 1;
    let e = 2;
    let num = `${d+e}`
    document.write(b);
    document.write(num);

image.png

2、新增的方法

1、indexOf('a') --------- 判断字符串是否存在'a',不存在返回 -1，存在返回索引
2、includes('前端') -------- 判断字符串是否存在'前端',存在返回 true，不是返回 false
3、startsWith(':') ---------- 判断字符串是否以':'开头, 是返回 true，不是返回 false
4、endsWith(':') ----------- 判断字符串是否以':'结尾, 是返回 true, 不是返回 false
5、repeat() ---------------- 重复字符

    let str = ':一个不爱吃饭的前端不是一个好厨子?'
    console.log(str.indexOf('a'));// -1
    console.log(str.includes('前端'));//true
    console.log(str.startsWith(':'));//true
    console.log(str.endsWith(':'));//false
    console.log('吃饭|'.repeat(3));//吃饭|吃饭|吃饭|

五、ES6数字操作

• 1、可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false
• 2、NaN是特殊的非数字，可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true。
• 3、判断是否为整数Number.isInteger(xx)
• 4、整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
• 5、最大安全整数：Number.MAX_SAFE_INTEGER；最小安全整数 ： Number.MIN_SAFE_INTEGER
• 6、安全整数判断isSafeInteger( )

六、新增的数组知识

1、Array.from()：将json字符串转化为数组

    let json = {
        '0': '我',
        '1': '好',
        '2': '累啊',
        length: 3
    }

    let arr = Array.from(json);
    console.log(arr) //["我", "好", "累啊"]

2、Array.of(): 它负责把一堆文本或者变量转换成数组。

    let arr = Array.of(3, 4, 5, 6);
    console.log(arr); //[3, 4, 5, 6]

3、find()方法是从数组中查找

    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    let cy =  arr.find(function (value, index, arr) {
        // value：表示当前查找的值。
        // index：表示当前查找的数组索引。
        // arr：表示当前数组。
        return value > 5;
    })
    console.log(cy);//6;如果找不到会显示undefined

4、fill()方法的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置

    let arr = [0, 1, 2, 3, 4, 5, 6];
    arr.fill('小花', 2, 5);
    console.log(arr);// [0, 1, "小花", "小花", "小花", 5, 6]

5、数组遍历

    let arr = ['大花', '小花', '大小花']
    // 获取的是 key
    // for (let item of arr) {
    //     console.log(item);
    // }

    // 获取的是 index
    // for(let index of arr.keys()){
    //     console.log(index)
    // }
    // 获取的是 index 和 key
    // for (let [index, val] of arr.entries()) {
    //     console.log(index + ':' + val);
    // }

    //entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。
    //不理解也不知道什么情况下需要使用。
    let list=arr.entries();
    console.log(list.next().value);//[0, "大花"]
    console.log(list.next().value);//[1, "小花"]
    console.log(list.next().value);//[2, "大小花"]

七、ES6中的箭头函数和扩展

1、函数默认值、抛出错误、严谨模式（严谨模式与默认值不能同时使用）

//函数参数传递默认值
function add1(a,b=1){
    return a+b;
}
console.log(add1(1));
//关于函数的{}
//如果函数体内只有一条语句，则可以省略{}，否则不可省略
//(a,b=1)是指这里b参数有个默认值，若b不传实参，则b的值为1

//主动抛出错误
function add2(a,b=1){
   //'use strict'//开启严谨模式
    if(a == 0){
        throw new Error('This is error')
    }
     return a+b;
}

console.log(add2(0));
console.log(add2.length);//获取参数的个数
//经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。
//如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。
//箭头函数不能当构造函数进行使用

2、ES6中的函数和数组补漏

• 1、对象的函数解构

// 对象的函数解构
 let json = {
    a: '测试'
  }

  function fun({a,b = '1'}) {
    console.log(a, b);//测试 1
  }
  fun(json);
//在调用接口的时候，有的时候可能是需要传递多个参数的，这时使用这个写法就不用一个一个传递参数了。个人而言，看这段代码实在不知道什么时候可以用，但是好像项目中又用到了。迷茫ing...

• 2、in的用法

in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。
对象中是否存在某个属性名；数组下标位置是否为空。

 let obj={
    a:'啊',
    c: '照片详情',
    b:'哦'
  }
  console.log('d' in obj);  //false


let arr=['喜欢','毛不易'];
  console.log(0 in arr);  // true
//0是指数组下标位置为0是否为空。

• 3、数组的遍历方法(forEach,filter,some,map)

 console.log('------forEach遍历数组------')
//forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。
  let arr=['毛不易','是', '', '小可爱'];
  arr.forEach((val,index)=>console.log(index,val));
  console.log('-----filter遍历数组--------')
  arr.filter((val,index)=>console.log(index,val));
  console.log('-----some遍历数组--------')
  arr.some((val,index)=>console.log(index,val));
  console.log('-----map遍历数组--------')
  arr.map((val,index)=>console.log(index,val))
  console.log('-----map替换数组--------')
  console.log(arr.map(x=>'花花'));

image.png

• 4、数组转化为字符串

  let arr=['毛不易','是', '', '小可爱'];
  console.log("-----数组转换为字符串------");
  console.log(arr.join('|'), '//自定义字符');//自定义字符
  console.log(arr.toString(),'//字符为,');//字符为,'

image.png

八、ES6中的对象

1、对象赋值

// 对象赋值
  let nickname = "花花";
  let name = '华晨宇';
  var obj = {nickname,name};
  console.log(obj);  // {nickname: "花花", name: "华晨宇"}

2、获取[key]值

let key = 'nickname';
  var obj = {
    [key]: '花花',
    name: '华晨宇'
  }
  console.log(obj.nickname); //花花
  console.log(obj.name); //华晨宇

3、自定义对象方法

  let person = {
    name: '老师',
    introduce: function (name, address) {
      return `我叫${name}, 来自${address}`
    }
  }
  console.log(person.introduce('小花', '安徽'));//我叫小花, 来自安徽
  console.log(person.introduce('da花', '南京'));//我叫da花, 来自南京

4、对象比较 Object.is()

console.log(Object.is(obj.name,person.name)); //false

5、=== 与 Object.is() 的区别

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

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

6、Object.assign( )合并对象

console.log(Object.assign(obj, person));// 此时 后面对象的name值是会覆盖前面对象的name值

image.png

7、Symbol

Symbol对象元素的保护作用
在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用Symbol进行保护。

  let person = {
    name: '老师',
    sex: '女',
    introduce: function (name, address) {
      return `我叫${name}, 来自${address}`
    }
  }
  let age = Symbol();
  person[age] = 12;
  for(let item in person) {
    console.log(person[item]);
  }
//此时不会输出age，对age进行了保护。
//若想输出，此时直接打印 person[age]即可

image.png

九、 set 和 weakSet 数据结构

1、set

    // set声明（去重的数组）
    let setArr = new Set(['小花','是一个','可爱的','小朋友','小朋友']);
    console.log(setArr);//Set {"小花", "是一个", "可爱的", "小朋友"}
    // 增加
    setArr.add('好可爱');  
    console.log(setArr); //Set {"小花", "是一个", "可爱的", "小朋友", "好可爱"}
    // 删除
    setArr.delete('好可爱');
    console.log(setArr); //Set {"小花", "是一个", "可爱的", "小朋友"}
    // 查找
    console.log(setArr.has('可爱的'));//true
    // for ... of 循环
    for (let item of setArr){
      console.log(item);
    }
    // forEach
    setArr.forEach((value)=>console.log(value));
    // 长度
    console.log(setArr.size)
    // 删除全部
    setArr.clear();
    console.log(setArray);// setArray is not defined

十、函数式编程

函数式编程(缩写为 FP)是一种通过组合纯函数来构建软件的过程，避免状态共享、可变数据及副作用的产生。

1、函数式编程定义

image.png

2、函数式编程的特点

• 1. 函数是"第一等公民"
     把它想象成一个数据类型，可以声明、赋值给其他变量、当参数传给函数等等
• 2. 只用"表达式"，不用"语句"
     "表达式"（expression）：是一个单纯的运算过程，总是有返回值；
     "语句"（statement）：是执行某种操作，没有返回值。
     函数式编程要求，只使用表达式，不使用语句。也就是说，每一步都是单纯的运算，而且都有返回值。
• 3. 没有"副作用"
     所谓"副作用"，指的是函数内部与外部互动（最典型的情况，就是修改全局变量的值），产生运算以外的其他结果。
     函数式编程强调没有"副作用"，意味着函数要保持独立，所有功能就是返回一个新的值，没有其他行为，尤其是不得修改外部变量的值。
• 4. 不修改状态
     函数式编程只是返回新的值，不修改系统变量。因此，不修改变量，也是它的一个重要特点。
• 5. 引用透明
     引用透明（Referential transparency），指的是函数的运行不依赖于外部变量或"状态"，只依赖于输入的参数，任何时候只要参数相同，引用函数所得到的返回值总是相同的。
     方法传入的参数类型与返回值类型是一样的（类比map，same方法，传入一个数组同时返回的也是一个数组）

  add(x, y) {
    return x + y
  }
  multiply(x, y) {
    return x * y
  }
  subtract(x, y) {
    return x - y
  }
console.log(subtract(multiply(add(1,2), 3), 4))//5

image.png

add(x, y) {
    return {
      multiply: (z) => {
        return {
          subtract: (a) => {
            return (x + y) * z - a
          }
        }
      }
    }
  }
console.log(add(1, 2).multiply(3).subtract(4))//5

来自：http://www.ruanyifeng.com/blog/2012/04/functional_programming.html