浅谈ES6(附代码详解)

64 阅读1分钟

ES6基础

一、let关键字

1.变量不能重复声明。

2.let声明变量只能在块级作用域有效。

3.不存在变量提升。

4.不影响作用域(作用域找不到变量时会往外层找)。

二、const关键字

1.一定要赋予初始值。

2.一般常量使用大写。

3.常量的值不能修改。

4.const声明变量只能在块级作用域有效。

5.对于数组和对象的元素的修改,不算做对常量的修改(不会修改地址),不会报错。

三、解构赋值

ES6允许按照一定模式从数组对象中提取值,对变量进行赋值,这被称为解构赋值。

代码案例

<script>
        //1.数组的解构
        const arr = ['a', 'b', 'c'];
        let [xiao, liu, song] = arr;
        console.log(xiao);


        //2.对象的解构
        const obj = {
            name: 'xiaoming',
            age: '20',
            study: function() {
                console.log("Hello World");
            }
        }
        let{name,age,study} = obj;
        console.log(name);
        console.log(study);
</script>

运行结果展示

image.png

四、声明字符串方式

1.内容可以直接出现换行符

2.变量拼接新模式

代码案例

<script>
        let str = `123
        123`;    
        let str1 = `${str}456`;
        console.log(str1);
</script>

运行结果展示·

image.png

五、对象的简化写法

ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法,这样的书写更加简洁

代码案例

<script>
        let name = 'Mr Lin';
        let change = function() {
            console.log(`编程改变世界!`);
        }

        const school = {
            name,
            change,
            import() {
                console.log(`abc`)
            }
        }
        console.log(school)
 </script>

运行结果展示

image.png

六、箭头函数(重要)

ES6中允许使用箭头“=>”来定义函数

   <script>
        let fn1 = function(a,b) {
            return a + b;
        }
    
        let fn2 = (a,b) => {
            return a + b;
        }
   <\script>

箭头函数注意点:

1.this 是静态的,this始终指向函数声明时所在作用于下的this的值

2.箭头函数不能作为构造实例化对象

3.箭头函数不能使用arguments变量

4.箭头函数的简写:

(1)省略小括号:当形参有且只有一个的时候

(2)省略花括号:当代码体只有一条语句的时候,此时return必须省略,而且语句的执行结果就是函数的返回值。

箭头函数适合与this无关的回调,定时器,数组的方法回调箭头函数不适合与this有关的回调,对象的方法。

    <script>
        let fun = n => pow(n*n);
        let ans = fun(8);          
    </script>

七、ES6参数默认值

1.ES6允许给函数参数赋值初始值,形参初始值,具有默认值的参数,一般位置靠后

2.可以与解构赋值结合

未完待续