关键词搜索

全站搜索×
密码登录在这里
×
注册会员

已有账号? 请点击

使用其他方式登录

ES6中数组与函数

发布2022-06-25浏览272次

详情内容

这是一个

本文会简要介绍 babel 的概念、ES6 声明变量、ES6 数组和 ES6 函数。

一、babel 简介

Babel 是一个转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行,保证了我们可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。

Babel 默认使用一组 ES2015 语法转换器,允许你使用新的语法,无需等待浏览器支持。Babel 内置支持 JSX,与 babel-sublime 包一起结合,将语法高亮功能带到一个新的高度。Babel 支持用户插件,允许你插入强大的 Babel 转换层。

二、ES6 声明变量

let

let 声明的变量只在 let 命令所在的代码块内有效。let 声明不存在变量提升,在声明变量之前,变量不存在会报错。

示例:新建一个名为 index1.js 的文件,在其中写入以下代码。

for (let i = 0; i < 10; i++) {setTimeout(function () {console.log(i);});}


在终端使用以下命令运行:

node index1.js


可以看到,以下结果:
请添加图片描述
const

const 声明一个只读的常量,声明时必须进行初始化,常量的值不能改变。

示例:新建一个名为 index2.js 的文件,在其中写入以下代码。

const PI = "3.1415926";console.log(PI);


在终端使用以下命令运行:

node index2.js


可以看到,以下结果:
请添加图片描述
import

 在 ES6 之前,使用 require 来导入需要使用的外部的文件,ES6 之后,引入外部的文件或者模块,使用 import,它与 export 配合使用。

案例:

步骤一:新建一个名为 demo1.js 的文件,在其中输入以下代码:

let show = function () {
  console.log("hello world...");};export { show };


步骤二:新建一个名为 demo2.js 的文件,在其中输入以下代码:

import { show } from "./demo1.js";let app = new show();console.log(app);


步骤三:全局安装 babel-cli,在终端输入以下命令:

npm install babel-cli -g


步骤四:安装 babel-preset-env,在终端输入以下命令:

npm install babel-preset-env -D


步骤五:在终端输入以下命令运行 demo2.js 文件:

babel-node --presets env demo2.js


我们会看到如下图所示的效果:
请添加图片描述

三、ES6 数组

ES6 apply 方法

 apply() 应用某一个对象的一个方法,用另一个对象替换当前对象。

apply([thisObj, argArray]);


示例:

<html>
  <head></head>
  <body><script>  // 使用 apply 实现继承  function Animal(name) {this.name = name;this.showName = function () {  alert(this.name);};  }  function Cat(name) {Animal.apply(this, [name]);  }  var cat = new Cat("miaomiao");  cat.showName();</script>
  </body></html>


四、ES6 扩展运算符

 扩展运算符( spread )是三个点(…),主要用于函数调用,它能够将一个数组转为用逗号分隔的参数序列,也可以用于数组的合并,与解构赋值配合使用等等。

示例:

<html>
  <head></head>
  <body><script>  const color = ["red", "yellow"];  const colors = [...color, "green", "pink"];  console.log(colors);  document.write(colors);</script>
  </body></html>


效果如下:
在这里插入图片描述

五、ES6 函数

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

 ES6 新增了解构,将一个数据结构分解为更小部分的过程。使用 ES5 提取对象中的信息形式如下:

<html>
  <head></head>
  <body><script>  var person = { name: "zhangsan", age: 23 };  var name = person.name;  var age = person.age;  document.write(name + "---" + age);</script>
  </body></html>


使用解构可以从对象里取出数据存为变量。

<html>
  <head></head>
  <body><script>  var person = { name: "zhangsan", age: 23 };  var { name, age } = person;  document.write(name + "---" + age);</script>
  </body></html>


效果如下:
在这里插入图片描述

六、rest 参数

 ES6 新增了 Rest 参数用来接收函数的多余参数,组成一个数组,放在形参的最后。

示例:

<html>
  <head></head>
  <body><script>  function nums(a, b, ...rest) {//console.log(a);//console.log(b);//console.log(rest);document.write(a + "</br>");document.write(b + "</br>");document.write(rest);  }  nums(1, 2, 3, 4, 5);  //nums(19);</script>
  </body></html>


当 nums(1,2,3,4,5) 时,效果如下:在这里插入图片描述
当 nums(19) 时,效果如下:在这里插入图片描述

七、箭头函数

 使用箭头函数不需要 function 关键字来创建函数,省略 return 关键字 ,继承当前上下文的 this 关键字。

看下面代码(ES6):

(response,message) => { ....... }


相当于 ES5 代码:

function(response,message){ ...... }


在 ES5 中我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如:

function people(name, age) {
  return {name: name,age: age,
  };}


以上代码可以简写为:

function people(name, age) {
  return {name,age,
  };}


总结

 本文介绍了 babel 的概念;ES6 声明变量里面的 let、const 方法;ES6 数组的 apply 方法和扩展运算符;以及 ES6 函数参数默认值与解构赋值结合、rest 和 参数箭头函数。

,可点击上面演示按钮看HTML页面效果,有需要可直接下载或开通SVIP终生会员全站免费下载。
点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载