ES6基础

jz1234_

于 2022-09-26 21:06:24 发布

阅读量296

点赞数

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/jz1234_/article/details/127060863

版权

let关键字


<body>
    <h1>let 关键字</h1>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>
    <script>
        // 1. let 声明得关键字和 var声明一致
        var a = 15;
        let b = 20;
        // console.log(a, b);
        // 2. let 声明得关键字是局部作用域
        // if switch for  都可以形成局部作用域

        if (true) {
            var c = 100;
        }
        console.log(c);
        if (true) {
            let d = 200;
        }
        console.log(d);
        for (var i = 0; i < 5; i++) { }
        console.log(i); //i=5
        for (let k = 0; k < 5; k++) { }
        console.log(k); //报错
        // 单击li alert 弹出下标
        // 选这到所有得li标签
        var lis = document.querySelectorAll("ul li")
        // 遍历并弹出下标
        for (let j = 0; j < lis; j++) {
            lis[j].onclick = function () {
                alert[j]
            }
            // var声明得变量 for 循环在单击时候已经执行完毕 执行完毕j得值就是5
            // let声明局部作用域 （for循环得局部作用域是相互不影响的）
            // lis[j].onclick = function.... 代码在局部作用中执行 就可以读取到当前局部作用域得j
        }
        // 03 let 不会提升（在javascript引擎执行代码前 先把许哦有的变量和函数提升到最前面
        // 变量统一赋值为undefined）

        // alert(d)
        // var =20;

        // alert(e);
        // let e = 80


        // 04 let 在同一个作用域不能重复声明
        var f = 50;
        var f = "love js"
        let g = 60;
        // let g = "good"; let g 不能重复声明
    </script>

demo-02const

<body>
    <h1>const 关键字</h1>
    <p>声明变量关键字：声明常量</p>

    <script>
        // 01 >01 和let基本一致（局部，不会变量提前，不能重复声明
        // 02 声明必须赋值
        // 03 Uncaught 没有捕捉到 SyntaxError 语法错误
        console.log(PI);
        const PI = 3.1425926;
        console.log(PI);
        // 04 声明的数据不能修改（值类型）
        // PI = 3.14
        const PERSON = {
            name: "mumu",
            age: 18
        }; //引用类型常量
        PERSON.age = 22;
        // 引用类型子要不是重新赋值，都是引用同一块内存地址
        // PERSON = {};
        console.log(PERSON);
                // 04 建议变量名大写
    </script>
</body>

结构数组

<body>
    <h1>结构数组</h1>
    <p>就是把数组解析为单个的变量</p>
    <script>
        // 01 把数组解析单个的变量
        // 02 可以逗号跳过某个元素
        let arr = [1, 2, 3, 4, 5, 6, 7, 12, 34, 56, 7, 88,]
        let [a, b, ...c] = arr
        console.log(a);
        console.log(b);
        console.log(c);
        // 03 可以给没默认值
        // 04 通过...接受剩余内容(不定参)
        let arr2 = [1, 2, 3, 4];
        let [d, e, f, g = 88] = arr2;
        console.log(d, e, f, g);
        // 05 可以交换变量
        var k = 100;
        var j = 50;
        [k, j] = [j, k];
        console.log(k, j);
    </script>
</body>

新增字符串方法

<body>
    <h1>String 字符串</h1>
    <p>检测：includes是否包含，startsWidth 以...开头 endWidth 以...结尾</p>
    <p>includes 检测是否包含字符串，包含返回true 不包含返回false</p>
    <p>startsWidth 以...开头</p>
    <script>
        var str = "我爱我的祖国，我的祖国，是中国的国"
        alert(str.includes("他乡"))
        alert(str.startsWith("我恨"))
        alert(str.endsWith("国"))
    </script>
</body>

填充与去空白

<body>
    <h1>String 字符串</h1>
    <p>
        padStart 填充在前面 padEnd 填充后面
    </p>
    <p> trim 移除两端空白，trimLeft，trimRight 移除左右空白 </p>
    <p>表单交互先移除空白</p>

    <script>
        var str = "1";
        // 补齐3位数，不够用0来填充
        console.log(str.padStart(3, '0'));
        console.log(str.padEnd(3, '_'));
        // 时间 01 22 
        var mystr = "   你好，  东三街怎么走   "
        console.log(mystr);
        console.log(mystr.trim());
        // 特别生僻字是占用两个字节

        var str = "天里的水太耄耋，犄角旮沓，茕茕孑立！"
        for (var i = 0; i < str.length; i++) {
            console.log(str[i]);
        }
        for (let s of str) {
            console.log(s);
        }
    </script>
</body>

对象结构

<body>
    <h1>结构对象</h1>
    <p>对象结构就是把对象解析为单独的变量</p>
    <p>不用按顺序</p>
    <script>
        let obj = { name: "yuyu", age: 18, job: "teacher" }
        let { age, name } = obj;
        console.log(name);
        console.log(age);

    </script>

数组新增

<script>
    var arr = [2, 4, 6, 7, 8]
    // find 查找符合条件的元素
    var el = arr.find(function (item) {
        if (item > 5) { return true }
    })
    var el = arr.find(item => item > 5)
    console.log(el);

    // findIndex 查找符合条件元素的下标
    var index = arr.findIndex(function (item) {
        return item > 5
    })
    alert(index)

    // forEach 遍历元素
    var arr1 = ["小红", "小吕", "小蓝", "小紫", "小白"];
    // item 当前遍历的元素， index当前元素的下标 self当前遍历的数组
    arr1.forEach(function (item, index, self) {
        console.log(item, index, self);
    })

    // filter 过滤不符合条件的元素  （返回true保留，返回false的过滤掉）
    var arr2 = arr.filter(function (item) {
        return item % 2 === 0;
    })
    console.log("arr2", arr2);
    // filter 通常可以实现数组的去重
    var arr3 = [1, 1, 2, 2]
    // 1 item 0 0 true 保留
    // 1 item 0 1 false 过滤
    // 2 item 2 2 true 保留
    // 2 item 2 3 false 过滤

    var arr4 = arr3.filter(function (item, index) {
        // 获取元素查找出来的下标
        var ind = arr3.indexOf(item);
        if (ind === index) {
            // 如果查找出来的下标与遍历的下标一致 ，元素保留
            return true
        } else {
            return false
        }
    })
    console.log("arr4", arr4);

    // reduce 类型 上次的结果是当次的条件
    // 数组的求和
    var total = arr.reduce(function (a, b) {
        return a + b;
    })

    // a:2  b:4  return 6
    // a:6 b:6  return 12
    // a:12 b:7 return 19
    // a:19 b:8 return 27
    console.log(total);
    var big = arr.reduce(function (a, b) {
        return a * 10 + b
    })
    console.log("big", big);

    // some 有一返回真，则整体为真
    var arr6 = [5, 1, 2, 12, 3, 7]
    // 判断arr6里面是否有一个大于10得数
    var isbig = arr6.some(function (item) {
        return item > 10;
    })
    console.log("isbig", isbig);

    // every 所有的回调函数返回为真，才为真
    // 查找所有的数是否都大于5

    var bigF = arr6.every(function (item) {
        return item > 5;
    })
    console.log("bigF", bigF);
</script>

函数

<script>
    // 01 箭头函数：函数的简写
    // 02 如果参数不是一个需要添加（）
    // 03 如果有多行语句用{}，返回用true
    // 04 如果需要返回对象用({})
    var fun = function () {
        alert("love")
    };
    var fun1 = () => alert("love!")
    // => 左侧是参数
    // => 右侧是执行语句也是返回值
    fun();
    fun1();

    var fun2 = age => alert("我今年" + age)
    fun2(19);

    var fun3 = age => {
        if (age > 18) {
            alert("可以参军");
        } else {
            alert("小屁孩一个！")
        }
    }
    fun3(19);

    var fun4 = (age, name) => ({
        name: name, age: age, msg:
            "大家好我是" + name
    })
    var obj = fun4(17, "小小曾")
    console.log(obj);
</script>

箭头函数

<script>
    // 箭头函数的this指向的是函数
    // 不能作为构造函数
    // var age = 50;
    // var obj = {
    //     age: 18,
    //     grow: () => {
    //         setInterval(() => {
    //             this.age++;
    //             console.log(this.age);
    //         }, 3000)
    //     }
    // }
    // // obj.grow();

    // var grow = obj.grow;
    // grow();

    var arr = [2, 4, 6, 7, 8];
    // 过滤出大于5得数
    var arr1 = arr.filter(item => item > 5)
    console.log(arr1);
    var total = arr.reduce((a, b) => a + b);
    console.log(total);
    var arr2 = arr.map(item => item * 2)
    console.log(arr2); 
</script

默认参

    <script>
        // 并不确定函数的参数是几个（定义函数的时候）
        // ...变量名，接受所有的参数列表
        function add(...args) {
            var total = args.reduce((a, b) => a + b);
            console.log(total);
        };
        add(2, 3);
        add(1, 2, 5);

        function metting(p1, p2, p3) {
            console.log("今天中共中央开会的有" + p1 + p2 + "和" + p3);
        }

        // metting ("张二毛","张小小","霍壮壮")
        var arr = ["张二毛", "张小小", "霍二狗", "霍二傻"];
        metting.apply(null, arr)
        metting(...arr)



        // 当参数是 undefined时候 取默认参数
        // function say(name, age) {
        //     alert("大家好我的名字是" + name + "今年" + age)
        // };
        // say("老曾", 17)
        // say("小小曾", undefined)

    </script>

对象新增

<body>
    <h1>对象新增</h1>
    <p>Object.create() 通过现有对象创建一个新对象</p>
    <p>新对象的原型上源对象的 方法和属性</p>
    <p>Object.keys() 获取对象所有键的集合成为一个数组</p>
    <p>Object.values() 获取值的集合</p>
    <p>Object.assign() 合并对象</p>

    <script>
        var obj1 = { name: "yuyu", age: 18, leg: 2 }
        var obj2 = { age: 17, job: "teacher" }
        // 合并复制对象
        var obj3 = Object.assign(obj1, obj2);
        console.log(obj3);
        var vals = Object.values(obj3);
        console.log(vals);
        var keys = Object.keys(obj3);
        console.log(keys);

        var obj4 = Object.create(obj3)
    </script>
</body>

对象的简写

<body>
    <h1>对象的简写</h1>
    <p>属性的简写</p>
    <p>函数的简写</p>
    <p>属性名可以用变量</p>
    <script>
        var name = "张小雨";
        var age = 18;
        var n = "nick";
        var m = "name";
        var obj = { name: name, age: age, leg: 2, say: function () { alert(this.name) } }
        var obj = { name, age, leg: 2, [n + m]: "小" + this.name, say() { alert(this.name) } }
        console.log(obj);
        // 01 模块开发，promise
    </script>
</body>

ES6
- 说明
  - ECMAScript6
    新的javascript标准
- 变量声明
  - var
  - let
    - 01 let与var 基本一致，用作变量声明
    - 02 let在一对括号{}中形成局部作用域
    - 03 let声明的质量不会变量提升
    - 04let不能重复声明变量（同一作用域）
  - const
    - 01 与let一致（局部，不提升，不能重复声明）
    - 02 声明必须赋值
    - 03 赋值不能修改（值类型）
    - 04 建议大写
- 数组得结构
  - 01 数组结构：把数组解析为单个变量
  - 02 通过逗号跳过
  - 03...接受剩余值
  - 04 可以给默认值
  - 05 快速交换变量
- 字符串
  - 遍历 for if
  - 查找
    - includes 是否包含
    - starsWidth 以xxx开头
    - endsWidth 以xxx结尾
  - 补齐
    - padStart （len,symbol)
    - padEnd9LEN,SYMBOL)
  - 去空白
    - trim 两端
    - trimLeft 左侧
    - trimRight 右侧
- 数组
  - sort 排序
  - ES6 新增
    - find 查找符合条件元素
    - findindex 查找符合条件元素的下标
  - forEach 遍历
    - forEcah（function（item，index，self））
      - item当前遍历的元素
      - index 当前的下标
      - self 被遍历的数组
  - filter 过滤
  - map 映射
  - reduce 累计
    - reduce（function（a，b））
      - a 上一次返回的结果
      - b 当前遍历的元素
  - some 有一个
  - every 每一个