部分列子引用的阮一峰ES6教程中的例子
这篇文章主要是自己经常用得一些方法总结, 想全篇学习es6, 可以看阮一峰ES6入门
1: let命令
- let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效
- for循环用它声明计数器很好, 因为计数器i只在for循环体内有效，这样这次的i在块级作用域被调用时都是当时的i被保存, 下次生成的又是新的i , 效果类似闭包
- 不存在变量提升, 所以一定要先声明在使用,
-
不同作用域中声明同一函数名; 例如:
- 函数中用let声明了变量, 如果全局有一个同名变量名, 函数中次变量始终指向函数内的变量, 且在let声明前调用报错,
- **同作用域的同一个变量名: **
- 不允许在同一作用域使用同一变量名多次声明, 不然会报错
- let新增了块级作用域,效果类似闭包, 单好使多了
变量的空位
[, , ,]数组中,号分隔却没有值, 表示空位
ES5中, 对空位的处理是忽略空位
- forEach(), filter(), every() 和 some()都会跳过空位。
- map()会跳过空位，但会保留这个值
- join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
ES6 中则是明确将空位转为undefined
接下来的方法中
Array.from方法会将数组的空位，转为undefined
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
扩展运算符（...）也会将空位转为undefined
[...['a',,'b']]
// [ "a", undefined, "b" ]
遍历:// entries()
[...[,'a'].entries()]
// [[0,undefined], [1,"a"]]
等等, 只要是空位都会被undefined填充
2: 变量的解构
1: 我的理解就是变量名和值一一对应,
var [a, b, c] = [1, 2, 3]; 相当于 var a = 1; var b = 2; var c = 3;
let [foo, [[bar], baz]] = [1, [[2], 3]];foo : 1; bar : 2; baz : 3
2: 我这里没有用很多,还有很多方法, 可以去看下最上面阮一峰的教程
3: 字符串
-
1: 提供了遍历字符串的接口
for (let codePoint of 'foo') { console.log(codePoint)} // "f" // "o" // "o" 2:
includes(), startsWith() endsWidth()
返回的是布尔值, 可以做字符串的判断, 包括一些验证includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
-
3:
repeat()重复一个字符串多少次w.repeat(3); => " www"- 如果重复次数是小数, 会转换成字符串,
- 如果重复次数是负数, 0 ~ -1 会转换成 0 , 小于-1会报错
- 如果重复次数是字符串会转换成数字
-
4: 模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量省去了以前前端在js中拼接html的烦扰, 还可以任意添加变量方法等
html的拼接
$('#list').html(
`<ul>
<li>first</li>
<li>second</li>
</ul>`
);
字符串中插入变量
```
function fn() {
return " World";
}
`Hello ${fn()} lalala`
"Hello World lalala"
```
遇到的问题:
用url往后端传值时, 用字符串模板, 单独写 src=包裹会报错,
最后在变量外包裹了 src={ }才解决
<iframe className="cdp-map-content-ifram" id="ss" src={`/map/hisTrack.jsp?themeCfgObj=${themeCfgObj}`}/>
4: 数组
- 1:
Array.from()主要方法是将两类类似数组的对象转换为真正的数组, 包括可遍历对象 - 1: 所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此任何有length属性的对象，都可以通过Array.from方法转为数组
这是个类似数组的对象:
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法var arr1 = [].slice.call(arrayLike);
// ['a', 'b', 'c']
// ES6的写法let arr2 = Array.from(arrayLike);
// ['a', 'b', 'c']
- 常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。
Array.from都可以将它们转为真正的数组。 - 字符串和Set结构 都可以使用
Array.from都可以将它们转为真正的数组。 - 兼容处理:
const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)();
- Array.from还可以接受第二个参数，作用类似于数组的map
方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.from([1, 2, 3], (x) =>
x * x
)
// [1, 4, 9]
2: Array.of()方法用于将一组值，转换为数组
Array.of() // [] Array.of(undefined) // [undefined] Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
3: find() 和 findIndex()
- 数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
```
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}, this)
// 10
```
上列中可见find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
find(回调函数, this) 第二个参数是this
findIndex(回调函数, this); 用法同find() 只不过返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
-
4: 数组的遍历
数组都可以使用 for...of循环来遍历数组,for ( ... of ...) {}
keys() , values(), entries();- key() 遍历结果为数组的键名
- value()遍历的结果为数组的键值
- entries()遍历的结果为数组的键值对
for (let index of ['a', 'b'].keys()) {
console.log(index)
;}
// 0 // 1
for (let elem of ['a', 'b'].values()) {
console.log(elem)
;}
// 'a' // 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem)
;}
// 0 "a" // 1 "b"
-
5: es7的
includes()
array.includes(x) 数组中是否有值x;
方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true其还有第二个参数:
表示搜索的起始位置，默认为0。
如果第二个参数为负数，则表示倒数的位置，
如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
5: 函数
- 1: ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
-
2: ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数
function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10-
注意，rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错
// 报错 function f(a, ...b, c) { // ...} -
函数的length属性，不包括rest参数。
(function(a) {}).length // 1 (function(...a) {}).length // 0 (function(a, ...b) {}).length // 1
-
-
3: 扩展运算符
扩展运算符（spread）是三个点（...）将一个数组转为用逗号分隔的参数序列。(...[1, 2, 3]) // 1 ,2 ,3-
可以替代数组的apply , 将数组转为函数的参数
es5: var args = [0, 1, 2]; f.apply(null, args); es6: var args = [0, 1, 2]; f(...args);ES5的写法 Math.max.apply(null, [14, 3, 77]) ES6的写法 Math.max(...[14, 3, 77]) -
扩展运算符的运用:
- 1: 合并数组
var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ] - 2: 与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5]- 注意:如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
- 3: 字符串
扩展运算符还可以将字符串转为真正的数组。[...'hello'] // [ "h", "e", "l", "l", "o" ] - 其他方法: 详细见页头阮一峰es6入门教程
- 1: 合并数组
-
-
5: 箭头函数
ES6允许使用“箭头”（=>）定义函数。var f = v => v; 等同于: var f = function (v) { return v } 第一个等号后面的为function的参数(v); 第二个箭头等号指的是返回值, return v参数位写法: 第一个等号后 ( = ),
- 如果参数为空, 第一个等号后面是 () 例如:
var f = () => 5; - 如果参数只有1个, 第一个等号后面是这个参数, 例如:
var f = v => v; - 如果参数有多个, 第一个等号后面是(x,y,z,....) , 例如:
var sum = (num1, num2) => { return num1 + num2; }
箭头等号( => )后代码块写法:
- 如果返回的代码块只有一条语句直接写:
var f = () => 5; - 如果返回的代码块多于一句，加上{ }:
var sum = (num1, num2) => { return num1 + num2; } - 如果返回是个对象怎么办(对象有已一个{}), 再加一个{},
var getTempItem = id => ({ id: id, name: "Temp" });因为{ } 被解析成代码块
箭头函数使用起来简化了es5函数
// 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x);箭头函数使用注意事项 :
- 1: 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象, 即作用域始终绑定定义时所在的作用域，而不是指向运行时所在的作用域。
- 2: 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
- 3: 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
- 4: 不可以使用yield命令，因此箭头函数不能用作Generator函数。
关于箭头函数的this, 始终固化为终绑定定义时所在的对象
指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。 - 如果参数为空, 第一个等号后面是 () 例如:
这次先到这, 还有一些没有总结, 下次继续
