首页 > 技术文章 > es6中相关知识

lxz123 2020-03-21 19:43 原文

一、es6块级作用域

1. 使用es6中块级作用域的原因

  (1)防止局部变量污染全局

  (2)防止变量泄露在全局

2. 块级作用域{ }形成一个暂时性的死区

3. es6中的let和const

  let和const 都只能在声明变量的块级作用域内部有效

  (1)let声明变量的特点

    声明变量只能在当前作用域内使用

    在同一块级作用域里面,不能用let声明多个相同的变量

    变量不会泄露再全局

    变量不会提升

  (2)const声明变量的特点

    声明的变量只能在当前块级作用域内使用

    不会声明变量

    const声明一个变量,并且用const声明的变量 值 不能改变,相当于声明一个常量。

4.es6中字符串

  (1)字符串模板  ·  ·  【反引号】  

     var a = '222';
          var str = `
              <div>
                  <a><img src="${a}"></a>
                  <h4>${a}</h4>
                  <p>${a}</p>
                </div>
            `;
            console.log(str);
  (2)判断一个字符串中是否包含某个字母
    字符串.includes();   返回值是true和false
     var str='abcds';
          console.log(str.includes('a'));
  (3)赋值的次数    字符串.repeat(5);      //将某个字符串复制n次
    var str = 'asdgghh';
    var str1 = str.repeat(5);
    console.log(str1);

  (4)判断开始的位置和结束的位置

    var str = 'dddddfffff'; 

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

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

5.es6数组

  (1)includes  返回的是布尔值

    var arr = [1,2,3,4,5,6];

    console.log(arr.includes(5));

  (2)将一组数据转成数组

    var str='dddggsaa';

    console.log(Array.of(str));

  (3)将伪数组转为数组

    var arr = document.getElementsByTagName('*');

    console.log(Array.from(arr));

  (4)数据的填充

    数组.fill(参数1,参数2,参数3)

      参数1:需要填充的数据

      参数2:填充开始的下标

      参数3:填充结束的下标(不包括)

    var arr = [1,2,3,4,5,6,7];

    console.log(arr.fill('a',2,4));   //填充的是下标为2,3的值,包括前面的,不包括后面的。

  (5)根据条件返回最近的一个值

    var arr = [1,2,3,4,5,6];

    var  arr1 = arr.find(function(val,index,arr){

      return val>3;

    })

    console.log(arr1);   //4

  (6)根据条件判断,找符合条件,离得最近元素的下标

    var arr = [1,2,3,4,5,6,7];

    var str1 = arr.findIndex(function(val,index,arr) {

      return val > 3;

    })

    console.log(arr1);  //3

6.es6对象

  (1)在对象里面,es6消除了关键字

    var obj = {

      name:'liming',

      fn() {

      console.log('1');

      }

    }

  (2)检测对象指向的索引是否一致【意思是否指向的是同一片内存区域】

    Object.is(obj1,obj2);

    var obj1 = {

      name:'liming',

      sex:'nan',

      age:15

    }

    var obj2 = obj1;

    console.log(Object.is(obj1,obj2));

  (3)对象的合并

    Object.assign(参数1,参数2);

    参数1:要合并的对象,被更改

    参数2:被合并的对象,自身不更改

    var obj1 = {

      name:'liming'

    }

    var obj2 = {

      age:20

    }

    var obj = Object.assign(obj1,obj2);

    console.log(obj1,obj);   //obj的结果和obj1的结果一样,因为用assign合并的时候,会将原对象改变。

  注:Object.assign()合并对象的时候,如果两个对象之间有相同的属性,则后面的会把前面的覆盖。

  如: var obj1 = {a:12,b:123}  ;     var obj2 = {a:456,c:456};

    console.log(Object.assign(obj1,obj2));   //   运行结果是:{a:456,b:123,c:456}

7.es6的解构

  (1)数组的解构

    var arr = [1,2,3,4,5,6,7,8];

    var [a,b,c,d,e] = arr;

    console.log(a,b,c,d,e);

  (2)对象的解构

    var obj = {

      name : 'liming',

      age: 20

    }

    var {name,age} = obj;

    console.log(name,age);    //因为name是关键字,为了不与关键字造成冲突,我们可以给是关键字的属性设置别名。

   (3)对象的解构,并为对象的属性设置别名

    var obj = {

      name:'liming',

      age:12

    }

    var {name:n,age:a} = obj;

    console.log(name,age);

  (4)对象中的对象解构

    var obj = {

      name:'liming',

      age:20,

      obj2:{

        sex:'nan',

      }

    }

  var {  obj2 : { sex } } = obj;

  console.log(sex);

  (5)字符串的解构

    var [a,b,c] = 'sdfghhjjkiy';

    console.log(a,b,c);

  (6)不能够解构的元素【总体来说,不能够解构的元素,都是不能够进行遍历的元素】

    let [a] = 10;

    let [a] = null;

    let [a] = true;

    let [a] = false;

    let [a] = undefined;

    let [a] = NaN;

    let [a] = [];   //undefined

    let {a} = {};  //undefined

  (7)es6中的拓展运算符

    在不知道参数的情况下,可以使用...来传递参数

    function fn(...num) {

      var sum = 0;

      for(let i=0;i<num.length;i++) {

        sum += num[i];

      }

      return sum;

    }

    console.log(fn(1,2,3,4,5,6,7,8,9,10));

    传递的是数组,进行结构传递的方式

    arr = [1,2,3,4,5,6,7,8,9,10];

    function fn(...num) {

      console.log(num);

    }

    fn(...arr);

  

    

推荐阅读