ES6

什么是ECMAScript？
ECMAScript就是JavaScript中的语法规范！

关键字 let 的用法
let关键字是用了声明变量的,类似于var。let声明的变量仅仅在自己的块级作用域起作用，出了这个块级作用域就不起作用。需要先声明定义再使用，同一个块级作用域内，不允许重复声明同一个变量，函数内不能用let重新声明函数的参数。

关键字 const 的用法
const和 let一样，也是用来声明变量的，但是const是专门用于声明一个常量的，顾名思义，常量的值是不可改变的。只在块级作用域起作用,不存在变量提升，必须先声明后使用,不可重复声明同一个变量，声明后必须要赋值。

快速让浏览器兼容ES6特性
比较通用的工具方案有babel，jsx，traceur，es6-shim等。
各大转换工具、javascript解析引擎对ES6的支持程度情况，可以参查看这个地址：'http://kangax.github.io/compat-table/es6/'

解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
var arr = [1,2,3];//把数组的值分别赋给下面的变量；（传统）
var a = arr[0];
var b = arr[1];
var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量；（解构）
console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3
var { a,b,c} = {"a":1,"b":2,"c":3};（对象解构）
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为3
var [a,b,c,d,e,f] = "我就是前端君";（字符串解构）
console.log(a);//我
console.log(b);//就
console.log(c);//是
交换变量的值
var x = 1;
var y = 2;
[x,y] = [y,x];
提取函数返回的多个值
function demo(){
return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果：张三
console.log(age);//结果：21

ES6为字符串String带来哪些好玩的特性？
字符串实现拼接
let name = "Jacky";
let occupation = "doctor";
//传统字符串拼接
let str = "He is "+ name +",he is a "+ occupation;
//模板字符串拼接
let str = He is ${name},he is a ${occupation};
${ }中可以是运算表达式
var str = the result is ${a+b};
${ }中可以是对象的属性
var str = the result is ${obj.a+obj.b};
${ }中可以是函数的调用
var str = the result is ${ fn() };
repeat( )函数：将目标字符串重复N次，返回一个新的字符串，不影响目标字符串。
includes( )函数：判断字符串中是否含有指定的子字符串，返回true表示含有和false表示未含有。第二个参数选填，表示开始搜索的位置。
startsWith( )函数：判断指定的子字符串是否出现在目标字符串的开头位置，第二个参数选填，表示开始搜索的位置。
endsWith( )函数：判断子字符串是否出现在目标字符串的尾部位置，第二个参数选填，表示针对前N个字符。
ES6给我们提供的codePointAt( )函数，就可以处理这种4个字节的字符
var str = "𠮷";
str.codePointAt(); //结果:134071
String.fromCodePoint( )函数：函数的参数是一个字符对应的码点，返回的结果就是对应的字符，哪怕这个字符是一个4字节的字符，也能正确实现
String.fromCodePoint(134071); //结果："𠮷"
String.raw( )；返回字符串最原始的样貌，即使字符串中含有转义符，它都视而不见，直接输出。

ES6为数值做了哪些扩展？
在ES5中，我们存在几个全局函数 isNaN函数，isFinite函数，parseInt函数，parseFloat函数等，属于window对象下的一个方法。
但是在ES6的标准中，isNaN方法被移植到了Number对象上，也就是原本属于全局对象window下的函数，现在属于Number对象上了，同样被处理的函数还有isFinite函数，parseInt函数，parseFloat函数。
Number.isNaN函数：用于判断传入的是否是非数值
Number下面的isNaN都懒得给字符串’abc’做类型转换，直接返回false。而ES5中的isNaN函数会对字符串’abc’进行类型转换后，发现它是一个NaN（非数值），才返回true。
Number.isFinite函数：用来检查一个数值是否非无穷。同样要注意，当Number.isFinite函数返回false的时候，参数不一定就是一个有穷的数值类型，也有可能是一个非数值类型的参数。如：字符串’abc’。
Number.isInteger函数：用来判断是否是整数。
Number.EPSILON常量：定义一个极小的数值。
Math.trunc函数：用于去除一个数的小数部分，返回整数部分。
Math.sign函数：用来判断一个数到底是正数、负数、还是零。
Math.cbrt函数：用于计算一个数的立方根。

ES6为数组做了哪些扩展？
Array.of(1,2,3,4,5); 函数作用：将一组值，转换成数组。
Array.from(ele) instanceof Array; //结果：true，是数组
Array.from函数其中一个用处就是将字符串转换成数组，还有个是克隆数组。看下面的案例：let str = 'hello';
Array.from(str); //结果：["h", "e", "l", "l", "o"]
find( );函数作用：找出数组中符合条件的第一个元素。倘若所有元素都不符合匿名函数的条件，find( )函数就会返回undefind。
let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 2;
}); //结果：value=3
findIndex( ) 函数作用：返回符合条件的第一个数组成员的位置。
fill( )函数作用：用指定的值，填充到数组。
let arr = [1,2,3];
arr.fill(4); //结果：[4,4,4]
arr.fill(4,1,3); //结果：[1,4,4]
entries( )函数作用：对数组的键值对进行遍历，返回一个遍历器，可以用for..of对其进行遍历。
for(let [i,v] of ['a', 'b'].entries())
{
console.log(i,v);
}
//0 "a"
//1 "b"
keys( )函数作用：对数组的索引键进行遍历，返回一个遍历器。
for(let index of ['a', 'b'].keys())
{
console.log(index);
}
//0
//1
values( )作用：对数组的元素进行遍历，返回一个遍历器。
for(let value of ['a', 'b'].values())
{
console.log(value);
}
//a
//b
数组推导：用简洁的写法，直接通过现有的数组生成新数组
假如我们有一个数组，我在这个数组的基础上，每个元素乘以2，得到一个新数组。
var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//结果： [ 2, 4, 6, 8 ]
在数组推导中，for..of后面还可以加上if语句
var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1) if(i>3) i];
console.log(array2);
//结果： [4]

ES6为对象做了哪些扩展？
ES6给我们带来了更简便的表示法，我们一起来对比一下：
var name = "Zhangsan";
var age = 12;
//传统的属性写法
var person = {
"name":name,
"age":age
};
console.log(person);
//结果：{name: "Zhangsan", age: 12}
//ES6的属性写法
var person = {name,age};
console.log(person);
//结果：{name: "Zhangsan", age: 12}

//传统的表示法
var person = {
say:function(){
alert('这是传统的表示法');
}
};
//ES6的表示法
var person = {
say(){
alert('这是ES6的表示法');
}
};
在表示法上除了这点改进以外，还有另外一个新特点：用字面量定义一个对象的时候，可以用表达式作为对象的属性名或者方法名。
var f = "first";
var n = "Name";
var s = "say";
var h = "Hello";
var person = {
[ f+n ] : "Zhang",
s+h {
return "你好吗？";
}
};
console.log(person.firstName);
//结果：Zhang
console.log(person.sayHello());
//结果：你好吗？
Object.is()函数，它的作用也跟严格相等一样，
var str = '12';
var num = 12;
var num2 = 12;
Object.is(str,num);
//结果：false
Object.is(num2,num);
//结果：true
Object.assign()函数作用：将源对象的属性赋值到目标对象上。
//这个充当目标对象
let target = {"a":1};
//这个充当源对象
let origin = {"b":2,"c":3};
Object.assign(target,origin);
//打印target对象出来看一下
console.log(target);
//结果 {a: 1, b: 2, c: 3}
巧妙利用Object.assign( )函数的功能，我们可以完成很多效果，比如：给对象添加属性和方法，克隆对象，合并多个对象，为对象的属性指定默认值。

ES6为函数做了哪些扩展？
设定默认值，有默认值的参数后面不能再跟不需默认值的参数了。
function person(name = 'Zhangsan',age = 25){
console.log(name,age);
}
person();//结果：Zhangsan 25
person('Lisi',18);//结果：Lisi 18
rest参数，这是一个新的概念，rest的中文意思是：剩下的部分。
//求和函数，得到的结果赋值到result
function sum(result,...values){
//打印values看看是什么
console.log(values);
//结果：[1,2,3,4]
//进行求和
values.forEach(function (v,i) {
//求和得到的结果存到result
result += v;
});
//打印出求和的结果看看
console.log(result);
//结果：10
}
//存储求和结果的变量res
var res = 0;
//调用sum函数
sum(res,1,2,3,4);
箭头函数，这又是一个新概念，ES6给我们介绍一种全新的定义函数的方式，就是用箭头符号（=>），故得名为箭头函数。
var sum = function(a) {
return a ;
};
//箭头函数写法
var sum = a => a;
/ /箭头函数写法
var sum = (a,b) => {return a+b}
sum(1,2);//结果：3
箭头函数中的this指向的是定义时的this，而不是执行时的this。

JavaScript有了一种全新的数据类型：Symbol
ES6设计出一个Symbol的初衷：解决对象的属性名冲突。
let name = Symbol();
let person = {
[name]:"张三"
};
console.log(person[name]);
//结果：张三
console.log(person.name);
//结果：undefined
当symbol值作为对象的属性名的时候，不能用点运算符获取对应的值。
当symbol类型的值作为属性名的时候，该属性是不会出现在for...in和for...of中的，也不会被Object.keys( )获取到。

ES:给开发者提供了一个新特性:Proxy，就是代理的意思。
待补充！

for...of 一种用于遍历数据结构的方法。它可遍历的对象包括数组，对象，字符串，set和map结构等具有iterator 接口的数据结构。
for(let i = 0;i<arr.length;i++){ }（代码不够简洁）
arr.forEach(function (value,index) { });（无法中断停止整个循环）
for(let i in arr){}如果用于数组的循环，那么就要注意了，上述代码中每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换，造成不方便。
for(let value of arr){ }
1.写法比for循环简洁很多；
2.可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；
3.结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型。
for(let index of arr.keys()){
console.log(index);
}
for...of 支持字符串的遍历。
for...of支持类数组的遍历
for...of支持set和map解构的遍历，考虑到set和map我们还没学习

只要一个数据结构拥有一个叫Symbol.iterator方法的数据结构，就可以被for...of遍历，我们称之为：可遍历对象。

ES6新增的 Set 和 WeakSet 是什么东西？
Set是ES6给开发者带来的一种新的数据结构，它的值不会有重复项。
var s = new Set([1,2,3]);
console.log(s); //打印结果：Set {1, 2, 3}
如果你不想用数组作为参数来传值初始化变量s，你还可以通过Set 结构提供的add方法来添加方法，也是没问题的。
var s = new Set();
//使用add方法添加成员
s.add(1);
s.add(2);
s.add(3);
console.log(s);
//打印结果：Set {1, 2, 3}
size属性：获取成员的个数。
delete( )方法：用户删除Set结构中的指定值，删除成功返回：true，删除失败返回：fasle。
clear( )方法：清除所有成员。
has( )方法：判断set结构中是否含有指定的值。如果有，返回true；如果没有，返回fasle。
keys( )方法：返回键名的遍历器。
values( )方法：返回键值的遍历器。
entries( )方法：键名+键值
WeakSet 是给对象赋值

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,340评论 5赞 467
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,762评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,329评论 0赞 329
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,678评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,583评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,995评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,493评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,145评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,293评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,973评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,556评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2赞 339

推荐阅读更多精彩内容

  • JavaScript ES6 核心功能一览
    JavaScript ES6 核心功能一览（ES6 亦作 ECMAScript 6 或 ES2015+） Java...
    蜗牛淋雨阅读 1,757评论 0赞 12
  • es6学习笔记
    《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效，var声...
    亲爱的孟良阅读 707评论 1赞 2
  • ES6基础笔记二
    ES6 箭头函数、函数扩展 ES5： function add(a,b){return a+b;}console....
    紫由袅阅读 353评论 0赞 1
  • ES6
    你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本，它有很...
    奋斗的小废鱼阅读 763评论 0赞 16
  • ES6
    你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本，它有很...
    米塔塔阅读 919评论 0赞 10