zl程序教程

您现在的位置是:首页 >  后端

当前栏目

项目中非常有用并且常见的ES6语法

ES6项目 常见 语法 非常 并且 有用
2023-09-27 14:26:17 时间

今天闲着无事,梳理下ES6常见的语法知识点;除此之外的知识点自行细化和梳理!

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            //ES6字符串扩展方法,三个方法都支持第二个参数,表示开始搜索的位置;
            let str = 'Hello world!';
            console.log(str.includes('o')) // true ----表示是否找到了参数字符串;类似ES5 indexOf()
            console.log(str.startsWith('Hello')) // true ----表示参数字符串是否在原字符串的头部;
            console.log(str.endsWith('!')) // true ----表示参数字符串是否在原字符串的尾部;
            //ES6字符串扩展方法----模板字符串
            let hello = '你好';
            let str1 = `${hello},这节课学习字符串模板`;
            console.log(str1); //你好,这节课学习字符串模板,省去拼接的烦恼;
            alert `123`
            // 等同于
            alert(123)
            //ES6解构赋值
            let res = {
                id: 1,
                status: "OK",
                list: [{
                    name: 'bob',
                    age: 20
                }]
            }
            let {
                id,
                status,
                list
            } = res;
            console.log(id, status, list);
            // 1, "OK", [{name: 'bob',age: 20}]
            //const 声明常量 === var a = 1, b = 2, c = 3;or const a = 1;const b = 2;const c = 3;
            const [a, b, c] = [1, 2, 3];
            console.log(a, 'aaaaa'); //1 "aaaaa"
            console.log(b, 'bbbbb'); //2 "bbbbb"
            console.log(c, 'ccccc'); //3 "ccccc"
            //使用扩展运算符(...)拷贝数组
            let test = [1, 2, 3, 4, 5]
            let [...test1] = test
            test[2] = 5
            console.log(test, '原数组') //[1, 2, 5, 4, 5] "原数组"
            console.log(test1, '深拷贝的数组') //[1, 2, 3, 4, 5] "深拷贝的数组"
            //不要在模块输入中使用通配符。因为这样可以确保你的模块之中,有一个默认输出(export default)。
            // bad
            //import * as myObject from './importModule';
            // good
            //import myObject from './importModule';
            //reset参数---rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中
            function add(...values) {
                let sum = 0;
                for(var val of values) {
                    sum += val;
                }
                return sum;
            }
            console.log(add(2, 5, 3)) // 10
            //箭头函数
            var sum = (num1, num2) => num1 + num2;
            // 等同于
            var sum = function(num1, num2) {
                return num1 + num2;
            };
            console.log(sum(1, 4), '求和') //5 "求和"
            //如果只有单个参数
            var fun = age => age; //or var fun = (age) => age;
            // 等同于
            var fun = function(age) {
                return age;
            };
            console.log(fun(20), '箭头函数单个参数') //20 "箭头函数单个参数"
            //扩展运算符加箭头函数
            const sumList = (...num) => num;
            console.log(sumList(1, 2, 3, 4, 5), '扩展运算符运用场景一') // [1, 2, 3, 4, 5] "扩展运算符运用场景一"
            const getList = (name, ...obj) => [name, obj];
            console.log(getList(1, 2, 3, 4, 5), '扩展运算符运用场景二') // [1,[2,3,4,5]] "扩展运算符运用场景二"
            //ES6数组扩展******将一个数组添加到另一个数组的尾部
            // ES5的 写法
            var test2 = [0, 1, 2];
            var test3 = [3, 4, 5];
            //console.log(test2.push(test3),'push直接跟数组')// 4 "push直接跟数组" push方法的参数不能是数组;
            Array.prototype.push.apply(test2, test3);
            console.log(test2, '没用...前') //[0, 1, 2, 3, 4, 5] "没用...前"
            // ES6 的写法
            let test4 = [0, 1, 2];
            let test5 = [3, 4, 5];
            test4.push(...test5);
            console.log(test4, '使用...后') //[0, 1, 2, 3, 4, 5] "使用...后"
            //ES6将类数组转为数组的方法;dom类似除了document.getElementById()之外的找到的dom都为类数组;另外有length属性的;
            let toList = {
                '0': 'bob',
                '1': '20',
                '2': 'man',
                length: 3
            };
            // ES5的写法
            var newArr = [].slice.call(toList);
            console.log(newArr, '[].slice.call的方法') //["bob", "20", "man"] "[].slice.call的方法"
            // ES6的写法
            let newArr1 = Array.from(toList);
            console.log(newArr1, 'Array.from方法') //["bob", "20", "man"] "Array.from方法"
            //find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组;如果没有符合条件的成员,则返回undefined。
            let numList = [1, 5, 15, 20, 25];
            let newNumList = numList.find((value, index, arr) => {
                return value > 20;
            }) 
            console.log(newNumList,'数组find方法')//25 "数组find方法"
            //findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
            let numLogs = [5, 10, 15, 20];
            let newNumLogs = numLogs.findIndex((value, index, arr) => {
                return value > 10
            }) 
            console.log(newNumLogs,'数组findIndex方法')//2 "数组findIndex方法"
            //ES6数组的 includes()  第一个参数是否包含一个指定的值,第二个参数表示搜索的起始位置,默认为0;
            //如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始;
            //没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值;
            console.log([1, 2, 3].includes(4),'includes一个参数')//false "includes一个参数"
            console.log([1, 2, 3].includes(3, -1),'includes两个参数')//true "includes两个参数"
            //ES6对象的结构和扩展运算符的运用*****...扩展运算符 解构赋值必须是最后一个参数(数组和对象都是一样) 解构赋值的拷贝是浅拷贝;
            let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
            console.log(x,'对象的第一个值');//1 "对象的第一个值"
            console.log(y,'对象的第二个值');//2 "对象的第二个值"
            console.log(z,'对象的第三个值');//{a: 3, b: 4} "对象的第三个值"
            let obj = {
                name:'bob',
                age:20
            }
            let obj1 = {
                sex:'sex',
                cash:22
            }
            let newObj = {...obj,...obj1};//等同于 let newObj = Object.assign({}, obj,obj1);
            console.log(newObj,'扩展运算符合并对象')//{name: "bob", age: 20, sex: "sex", cash: 22} "扩展运算符合并对象"
            //ES6 async 函数   await 是顺序执行的,Promise.all() 是并行的;
            function fun1(){
                console.log('第一')//第一
            }
            function fun2(){
                console.log('第二')//第二
            }
            function fun3(){
                console.log('第三')//第三
            }
            async function testasync () {
                try {
                    await fun1()
                    await fun2()
                    await fun3()
                } catch (error) {
                    console.log(error)
                }
            }
            testasync ();
            //let [res1, res2, res3] = await Promise.all([fun1(), fun2(),fun3()])
            //async 函数中 return 的结果将作为回调的参数;
            async function testCallback () {
                return 'this is a test async function'
            }
            testCallback().then(
                userName => console.log(userName)
            )
            // this is a test async function
        </script>
    </body>

</html>