ES6基本语法（一）

daiwei_ck

于 2023-02-09 22:48:36 发布

阅读量94

点赞数 1

文章标签： es6 javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_58748792/article/details/128939637

版权

1.1 let关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1) 不允许重复声明

2) 块儿级作用域

3) 不存在变量提升

4) 不影响作用域链

应用场景：以后声明变量使用 let 就对了。

<body>
    <script>
        //声明变量
        let a;
        let b, c, d;
        let e = 100;
        let f = 521, g = 'iloveyou', h = [];

        //1. 变量不能重复声明
        // let star = '罗志祥';
        // let star = '小猪';

        //2. 块儿级作用域  全局, 函数, eval
        // if else while for 
        // {
        //     let girl = '周扬青';
        // }
        // console.log(girl);

        //3. 不存在变量提升
        // console.log(song);
        // let song = '恋爱达人';

        //4. 不影响作用域链
        {
            let school = 'XATU';
            function fn() {
                console.log(school);
            }
            fn();
        }

    </script>
</body>

1.2 const 关键字

const 关键字用来声明常量，const 声明有以下特点：

1) 声明必须赋初始值

2) 标识符一般为大写

3) 不允许重复声明

4) 值不允许修改

5) 块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let


    <script>
        //声明常量
        const SCHOOL = 'XATU';

        //1. 一定要赋初始值
        // const A;
        //2. 一般常量使用大写(潜规则)
        // const a = 100;
        //3. 常量的值不能修改
        // SCHOOL = 'ATGUIGU';
        //4. 块儿级作用域
        // {
        //     const PLAYER = 'UZI';
        // }
        // console.log(PLAYER);
        //5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
        const TEAM = ['UZI','MXLG','Ming','Letme'];
        // TEAM.push('Meiko');

        
    </script>

1.3 变量的解构赋值

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

数组的解构赋值：

<script>
        const arr = ['张学友', '刘德华', '黎明', '郭富城'];
        let [zhang, liu, li, guo] = arr;
        console.log(zhang);
        console.log(liu);
        console.log(li);
        console.log(guo);
    </script>

对象的解构赋值：

<script>
        const lin = {
            name: '林志颖',
            tags: ['车手', '歌手', '小旋风', '演员']
        };
        let { name, tags } = lin;
        console.log(name);
        console.log(tags);
    </script>

复杂解构：

let wangfei = { 
 name: '王菲', 
 age: 18, 
 songs: ['红豆', '流年', '暧昧', '传奇'], 
 history: [ 
 {name: '窦唯'}, 
 {name: '李亚鹏'}, 
 {name: '谢霆锋'} 
 ] 
}; 
let {songs: [one, two, three], history: [first, second, third]} = wangfei;

1.4 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

1)字符串中可以出现换行符

2)可以使用 ${xxx} 形式输出变量

<script>
        // 定义字符串 
        let str = `<ul> 
            <li>沈腾</li> 
            <li>玛丽</li> 
            <li>魏翔</li> 
            <li>艾伦</li> 
                 </ul>`;
 </script>

<script>
        // 变量拼接 
        let star = '王宁';
        let result = `${star}在前几年离开了开心麻花`;
        console.log(result);
</script>

注意：当遇到字符串与变量拼接的情况使用模板字符串

1.5 简化对象写法

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

<script>
        let name = 'XATU';
        let slogon = '永远追求教育更高标准';
        let improve = function () {
            console.log('可以提高你的技能');
        }
        //属性和方法简写 
        let atguigu = {
            name,
            slogon,
            improve,
            change() {
                console.log('可以改变你')
            }
        };
        console.log(atguigu);
    </script>

注意：对象简写形式简化了代码，所以以后用简写就对了

1.6 箭头函数

ES6 允许使用「箭头」（=>）定义函数。

<script>
        /** 
        * 1. 通用写法 
        */
        let fn = (arg1, arg2, arg3) => {
            return arg1 + arg2 + arg3;
        }
</script>

箭头函数的注意点:

1) 如果形参只有一个，则小括号可以省略

2) 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

3) 箭头函数 this 指向声明时所在作用域下 this 的值

4) 箭头函数不能作为构造函数实例化

5)不能使用 arguments

// ES6 允许使用「箭头」（=>）定义函数。
        // 声明一个函数
        // let fn = function(){

        // }
        let fn = (a,b) => {
            return a + b;
        }
        // 调用函数
        let result = fn(1, 2);
        console.log(result);

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

// //1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
        function getName() {
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }

        // //设置 window 对象的 name 属性
        window.name = 'XATU';
        const school = {
            name: "ATGUIGU"
        }

        //直接调用
        getName();
        getName2();

        //call 方法调用
        getName.call(school);
        getName2.call(school);

(2). 不能作为构造实例化对象

//2. 不能作为构造实例化对象
        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let me = new Person('xiao',30);
        console.log(me);

(3). 不能使用 arguments 变量

//3. 不能使用 arguments 变量
        let fn = () => {
            console.log(arguments);
        }
        fn(1,2,3);

(4). 箭头函数的简写

//4. 箭头函数的简写
        //1) 省略小括号, 当形参有且只有一个的时候
        let add = n => {
            return n + n;
        }
        console.log(add(9));
        //2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
        // 而且语句的执行结果就是函数的返回值
        let pow = n => n * n;

        console.log(pow(8));

1.7 rest参数

ES6 引入 rest 参数（形式为 ...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

<script>
        function add(...args) {
            console.log(args);
        }
        let str = add(1, 2, 3, 4, 5);
        console.log(str);
</script>

<script>
        function add(...values) {
            let sum = 0;
            for (var k of values) {
                sum += k;
            }
            return sum;
        }
        let str = add(2, 5, 3) 
        console.log(str);// 10
</script>

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子。

<script>
        function push(arr, ...items) {
            items.forEach(function (item) {
                arr.push(item);
                console.log(item);
            });
        }
        var a = [];
        push(a, 1, 2, 3);
</script>

rest 参数必须是最后一个形参

<script>
        function minus(a, b, ...args) {
            console.log(a, b, args);
        }
        minus(100, 1, 2, 3, 4, 5, 19);
</script>

1.8 spread扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

<script>
        let tfboys = ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'];
        function fn() {
            console.log(arguments);
        }
        fn(...tfboys)
</script>

数组合并：

扩展运算符提供了数组合并的新写法。

<script>
        const arr1 = ['a', 'b'];
        const arr2 = ['c'];
        const arr3 = ['d', 'e'];
        // ES5 的合并数组
        arr1.concat(arr2, arr3);
        // [ 'a', 'b', 'c', 'd', 'e' ]
        // ES6 的合并数组
        console.log([...arr1, ...arr2, ...arr3]);
        // [ 'a', 'b', 'c', 'd', 'e' ]
</script>

与解构赋值结合：

扩展运算符可以与解构赋值结合起来，用于生成数组。

<script>
        const [first, ...rest] = [1, 2, 3, 4, 5];
        console.log(first);
        console.log(rest);
</script>

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

<script>
        const [...butLast, last1] = [1, 2, 3, 4, 5];
        // 报错
        const [first, ...middle, last2] = [1, 2, 3, 4, 5];
        // 报错
</script>