ES6初识1

一，let var const 的区别

1. let和var的相同点

        在全局声明的变量是全局变量，在局部声明的变量是局部变量

2. let和var的不同点

     1、let声明的变量不能提升
     2、let声明的变量不能重复声明
     3、let声明的变量只在当前块作用域有效  （{} 块作用域）
     4、let声明的变量会产生暂时性的死区，只在当前块作用域中有效

  //1,
    console.log(demo);
    var demo = "123"
    console.log(demo_1);//Cannot access 'demo_1' before initialization 
    let demo_1 = "123"

 //2.
    let str_1 = "hh"
    str_1 = "aa"
    console.log(str_1);//aa

  //3.
    if (1) {
        var num_1 = 20
        let str_2 = "aaa"
    }
    console.log(num_1);//20
    console.log(str_2);// str_2 is not defined

//4.
  var name = "zs"
    if (true) {
        console.log(name);
        let name = "ks"//Cannot access 'name' before initialization
    }

const:

    1、const声明的变量必须赋初值
    2、const声明的变量是常量，不能发生改变
    3、const声明的变量不能提升
    4、const声明的变量不能重复声明
    5、const声明的变量只在当前块作用域有效
    6、const声明的变量会产生暂时性的死区，只在当前块作用域中有效

 //1.
    const demok=10

 //2.
    const nun_2=20
    nun_2=30
    console.log(nun_2);// Assignment to constant variable

  //3.
    console.log(nun5);
    const nun5 ="haha"//Cannot access 'nun5' before initialization

 //4.
    const text="text"
    // const text

  //5.
 
     if ('哈哈') {
        const con = 'coll'
    }
    console.log(con);

    // 6.
     var name_1 = 'name1'
    if (1) {
       
        const name_1 = 'name_1'
        console.log(name_1);
    }

二，解构赋值 将字符串中的字符，数组中的元素，对象中的属性分解成一个一个的变量

1.数组解构赋值 (完全解构)

 let [x, y, z] = arr
    console.log(x, y, z);//10 20 20

2.不完全解构

    let [x_1, y_1, z_1] = [1, 2]
    console.log(x_1, y_1, z_1);// 1 2 undefined

3.赋初值

 let [x_2, y_2, z_2 = 5] = [3, 4]
    console.log(z_2);//5

4.嵌套

    let [a, b, [d, c]] = [1, 2, [1, 2]]
    console.log(a, b, c, d);//1 2 2 1

1.字符串的解构赋值

  let str = '我们都是好孩子，都是web27期'
    console.log(str[1]);//们
    console.log(str.slice(1, 2));//们
    console.log(str.charAt(1));//们
    console.log(str.substring(1, 2));//们
    console.log(str.substr(1, 1));//们
    let [h, j, l, p] = str
    console.log(b);//2;

2.对象的解构赋值

  const obj = {
        name: 'obj',
        age: 18,
        sex: true,
        getName: function () {
            console.log('打印了');
        }
    }

// 对象  解构赋值
     var { name, age, sex } = obj
    console.log(name);//obj
    console.log(age);//18
    var { name } = obj
    console.log(name);//obj

// 改变位置
      var { age, sex, name } = obj
    console.log(age);//18

  // 赋初值
       var { age, sex, name, name_1 = 'name_1' } = obj
    console.log(name_1);//name_1'

   // 嵌套
    var { age, sex: { n, m } } = { age: 18, sex: { x: 1, y: 2 } }
    console.log(x);//10

3.解构赋值的作用

1、交换两个变量的值

  var x = 10
    var y = 20
      var [y, x] = [x, y]
    console.log(x, y);、//20 10

2、让函数有多个返回值

  function fn([xc, yc]) {
        return [xc, yc]
    }

    var [xc, yc] = fn([1, 2])
    console.log(xc, yc);//1 2

3、解决参数为undefined的问题

4、取到对象中的某一个属性

三，字符串的用法

  let str = '我们都是好孩子，都是web27期'
    console.log(str[1]);//们
    console.log(str.slice(1, 2));//们
    console.log(str.charAt(1));//们
    console.log(str.substring(1, 2));//们
    console.log(str.substr(1, 1));//们
    let [h, j, l, p] = str
    console.log(b);//2

1、模版字符串 ${变量}

2，repeat( )函数：将目标字符串重复N次，返回一个新的字符串，不影响目标字符串。

   let str = '前端'
    let str_1 = str.repeat(3)
    console.log(str_1);
    console.log(str);

3、includes( )函数：判断字符串中是否含有指定的子字符串， 返回true表示含有和false表示未含有。第二个参数选填，表示开始搜索的位置。

  let str_2 = '我们都是好朋友'
    console.log(str_2.includes('我'));//true
    console.log(str_2.includes('我们'));//true
    console.log(str_2.includes('我们好'));//false
    console.log(str_2.includes('我', 1));//false

4 、endsWith( )函数：判断子字符串是否出现在目标字符串的尾部位置， 第二个参数选填，表示针对前N个字符。

    console.log(str_2.endsWith('友'));//true
    console.log(str_2.endsWith('朋友'));//true
    console.log(str_2.endsWith('友', 5));//false
    console.log(str_2.endsWith('朋', 5));//false
    console.log(str_2.endsWith('好', 5));//true

5 、String.raw函数 保留原始字符串

 let demo1 = 'hello\nWorld'
    console.log(demo1);
    console.log(String.raw`hello\nWorld`);//hello\nWorld

四，数组的用法

1、Array.of函数 函数作用：将一组值，转换成数组。

console.log(Array.of(1, 2, 3, 4));//(4) [1, 2, 3, 4]

2、Array.from函数 函数作用：可以将类似数组的对象或者可遍历的对象转换成真正的数组。

 
      var li = document.getElementsByTagName('li')
      console.log(Array.from(li));//(4) [li, li, li, li]

3、find函数 函数作用：找出数组中符合条件的第一个元素。 否则返回 undefined。

    var arrk = [1, 2, 3, 4, 5]
    var demo = arrk.find(function (item, index) {
  
        return item > 5
    })
    console.log(demo);//undefined

4、findIndex函数 函数作用：返回符合条件的第一个数组成员的位置。(索引) 否则就是 -1

   var test = arr.findIndex(function (item, index) {
     
        return index > 4
    })
    console.log(test);//-1

5、fill函数 函数作用：用指定的值，填充到数组，改变原数组。（三个参数 1、指定的值 2、开始的位置 3、结束的位置(不包括终止索引)）

    console.log(arr);(3) //[10, 20, 20]
    console.log(arr.fill(6));//(3) [6, 6, 6]

6、entries函数 函数作用：对数组的键值对进行遍历，返回一个遍历器，可以用for…of对其进行遍历。

  
    for (let [key, value] of arr.entries()) {
        
        console.log(value);//10, 20, 20
    }

7、keys函数 函数作用：对数组的索引键进行遍历，返回一个遍历器。

  console.log(arr.keys());
    for (let key of arr.keys()) {
        console.log(key);//0.1.2
    };

8、values函数 作用：对数组的元素进行遍历，返回一个遍历器。

for (let values of arr.values()) {
        console.log(values);//10, 20, 20
    }