ES6

93 阅读4分钟
新增定义语法:let和const
 letconstvar的使用用法一样
 varletconst的区别:
                       1.没有预解析
                       2.定义的对象不在window3.会创建一个块级作用域,碰到大括号作用域会重合
                       4.不可以重复定义
 letconst的区别:
                 1.let定义的值可以改变,const定义的变量值不能改变,是一个常量
                 2.const定义变量一定要赋值
新增函数:箭头函数
箭头函数:等同于赋值式函数,对匿名函数的简写,将function省略
    例子:var fn = function() {
            console.log()
         }
        fn()
    箭头函数:
            let fn = () =>{
                console.log()
            }
            fn()
1.当只有一个形参时,小括号可以省略
    例子:var fn = function(a) {
        console.log(a)
    }
    fn()
    箭头函数
    let fn = a =>{
        console.log(a)
    }
    fn()
2.当大括号中只有一行代码时,可以将大括号省略,如果这行代码还有return,必须将return省略
    例子:var fn = function() {
         return = console.log(1)
    }
    fn()
    箭头函数
    let fn = () => console.log(1)
注意:只能简化简单的匿名函数
定义字符串:反引号``
双引号单引号和反引号的区别:
      1.双引号单引号不能多行定义字符串,反引号可以多行定义字符,写的和在控制台输出的一样
      2.反引号定义的字符串可以直接识别变量,不用拼接,在反引号中所有${变量}
      例子:
          var imgPath = 'https://img1.baidu.com/it/u=3316754777,2519856621&
          fm=253&fmt=auto&app=138&f=JPEG?w=653&h=500'
          拼接:
              document.write('<img src="'+imgPath+'"/>')
          反引号:
              document.write('<img src="${imgPath}" />')
              
字符串方法
 1.字符串.startsWith(字符/小字符串) 判断字符串是否以某个字符或某个小字符串开头的
 2.字符串.endsWith(字符/小字符串) 判断字符串是否以某个字符或个小字符串结尾的
 3.字符串.includes(字符/小字符串) 判断字符串中是否包含某个字符串或小字符串
数组方法
1.some 判断数组中是否至少有一个满足指定条件,返回布尔值
    语法:
        数组.some(function(v,i,a){
            return 条件
        })
        
2.every 判断数组中是否所有元素都满足指定条件,返回布尔值
    语法:
        数组.every(function(v,i,a){
            return 条件
        })
        
3.find 在数组中找满足条件的第一个元素,找到了返回找到的元素,找不到返回-1
    语法:
        数组.find(function(v,i,a){
            return 条件
        })
        
4.findindex 在数组中找满足条件的第一个元素的下标,找到了返回元素下标,找不到返回-1
    语法:
        数组.findindex(function(v,i,a){
            return 条件
        })
解构赋值
解构赋值:快速将对象或数组中的值批量赋值给变量

数组解构:快速的将数组中的值批量赋值给变量
    var arr = [1,2,3,4,5]
    var [a, b, c, d, f] = arr
    console.log(a, b, c, d, f);  结果:1 2 3 4 5
    
对象解构:快速的将对象中的值批量赋值给变量
    var obj = {
         age: 12,
         username: '张三',
         sex: '男'
    }
    var {age, username} = obj
    console.log(age, username); 结果:12 '张三'
    
    解构时变量名必须和对象的键的名字保持一致
解构对象并取别名,一旦取别名原来的变量就不能使用

    var {age: a, username: b} = obj
    console.log(age, username);  结果:报错,取别名,原来的变量没用了
    console.log(a, b);  结果:12 '张三'
    
多重解构
    var obj = {
        age: 12,
        username: '张三',
        sex: '男',
        wife: {
            uname: '翠花',
            age: 13,
            sex: '女'
        }
     }
     var {wife: {uname}} = obj
     console.log(uname);  结果:'翠花'
     
...运算符
...可以将一个对象或数组展开成多个值或者多个键值对,也可以将多个值合并为一个数组
...对象/...数组
var pbj = {
    name: '唐伯虎',
    sex: '男'
}
var obj = {
// 将pbj对象,展开成多个键值对放在这里
...pbj,
wife: {
     name: '如花',
     age: 21,
     sex: '女'
    }
}
console.log(obj);
结果:
    var obj = {
        name: '唐伯虎',
        sex: '男'
        wife: {
            name: '如花',
            age: 21,
            sex: '女'
       }
    }
    
展开数组
        function fn(a, b, c) {
            return a + b + c
        }
        var arr = [4,5,6]
        var num = fn(...arr)
        console.log(num);  结果:15 
        
合并数组    
    function fn(...arr) { // 任意多个数字的和
        console.log(arr);
    }
    fn(1,2)       结果:3
    fn(3,4,5)     结果:12
    fn(6,7,8,9)   结果:30  

对象的简写形式

对象的简写形式:当对象的键和值使用的变量名一样时,就可以简写

    var name = '张三'
    var age = 12
    var obj = {
        name:name,
        age:age     //此时对象的键和值使用的变量名一样,可以简写
    }
    
简写:
    var obj = {
        name,
        age
    }