ES6常用API详讲

养只羊驼妮

已于 2023-03-25 13:28:41 修改

阅读量759

点赞数

分类专栏： JS高级+es6 文章标签： es6 javascript 前端

于 2023-03-25 13:20:33 首次发布

本文链接：https://blog.csdn.net/m0_57726319/article/details/127782091

版权

4、总结（var、let、const对比）

一、ECMAScript 6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

二、let和const关键字

1、let基本用法

1.块级作用域

在es6中可以使用let声明变量，用法类似于var

⚠️ let声明的变量，只在let命令所在的代码块内有效

{
    let a = 10;
    var b = 20;
}
console.log(a); //a is not defined
console.log(b); //20

2.不存在变量提升

var命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定在声明后使用，否则报错

//var的情况
console.log(c);//输出undefined
var c = 30;


//let的情况
console.log(c);// 报错ReferenceError
let c = 30;

3.不允许重复声明

let不允许在相同作用域内，重复声明同一个变量

let c = 10;
let c = 30;
console.log(c); //报错

function func(arg) {
  let arg; // 报错
}

4.不会造成全局污染

let RegExp = 10;
        console.log(RegExp);
        console.log(window.RegExp);

暂时性死区

了解的一个名词，说的就是let和const命令声明变量的特征。

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区(temporal dead zone，简称 TDZ)

2、为什么需要块级作用域？

原因一：内层变量可能会覆盖外层变量

function foo(a){
    console.log(a);
    if(1===2){
        var a = 'hello 小马哥';
    }
}
var a = 10;
foo(a);//10

原因二：用来计数的循环遍历泄露为全局变量

var arr = []
for(var i = 0; i < 10; i++){
    arr[i] = function(){
        return i;
    }
}
console.log(arr[5]());//10

变量i只用来控制循环，但是循环结束后，它并没有消失，用于变量提升，泄露成了全局变量。

解决循环计数问题

//解决方式一：使用闭包
var arr = []
for(var i = 0; i < 10; i++){
    arr[i] = (function(n){
        
        return function(){
            return n;
        }
    })(i)
}
//解决方式二：使用let声明i

var arr = []
for(let i = 0; i < 10; i++){
    arr[i] = function () {
        return i;
    }
}

3、const基本用法

声明只读的常量

这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
对于const来说，只声明不赋值，就会报错。

const a = 10;
a = 20;//报错

const b; //报错

与let命令相同点

块级作用域

暂时性死区

不可重复声明

let和const使用建议

在默认情况下用const

在知道变量值需要被修改的情况下使用let

4、总结（var、let、const对比）

var：变量提升、造成全局污染

let：没有变量提升、不会造成全局污染、块级作用域、不可重复声明

const：没有变量提升、不会造成全局污染、块级作用域、不可重复声明、声明常量，一旦声明无法修改

三、模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的

const oBox = document.querySelector('.box');
// 模板字符串
let id = 1,name = '小马哥';
let htmlTel = "<ul><li><p>id:" + id + "</p><p>name:" + name + "</p></li></ul>";
oBox.innerHTML = htmlTel;

上面的这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题

let htmlTel = `<ul>
    <li>
    <p>id:${id}</p>
    <p>name:${name}</p>
    </li>
</ul>`;

使用tab键上的反引号 ` `，插入变量时使用 ${变量名}

四、函数的扩展

1、带参数默认值的函数

ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法

//1.带参数默认值的函数
        //es5的写法
        function add(a, b) {
            a = a || 10;
            b = b || 20;
            return a + b;
        }
        console.log(add()); //30

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

  function add(a = 10, b = 20) {
            return a + b;
        }
        console.log(add()); //30

 function add(a, b = 20) {
            return a + b;
        }
        console.log(add(30)); //50

ES6 的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

2、默认的表达式可以是一个函数

function getVal(val) {
    return val + 5;
}
function add2(a, b = getVal(5)) {
    return a + b;
}
console.log(add2(10));//20

3、剩余参数

剩余参数：

把多个独立的参数合并到一个数组中
由三个点...和一个紧跟着的具名参数指定 ...keys

 function pick(obj, ...keys) {
            //...keys 解决了es5中arguments 的问题
            let result = Object.create(null);
            for (let i = 0; i < keys.length; i++) {
                result[keys[i]] = obj[keys[i]];
            }
            return result;
        }
        let book = {
            title: '学习教程',
            author: '小马哥',
            year: '2020'
        }
        let bookData = pick(book, 'year', 'author')
        console.log(bookData);

小例子：

function checkArgs(...args) {
            console.log(args);
            console.log(argumemts);
        }
        checkArgs('a', 'b', 'c')

4、扩展运算符

扩展运算符：

将一个数组分割，并将各个项作为分离的参数传给函数

 //处理数组中的最大值，es5使用apply
        const arr = [5, 18, 36, 47, 99, 100];
        console.log(Math.max.apply(null, arr));//100
//es6 扩展运算符更方便

最低0.47元/天解锁文章

养只羊驼妮

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
ES6常用API详讲

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。var：变量提升、造成全局污染let：没有变量提升、不会造成全局污染、块级作用域、不可重复声明const：没有变量提升、不会造成全局污染、块级作用域、不可重复声明、声明常量，一旦声明无法修改。
复制链接

扫一扫