美文网首页
ES6搭建环境,变量的解构赋值

ES6搭建环境,变量的解构赋值

作者: 晓卢轩 | 来源:发表于2018-01-22 16:43 被阅读0次

ES6搭建环境

建立工程目录:

先建立一个项目的工程目录,并在目录下边建立两个文件夹:srcdist

src:书写ES6代码的文件夹,写的js程序都放在这里。

dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。

编写index.html:

文件夹建立好后,我们新建一个index.html文件。

需要注意的是在引入js文件时,引入的是dist目录下的文件。

1在安装Babel之前,需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入下边的命令:

1,npm init -y

2,全局安装Babel-cli(1npm install -g babel-cli)

3,npm install --save-dev babel-preset-es2015 babel-cli

4,新建.babelrc

在根目录下新建.babelrc文件,并打开录入下面的代码

{

    "presets":[

        "es2015"

    ],

    "plugins":[]

}

5,babel src/index.js -o dist/index.js

6,

变量的解构赋值

//const 常量,声明就不能变了

//let 局部

//var 全局,会污染外部

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

//let [a=true][]  //true

//let [a,[b,c],d]=[1,[2,3],4]

//undfined 没有值值默认值

//null 有值取的null

//let [a,b='技术胖']=['jspang',undefined]  -》jspang技术胖

//let [a,b='技术胖']=['jspang',null]  -》jspang null

//数组是按顺序,对象是按key值

let [a,b="JSPang"]=['技术胖']

console.log(a+b); //控制台显示“技术胖JSPang”

解构不仅可以用于数组,还可以用于对象。

let {foo,bar} = {foo:'JSPang',bar:'技术胖'};

console.log(foo+bar); //控制台打印出了“JSPang技术胖”

如果在解构之前就定义了变量,我们这时候只要在解构的语句外边加一个圆括号

let foo;

({foo} ={foo:'JSPang'});

console.log(foo); //控制台输出jspang

字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e,f]="JSPang";

console.log(a);

console.log(b);

console.log(c);

console.log(d);

console.log(e);

console.log(f);

相关文章

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6

    ES6: ES6 新语法 1.变量 解构赋值 (解构赋值对应的python里的序列解包) 解构赋值方式一: 解构赋...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6知识点复习(二)

    变量的解构赋值 解构赋值允许指定默认值,es6内部使用严格相等运算符 === 默认值可以引用解构赋值的其他变量,但...

  • es6中的解构赋值

    es6中的对象解构赋值 对象的解构赋值,新变量名字要和对象中的变量名一致 数组中的解构赋值,数组是依次赋值的 字符...

  • ES6入门笔记

    变量的解构赋值 数组的解构赋值ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Dest...

  • ES6学习笔记——解构赋值

    变量的结构赋值 数组的解构赋值 ES6允许从数组中提取值,按照对应的位置,对变量赋值。 如果解构不成功,变量的值就...

  • 杂货小铺之ES6+ 🍳 解构赋值

    解构赋值 ? 在 ES6 中新增了变量赋值的方式:解构赋值。允许按照一定模式,从数组和对象中提取值,对变量进行赋值...

  • 26

    ES6 一、解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值,解构赋值主要...

网友评论

      本文标题:ES6搭建环境,变量的解构赋值

      本文链接:https://www.haomeiwen.com/subject/pstraxtx.html