es6学习-2

学习ES56语法
http://es6.ruanyifeng.com/?spm=5176.100239.blogcont82041.28.r2N91S#docs/let

//输出内容 是 两个 “ ” “”空字符串
用

For(let i of text)
{
Console.log(i);
}

//可以输出 这个 32为的汉字 是 上土下口的 ji 字
//for…of循环会正确识别出这一个字符。

Es5有charAt(字符)方法返回给定字符的位置，
而无法识别大于 0xFFFF的字符

ES6用 at(字符) 方法可以

‘abc’.at(0); // a
‘我’.at(0);//我

4、
Normalize 字符串实例化

将多个字符合成一个 或者将多个合成字符 分解成多个简单字符，但不能识别三个或者三个以上的字符，他们只能够用 正则表达式

5、
传统方法 indexof
字符串新方法

字符串.Includes()
字符串.startsWith()
字符串.endsWith()
传入参数，判定是否包括 ，是否在头部，是否在尾部，，且支持第二个位置，表示从哪个搜索位置开始
6、
Repeat(传入整数);//表示将字符串重复n字返回
7、

字符串.padStart(指定长度，用于补全的字符串);//头部补全，不够长度则重复补全字符补全
字符串.padEnd(指定长度，用于补全的字符串);//尾部补全，不够长度，则重复补全

如果指定长度，已经小于原来字符，则返回原来字符

‘12’.padStart(10,’YYYY-MM-DD’);//指定格式形式 “YYYY-MM-12”

8、模板字符串 反引号 包围，标识是模板字符串
如 这种标识，当作为字符串时候 需要用 反引号 包围来标识才可以作为普通字符串使用,在键盘左上角的那个

there are <b>${basket.count}</b> 使用变量的形式

$(‘#result’).append(‘abc’); 前面那个 取出变量的另一种形式

在字符串中使用反引号 则需要使用 转义符 \

Var greeting = \You ` World`;

//在模板字符串中使用变量要用下面这种形式
${bask}

//也可以使用函数
${fn()}

${‘字符串’};//会原样输出
可嵌套

下面两个会用到正则表达式等
模板编译 返回 html页面内容
标签模板 过来HTML字符串，防止用户恶意内容

9、String.raw();返回 替换变量后的真实字符串内容，对于字符串中的\也会转义为 \形式

Raw方法使用的时候，第一个参数 必须是一个数组，且具有Raw属性

String.raw({raw:’test’,0,1,2});// ‘test’ 即是 [‘t’,’e’,’s’,’t’]

10、模板字符串可以嵌入LaTEX语言

正则表达式

1、match replace search split方法内可以使用
2、U修饰大于 0xffff的字符 并用大括号包括 字符
/\u{20bb7}/u.test(‘吉’);//true

/g表示全局匹配是否含有
/y表示 从剩余的第一个位置开始匹配

/待匹配字符串/g或者y 表示从全局还是剩余中匹配

Y表示在指定标记开始，

数值扩展
1、Number的方法

parseInt() parseFloat()

数组的扩展

1、Array.from（）方法将 类数组转化为 真正的数组

Let arrayLike ={
‘0’: ‘a’,
‘1’: ‘b’,
‘2’:’c’,
Length:3
};

ES5写法 var arr1 = [].slice.call(arrayLike);
ES6 写法Var arr1 = Array.from(arrayLike);// 转化为[‘a’,’b’,’c’]

类似数组的对象

任何有length属性的对象，都可以通过Array.from方法转化为 数组

Array.from还可以传入第二个参数 作用是调用方法将数组逐个处理，并返回新的数组

Array.from(arrayLike, x => x * x);//x只带数组中每个值，返回 x*x
Array.from(arrayLike ).map(x => x * x);//
Array.from([1,2,3], (x) => x * x);//

上述三个表达式一样意思

取出DOM节点
Let spans = document.querySelectorAll(‘span.name’);
Let names1 = Array.prototype.map.call(spans, s => s.textContent);
Let names2 = Array.from(spans, s => s.textContent);

Array.form({length:2}, () => ‘jack’);//返回 [‘jack’,’jack’] 由原始数组调用map功能返回新数组

Array.of()代替 Array()

Array.of()通过传入参数，返回由参数构成的数组，没有参数返回空数组

原数组内容.copyWithin(替换数组位置，从第几个读取，从第几个之前结束)；//将读取内容替换 指定位置开始的内容

find函数 ，其参数是回调函数，回调函数可以 接受三个参数 当前值，当前位置，原数组

原数组.find(函数);//返回 第一个符合条件的值，没有返回 undefinded

[1,3,-5,10].find((n) => n < 0);//返回第一个小于 0 的值，，-5

findIndex 返回 第一个符合条件的 index位置

fill函数

初始化数组用 数组.fill(初始化内容，起始位置，结束位置之前)；

数组实例 entries() keys() values()

方法，都返回一个 遍历器对象，可以用 for…of循环遍历

entries()返回数组的 键值对
keys() 返回数组的 键名遍历
values() 返回数组的 键值遍历

for( let [index ,elem] of [‘a’,’b’].entries())
{
Console.log(index,elem);
}
// 0 “a”
// 1 “b”

Array.prototype.includes方法

接收两个参数 第一个参数表示搜索的字符，第二个参数表示搜索的起始位置，负数表示倒数的位置, 默认第二个参数为 0，，，，可以兼容 NaN

[1，2,3].includes(3,3);//false

Map Set数据结构有 has方法

Map.prototype.has(key) WeakMap.prototype.has(key) Reflect.has(target, propertyKey)

Set.prototype.has(value) WeakSet.protptype.has(value)

数组的空位，表示没有任何值

0 in [undefinded,undefinde,undefinde];// true 在数组第0号位 有值，所以true

0 in [,,,];// false

ES6明确将 空位转化为 undefinde值

[…[‘a’, , ,’b’]]//扩展运算符 也会将空位转化为 undefined [a,undefinded,undefinded,b]

copyWithin() 会连同空位一起拷贝

For…of 会遍历空位

Fill()会将空位视为正常数组

Map方法会跳过空位

学习函数扩展和对象扩展之后，进行react重新学习实战

函数的扩展
1/允许函数默认值 function foo(x=5){};

参数变量是默认声明的，不需要 const或者let声明

参数默认值是 表达式的时候，，每次调用 表达式中变量使用上次的值
2/ let x = 99
Function foo( p = x+1)
{
Console.log.(p);
}

Foo();//100
Foo();//101

3、函数调用，参数有默认值，则可以不传入参数，如果没有默认值，则必须传入参数形式调用方法

4、有默认值参数是 尾参数，才可以省略，否则调用会出错
可以传入 undefined来 触发参数 去取默认值

5、指定参数默认值后 函数的 length属性会失效，，，因为length等于 函数的参数个数减去 默认值个数

6、一旦设置 参数默认值， 所有参数一起封闭，形成单独的参数作用域
Var x =1;
Function f(x, y = x){ console.log.(y)}; f(2);//输出值为 2
7、同理参数是 函数的时候，也是局部作用域
8、

REST参数 形式为 …变量名 用于获取多余参数，本质是一个数组

注意rest参数后面不能有其他参数

Function f(a,..b,c){}//错误定义，，，rest参数必须是 最后一个参数
函数的length不包括 rest参数

扩展运算符 …数组名 是 rest参数的逆运算，，，将数组转化为一个 用 逗号分隔的 参数序列

Add(…items)

扩展运算符经典用法

1、合并数组
[1,2].contact(more);
在ES6中用
[1,2,…more];

2、解构赋值结合

[a,…rest] = list;//将list数组解构成 一个参数 和 一个数组
但扩展运算符用于数组赋值，只能够放在最后一位，否则报错

3、函数返回值
解决函数 返回 多个数值的问题

Var dateFields = readDataFields(database);

Var d = new Date(…dataFields);

Rest形式 是 …变量名 来接收多个参数传递

扩展运算符是 …数组名 将 数组转化为 逗号分隔的参数

4、可以将字符串转为 数组 […’hello’] 是 [“h” ,”e”,”l”,”l” ,”o”]

5、可以将实现 iterator接口对象，转化为数组 var array =[…nodeList];

6、在使用默认值 解构赋值 和 扩展运算符的情况下 就不能使用 严格模式 ‘user strict’来检测规范性

7、函数name属性，返回指向函数 对应名字

箭头函数

Var f = v => v

等于

Var f = function(v){return v};

单个参数直接上面形式

不需要参数或者 多个参数 的箭头函数 则需要

Var f = () => 5;

Var f = (num1,num2) => num1 + num2;

回调形式 函数参数部分 和 函数体部分

箭头函数

当箭头函数函数体部分多余一条语句时候 要用大括号括起来,并且使用 return语句返回

{ return num1 + num2;}

注意 箭头函数

函数体中 的 this对象 ，是定义时所在对象，不是使用时所在对象，，局部对象，非外部对象

不可以当作构造函数

不可以使用arguments对象，只能用 rest参数代替
不可以使用 yield命令，不能用作 generator函数
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);setTimeout(() => console.log(‘s2: ‘, timer.s2), 3100);
// s1: 3// s2: 0

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。

定义时候指向哪个，回调时候 this仍然是不变化的

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数

函数绑定
foo::bar;
// 等同于bar.bind(foo);

左边对象绑定右边函数

尾调用
是指某个函数的最后一步是调用另一个函数。

注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”

尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了

将递归函数，如果可以写成在尾递归，，，没有内部参量形式，就不需要保存
参量形式 直接 写在参数 表达式中！！！！

非尾递归的 Fibonacci 数列实现如下。
function Fibonacci (n) {
if ( n <= 1 ) {return 1};

return Fibonacci(n - 1) + Fibonacci(n - 2);}
Fibonacci(10) // 89Fibonacci(100) // 堆栈溢出Fibonacci(500) // 堆栈溢出
尾递归优化过的 Fibonacci 数列实现如下。
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
if( n <= 1 ) {return ac2};

return Fibonacci2 (n - 1, ac2, ac1 + ac2);}
Fibonacci2(100) // 573147844013817200000Fibonacci2(1000) // 7.0330367711422765e+208Fibonacci2(10000) // Infinity

递归优化

蹦床函数
然后，要做的就是将原来的递归函数，改写为每一步返回另一个函数。
function sum(x, y) {
if (y > 0) {
return sum.bind(null, x + 1, y - 1);
} else {
return x;
}}
上面代码中，sum函数的每次执行，都会返回自身的另一个版本。
现在，使用蹦床函数执行sum，就不会发生调用栈溢出。
trampoline(sum(1, 100000))

将递归转化为 循环函数

对象的扩展

对象的扩展
1、直接写变量和函数 作为对象的属性和方法，而不用 名称 : 值的形式，称为简洁表示法
var foo = ‘bar’;
Var baz = {foo};

Var person ={
name:’张三’,
birth,//等同于 birth:birth
Hello(){};//等同于 hello:function(){};

}
属性名，定义名称时必须用 []方括号
属性名定义可以用表达式 ES6

Let proKey = ‘foo’;
Let obj = {
};

Obj[‘foo’] 值为true
表达式也可以定义方法名

‘h’ + ‘ello’{};//

注意

1、属性名表达式 不能够和简洁表示法同时使用

Var foo = ‘bar’;
即 可以是 var bar = {[foo] : ‘abc’}形式

而不可以是 var bar = {[foo]};形式

2、属性名表达式 如果是一个对象，默认情况下会自动将对象转化为字符串[object Object]

类似之前输入 listview中 sortid中内容 需要取值 才好 var value = object[‘key’]

Const keyA = {a: 1};
Const myObj = {[keyA] : ‘valueA’}; myObj输出值为 {[object Object] : ‘valueA’}

函数的name属性，返回函数名称

Bind方法 创造的函数，返回 bound + 原函数名称
Function构造函数 ，name属性返回 anonymous

对象方法是一个Symbol值，name属性返回 Symbol描述

Object.is(对象1，对象2);//采用与严格相等 ===类似，，，，
区别是 +0不等于-0，且 NaN等于NaN，

空对象之间不相等

而es5采用 ==值相等

Object.assign(对象，数据源1，数据源2)；将两个数据源合并到对象中

是浅拷贝，还是执行对象 的引用，，合并数据源，如果有相同属性，后面的覆盖前面的，

数据源发生变化，对象也会变化

只拷贝源对象的 自身属性，不拷贝继承属性，不拷贝不可枚举属性

作用
1、为对象添加属性 传入对象，和一个参数属性
2、为对象添加方法
3、克隆，只是克隆原始对象的值，如果要保持继承值，则用
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);}
4、合并多个对象
5、为属性指定默认值 var options = Object.assign({},DEFAULTS,optionsDefault);
DEFAULTS 为我们定义的一个对象，optionsDefault为默认值对象

对象内中属性最好为 简单属性，因为是浅拷贝

属性遍历

For …in 循环遍历对象自身以及继承的可枚举属性，不包括 symbol属性

Object.keys(obj) 对象自身所有可枚举属性
Object.getOwnPropertyNames(obj); 对象自身的所有属性，包括可枚举，不包括symbol
Object.getOwnPropertySymbols(obj) 对象自身的所有symbol属性
Reflect.ownKeys(obj) 对象所有属性

proto属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。
Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）代替。 设置prototype 对象

setPrototypeOf (对象1，对象2) 返回参数对象本身
将对象2设置为 对象1 的 原型，，，返回并返回欣的对象1

getPrototypeOf读取对象的原型对象

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for…of循环使用。
let {keys, values, entries} = Object;let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
console.log(key); // ‘a’, ‘b’, ‘c’}
for (let value of values(obj)) {
console.log(value); // 1, 2, 3}
for (let [key, value] of entries(obj)) {
console.log([key, value]); // [‘a’, 1], [‘b’, 2], [‘c’, 3]}