ES6

182 阅读4分钟

let和const

 let和const与var一样都是定义变量的
 但是let是定义了一个块级作用域变量!!!
 const是定义了一个常量!!!
 
 例1:
 <script>
     for(var i = 0; i < 10; i++) {
         console.log(i)
     }

     console.log(i) // 10 这是全局变量
     
     
        // 在ES6就出现了块级作用域
        // 一个花括号就是一个块!!!
       
    
    for(let i = 0; i < 10; i++) {
        console.log(i)
    }

    console.log(i) // 这里会报错
</script>

例2:
<script>
    // const 常量
     const a = 10;
     a = 20;  // 会提示 Assignment to constant variable  意思是常量不能被修改!!!
     console.log(a)

    const b = { 
        // 注意: b是常量,但b下面的属性可以被修改!!!
        name: "kx"
    }
    b.name = "zhangsan"
    b = {} //报错!!!
    console.log(b)
</script>

解构赋值

 正常情况下,var只能赋值一个
 如:
  //  var a,b,c,d=4; // var a var b var c var d = 4
 //    var a=b=c=d=4; d=4; c=d; b = c; var a =b;
 解构赋值可以同时赋值多个并且以  数组  的形式赋值!!!
 
  <script>
  正常情况赋值
    let [a,b,c] = [1,2,3]
  console.log(a)//1
  console.log(b)//2
  console.log(c)//3
 嵌套方式赋值
 let [a,[b,c]] = [1,[2,3]]
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
 可以忽略赋值
 let [a, ,c] = [1,2,3]
 console.log(a) // 1
 console.log(c) // 3

 // 如果有默认值,但是后面解构没有值,使用的默认值!!!
  let [a=1,b=2] = []
  console.log(a) // 1
  console.log(b) // 2

let [a, b, c, d] = "hello"
console.log(a) // h
console.log(b) // e
</script> 

剩余运算符

 <script>
     var a = [1, 2, 3]
     var b = [4, 5, 6] 
     var c = a.concat(b) // concat就是合并的意思!!!
     console.log(c) //a与b的合并
     // 展开运算符!!!
     var c = [...a, ...b]
     console.log(c) //与concat效果一样
    // 使用三个点,让剩余所有的变量都放入c中 
    function add(a, b, ...c) {
        console.log(c) //3, 4, 5, 6
    }
    add(1, 2, 3, 4, 5, 6)
</script>

对象解构

 <script>
    // 可以解构对象
    let [obj1] = [{foo:"123"}]
    console.log(obj1)

    //也可以解构对象里的值,名称要对应
    let {foo} = {foo:"456"}
    console.log(foo)
</script>

map和set集合

利用Set去重
    var mySet = new Set([1, 2, 3, 4, 4, 5555, 100, 2, 100]);
    console.log([...mySet]); // [1, 2, 3, 4]

模板字符串

  <script>
    var str1 = "ddd"
    var str2 = "ccc"
    var str3 = "你输入的是" + str1 + "请不要写" + str2;

    var str4 = `你输入的是${str1}请不要写${str2}`// ES6 中新增加的字符串拼接方法
</script>

对象

  <script>
  对象简写
    const name = "张三"
    const age1 = 20;
    var obj = {age1, name}
    // // var obj = {age: age, name:name}

     console.log(obj.age1)
     
     对象函数简写
    var obj = {
        name:'',
        age: 20,
        run: function() {

        }
    }

    var obj = {
        name:'',
        age: 20,
        // 函数也可以简写
        run() {

        }
    }
</script>

对象合并

 1.可以利用 ...合并对象
 <script>
    var obj1 = {name:"zhangsan"}
    var obj2 = {age:20}
    var obj3 = {...obj1, ...obj2}
    console.log(obj3)
</script>

    2.可以利用 assign合并对象
<script>
   var obj1 = {name:"lisi"}
    var obj2 = {age:30}
    var obj3 = Object.assign({}, obj1, obj2)
    console.log(obj3)
</script>

<script>
  var obj1 = {name:"lisi", newval: {age:20}}
    var obj3 = Object.assign({}, obj1)
    console.log(obj3)
    // assign对第一层是深拷贝,第二层或者之后都是浅拷贝!!!
    // 深拷贝对象!!!
    obj3.newval.age = 40
    console.log(obj1.newval.age) // 40
</script>

数组方法

<script>
    //将参数中所有值作为元素形成数组。
    var arr = Array.of(1, 2, 3, 4)
    console.log(arr)
    
 //将伪数组成数组。
    function demo() {
        // Array.prototype.slice.call(arguments)
        var arr = Array.from(arguments)
        console.log(arr.push)
    }

    demo(1, 2, 3, 4)
</script>


<script>
    1.  //find()查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。
    
    var arr = [1, 10, 9, 30, 20] // 求出大于10数
    var a = arr.find(function(item) {
        return item > 10;
    })

    2. //findIndex()查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
    
    var index = arr.findIndex(function(item) {
        return item > 10;
    })
    console.log(a)
    console.log(index)

    3. //fill()将一定范围索引的数组元素内容填充为单个指定的值。
    
    let arr = Array.of(1, 2, 3, 4);
    // 参数1:用来填充的值
    // 参数2:被填充的起始索引
    // 参数3(可选):被填充的结束索引,默认为数组末尾 (左闭右开)!!!
    console.log(arr.fill(0,1,3)); // [1, 0, 0, 4]

   4. //copyWithin()   将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
   
     console.log([1, 2, 3, 4].copyWithin(0,1,3)); // [3, 4, 3, 4]

   5. //entries() 遍历键值对。
   
    var arr = ["a", "b", "c", "d"]
    var a = arr.entries() // interator接口
    console.log(a)
    for(var [key, value] of a) {
        console.log(value) 
        // console.log(value)
    }
    console.log(a.next()['value'][1]) // a
    console.log(a.next()['value'][1]) // b
    console.log(a.next()['value'][1]) // c
    console.log(a.next()['value'][1]) // d
    console.log(a.next()) 

    6.//keys()遍历键名。//values()遍历键值。
    
    var arr1 = ["a", "b", "c"]
    var b = arr1.values()
    console.log(b) //Iterator
    console.log(b.next())
    console.log(b.next())
    console.log(b.next())
    console.log(b.next())

  7. //includes()数组是否包含指定值。
    var arr2 = [1, 2, 3, 4]
    console.log(arr2.includes(1))
    
   8. // 面试题  数组扁平化!!!
    // flat() 可以将两层嵌套数组转化为一层
    var a = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10]]]]
    console.log(JSON.stringify(a))//可以转化多层嵌套
    // var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    console.log(a.flat().flat().flat())
    console.log(a.flat(Infinity))//可以转化多层嵌套
 </script>

异步代码

<script>
   // 在js中异步代码有两种,setTimeout setInterVal
    // 异步代码在所有同步代码执行之后才会执行!!!
    setTimeout(function() {
        console.log("定时器")
    }, 0)
    console.log("代码end")  // 这个先执行!!!
</script>

// 谁调用了函数,函数里面this就是谁!!!(是在ES5中生效)
// 箭头函数this。 (向上查找非箭头函数,这个非箭头函数的this就是你要找的this)