ES6基础笔记

ES6 的开发环境搭建

初始化:

npm init -y

-y表示直接安装好,不需要每个手动通过

使用安装,基本转换,ES5打包代码的命令行:

1.npm install -g babel-cli

2.npm install --save-dev babel-preset-es2015 babel-cli

3.新建一个 .babelrc 文件

{

"ressets":[

"es2015"

],

"plugins":[]

}

4.babel转换成ES5的命令行:

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

babel ES6的js文件路径 -o 转化成ES5的文件路径

5.输入启动命令行的命令在package.json 文件里的"scripts"

不需要每次都输入babel src/index.js -o dist/index.js

"scripts":{

//这里相当于输入的命令行代码:npm run build

"build":"babel  src/index.js -o dist/index.js"

}

ES6 声明的方式

var 是全局声明,污染外部的区块

let 是局部声明

const是常量声明,不可变

变量的结构赋值(json的数据)

数组是按顺序解构的

对象是按照对象名进行解

数组:

例子:

let a =0;

let b = 1;

let c = 2;

解构:

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

左右两边的结构要一致

let[foot="false"]=[]; //false 这里是直接变成默认值

//undefined null的区别

let[a,b="技术胖"]=["JSPang",undefined];//技术胖JSpang

let[a,b="技术胖"]=["JSPang",null];//JSPangbull

对象

let{foo,bar}={foo:"jspang",bar:"技术胖"};

解构的坑:()圆括号的用法

let foo;

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

console.log(foo);

注意:在程序开发中尽量使用'',比使用"" 要快运行一些,压缩运行会快很多

字符串的解构

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);

结果:

j

s

p

a

n

g

用处:权限的时候:解构后进行权限解构

数组(默认值的解构)、对象、字符串的解构

ES6 第四节 对象扩展运算符 ...

不明确传递参数的个数时可以使用

function jspang(...arg){

}

jspang(1,2,3)

例子:

let arr1 = ['www','jspang','com'];

let arr2 =[...arr1];

console.log(arr2);

arr2.push('hezitao');

console.log(arr2);

console.log(arr1);

rest ...运算符(剩余的参数个数不确定的时候使用)

function jspang(first,...arg){

console.log(arg.length);

for(let val of arg){

console.log(val);

}

}

jspang(0,1,2,3,4,5,6,7)

ES6 字符串的模板 `` 

对html代码和运算符也可以解析

let wowo = "随时随地发现新鲜事!微博带你欣赏世界上每一个精彩瞬间,了解每一个幕后故事";

let oo =`新浪微博${wowo}呀呀呀`;

console.log(oo);

查找字符串:

以前使用indexOf

可以使用includes

开头查找startsWith

结尾查找endsWith

复制  .repeat()

ES6 新增的数组的知识

1.Array.from 方法

json数组格式的转化

let json3 ={

"0" : '我',

"1" : '是',

"2" : '你',

length:3

}

let arr2 = Array.from(json3);

console.log(arr2);

结果:

["我", "是", "你"]

2.Array.of 方法:一堆字符串或者是数字转化成数组

后台只传'3,4,5,6',你要数组格式

let arr = Array.of(3,4,5,6);

console.log(arr);

结果:[3,4,5,6]

3.find()实例方法;先声明实例对象,才有的方法

let arr =[1,2,3,4,5,6,7,8,9];

console.log(arr.find(function(value,index,arr){

return value>5;

}))

结果:5

4.fill 填充(替换)方法

let arr =['hezi','js','jq'];

arr.fill('web',1,2);

console.log(arr);

结果:

['hezi','web','jq']

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • ES6 箭头函数、函数扩展 ES5: function add(a,b){return a+b;}console....
    紫由袅阅读 353评论 0 1
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 705评论 1 2
  • ES6语法跟babel: 一、首先我们来解释一下什么是ES? ES的全称是ECMAScript。1996 11 ,...
    Mooya_阅读 962评论 0 0
  • 什么是ECMAScript?ECMAScript就是JavaScript中的语法规范! 关键字 let 的用法le...
    豆奶不小心阅读 338评论 0 0
  • 昨天,偶然发现:8月22号,让生信小伙伴日顾夜盼的bioconda中国镜像已经在清华tuna镜像源的一个服务器上建...
    zd200572阅读 727评论 0 1