ES6学习笔记

一、let和const

1. let和{}块级作用域
   let声明的变量只在其代码块内有效。
   内层作用域可定义外层作用域同名变量，但是其值只作用于定义的块域。外层作用域无法读取内层作用域的

for(var i = 0;i<5;i++){ a[i] = function(){console.log(i)} }
a[0]()   //5

i是var声明的，全局范围有效。
每次循环，新的i值会覆盖旧值，最后输出的就是最后一轮的i值

for(let i = 0;i<5;i++){ a[i] = function(){console.log(i)} }
a[0]()   //0

i是用let声明的，当前i只在本轮循环有效

{let c = 3;
	{let aa=1;
	console.log('c'+c)  //c3
	}console.log('aa'+aa)  //报错	}

2. const
   声明的变量为常量，声明就必须立即初始化，作用于所在块级作用域。但对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址，const命令只是保证变量名指向的地址不变，不保证该地址指向的数据不变。

const foo1='foo1';
foo1 = 'foo2';  //报错
const foo3 = {}
foo3['name'] = 'foo3'  //修改成功

二、变量的解构和赋值

1. 数组的解构赋值
   从数组中提取值，按照对应位置，对变量赋值。

let [x,...y] = [1,2,3,4]   //x=1,y=[2,3,4]

如果解构不成功，变量的值就等于undefined。

var [br,fo] = [1]   //br=1,fo为undefined

如果等号右边不是数组，或者说不是可遍历的解构，将会报错。

let [ss] = undefined  //报错
	let [ss] = {}   //报错 

解构允许指定默认值，但=右边的数组对应值必须严格等于(===)undefined

var [x=1,y=2] = [null , undefined] //x为null，y为undefined

2. 对象的解构赋值
   按照属性同名进行取值，取不到值的为undefined

var {j1 ,j2} = {j1:'j1',j3:'j3'}   //j1="j1" ,j2为undefined

对象的解构赋值的内部机制，是先找到同名属性，然后在赋给对应的变量。真正被赋值的是后者。

var { first : fi , last :la } = { first :'hello' , last :'word' }  //fi='hello' ,la='word'

//first和last变量会报错is not defined

解构赋值变量的声明和赋值是一体的。let 和 const在同一作用域不能重新声明，所以一旦赋值声明以前声明过的变量，就会报错。var允许重新声明，不会报错

let {first:fi2,last:la2} = {first:'hello',last:'word'};
let fi2    //报错Identifier 'fi2' has already been declared

3. 字符串的解构赋值
   字符串被转换成一个类似数组的对象，且含有length属性

const [a,b,c,d,e] = 'hello'   //a,b,c,d,e分别为'h','e','l','l','o'
let {length:len} = 'hello'    //len=5

4. 函数参数的解构赋值
   add函数的参数不是一个数组，而是通过解构得到变量x和y，函数参数解构也可以使用默认值

function add([x,y]){return x+y}
add([1,2])   //3
[ [1,2,3] , [3,4,undefined] ].map(([a,b,c=10]) => a+b+c)   //[6, 17]

三、字符串的扩展

1. 字符串的遍历器接口

for(let c of 'abcde'){console.log(c)}   //a b c d e

2. includes(),startsWith(),enddsWith()
   includes(str,?index)：返回布尔值，表示是否找到了参数字符串

'Hello world!'.includes('Hello')   //true
	'Hello world!'.includes('Hello',6)   //false,6表示开始搜索位置 

startsWith(str,?index)：返回布尔值，表示参数字符串是否在源字符串的头部

'Hello world!'.startsWith('Hello')   //true
	'Hello world!'.startsWith('world',6)   //true,6表示开始搜索位置

endsWith(str,?index)：返回布尔值，表示参数字符串是否在源字符串的尾部

'Hello world!'.endsWith('!')   //true
'Hello world!'.endsWith('Hello',5)   //true,5表示前5个字符，从0~4

3.repeat()
返回一个新字符串，表示将原字符串重复n次

'x'.repeat(3)   //'xxx'
'na'.repeat(2.9)   //'nana',小数2.9会被取整

四、数值的扩展

1. Number.isFinite()判断数值是否非无穷

Number.isFinite(Infinity)   //false
Number.isFinite(12)   //true

2. Number.isInteger() //判断一个数是否为整数

Number.isInteger('12')   //false
Number.isInteger(12.2)   //false
Number.isInteger(12.0)   //true

3. Math对象的扩展
   (1)Math.trunc(),除去一个数小数部分，返回整数部分

Math.trunc(12.222)   //12
Math.trunc('dd')    //NaN

(2)Math.sign() ,判断一个数的正、负、0

Math.sign(5)   //1
Math.sign(-5)   //-1
Math.sign(0)    //0
Math.sign('foo')    //NaN

五、数组的扩展

1. Array.from() 将类似数组的对象 或 可遍历的对象 转为真正的数组。

let ps = document.querySelectorAll(‘p’); //NodeList对象
Array.from(ps).forEach(function § {
console.log§;
})
Array.from(‘hello’) //[‘h’,‘e’,‘l’,‘l’,‘o’]

2. find()和findIndex()
   (1)find()：找到第一个返回值为true的成员，然后返回该成员。否则返回undefined

[1,4,-5,-2].find((n)=>n<0)    //-5

(2)findIndex()：找到第一个符合条件的数组成员的位置，否则返回-1

[1,4,-5,-2].findIndex(function(value,index,arr){return value<0})   //2

3. fill()

使用给定值，填充一个数组

[1,2,3,4].fill('a',0,2)    //["a", "a", 3, 4]填充从0开始到2之前
[1,2,3,4].fill('a')      //["a", "a", "a", "a"]

4. entries(),keys(),values()对数组进行遍历

(1)entries() 是键值对的遍历

for (let [index,elem] of ['a','b'].entries()){console.log(index,elem)}  
//0 "a"
//1 "b"
let letters = ["a","b","c","d"]
let entries = letters.entries()
entries.next().value    //[0, "a"]

(2)keys() 是对键名的遍历

for (let index of ['a','b'].keys()){console.log(index)}   //0  1

(3)values() 是对健值的遍历

for (let elem of ['a','b'].values()){console.log(elem)}  //a   b

5. includes()
   数组是否包含给定的值，并返回布尔值

[1,2,3].includes('1')    //false
[1,2,3].includes(1)    //true

对比indexOf

[1,2,3].indexOf('1')   //-1
[1,2,3].indexOf(2)    //1

六、函数的扩展

1. 函数参数的默认值

var fun = function(m,n=1){
	return fun(m,n)
}
fun.length    //1 , 函数的length属性返回没有指定默认值的参数的个数
(function(a, b, c = 5){}).length      // 2

2. rest参数,用于获取函数的多余参数,该变量将多余的参数放入数组中。rest之后不能再有其他参数，且length属性不包括rest参数

function add(param , ...values){
	let sum = 0;
	for(var val in values){
	  sum += val;
	}
	return sum;
}
add(2,5,3)    //8
(function(a,...b){}).length    //1

3.箭头函数
使用“箭头”（=>）定义函数

var sum = (num1, num2) => { return num1 + num2; }
//正常函数写法
[1,2,3].map(function (x) {
  return x * x;
})
//箭头函数写法
[1,2,3].map(x => x * x);

var a = [1,2,3,4];
a.forEach((x,i)=>{console.log(x)})    //1234

七、对象的扩展

1. 属性的简介表示法
   允许直接写入变量和函数，作为对象的属性和方法。允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量

var foo = 'bar';
var baz = {foo};   //baz -- {foo: "bar"}

2. 属性名表达式

var lastWord = 'last word';
var a = {
	  'first word': 'hello',
 	  [lastWord]: 'world'
};
a['first word']		 // "hello"
a[lastWord]		 // "world"
a['last word'] 		// "world"

3. Object.is()
   比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致。

Object.is('foo', 'foo')   //true
Object.is(NAN, NAN)   //true
Object.is(+0, -0)   //false

4. Object.assign()
   将源对象（source）的所有可枚举属性，复制到目标对象