1. Toy模板网首页
  2. > Toy博客

BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

7月前 作者：玄子Share 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

4.7 ECMAScript 6

4.7.1 ECMAScript 6 简介

ECMAScript 6.0（简称 ES6）

  • 是JavaScript语言的下一代标准
  • 正式发布于2015年6月

目标

  • 使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

版本升级

  • ECMAScript 2015
  • ECMAScript 2016
  • ECMAScript 2017

ECMAScript和JavaScript 的关系

  • 前者是后者的规格，后者是前者的一种实现

4.7.2 ES6与ES2015的关系

ES6与ES2015的关系

  • ES6

    • 是5.1版以后的JavaScript的下一代标准

    • 涵盖了ES2015、ES2016、ES2017等等

  • ES2015

    • 是ES6第一个版本的正式名称
    • 特指该年发布的正式版本的语言标准

4.7.3 各大浏览器对ES6的支持情况

各大浏览器支持情况及开始时间

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OxGzd4ga-1682307261810)(./assets/image-20230423215938883.png)]

目前，各大主流浏览器稳定版本对于ES6的绝大部分属性及方法均已支持

4.7.4 Babel转码器

可以将ES6代码转为ES5代码，从而在现有环境执行

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

4.7.5 配置babel转ES6为ES5步骤

步骤1：初始化ES6项目，执行

npm init      //初始化package.json

步骤2：在与package.json同一目录下编写配置文件.babelrc

{      "presets": [],   "plugins": []    }

步骤3：安装babel转码规则

// ES2015转码规则
npm install --save-dev babel-preset-es2015
// ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

步骤4：安装好的规则加入到 .babelrc

{  
"presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": []
}

步骤5：安装babel-cli工具，用于命令行转码

npm install --global babel-cli
// 转码输出文件
example.js
[1,2,3].map(x => x*x);
// 执行转码
babel example.js -o compile.js --presets es2015
转码后的compiled.js文件：
"use strict";
[1, 2, 3].map(function (x) {
    return x * x;
});

步骤6：实时监听编译文件

To compile a file every time that you change it, use the --watch or -w option:
$ babel example.js --watch -o compiled.js --presets es2015

除了自行配置babel将ES6代码转为ES5代码以外，还可以使用babel在线转码工具

babel转码: https://babeljs.io/repl

4.8 ES6新增命令

let命令

  • 声明变量
  • 用法类似于var
  • 但是，所声明的变量，只在let命令所在的代码块内有效

const命令

  • 声明一个只读的常量
  • 一旦声明，常量的值就不能改变

4.8.1 let命令-基本使用

使用let命令声明变量

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

4.8.2 let命令-不存在变量提升

let命令所声明的变量一定要在声明后使用，否则报错

//使用var的情况
console.log(a);  //undefined
var a = 1;

//使用let的情况
console.log(b);  //ReferenceError: b is not defined
let b = 2;

4.8.3 let命令-暂时性死区

在代码块内，使用let命令声明变量之前，该变量都是不可用的，在语法上，称为“暂时性死区”

if (true) {
    // 暂时性死区开始
    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError
    let tmp; // TDZ结束
    console.log(tmp); // undefined
    tmp = 123;
    console.log(tmp); // 123
}

4.8.4 let命令-不允许重复声明

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

let a = 1;
let a = 2;
console.log(a);  // Identifier 'a' has already been declared
var b = 3;
var b = 4;
console.log(b);  // 4

4.8.5 let命令-块级作用域

在ES6中，为什么新增了块级作用域？

  • 内层变量可能会覆盖外层变量
  • 用来计数的循环变量泄露为全局变量
function f1() {
    let n = 5;
    if (true) {
        let n = 10;
    }
    console.log(n); // 5
}
f1();

4.8.6 const命令-基本用法

使用const命令定义变量

const PI = 3.1415;
console.log(PI); // 3.1415
PI = 3;  // TypeError: Assignment to constant variable

4.8.7 const命令其他特性

  • 只在声明所在的块级作用域内有效
  • const命令声明的常量不提升
  • 存在暂时性死区，只能在声明的位置后面使用
  • 声明的常量，也与let一样不可重复声明

4.9 变量的解构赋值

解构赋值是对赋值运算符的扩展，针对数组或者对象先进行模式匹配，然后对其中的变量进行赋值

  • 数组的解构赋值
  • 对象的解构赋值
  • 字符串的解构赋值
  • 数值和布尔值的解构赋值
  • 函数参数的解构赋值

4.9.1 数组的解构赋值-基本用法

在ES5中，为变量赋值，只能直接指定值

let a = 1;
let b = 2;
let c = 3;

在ES6中，可以从数组中提取值，按照对应位置，对变量赋值

let [a,b,c]=[1,2,3];

4.9.2 数组的解构赋值-其他特性

//可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a); //1
console.log(b); //2
console.log(c); //3
//可忽略
let [a, , b] = [1, 2, 3];
console.log(a); //1
console.log(b); //3

//不完全解构
let [a, b] = [1, 2, 3]; 
console.log(a); //1
console.log(b); //2
let [a, [b], c] = [1, [2, 3], 4];
console.log(a); //1
console.log(b); //2
console.log(c); //4

//剩余运算符
let [a, ...b] = [1, 2, 3];
console.log(a); //1
console.log(b); //[2, 3]
//解构默认值
let [x, y = 'b'] = ['a']; 
console.log(x); //'a'
console.log(y); //'b'

4.9.3 对象的解构赋值-基本用法

数组的元素是按次序排列的，变量的取值由它的位置决定，对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let {bar,foo}={foo:"ECMAScript 6.0",bar:"hello"};
console.log(bar); //hello
console.log(foo); //ECMAScript 6.0
let {abc} = {foo:"ECMAScript 6.0",bar:"hello"};
console.log(abc); //undefined

4.9.4 对象的解构赋值-其他特性

//可嵌套
let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, { y }] } = obj;
console.log(x); //hello
console.log(y); //world
//可忽略
let obj = {p: ['hello', {y: 'world'}, 'ECMAScript'] }; 
let {p: [x, { y }] } = obj;
console.log(x); //hello
console.log(y); //world

//不完全解构
let obj = {p: [{y: 'world'}, 'hello'] }; 
let {p: [{ y }, x, z ] } = obj;
console.log(x,y,z); //hello ,world,undefined
//剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; 
console.log(a,b); //10,20
console.log(rest); //{c: 30, d: 40}

//解构默认值
let {a = 10, b = 5} = {a: 3};
console.log(a); //3
console.log(b); //5
let {a: aa = 10, b: bb = 5} = {a: 3}; 
console.log(aa); //3
console.log(bb); //5

4.9.5 字符串的解构赋值

字符串被转换成了一个类似数组的对象

const [a, b, c] = 'yes';
console.log(a)  //y
console.log(b)  //e
console.log(c)  //s

4.9.6 数值解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

4.9.7 布尔值的解构赋值

let {toString: s} = true;
s === Boolean.prototype.toString // true

如果等号右边是数值和布尔值，会先转为对象

4.9.8 函数参数的解构赋值-基本用法

除了数组、对象、字符串等可以解构赋值以外，函数的参数也可以使用解构赋值

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

4.9.9 函数参数的解构赋值-使用默认值

定义一个move()函数，在调用时传入不同的参数

function move({x = 0, y = 0} = {}) {
    console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

function move({x, y} = { x: 0, y: 0 }) {
    console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

4.9.10 变量解构赋值的用途

  • 交换变量的值
  • 从函数返回多个值
  • 函数参数的定义
  • 提取 JSON 数据
  • 函数参数的默认值
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]   
};
let { id, status, data: number } = jsonData;
// 解析jsonData的值

4.10函数拓展

4.10.1 函数参数默认值

  • 基本用法
  • 优点和局限性
  • 与解构赋值默认值结合使用
  • 其他特性

4.10.2 函数参数默认值-基本用法

在ES6之前，是否可以直接为函数的参数指定默认值？

function foo(x, y) {
  y = y || 'World';
  console.log(x, y);
}
foo('Hello') // Hello World
foo('Hello', 'ES6') // Hello ES6
foo('Hello', '') // Hello World

function foo(x, y = 'World') {
  console.log(x, y);
}
foo('Hello') // Hello World
foo('Hello', 'ES6') // Hello ES6
foo('Hello', '') // Hello

4.10.3 函数参数默认值-局限性

  • 参数变量是默认声明的，所以不能用let或const再次声明
  • 使用参数默认值时，函数不能有同名参数
function foo(x = 5) {
    let x = 1; // error
    const x = 2; // error
}
foo();

//不报错
function foo(x, x, y) {// ...}
foo();
// 报错
function foo(x, x, y = 1) { // ...}
foo();

4.10.4 函数参数默认值-与解构赋值默认值结合

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

4.10.5 函数参数默认值-其他特性

参数默认值的位置

函数的 length 属性

  • 返回没有指定默认值的参数个数

作用域（context）

  • 一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域
  • 等到初始化结束，这个作用域就会消失

rest 参数

  • 用于获取函数的多余参数
//参数默认值的位置
function foo(x = 1, y) {console.log(x,y);}
foo(); // [1, undefined]
//foo(2); // [2, undefined])
//foo(, 1); // 报错
//foo(undefined, 1); // [1, 1]
//foo(null, 1);
//函数的 length 属性
console.log((function (a) {}).length) // 1
console.log((function (a = 5) {}).length) // 0
console.log((function (a, b, c = 5) {}).length) // 2

//作用域
var x = 5;
function f(x, y = x) {console.log(y);}
f(10); // 10
//rest 参数实现求和
function add(...values) {
    let sum = 0;
    for (var val of values) {sum += val;}
    console.log(sum);
}
add(1, 2, 3) // 6

4.11 箭头函数

  • 基本用法
  • 参数及函数体特点
  • this出现的原因、与ES5中this的区别
  • 使用注意点
  • 不适用场合

4.11.1 箭头函数基本使用

使用“箭头”（=>）定义函数

let f = v => v;
// 等同于
let f = function (v) {
  return v;
};

特点

  • 简洁
  • 参数
  • 函数体的大括号

4.11.2 箭头函数-参数

  • 没有参数
let fun1 = () => console.log('fun1()'); //()不能省略
  • 一个参数
let fun1 = a => console.log(a); //()可以省略
  • 两个及两个以上的参数
let fun1 = (x,y) => console.log(x,y); // ()不能省略

4.11.3 箭头函数-函数体

  • 只有一条语句或者表达式
 //{}可以省略，会自动返回语句执行的结果
let fun1 = (x,y) => console.log(x+y);
  • 不止一条语句或者表达式
// 添加{ }时返回结果一定要有return
let fun1 = (x,y) => {
    console.log(x,y);
    return x+y;
}

4.11.4 箭头函数-this出现的原因

在ES6中，为什么会出现箭头函数this？

  • 解决了匿名函数this指向的问题
  • setTimeout()和setInterval()函数中使用this所造成的问题
function Timer() {
    this.s1 = 0;this.s2 = 0;
    // 箭头函数 
    setInterval(() => this.s1++, 1000);
   // 普通函数 
    setInterval(function () {  this.s2++;    }, 1000);}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);// s1: 3
setTimeout(() => console.log('s2: ', timer.s2), 3100);// s2: 0

4.11.5 箭头函数-this区别及使用

箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

扩展理解

  • 箭头函数的this判断外层是否有函数
    • 如果有，外层函数的this就是内部箭头函数的this
    • 如果没有，则this是window

4.11.6 箭头函数-不适用场合

  • 定义对象的方法，且该方法内部包括this
  • 需要动态this的时候，也不应使用箭头函数
const cat = {
    lives: 9,
    jumps: () => {
        this.lives--;
    }
}

var button = document.getElementById('press');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础文章来源地址https://www.toymoban.com/news/detail-426502.html

到了这里，关于BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • python_web1（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

    python_web1（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

    知识总结： Python_web前端开发 python 安装Flask web框架 pip install flask 简介：templates用来返回html的页面，而非文本。 创建文件index.html 结构如下 index.xml内容如下： web1.py内容如下： 重新运行后： 固定格式：h/div/span/a/img/ul/li/table/input/form 通用的字符编码 meta charset=“UTF-8” div:一个

    2024年04月14日
    浏览(45)
  • jQuery.js - 前端必备的Javascript库

    jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么？ jQuery是一个快速简洁、免费开源易用的JavaScript框架， 倡导写更少的代码，做更多的事情 。它封装JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，以及我们开发中常用到的操作DOM的API，优化HTML文

    2024年02月05日
    浏览(47)
  • 前端Vue入门-day07-Vuex入门

    前端Vue入门-day07-Vuex入门

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 自定义创建项目 vuex概述 构建 vuex [多组件数据共享] 环境  创建一个空仓库 state 状态 1. 提供数据： 2. 使用数据： mutations  辅助函数 - mapMutations actions 辅助函数 - mapAc

    2024年02月14日
    浏览(26)
  • jQuery UI -- 日历选择器，高端web前端开发

    jQuery UI -- 日历选择器，高端web前端开发

    2、关于JS的部分，将我们引入的 js 文件: jquery-ui-1.10.3.custom.min.js 替换为: jquery.ui.core.js 和 jquery.ui.datepicker.js 。 jquery-ui-1.10.3.custom.min.js 的大小是223KB，而 jquery.ui.core.js 和 jquery.ui.datepicker.js 的大小一起是84KB。 这样，我们同样能实现一个日期选择器的功能，但是就没有 jQuery U

    2024年04月17日
    浏览(27)
  • STM32F103RCT6开发板M3单片机教程07-TIMER1CH1输出 PWM做LED呼吸灯

    STM32F103RCT6开发板M3单片机教程07-TIMER1CH1输出 PWM做LED呼吸灯

    本教程使用是（ 光明谷SUN_STM32mini开发板 ）   免费开发板   在谷动谷力社区注册用户，打卡，发帖求助都可以获取积分，当然最主要是发原创应用文档奖励更多积分． (可用积分换取，真的不用钱，开发板免费玩)：STM32F103RCT6开发板M3单片机核芯小系统板学习板 ... 已经购买用

    2024年02月22日
    浏览(45)
  • 前端web入门-CSS-day07

    前端web入门-CSS-day07

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 定位 相对定位  绝对定位 定位居中 固定定位 堆叠层级 z-index  定位-总结  高级技巧 CSS 精灵 字体图标 字体图标 – 下载字体 字体图标 – 使用字体  CSS 修饰属性  

    2024年02月11日
    浏览(29)

  • 在前端开发中，何时应该使用 jQuery，何时应该使用 Vue.js

    如果您是最近才开始进入 Web 前端开发领域的开发人员，那么您可能会听说过 jQuery。jQuery 是一个小巧而功能强大的 JavaScript 库，旨在简化跨浏览器 DOM 操作、事件处理、动画效果和 AJAX 等方面的操作，可以让开发人员更轻松地开发出高质量的网站和 Web 应用程序。 何时应该使

    2024年02月02日
    浏览(36)
  • 「网页开发｜前端开发｜Vue」07 前后端分离：如何在Vue中请求外部数据

    「网页开发｜前端开发｜Vue」07 前后端分离：如何在Vue中请求外部数据

    本文主要介绍两种在Vue中访问外部API获取数据的方式，通过让Vue通过项目外部的接口来获取数据，而不是直接由项目本身进行数据库交互，可以实现前端代码和后端代码的分离，让两个部分的代码编写更独立高效。 「网页开发｜前端开发｜Vue」01 快速入门：快速写一个Vue的

    2024年02月09日
    浏览(31)
  • 前端JavaScript入门-day05

    前端JavaScript入门-day05

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 对象（object）：JavaScript里的一种数据类型 可以理解为是一种无序的数据集合， 注意数组是有序的数据集合 用来描述某个事物，例如描述一个人 人有姓名、年龄、性别等信息

    2024年02月11日
    浏览(31)
  • 前端JavaScript入门-day03

    前端JavaScript入门-day03

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 1、循环-for 1. for 循环-基本使用 1. for循环语法 2. 退出循环  2. for 循环嵌套  2、数组  1 数组是什么 2 数组的基本使用  1. 声明语法 2. 取值语法  3. 一些术语：  4. 遍历

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包