ES678...

let和const

在过去js中常常使用var来定义变量,但var的缺陷也异常明显。
例如:

  1. var不能用于定义常量
  2. var可以重复声明变量
  3. var存在变量提升
  4. var不支持块级作用域

在推出let和const后,js总是会推荐你使用他们,他们比起var有更多的优点。
例如:

<script id="let和const不能重复声明变量">
    // var声明的变量,可以重复声明
    var ali = '阿里巴巴'
    console.log(ali) // 阿里巴巴

    var ali = '阿里云'
    console.log(ali) // 不会报错,输出 阿里云

    // let和const是不能够重复声明的
    let tencent = '腾讯'
    const google = '谷歌'
    console.log(tencent, google) // 腾讯 谷歌
    
    // 重新声明
    let tencent = '腾讯QQ' // 报错
    const google = '谷歌地图' // 报错
</script>
<script id="let和const不存在变量提升">
    // var声明变量中,程序执行时,会把变量先声明,此时输出变量会得到undefined
    // 在程序中的顺序: var info -> log(info) -> info = 'txt'
    
    console.log(ali) // undefined
    var ali = '阿里巴巴'

    // let和const只能在声明后使用,否则就会报错
    // 在程序中的顺序: log(site) -> 报错
    
    // console.log(tencent) // 报错
    // let tencent = '腾讯'

    console.log(google) // 报错
    const google = '谷歌'
</script>
<script id="const值和对象">
    // const PI = 3.14
    // 修改变量值
    // PI = 6.16
    // console.log(PI) // 报错
    
    // const创建的一个对象,对象内的值是能被改变的,但是本身是不能改变的
    const e1 = {
        name: 'title',
        msg: '天气真好'
    }
    console.log(e1) // 初始值输出
    
    // 修改e1内部的name
    e1.name = 'body'
    console.log(e1) // 值被修改,输出成功
    
    // 修改e1
    e1 = 1
    console.log(e1) // 报错
</script>
<script id="let和const不会作为window属性">
    var v1 = '张三'
    console.log(window.v1) // 张三
    
    let v2 = '王五'
    const v3 = '赵柳'
    
    console.log(window.v2) // undefined
    console.log(window.v3) // undefined
</script>
<script id="let和const支持块级作用域">
    {
        var str = '张三'
    }
    {
        let str1 = '李四'
        const str2 = '王五'
    }
    console.log(typeof str) // string
    console.log(typeof str1) // undefined
    console.log(typeof str2) // undefined
</script>

箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

<script id="箭头函数">
    let nameArr = ['张三', '周杰伦', '刘德华']
    // 多个参数需要用()包起来
    // 回调中使用
    nameArr.forEach((value, index, array) => {
        console.log(value)
    })

    // 箭头函数没有this,this指向是外层代码块的this,这样可以避免this的指向问题
    let obj = {
        logThis: function () {
            // 普通函数
            setTimeout(function () {
                console.log('this指向window', this)
            }, 1000)

            // 箭头函数
            setTimeout(() => {
                console.log('this指向logThis', this)
            }, 1000)
        }
    }
    obj.logThis()

    // arguments对象
    function logArg() {
        // 普通函数具有arguments对象
        console.log(arguments)
    }
    logArg()

    logArg2 = () => {
        // 箭头函数不具有arguments对象
        console.log(arguments) // 报错
    }
    logArg2()
</script>

函数设置默认参数

设置默认参数后,如果没有传值,那么值就是设置好的默认参数

<script id="设置默认参数">
    function logPerson(name, sex = '男', age = 1) {
        console.log(name, sex, age)
    }
    logPerson('张三', '女') // 输出 张三 女 1(默认值)

    logDog = (name, sex = '公', age = 1) => {
        console.log(name, sex, age)
    }
    logDog ('小豆子') // 输出 小豆子 公(默认值) 1(默认值)
</script>

延展参数转化

利用延展操作符,可以把参数转换成数组形式

<script id="延展参数转化">
    let logName = function (arg1, ...arg2) {
        console.log(arg1, arg2)
    }
    logName('张三', '李四', '王五', '赵柳') // 在张三之后的参数,都会被归拢到arg2中,以数组形式展现
</script>

模板字符串

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

<script id="模板字符串基本应用">
    let name = '张三', gender = '男'

    // 不利用模板字符串进行字符串拼接
    let result = '我叫:' + name + ',性别:' + gender
    console.log(result)

    // 利用模板字符串进行字符串拼接
    let result1 = `我叫:${name},性别:${gender}`
    console.log(result1)
</script>
<script id="其他应用场景">
    // 利用map+模板字符串返回一组<li>标签,在通过join进行分隔
    let dataArr = ['张三', '李四', '王五', '赵柳']
    let lis = dataArr.map(function (value) {
        return `<li>${value}</li>`
    })
    document.getElementById('box').innerHTML = lis.join('');
</script>

解构赋值

<script id="用于数组的解构">
    let nameArr = ['张三', '李四', '王五']
    
	// 传统赋值
    let name1 = nameArr[0]
    let name2 = nameArr[1]
    let name3 = nameArr[2]
    console.log(name1, name2, name3)
    
    // 解构赋值
    let [name4, name5, name6] = nameArr
    console.log(name4, name5, name6)
</script>
<script id="用于对象的解构">
    let obj1 = {
        name: '臧三',
        age: 1,
        gender: '男'
    }
    let {name, age, gender} = obj1
    console.log(name, age, gender)
</script>
<script id="解构重命名">
    let obj = {
        job: '教师',
        time: 3,
        friend: '张娇友'
    }
    // 对time进行重命名
    let {job, time: timeX, friend} = obj
    // 输出timeX
    console.log(job, timeX, friend)
</script>
<script id="省略解构">
    let arr1 = ['中文', '雅黑', '微软']
    let [, font,] = arr1
    console.log(font)
</script>

map() 方法

<script id="map">
    // 创建一个map
    let obj1 = {a: 1}, obj2 = {b: 2}
    let map = new Map([
        ['name', '张三'],
        ['age', 17],
        ['sex', '男'],
        [obj1, '今天的天气风很大'],
        [obj2, '适合在被窝睡觉'],
        [[1, 3], 'hhh']
    ])
    console.log(map);

    // size属性
    console.log(map.size);

    // keys()
    console.log(map.keys());

    // values()
    console.log(map.values());

    // entries()
    console.log(map.entries());

    // set()设置,
    // map.set('friends', ['赵柳', '芳芳']).set('dog', '大壮')
    // console.log(map);

    // get()取值
    // console.log(map.get(obj1));
    // console.log(map.get('name'));

    // has()是否拥有
    // console.log(map.has(obj2));

    // delete()删除
    // map.delete(obj2)
    // console.log(map);

    // clear()清除
    // map.clear()
    // console.log(map);
</script>
### ECMAScript 6 及其后续版本特性总结 #### 一、ECMAScript 6 (ES6) 主要特性 1. **箭头函数** - 箭头函数提供了更简洁的函数书写方式,并且不会绑定自己的 `this`,而是继承外层作用域的 `this` 值[^1]。 ```javascript const add = (x, y) => x + y; ``` 2. **模板字符串** - 使用反引号(`` ` ``)包裹字符串,支持多行和变量嵌入。 ```javascript let name = "Alice"; let greeting = `Hello, ${name}!`; ``` 3. **解构赋值** - 支持从数组或对象中提取数据并赋值给变量。 ```javascript let [a, , c] = [1, 2, 3]; // a=1, c=3 let {color, age} = {color: 'red', age: 5}; ``` 4. **默认参数** - 函数参数可以设置默认值。 ```javascript function greet(name = "Guest") { console.log(`Hello, ${name}`); } ``` 5. **模块化** - 提供了 `import` 和 `export` 来管理模块。 ```javascript export const PI = 3.14; import {PI} from './math.js'; ``` 6. **类的支持** - 虽然 ES6 引入了 `class` 关键字,但它本质上是对原型链的封装。 --- #### 二、ECMAScript 7 (ES7) 主要特性 1. **指数运算符 (`**`)** - 提供了一种简单的方式来计算幂次方[^2]。 ```javascript let result = 2 ** 3; // 结果为8 ``` 2. **Array.prototype.includes 方法** - 判断数组是否包含指定元素。 ```javascript let array = [1, 2, 3]; console.log(array.includes(2)); // true ``` --- #### 三、ECMAScript 8 (ES8) 主要特性 1. **Async/Await** - 提供了异步编程的新范式,使代码更加直观易读[^5]。 ```javascript async function fetchData() { try { let data = await fetch('https://api.example.com'); return await data.json(); } catch (error) { console.error(error); } } ``` 2. **Object.values/Object.entries** - 获取对象的所有值或键值对。 ```javascript let obj = {a: 1, b: 2}; console.log(Object.values(obj)); // [1, 2] console.log(Object.entries(obj)); // [['a', 1], ['b', 2]] ``` --- #### 四、ECMAScript 9 (ES9) 及更高版本的主要特性 1. **Rest/Spread 属性** - 扩展运算符用于复制数组或对象。 ```javascript let newArray = [...oldArray, ...anotherArray]; let newObj = {...objA, ...objB}; ``` 2. **正则表达式改进** - 添加了新的标志(如 `s` 标志),以及命名捕获组功能[^4]。 ```javascript let regex = /(?<year>\d{4})-(?<month>\d{2})/; let match = regex.exec("2023-04"); console.log(match.groups.year); // 输出2023 ``` 3. **Promise.finally** - 不论 Promise 成功还是失败都会执行的方法。 ```javascript promise.then(result => {}).catch(err => {}).finally(() => {}); ``` 4. **可选链操作符 (`?.`)** - 防止访问不存在的属性时抛出错误。 ```javascript let user = null; console.log(user?.name); // undefined ``` 5. **Nullish Coalescing Operator (`??`)** - 当左侧值为 `null` 或 `undefined` 时返回右侧值。 ```javascript let value = null ?? "default"; // 返回"default" ``` --- #### 五、学习资源推荐 为了更好地掌握这些特性,建议参考以下资源: - 官方文档:MDN Web Docs。 - 在线教程平台:freeCodeCamp、Wes Bos 的课程。 - GitHub 上的大厂面经和技术博客集合。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值