ES6篇（上）

申小兮
44 阅读3分钟

前面文章所学均是ES5，而ES6就是提升，它提供了新的语法类型，接下来一起来认识一下吧🧐

一、const

1、概念

声明常量，常量不可以重新赋值，不能改变

<script>
    const BASE_URL = 'http'
    BASE_URL = 'baidu'
</script>

image.png

2、特点

（1）当被修饰的表示符不会再次被赋值时，就可以用const保证数据的安全性
（2）不可以重复声明，否则会报错

<script>
    const BASE_URL = 'http'
    const BASE_URL = 'www'
</script>

image.png

（3）常量是指向对象不能再次被修改，但是对象内部属性是可以修改的（即数组、对象的元素是例外，其元素是可以被改变的）

<script>
    const arr = [1,2,3]
    arr[3]=4
    console.log(arr);
 
    const userInfo = {
        name:'张三',
    }
    userInfo.name='李四'
    console.log(userInfo);
</script>

image.png

二、let和var

1、var

声明一个变量时，其作用域与函数有关，对其他块定义是没有作用域的（eg：if、for等沒有作用域），但是它有变量提升

<script>
    console.log(a);//var变量提升
    var a =10
</script>

image.png

（1）例子： 拿点击取下标为例子，发现无论点击哪个下标都是3，这是错误的

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li')
        for (var i = 0; i < list.length; i++) {
            list[i].onclick = function () {
                console.log(i);
            }
        }
    </script>
</body>

image.png

（2） 结合上篇文章，可以通过闭包解决这个问题

JS进阶第一课【this，严格模式，闭包】 - 掘金 (juejin.cn)

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li')
        for (var i = 0; i < list.length; i++) {
            (function (i) {
                list[i].onclick = function () {
                    console.log(i);
                }
            })(i)//()()通过立即执行函数把i传入点击事件
        }
    </script>
</body>

image.png

（3） 但是编程工程繁琐，所以我们可以采用let提升变量作用域

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li')
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = function () {
                console.log(i);
            }
        }
    </script>
</body>

image.png

2、let

（1）具有块级作用域，没有变量提升，有暂时性死区
（2）未声明就输出时，会报错（即不能在定义前使用）

<script>
    console.log(b);
    let b =20
</script>

image.png

三、增强写法

1、字面量（如何表达这个值）

一般除去表达式，变量赋值时，等号的右边可以看作字面量

2、对象字面量的增强写法

（1）增强写法： 键和值的命名一致
（2）变量增强

<script>
    let name ='张三'
    const userInfo ={
        //原始方法，键:值
        name:name,
        //变量增强法
        name,
    }
    console.log(userInfo);
</script>

（3）方法增强

<script>
    let name ='张三'
    const userInfo ={
        //原始方法
        run:function(){
            console.log('运行');
        },
        //增强方法
        run(){
            console.log('运行');
        }
    }
    userInfo.run()
</script>

四、解构赋值

1、概念

允许使用类似的数组或对象字面量语法给变量赋值（比较抽象看看下面的分点分析🧐）

2、数组解构

（1）把数组内的元素，逐一放在变量里

<script>
    const arr = ['aa','bb','cc']
    //原始方法
    // let a = arr[0]
    // let b = arr[1]
    // let c = arr[2]
    // console.log(a,b,c);
    //for循环法
    for(var i = 0;i<arr.length;i++){
        let text = 'text' + i
        text = arr[i]
        console.log('text'+i,text);
    }
    //解构法
    let[a,b,c] = arr
    console.log(a,b,c);
</script>

image.png

（2）预留位置

<script>
    const arr = ['aa','bb','cc']
    let[,,c] = arr
    console.log(c);
</script>

（3）后两位单独变成一个数组

<script>
    const arr = ['aa','bb','cc']
    let[a,...newArr] = arr;
    console.log(a,newArr);
</script>

image.png image.png

（4）建立新数组，并且修改数组（在后续处理数据时，将常用到🧐）
①原始方法

<script>
    const arr = ['aa','bb','cc']
    //原始方法
    const arr1 = arr
    console.log('arr',arr);
    console.log('arr1',arr1);
    arr1[2]='dd'
    console.log('arr1',arr1);
    console.log('arr',arr);
</script>

image.png

②解构法

<script>
    const arr = ['aa', 'bb', 'cc']
    //解构法
    //...扩展运算符,开辟新空间
    const arr2 = [...arr]
    console.log('arr', arr);
    console.log('arr1', arr2);
    arr2[2] = 'dd'
    console.log('arr2', arr2);
    console.log('arr', arr);
</script>

image.png

（5）数组合并
①原始方法：内置对象法

<script>
    //原始方法
    const arrA = [1,2,3]
    const arrB = [4,5,6]
    const arrC = arrA.concat(arrB)
    console.log(arrC);
</script>

②解构数组法

<script>
    //解构法
    const arrA = [1,2,3]
    const arrB = [4,5,6]
    const arrC = [...arrA,...arrB]
    console.log(arrC);
</script>

image.png

（6）两值交换位置
①原始方法：引入第三个变量temp

<script>
    //原始方法
    let x = 10;
    let y = 20;
    let temp;
    temp = y;
    y = x;
    x = temp;
    console.log(x,y);
</script>

②解构法

<script>
    //解构法
    let x = 10;
    let y = 20;
    [x,y]=[y,x]
    console.log(x,y);
</script>

image.png

 3、对象解构

（1）数据逐一放到对应的属性变量中

<script>
    const user ={
        name:'张三',
        age:18,
    }
    let {name,age} = user
    console.log(name,age);
</script>

（2）建立一个新对象，并且赋值、修改（可以直接在赋值时修改）

<script>
    const user = {
        name:'张三',
        age:18,
    }
    const userInfo = {...user,sex:'女',age:20}
    console.log(userInfo);
    userInfo.name='申小兮'
    console.log(userInfo);
    console.log(user);
</script>

image.png

（3）设置默认值（通过增强写法给对象不存在的属性增加默认值）
①对象没有设置vvv属性时，vvv的默认值就是123

<script>
    const user = {
        name:'张三',
        age:18,
    }
    const {vvv='123'} = user
    console.log(vvv);
</script>

②对象有设置vvv属性时，vvv的默认值属性对应的值555

<script>
    const user = {
        name:'张三',
        age:18,
        vvv:'555'
    }
    const {vvv='123'} = user
    console.log(vvv);
</script>

五、深浅拷贝

1、浅拷贝

（1）通俗理解：仅为第一层元素建立新空间，其他层的数值会随新拷贝改值而被改值
（2）借前面所认识的解构法，对比深拷贝与浅拷贝
①解构法

<script>
    const user = {
        id:1,
        name:'张三',
        msg:{
            age:18,
        },
    }
    let a ={}
    //解构法
    a = {...user}
    a.name='申小兮' //成功
    a.msg.age=20    //失败
    console.log('a',a);
    console.log('user',user);
</script>

image.png

②浅拷贝

<script>
    const user = {
        id:1,
        name:'张三',
        msg:{
            age:18,
        },
    }
    let a ={}
    // 浅拷贝
    Object.assign(a,user)
    a.name='申小兮' //成功
    a.msg.age=20    //失败
    console.log('a',a);
    console.log('user',user);
</script>

image.png

2、深拷贝

（1）通俗理解： 将所有元素，每一层完全建立一个新空间
（2）还是上面拷贝user对象的例子，深拷贝会是什么情况呢🧐

<script>
    const user = {
        id:1,
        name:'张三',
        msg:{
            age:18,
        },
    }
    let copy ={}
    // 深拷贝
    copy = JSON.parse(JSON.stringify(user))
    copy.msg.age=20
    console.log('copy',copy);
    console.log('user',user);
</script>

image.png

（3）解析： copy = JSON.parse(JSON.stringify(obj));
先将对象变成字符串，然后再变回对象，来使新对象指向一个全新的空间

六、高阶函数

1、filter(callback)：过滤

（1）callback： 回调函数，返回布尔值

        ①true：返回本次数据，存入新的数组

        ②false：过滤该数据，不返回（直接丢掉）

（2）代码例子

const arr = [19,45,85,23,67];
//过滤filter
const newArr = arr.filter(function(item){
    console.log(item);
    return item > 30
})
console.log('newArr',newArr);

2、map(callback)：计算（给值做统一的某操作）

（1）callback： 回调函数，返回值为计算结果，并加入新数组
（2）代码例子

//计算map
const newArr1 = newArr.map(function(item){
    console.log(item);
    return item *2
})
console.log('newArr1',newArr1);

3、reduce(callback(prevalue,item),value)：统计

（1）callback(prevalue,item)： 回调函数，返回计算结果
①prevalue：上一次遍历的返回值
②item：当前遍历的值
（2）value： 初始值【就像工资的底薪】
（3）代码例子

//统计reduce
const total = newArr1.reduce(function(pre,item){
    console.log(pre,item);
    return pre+item
},0)
console.log(total);

image.png

4、三合一写法

<script>
    const arr = [19, 45, 85, 23, 67];
    const totalData = arr.filter(function (item) {
        return item > 30;
    }).map(function (item) {
        return item * 2;
    }).reduce(function (pre, item) {
        return pre + item
    }, 0)
    console.log(totalData);
</script>
avatar
文章
阅读
粉丝