欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ECMAScript 6 入门-1

程序员文章站 2022-07-16 22:01:10
...

一、变量

  1. var
    • 可以重复声明
    • 无法限制修改
    • 没有块级作用域
    • 可以重新赋值
    • 存在变量提升
		console.log(a);//undefined
         var a=1;
         	a=2;
         console.log(a);//2
         
  1. let
    • 不会能重复声明
    • 有块级作用域
    • 可以重新赋值
    • 不存在变量提升
		 console.log(a);//报错a is not defined
         let a=1;
         	a=2;
         console.log(a);// 2
  1. 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);
  1. 展开数组
    展开效果跟直接卸载哪里一样
		   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.row()
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"

五、数组扩展

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]

`