• 深入理解es6(上)


    一、let和const

    1、let与var的区别

    不存在变量提升
    块级作用域
    不允许重复声明

    2、const常量

    const与let一样,唯一区别在于声明的常量不能被修改

    二、解构赋值

    es6按照一定模式,从数组和对象中提取值,对变量进行赋值,被称为解构

    1、数组的解构

    • "模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值,如果右边不是数组就会报错
    • 基本用法:
    let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
    
    let [a1, b1=2] = [1] // a1=1, b1=2 //指定默认值
    
    let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3
    
    let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]
    
    let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3
    
    let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2
    

    2、对象的解构

    与数组不同的是,变量的解构没有顺序问题,变量必须与属性同名才能解构
    基本用法:

    let {a, b} = {a:'aa', b:'bb'} //a='aa' b='bb'
    
    //设置默认值
    let {x, y = 5} = {x: 1}; //x= 1 y=5
    
    //允许别名,a的值将失效
    let {a:a1,b} = {a:'aa', b:'bb'} //a1='aa' b='bb' 
    
    let obj = {a:'aa', b: {c:'c'}}
    let {a, b:{c}} = obj // 嵌套解构 a='aa' c='c'
    
    
    

    3、字符串的解构

    let [a, b, c] = 'hello' // a='h' b='e' c='l'
    

    4、函数的解构

    function say({name,age}){
        console.log(name + '今年' + age)
    } 
    say({name:'小明',age:18})
    

    三、字符串的扩展

    1、模板字符串

    用反引号(`)标识,字符串中嵌入变量用${}

    2、新增方法

    查找字符串,返回布尔值

    let str = 'hello world'
    //返回布尔值,表示是否找到了参数字符串
    str.includes('r')  //true 
    
    //返回布尔值,表示参数字符串是否在原字符串的头部
    str.startsWith('hello')  //true
    
    //返回布尔值,表示参数字符串是否在原字符串的尾部
    str.endsWith('d')  //true
    

    去空格

    let str = '   hello world      '
    //消除首尾的空格
    str.trim()  //'hello world'
    
    //消除字符串头部的空格
    str.trimStart()  //'hello world   '
    
    //消除尾部的空格
    str.trimEnd()  //'   hello world'
    

    四、数组的扩展

    es5新增的方法:
    forEach、map、filter、some、every、reduce

    1、Array.from将类似数组的对象转为数组

    //类似数组的对象
    let obj = {
        0:'a',
        1:'b',
        2:'c',
        length:3
    }
    //es5写法
    var arr = [].slice.call(obj);
    //es6写法
    var arr1 = Array.from(obj);
    
    // arguments对象
    function foo() {
      var args = Array.from(arguments);
      // ...
    }
    

    2、Array.of方法用于将一组值,转换为数组

        Array.of(3, 11, 8) // [3,11,8]
        Array.of(3) // [3]
    

    3、find/findIndex查找符合条件的元素

    //find方法找出第一个符合条件的数组成员
    let arr = [1, 4, -5, 10];
    let val = arr.find((item,index,arr)=>{
        return item > 1;
    })
    //val 4
    
    //findIndex返回第一个符合条件的数组成员的位置
    let index = arr.find((item,index,arr)=>{
        return item > 1;
    })
    //index 1
    

    4、entries(),keys(),values()用于遍历数组

    可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

    let arr = ['a','b','c']
    
    //遍历数组的键名
    for(let index of arr.keys()){
        console.log(index)
    }
    //0 1 2 
    
    //遍历数组的键值
    for(let value of arr.values()){
        console.log(value)
    }
    //'a' 'b' 'c'
    
    //遍历数组的键值对
    for(let [index,value] of arr.entries()){
        console.log(index,value)
    }
    //0 'a' 
    //1 'b'
    //2 'c'
    

    5、includes()表示是否包含某个值

    [1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true
    
    //第二个参数表示搜索的开始位置,负数表示倒数位置
    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    

    6、数组的扩展运算符 ...

    可以把数组展开成用逗号隔开的一组值

    let arr = [1,2,3,4,5,6,7]
    //复制数组
    let arr1 = [...arr]
    
    //合并数组
    let arr2 = [...arr,8] // [1,2,3,4,5,6,7,8]
    
    //展开参数
    Math.max(...arr) //7
    
    //剩余参数(解构赋值)
    let [a,...b] = arr
    //a 1
    //b [2,3,4,5,6,7]
    
    //转Set (同时去重)
    let arr3 = [...new Set(arr)]
    

    五、对象的扩展

    1、对象的简写

    • 当属性名和属性值相同时,可以省略属性值
    • 方法可以省略function
    • 对象的属性名和方法名允许为变量或者表达式
    • 例如:
    let name = '小明'
    let age ="age1"
    let person = {
        name,
        [age]:18,
        ['hei'+'ght']:180,
        sayName(){
            console.log(this.name)
        }
    }
    person.sayName();
    console.log(person)
    

    2、对象的扩展运算符 ...

    同数组扩展运算符,支持对象解构剩余参数,对象合并,复制对象

    3、Object.is()

    用来比较两个值是否严格相等,等同于 "==="

    //唯一不同之处
    +0 === -0 //true
    NaN === NaN //false
    Object.is(+0, -0) // false
    Object.is(NaN,NaN) //true
    

    4、Object.assign()

    • 用于对象的合并,第一个参数是目标对象,后面的参数都是源对象
    • 如果目标对象与源对象有同名属性,则后面会覆盖前面的属性
    var obj1 = {a:1,b:2}
    var obj2 = {b:3,c:4}
    console.log(Object.assign(obj1,obj2))
    //{a:1, b:3, c:4}
    
    let obj = {a:1, b:2}
    Object.assign(obj) === obj // true
    
    //参数不是对象会转成对象再返回
    typeof Object.assign(2) // "object"
    
    //undefined和null无法转成对象,作为第一个参数会报错
    Object.assign(undefined) // 报错
    Object.assign(null) // 报错
    
    Object.assign(obj, undefined) === obj // true
    Object.assign(obj, null) === obj // true
    

    5、Object.setPrototypeOf(),Object.getPrototypeOf()

    • Object.setPrototypeOf()用来设置一个对象的prototype对象
    • Object.getPrototypeOf()用于读取一个对象的原型对象
    //设置obj对象上的__proto__原型对象为proto对象
    let proto = {};
    let obj = { x: 10 };
    Object.setPrototypeOf(obj, proto);
    

    6、Object.keys(),Object.values(),Object.entries()

    使用for...of可以遍历对象的键名,键值,键值对

    var obj = {
        a:1,
        b:2,
        c:3
    }
    //传统遍历对象
    for(key in obj){
        console.log(key) //所有键值
        console.log(obj[key]) //所有键值
    }
    
    //es6遍历
    //所有键名
    for( let index of Object.keys(obj) ){
        console.log(index)
    }
    //所有键值
    for( let value of Object.values(obj) ){
        console.log(value)
    }
    //所有键值对
    for( let [index,value] of Object.entries(obj) ){
        console.log(index,value)
    }
    

    7、Object.fromEntries()

    方法是Object.entries()的逆操作,用于将一个键值对数组转为对象

    Object.fromEntries([
      ['foo', 'bar'],
      ['baz', 42]
    ])
    // { foo: "bar", baz: 42 }
    
    // 特别适合Map结构
    const map = new Map().set('foo', true).set('bar', false);
    Object.fromEntries(map)
    // { foo: true, bar: false }
    

    六、函数的扩展

    1、函数参数的默认值

    如果传入了参数就使用传入的值,如果没有就使用默认值

    function sum(a=0, b=0){
        return a + b;
    }
    sum(); //0
    sum(1); //1
    sum(1,1) //2
    

    2、rest参数

    用于获取函数的多余参数,这样就不需要使用arguments对象

    function add(...value){
        console.log(value)
        //[1,2,3,4]
    }
    add(1,2,3,4)
    

    3、箭头函数 =>

    使用“箭头”(=>)定义函数

    • 箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
    • 箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回
    • 如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错
    var f = v => v;
    
    // 等同于
    var f = function (v) {
      return v;
    };
    

    注意:

    this指向外部作用域
    不可以new,也就是不能用作构造函数
    不可以使用argument对象,可以使用rest参数代替

    参考至 阮一峰es6

  • 相关阅读:
    右击DataGrilView行事件
    winForm textBox的数字输入验证
    C#获取本月开始日期和结束日期
    异步加载js文件并执行js方法:实现异步处理网页的复杂效果
    Windows Phone 7 IEnumerable<T>.Select和SelectMany的区别
    Windows Phone 7 Perst嵌入式数据库的学习
    Windows Phone 7 Coding4Fun的弹出框
    MVVM模式介绍
    Windows Phone 7 网络编程之天气预报应用
    Windows Phone 7 扩展TextBox控件为数字输入文本框
  • 原文地址:https://www.cnblogs.com/sgs123/p/11481396.html
Copyright © 2020-2023  润新知