ES6新增语法

最新推荐文章于 2022-05-17 09:58:23 发布

理头崴特

最新推荐文章于 2022-05-17 09:58:23 发布

阅读量185

点赞数

分类专栏： vue javascript 文章标签： javascript node.js vue.js

本文链接：https://blog.csdn.net/m0_60698858/article/details/119420743

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

（三）利用扩展运算符将伪数组转换为真正的数组

2、startWith&endsWith方法

一、let/var/const

ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。
ES6中，加入了let，let它是有if和for的块级作用域（ES5中的var是没有块级作用域的）。
const：将变量定义为常量（不可修改），开发中优先使用const，需要修改值时再用let

注：const修饰对象时只是对象不能被修改，但是对象内的属性可以修改

（一）let

let声明的变量只在所处于的块级有效
不存在变量提升（不可以先使用再声明）
暂时性死区：

    /**
     * 虽然外部定义了全局变量tmp，但同时用let在内部也定义了一个tmp，
     * 因此内部不会承认全局的tmp，运行结果显示tmp的赋值不能再定义之前而报错
     */
    var tmp = 123;
    if (true) {
      tmp = 'abc';    
      let tmp;
    }
    console.log(tmp);

（二）const

具有块级作用域
声明常量必须赋初始值

（三）三种方法的区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可改变	值可改变	值不可改变

二、对象增强写法

（一）属性的增强写法

const name = 'Peter';
  const age = 18;
  const height = 1.71;
  // ES5写法
  const obj5 = {
    name: name,
    age: age,
    height: height
  }
  // ES6属性增强写法
  const obj6 = {
    name,
    age,
    height
  }

（二）函数的增强写法

// ES5写法
  const obj5 = {
    run: function () {

    },
    stop: function () {

    }
  }
  // ES6属性增强写法
  const obj6 = {
    run() {
      
    },
    eat() {
      
    }
  }

（三）字符串的标记

ES5：“aaa” / 'aaa' ES6：`aaa`(tab上面那个键，在ES5基础上可实现内容换行)

三、解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构

（一）数组解构

    let ary = [1, 2, 3];
    let [a, b, c, d, e] = ary;
    console.log(a);   //1
    console.log(b);   //2
    console.log(c);   //3
    console.log(d);   //undefined
    console.log(e);   //undefined

（二）对象解构

    // 1、数组解构
    let ary = [1, 2, 3];
    let [a, b, c, d, e] = ary;
    console.log(a);   //1
    console.log(b);   //2
    console.log(c);   //3
    console.log(d);   //undefined
    console.log(e);   //undefined
    // 2、对象解构
    let Person = {name: '小明', age: 20};
    let {name, age} = Person;       //属性名一样
    let {name: Uname, age: Uage} = Person;    //属性名不同:冒号左边写原对象的属性名，右边写自己重新定义的属性名
    console.log(name);    //小明
    console.log(age);     //20
    console.log(Uname);   //小明
    console.log(Uage);    //20

四、箭头函数

（一）使用

什么时候用箭头函数？

当需要将一个函数作为参数传到另外一个函数时

<script>
    // 1、参数问题
    // 1.1没有参数
    const x1 = () => {
 
    }
    // 1.2一个参数  （一个参数时可省略括号）
    const x2 = num => {
      return num + num
    }
    // 1.3两个参数
    const x3 = (num1, num2) => {
      return num1 + num2
    }
 
    // 2、当函数中只有一行代码时可简化：
    const y1 = (num1, num2) => num1 + num2
 
    // 3、箭头函数中this的使用
    // this永远指向当前作用域的内容（当前没有就向上查找）
 
</script>

（二）箭头函数的this关键字

箭头函数不绑定this，箭头函数的this，指向的是函数定义位置的上下文this。（也就是说，箭头函数被定义在哪，箭头函数的this就指向哪）

    const obj = {name: '小明'};
    function fn() {
      console.log(this);
      return () => {
        console.log(this);    //this被定义在了fn内，因此this和fn内的this一起指向obj对象
      }
    }
    fn.call(obj);

五、剩余参数

（一）基础使用

    function sum(first, ...args) {
      console.log(first); //10
      console.log(args);  //[20, 30]
    }
    sum(10, 20, 30)

（二）使用剩余参数实现未知数量的数字求和

    const sum = (...args) => {
      let total = 0;
      args.forEach(item => total += item);
      return total;
    }
    sum(10,20);     //30
    sum(10,20,30);  //60

（三）剩余参数与解构配合使用

    let students = ['1', '2', '3'];
    let [s1, ...s2] = students;
    console.log(s1);    //'1'
    console.log(s2);    //['2','3']

六、扩展运算符

（一）定义

将数组或对象拆分成用逗号分隔的参数序列

    let ary = [1, 2, 3];
    ...arg    //1,2,3
    console.log(...ary);  //1 2 3（，被log当成分隔符了）

（二）利用扩展运算符合并数组

    let ary1 = [1, 2, 3];
    let ary2 = [4, 5, 6];
    // 方法一
    let result1 = [...ary1, ...ary2];
    console.log(result1);
    // 方法二
    ary1.push(...ary2);
    console.log(ary1);

（三）利用扩展运算符将伪数组转换为真正的数组

    //方法一
    let oDivs = document.getElementsByTagName('div');
    console.log(oDivs);   // 打印结果为伪数组
    let ary = [...oDivs];
    console.log(ary);     // 打印结果为真正的数组,可以使用数组的一些方法（例如push）
    // 方法二：利用Array.from
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    let arr2 = Array.from(arrayLike);
    console.log(arr2)   // ['a', 'b', 'c']

（四）Array的扩展方法

1、from方法

将类数组或可遍历对象转换为真正的数组（例子在上面）

2、find方法

找出第一个符合条件的数组成员，如果没有找到返回undefined

    let arr = [{
      id: 1,
      name: '张三'
    }, {
      id: 2,
      name: '李四'
    }];
    let result = arr.find(item => item.id===2);
    console.log(result);

3、findIndex方法

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

    let arr = [1, 5, 10, 15];
    let index = arr.findIndex(value => value>9);
    console.log(index); //2

4、includes方法

表示某个数组包含给定的值，返回布尔值。

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

（五）String的扩展方法

1、模板字符串

ES6新增的创建字符串的方式，使用反引号定义。（即本文二-(三)的字符串的标记）

特点：

可以解析变量

    let Name = `张三`;
    let sayHello = `hello, my name is ${Name}`;
    console.log(sayHello);

可以调用函数

    const sayHello = function () {
      return `hello world`;
    }
    let greet = `${sayHello()}  !!!!!`;
    console.log(greet);   //hello world  !!!!!

2、startWith&endsWith方法

startWith：表示参数字符串是否在原字符串的头部，返回布尔值

endsWith：表示参数字符串是否在原字符串的尾部，返回布尔值

    let str = 'hello world!';
    str.startsWith('hello');  //true
    str.endsWith('!');        //true

3、repeat方法

将原字符串重复n次，返回一个新字符串

    'x'.repeat(3)     //'xxx'
    'hello'.repeat(2) //'hellohello'

（六）Set数据结构

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

1、定义

Set本身是一个构造函数，用来生成Set数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 5]);

2、实现数组去重

    const s = new Set(['a', 'a', 'b', 'b']);
    console.log(s.size)   //Set数据结构默认去重，因此此处size为2，也就是只存在a和b两个元素
    const arr = [...s];   //将默认去重的s转换为数组即可实现数组的去重
    console.log(arr);

3、方法

add（value）：添加某个值，返回Set结构本身
delete（value）：删除某个值，返回一个布尔值，表示删除是否成功
has（value）：返回一个布尔值，表示该值是否为Set的成员
clear（）：清除所有成员，没有返回值

    const s = new Set();
    s.add(1).add(2).add(3)    // 向set结构中添加值
    s.delete(2)               // 删除set结构中的2值
    s.has(1)                  // 表示set结构中是否有1这个值，返回布尔值
    s.clear()                 // 清除set结构中的所有值

4、遍历Set

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

    // 遍历set数据结构，从中取值
    const s = new Set(['a', 'b', 'c']);
    s.forEach(value => {
      console.log(value)
    })