ECMAScript 6 入门-1

一、变量

1. var
   • 可以重复声明
   • 无法限制修改
   • 没有块级作用域
   • 可以重新赋值
   • 存在变量提升

		console.log(a);//undefined
         var a=1;
         	a=2;
         console.log(a);//2
         

2. let
   • 不会能重复声明
   • 有块级作用域
   • 可以重新赋值
   • 不存在变量提升

		 console.log(a);//报错a is not defined
         let a=1;
         	a=2;
         console.log(a);// 2

3. const
   • 不能重复声明
   • 有块级作用域
   • const是常量不可以重新赋值
   • 不存在提升问题
   • 没有改变存储地址是可以修改值的

		const a=1;
         	  a=3;
         console.log(a);//报错Assignment to constant variable
         
         const a = {
                 name: 'jack',
                 age: 18,
                 gender: '男'
             };
             a.age = 20;//当前没有改变a的存储地址是可以重新赋值的
             console.log(a.age);//20

二、箭头函数

1.箭头函数

• 箭头函数的this指向永远是父级
• 如果一个参数可以省略（）
• 如果有一行代码{}可以省略不写，注意return也需要省略要不然报错

		 //function 函数名（）{}
	      //箭头函数
	      let show = (x, y) => {
	              console.log(x);//10
	              console.log(y);//20
	      
	          }
	          show(10, 20);
	      //如果一个参数可以省略（）
	      let show = x => {
	              console.log(x);//10
	          }
	          show(10);
	      //如果只有一行带吗{}也可以省略不屑 注意return也需要省略不严报错
	      let show = x => console.log(x);//10
	          show(10);

2.函数的参数

• 参数的扩展/展开

1. 收集剩余参数 …
   注意：Rest Parameter必须是最后一个

		//...args名字随意
       let show = (x, y, ...args) => {
               console.log(x);//10
               console.log(y);//20
               console.log(args);//[ 30, 1, 5, 6 ] 
           }
           show(10, 20, 30, 1, 5, 6);

2. 展开数组
   展开效果跟直接放在哪里一样

		   let arr = [1, 2, 3, 4];
                   let arr1 = [5, 6, 7, 8];
                   let arr2 = [1, 2, 3, 4, ...arr1];
                   let arr3 = [...arr, 5, 6, 7, 8]
                   let arr4 = [...arr, ...arr1];
                   console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8]
                   console.log(arr3);//[1, 2, 3, 4, 5, 6, 7, 8]
                   console.log(arr4);//[1, 2, 3, 4, 5, 6, 7, 8]
           let a;
           let arr=[1,2,3];
           a=...arr;
           console.log(a);//报错不可以这样写

• 默认值
  如果传参数了就用传的参数如果没用就是默认参数

			$('#div1').animate({width:'200px'});
			      $('#div1').animate({width:'200px'},1000);
			      let show = (x, y = 5, z = 6) => {
                  console.log(x);
                  console.log(y);
                  console.log(z);
      
              }
              show(8); //8 5 6
              show(6, 7, 8);//6 7 8

三、解构赋值

• 数组解构赋值
  模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值

	  let [a, b, c] = [1, 2, 3];
      let [foo, [[bar], baz]] = [1, [[2], 3]];
      foo // 1
      bar // 2
      baz // 3
      let [ , , third] = ["foo", "bar", "baz"];
      third // "baz"

• 对象结构赋值
  对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

	  let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
      foo // "aaa"
      bar // "bbb"
      
      let { baz } = { foo: 'aaa', bar: 'bbb' };
      baz // undefined

四、字符串的扩展

• 字符Unicode表示方法
  这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
  对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符

	 "\u0061";//a
	 //改进后
	 "\u{20BB7}"
	 // "?"
	      
	"\u{41}\u{42}\u{43}"
	 // "ABC"
	      
	 let hello = 123;
	 hell\u{6F} // 123
	      
	 '\u{1F680}' === '\uD83D\uDE80'
	 // true

• 字符串遍历器接口
  ES6为字符串添加了遍历器接口 ，使的字符串可以被for…of循环遍历

 for (let codePoint of 'foo') {
    console.log(codePoint)
 }
      
 // "f"
 // "o"
 // "o"

• 新增操作字符串的方法
  1. String.fromCodePoint()
  可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足；
  如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。
  注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。

 String.fromCodePoint(0x20BB7)
 // "?"
 String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
 // true

2. String.raw()
ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法;

 String.raw`Hi\n${2+3}!`;
 // 返回 "Hi\\n5!"
         
 String.raw`Hi\u000A!`;
 // 返回 "Hi\\u000A!"

 如果原字符串的斜杠已经转义，那么String.raw()会进行再次转义。

  String.raw`Hi\\n`
  // 返回 "Hi\\\\n"
  String.raw`Hi\\n` === "Hi\\\\n" // true

String.raw()方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

 String.raw({ raw: 'test' }, 0, 1, 2);
 // 't0e1s2t'
 // 等同于
 String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

3. includes(),startsWith(),endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数，表示开始搜索的位置。

  let s = 'Hello world!';
  s.startsWith('Hello') // true
  s.endsWith('!') // true
  s.includes('o') // true
  //第二个参数表示开始搜索的位置
  let s = 'Hello world!';   
  s.startsWith('world', 6) // true
  s.endsWith('Hello', 5) // true
  s.includes('Hello', 6) // false

4. repeat()
repeat方法返回一个新字符串，表示将原字符串重复n次
- 参数如果是小数，则被取整
- 如果repeat的参数是负数或者Infinity，会报错
- 如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0
- 参数NaN等同于 0。
- 如果repeat的参数是字符串，则会先转换成数字

 'x'.repeat(3) // "xxx"
 'hello'.repeat(2) // "hellohello"
 'na'.repeat(0) // "
 'na'.repeat(2.9) // "nana"
 'na'.repeat(Infinity)
 // RangeError
 'na'.repeat(-1)
 // RangeError
 'na'.repeat(-0.9) // ""
 'na'.repeat(NaN) // ""
 'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

5. trimStart(),reinEnd()
ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格会保留尾部空格，trimEnd()消除尾部的空格会保留头部空格。它们返回的都是新字符串，不会修改原始字符串。
除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。
浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

const s = '  abc  ';      
 s.trim() // "abc"
 s.trimStart() // "abc  "
 s.trimEnd() // "  abc"

6.padStart() ,padEnd()
字符串补全长度，指定的字符串不够长度，会从头部或者尾部补全，padStart()从头部补全，
padEnd()从尾部补全；
padStart()和padEnd()，第一个参数表示字符串的长度，第二个参数辨识要补充的字符串

 var a = 'pad'.padStart(5, '1');//a=11pad
 var a = 'pad'.padEnd(5, '1');//a=pad11

如果原字符串的长度等于大于最大长度，则字符串补全不会生效返回原字符串

 var a = 'pad'.padStart(2, '1');//a=pad
 var a = 'pad'.padEnd(2, '1');//a=pad

如果用来补全的的字符串与原字符串，两者长度之和大于最大长度，则会截去超出位数的补全字符串

var a = 'pad'.padStart(4, '123');//a=1pad

如果省略第二个参数，默认以空格补全

var a = 'pad'.padStart(6);//a=   pad

五、数组扩展

1. Array.from()
Array.from().方法可以将两类对象转换成真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
 };
   // ES5的写法
 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']   
   // ES6的写法
 et arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

 Array.from([1, 2, 3])
 // [1, 2, 3]

2. Array.of()
Array.of()方法用于将一组值，转换为数组;总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

 Array.of(3, 11, 8) // [3,11,8]
 Array.of(3) // [3]

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

 Array() // []
 Array(3) // [, , ,]
 Array(3, 11, 8) // [3, 11, 8]

上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。
Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
3. copyWithin()
copyWithin()方法，在当前数组内部，可以将制定的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

	Array.prototype.copyWithin(target, start = 0, end = this.length)

需要传递三个参数，如果这三个值不是数值则会转换为数值

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

4. find()和findIndex()
find()用于找出第一个符合条件的数组成员,它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回

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

findIndex()方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

 [1, 5, 10, 15].findIndex(function(value, index, arr) {
    return value > 9;
 }) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); 
       

这两个方法都可以发现NaN，弥补了indexof方法的不足。

 [NaN].indexOf(NaN)
 // -1  
 [NaN].findIndex(y => Object.is(NaN, y))
 // 0

5. entries(),keys(),values()
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，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"

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历。

 let letter = ['a', 'b', 'c'];
 let entries = letter.entries();
 console.log(entries.next().value); // [0, 'a']
 onsole.log(entries.next().value); // [1, 'b']
 console.log(entries.next().value); // [2, 'c']

6. includes()
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

7. flat()
flat()方法将嵌套的数组进行拉平，变成一维数组，返回一个新的数组，对原数据没有影响

[1, 2, [3, 4]].flat()
 // [1, 2, 3, 4]

flat()默认只会拉平一层，如果想要拉平多层嵌套数组。可以将flat()方法的参数写成一个整数，表示想要拉平的层数。默认是1.

 [1, 2, [3, [4, 5]]].flat()
 // [1, 2, 3, [4, 5]]
 //参数为2
 [1, 2, [3, [4, 5]]].flat(2)
 // [1, 2, 3, 4, 5]

`