扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于前端JavaScript ES6详情
  • 833

0
分享到

关于前端JavaScript ES6详情

2024-04-02 19:04:59 833人浏览 泡泡鱼
摘要

目录1、简介1.1 Babel 转码器1.2 polyfill2、let 和 const2.1 let2.2 const3、解构3.1 对象解构3.2 数组解构3.3 函数参数解构3

1、简介

es6是一个泛指，含义是 5.1 版以后的 javascript 的下一代标准，涵盖了 ES2015、ES2016、ES2017语法标准。

ES6新特性目前只有在一些较新版本浏览器得到支持，老版本浏览器里面运行我们需要将ES6转换为ES5。

  • Chrome：51 版起便可以支持 97% 的 ES6 新特性。
  • Firefox：53 版起便可以支持 97% 的 ES6 新特性。
  • Safari：10 版起便可以支持 99% 的 ES6 新特性。
  • IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

1.1 Babel 转码器

它是一个广泛使用的 ES6 转码器。


npm install --save-dev @babel/core

配置文件.babelrc


# 最新转码规则
$ npm install --save-dev @babel/preset-env

# React 转码规则
$ npm install --save-dev @babel/preset-react
// `presets`字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

1.2 polyfill

Babel默认只是对JavaScript新语法进行了转换，为了支持新api还需要使用polyfill为当前环境提供一个垫片（也就是以前的版本没有，打个补丁）。

比如：core-js和regenerator-runtime


$ npm install --save-dev core-js regenerator-runtime
import 'core-js';
import 'regenerator-runtime/runtime';

2、let 和 const

2.1 let

就作用域来说，ES5 只有全局作用域和函数作用域。使用let声明的变量只在所在的代码块内有效。


if(true){ let a = 1; var b = 2 }
console.log(a)// ReferenceError: a is not defined
console.log(b)// 2

看下面的例子，我们预期应该输出1，因为全局只有一个变量i，所以for执行完后，i=5，函数打印的值始终是5。


var funcs = [];
for (var i = 0; i < 5; i++) {
  funcs.push(function () {
    console.log(i);
  });
}
funcs[1](); // 5

修复，将每一次迭代的i变量使用local存储，并使用闭包将作用域封闭。


var funcs = [];
for (var i = 0; i < 5; i++) { 
    (function () {
            var local = i
            funcs.push(function () {
                console.log(local);
            });
        }
    )()
}
funcs[1](); // 1

使用let声明变量i也可以达到同样的效果。

2.2 const

const用于声明一个只读的常量。必须初始化，一旦赋值后不能修改。const声明的变量同样具有块作用域。


if (true) {
 const PI = 3.141515926;
 PI = 66666 // TypeError: Assignment to constant variable.
}
console.log(PI) // ReferenceError: PI is not defined

const声明对象


const obj = {};
// 为 obj 添加一个属性，可以成功
obj.name = 'hello';

// 将 obj 指向另一个对象，就会报错
obj = {}; // TypeError: "obj" is read-only

3、解构

解构字面理解是分解结构，即会打破原有结构。

3.1 对象解构

基本用法：


let { name, age } = { name: "hello", age: 12 };
console.log(name, age) // hello 12

设置默认值


let { name = 'hi', age = 12 } = { name : 'hello' };
console.log(name, age) // hello 12

rest参数（形式为...变量名）可以从一个对象中选择任意数量的元素，也可以获取剩余元素组成的对象。


let { name, ...remaining } = { name: "hello", age: 12, gender: '男' };
console.log(name, remaining) // hello {age: 12, gender: '男'}

3.2 数组解构

rest参数（形式为...变量名）从数组中选择任意数量的元素，也可以获取剩余元素组成的一个数组。


let [a, ...remaining] = [1, 2, 3, 4];
console.log(a, remaining) // 1 [2, 3, 4]

数组解构中忽略某些成员。


let [a, , ...remaining] = [1, 2, 3, 4];
console.log(a, remaining) // 1 [3, 4]

3.3 函数参数解构

数组参数


function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

对象参数


function add({x, y} = { x: 0, y: 0 }) {
  return x + y;
}
add({x:1 ,y : 2});

3.4 常见场景

在不使用第三个变量前提下，交换变量。


let x = 1;
let y = 2;

[x, y] = [y, x];

提取JSON数据


let JSON = {
  code: 0,
  data: {name: 'hi'}
};
let { code, data: user } = json;
console.log(code, user); // 0 {name: 'hi'}

遍历Map结构


const map = new Map();
map.set('name', 'hello');
map.set('age', 12);

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

4、扩展

4.1 字符串扩展

模版字符串，这个很有用。使用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。


`User ${user.name} is login...`);

4.2 函数扩展

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

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。


function add(x, y = 1) {
 return x + y
}

替代apply()写法


// ES5 的写法
Math.max.apply(null, [1, 3, 2])

// ES6 的写法
Math.max(...[1, 3, 2])

4.3 数组扩展

合并数组


// ES5 的写法
var list = [1,2]
list = list.concat([3])

// ES6 的写法
var list = [1,2]
list = [...list, 3]

数组新API

Array.from()，Array.of()，find() 和 findIndex()等，参考MDN

https://developer.mozilla.org/zh-CN/docs/WEB/JavaScript/Reference/Global_Objects/Array

4.4 对象扩展

对象属性，方法简写


data = [1,2]
const resp = {data}; // 属性简写，等同于 {data: data}
const obj = {
  add(x, y) {        // 方法简写，等同于 add: function(x, y){...}
    return x + y;
  }
};

扩展属性


const point = {x: 1, y: 2}
const pointD = {...point, z: 3}
console.log(pointD) // {x: 1, y: 2, z: 3}

// 当有重复属性时，注意顺序问题。
const point = {x: 1, y: 2}
const pointD = {...point, x: 4, z: 3}
console.log(pointD) // {x: 4, y: 2, z: 3}

const point = {x: 1, y: 2}
const pointD = {x: 4, z: 3, ...point}
console.log(pointD) // {x: 1, z: 3, y: 2}

属性的描述对象

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。


const point = {x: 1, y: 2}
Object.getOwnPropertyDescriptor(point, 'x')

属性的遍历

  • for...in循环：只遍历对象自身的和继承的可枚举的属性。
  • Object.keys() ：返回对象自身的所有可枚举的属性的键名。
  • JSON.stringify() ：只串行化对象自身的可枚举的属性。
  • Object.assign() ： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

const point = {x: 1, y: 2}
for(let key in point){
  console.log(key)
}

对象新增的一些方法：Object.assign()

Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。常见用途：

克隆对象


function clone(origin) {
  return Object.assign({}, origin);
}

合并对象


const merge = (target, ...sources) => Object.assign(target, ...sources);

指定默认值


const DEFAULT_CONFIG = {
  debug: true,
};

function process(options) {
  options = Object.assign({}, DEFAULT_CONFIG, options);
  console.log(options);
  // ...
}

4.5 运算符扩展

指数运算符


2 ** 10 // 1024
2 ** 3 ** 2 // 512 相当于 2 ** (3 ** 2)

let a=10; a **= 3; // 相当于 a = a * a * a

链判断运算符

obj?.prop判断对象属性是否存在，func?.(...args) 函数或对象方法是否存在。


const obj = {name: 'job', say(){console.log('hello')}}
obj?.name  // 等于 obj == null ? undefined : obj.name
obj?.say() // 等于 obj == null ? undefined : obj.say()

空判断运算符

JavaScript里我们用||运算符指定默认值。 当我们希望左边是null和undefined时才触发默认值时，使用??。


const obj = {name: ''}
obj.name || 'hello' // 'hello'
obj.name ?? 'hello' // ''

5、for…of

因为for...in循环主要是为遍历对象而设计的，因为数组的键名是数字，所以遍历数组时候它返回的是数字，很明显这不能满足开发需求，使用for...of可以解决这个问题。


const list = ['a', 'b', 'c']
for (let v in list){
  console.log(v) // 0,1,2
}
for (let v of list){
  console.log(v) // a,b,c
}

6、小结

到此这篇关于关于前端JavaScript ES6详情的文章就介绍到这了,更多相关JavaScript ES6内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 关于前端JavaScript ES6详情

本文链接: https://lsjlt.com/news/155088.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于前端JavaScript ES6详情
    目录1、简介1.1 Babel 转码器1.2 polyfill2、let 和 const2.1 let2.2 const3、解构3.1 对象解构3.2 数组解构3.3 函数参数解构3...
    99+
    2024-04-02
  • 前端通过JavaScript创建修改CAD图形详情
    目录1、现状2、JS新建修改CAD图形2.1 支持的CAD实体类型2.2 修改或删除3、应用场景1、现状 创建修改CAD图形，一般是基于AutoCAD进行二次开发，ObjectARX...
    99+
    2024-04-02
  • javascript属于前端还是后端的
    小编给大家分享一下javascript属于前端还是后端的，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！javascript是前端。javascript是前端开发语...
    99+
    2023-06-14
  • javascript关于前端开发语言的示例分析
    这篇文章将为大家详细讲解有关javascript关于前端开发语言的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1、javascript是前端开发语言，经常与html、css技术一起构成前端开发。...
    99+
    2023-06-20
  • 关于web前端中微前端的误解有哪些
    关于web前端中微前端的误解有哪些，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。本篇文章给大家分享的是有关关于微前端的误解有哪些，小编觉得...
    99+
    2024-04-02
  • 关于C# 类的封装详情
    目录1、前言2、实例1、前言 法存取数据。除此之外，还可以控制数据的存取方式。在面向对象编程中，大多数都是以类作为数据封装的基本单位。类将数据和操作数据的方法结[成一个单位。设计类...
    99+
    2024-04-02
  • 关于C# 类和对象详情
    目录一、对象的定义和创建二、、对象的初始化1. 借助构造函数或使用2. 实例构造函数3. 静态构造三、对象的引用一、对象的定义和创建 定义类对象的方法为： 类名 对象名; 类是...
    99+
    2024-04-02
  • 关于Windows 8.1 更新设置详情
    　　适用范围: 　　win 8.1 　　操作步骤: 　　一、个性化 　　开始屏幕：Windows 8.1 中可以将桌面壁纸设置为开始屏幕的背景，新的动态磁贴的大小(4×4 和 1×...
    99+
    2022-06-04
    详情 Windows
  • 关于Python中的if __name__ == __main__详情
    目录1.程序入口2.__name__是什么？ 场景1：直接运行脚本 场景2：从其他脚本导入 3.__name__可以显示包路径 5.测试模块里函数 关于在学习Python的过程中，遇...
    99+
    2024-04-02
  • vue前端信息详情页模板梳理详解
    本文实例为大家分享了vue前端信息详情页模板的梳理，供大家参考，具体内容如下 前言： 自己总结方便自己用的，觉得有用可以参考使用，欢迎留言提出改进意见。 1.HTML部分： <...
    99+
    2024-04-02
  • vue前端信息详情页怎么实现
    这篇“vue前端信息详情页怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue前端信息详情页怎么实现”文章吧。1.H...
    99+
    2023-06-30
  • JavaScript扩展运算符的学习及应用详情(ES6)
    目录学习应用函数参数数组合并解构赋值字符串转换转换数组前言： 扩展运算符是ES6新增的一种运算符，他可以帮助我们简化代码，简化操作，所以在开发中是非常常用的，下面我将从学习与应用两个...
    99+
    2022-11-13
    JavaScript扩展运算符应用 JavaScript扩展运算符
  • 关于前端要知道的 AST知识
    目录认识 ASTestree[1]认识 acorn[2]基本操作实现普通函数转换为箭头函数认识 AST 定义：在计算机科学中，抽象语法树是源代码语法结构的一种抽象表示。它以...
    99+
    2023-05-15
    前端 前端AST知识
  • 关于MySQL中的 like操作符详情
    1、简介 当对未知或者说知道某一部分的值进行过滤时，可以使用like操作符；like操作符用于模糊匹配。 like支持两个通配符，它们分别是： %通配符，用于匹配多个字...
    99+
    2024-04-02
  • 关于ES6中数组新增的方法详解
    目录在ES6之前，创建数组的方式有2种：Array.find((item,indexArr,arr)=>{}) 掌握Array.findIndex((item, index, ...
    99+
    2024-04-02
  • 前端关于HTML的面试题有哪些
    这篇文章主要讲解了“前端关于HTML的面试题有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“前端关于HTML的面试题有哪些”吧！1.什么是HTML？HT...
    99+
    2024-04-02
  • 关于angular的前端面试题有哪些
    这篇文章主要介绍了关于angular的前端面试题有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1，ng-if 跟 ng-show/hide 的区别有哪些？第一点区别是，...
    99+
    2023-06-14
  • 关于前端面试中常提到的LRU缓存策略详析
    目录LRU一、为什么要使用Map是来定义容器二、应用场景三、代码实现总结LRU LRU（Least Recently Used）最近最少使用缓存策略，根据历史数据记录，当数据超过了限...
    99+
    2023-05-18
    lur缓存策略 lur缓存
  • 关于C语言strlen与sizeof区别详情
    目录一.sizeof详解1.sizeof()作用2.sizeof3.sizeof ()4.sizeof()与数组名的关系5.sizeof()返回类型造成的坑二.strlen详解三.s...
    99+
    2024-04-02
  • 关于ES6中的箭头函数超详细梳理
    目录一、箭头函数的介绍1.1 什么是箭头函数1.2 基本语法1.3 箭头函数的参数1.4 箭头函数的函数体二、箭头函数的this指向规则三、箭头函数的arguments规则3.1 箭...
    99+
    2022-11-13
    es6箭头函数详解 es6箭头函数作用 es6 箭头
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作