ES6学习

最新推荐文章于 2024-06-26 21:59:19 发布

weixin_30699235

最新推荐文章于 2024-06-26 21:59:19 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xumqfaith/p/7810566.html

本文详细介绍了ES6中的一些重要新特性，包括块级作用域、let与const的区别及使用场景、箭头函数的语法与特点、解构赋值简化代码、函数默认参数的设置方法以及展开运算符的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　1、块级作用域和不再具备变量提升

    //ES5
   console.log(a)//undefined
   var a=1;
   //ES6
   console.log(b)//报错 ReferenceError: b is not defined
   let b=1;

　　2、let 和 const的使用

　　let：声明变量（一个值会被改变的变量）

　　const:声明常量（一个值不会被改变的变量）

当值为基础数据类型时，那么这里的值，就是指值本身。
而当值对应的为引用数据类型时，那么我这里说的值，则表示指向该对象的引用。这里需要注意，正因为该值为一个引用，只需要保证引用不变就可以，我们仍然可以改变该引用所指向的对象。

当我们试图改变const声明的变量时，则会报错。

            const obj={
                a:10,
                b:20
            }
            console.log(obj)//{a: 10, b: 20}
            obj.a=30;
            console.log(obj)//{a: 30, b: 20}
                
            const a=10;
            a=20;  console.log(a)//报错 :Assignment to constant variable.(分配的变量是不变的)

　　3、箭头函数的使用

　　箭头函数可以替换函数表达式，但是不能替换函数声明

ES6
const fn =  (a,b) => a + b;

　var fn = function fn(a, b) { //ES5
　　　　return a + b;
　　};

　　const fn=(a,b)=>{
           console.log(a)//1
           console.log(b)//2
       }
      fn(1,2)

箭头函数中，没有this。如果你在箭头函数中使用了this，那么该this一定就是外层的this。

箭头函数中无法访问arguments对象

4、解析结构

// 首先有这么一个对象
const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

当我们想要取得其中的2个值：loading与clicked时：

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;
console.log(loading) //false
console.log(clicked) //true
// 给一个默认值，当props对象中找不到loading时，loading就等于该默认值
const { loading = false, clicked } = props;

另外，数组也有属于自己的解析结构。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

数组以序列号一一对应，这是一个有序的对应关系。
而对象根据属性名一一对应，这是一个无序的对应关系。
根据这个特性，使用解析结构从对象中获取属性值更加具有可用性。
5、函数默认值

之前我们不能直接为函数指定默认参数，因此很多时候为了保证传入的参数具备一个默认值，我们常常使用如下的方法：

function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}

console.log(add()); // 50

这种方式并不是没有缺点，比如当我传入一个x值为false，这个时候任然会取到默认值，就不是我们的本意了。

来看看ES6的默认值写法：

function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

在实际开发中给参数添加适当的默认值，可以让我们对函数的参数类型有一个直观的认知。

const ButtonGroupProps = {
    size: 'normal',
    className: 'xxxx-button-group',
    borderColor: '#333'
}

export default function ButtonGroup(props = ButtonGroupProps) {
    ... ...
}

6、展开运算符
　　可以将数组方法或者对象展开

　　　　　　　//数组
            const arr1 = [1, 2, 3,4,5,6];
            const arr2 = [...arr1, 10, 20, 30];
            console.log(arr2)    //(9) [1, 2, 3, 4, 5, 6, 10, 20, 30]
            //对象 
            const obj1 = {
              a: 1,
              b: 2, 
              c: 3
            }            
            const obj2 = {
              ...obj1,
              d: 4,
              e: 5,
              f: 6
            }
            console.log(obj2) //{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

参考文章链接：http://www.jianshu.com/p/cfb0893c34f1

转载于:https://www.cnblogs.com/xumqfaith/p/7810566.html