ES6-01

fud1mo

已于 2022-04-23 15:46:04 修改

阅读量1.4k

点赞数 1

文章标签： javascript

于 2022-03-23 15:57:19 首次发布

本文链接：https://blog.csdn.net/wsssq_/article/details/123678519

版权

一、let、const

（一）、let

ES6新增的用于声明变量的关键字

let声明的变量特点：

1. 变量不能重复声明

2. 具有块级作用域，只在所处的块级有效

3. 不存在变量提升

4. 具有暂时性死区特性（在块级作用域中声明的变量与这个块级绑定，不会受外界影响）

（二）、const

用于声明常量，常量就是值（内存地址）不能变化的量

const声明的变量特点：

1. 具有块级作用域

2. 声明常量时必须赋值

3. 常量赋值后，值不能修改（数组、对象不能重新赋值，但可以更改数据结构内部的值）

4. 一般常量使用大写（潜规则）

（三）、let、const、var 的区别

1. var声明的变量，作用域为该语句所在的函数内，且存在变量提升现象

2. let声明的变量，作用域为该语句所在的代码块内，不存在变量提升

3. const声明的是常量，在后面的代码中不能再修改该常量的值

二、解构赋值

ES6中，按照一定的模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量

1. 数组解构

数组解构允许我们从数组中提取值，按照对应位置，将值赋值给变量

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

如果解构不成功，变量的值为undefined

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

2. 变量解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性值赋值给变量

写法1：

        let person = {
            name: '张三',
            age: 18,
            gender: '男'
        }
        let {
            gender,
            name,
            address
        } = person;
        console.log(gender); //'男'
        console.log(name); //'张三'
        console.log(address); //undefined

写法2：

        let person = {
            name: '张三',
            age: 18,
            gender: '男'
        };
        let {
            name: myName,
            age: myAge
        } = person;
        console.log(myName);
        console.log(myAge);

三、箭头函数

ES6新增的定义函数的方式

() => {}

const fn = () => {}

特点：

1. 函数体中如果只有一句代码，且代码的执行结果就是返回值，可以省略大括号

        const sum = (n1, n2) => {
            return n1 + n2;
        }

        // 简化为如下：

        const sum = (n1, n2) => n1 + n2;

2. 如果形参只有一个，可以省略小括号

        function fn(v) {
            return v;
        }

        // 简化为如下：
        
        const fn = v => v;

3. 箭头函数不绑定this关键字，如果在箭头函数中使用this，指向的是函数声明时所在作用域下的this的值

4. 箭头函数不能作为构造函数去实例化对象

5. 不能使用arguments变量（arguments用于保存实参）

*箭头函数适合与this无关的回调，如定时器、数组的方法回调；不适合与this有关的回调，如BOM元素的事件回调、对象的方法。

四、剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

形参前添加...代表接收剩余的实参，以数组形式接收

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

        // 箭头函数不能使用arguments
        const sum = (...args) => {
            let total = 0;
            args.forEach(item => total += item);
            return total;
        };
        console.log(sum(10, 20, 30, 40));

剩余参数和解构配合使用

        let arr1 = ['张三', '李四', '王五', '铁根'];
        let [s1, ...s2] = arr1;
        console.log(s1); //'张三'
        console.log(s2); //['李四', '王五', '铁根']

五、扩展运算符（展开语法）

1. 扩展运算符可以将数组或对象转为用逗号分隔的参数序列

        let arr = [1, 2, 3, '张三', '李四'];
        // ...arr  //1, 2, 3, '张三', '李四'
        console.log(...arr); //1 2 3 '张三' '李四'
        console.log(1, 2, 3, '张三', '李四'); //1 2 3 '张三' '李四'

2. 扩展运算符可以应用于合并数组

方法一：

        let arr1 = [1, 2, 3];
        let arr2 = [3, 4, 5];
        let arr3 = [...arr1, ...arr2];

方法二：

        let arr1 = [1, 2, 3];
        let arr2 = [3, 4, 5];
        arr1.push(...arr2);
        console.log(arr1);

3. 将伪数组或可遍历对象转换为真正的数组

        let divs = document.getElementsByTagName('div');
        divs = [...divs];
        console.log(divs);

六、Array 的扩展方法

1. 构造函数方法：Array.from()

将伪数组或可遍历对象转换为真正的数组

方法可以接收第二个参数（函数），数组中有几个元素，函数就会被调用几次，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

        var arrayLike = {
            "0": "2",
            "1": "5",
            "2": "6",
            "length": 3
        }
        var ary = Array.from(arrayLike, item => item * 2)
        console.log(arrayLike);
        console.log(ary);

2. 实例方法：find()

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

接收一个函数作为参数，参数函数中两个形参分别为当前循环到的值、当前值的索引，函数体中返回查找条件

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

3. 实例方法：findIndex()

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

使用方法和 find() 类似

        let arr = [1, 5, 9, 10, 11];
        let i = arr.findIndex((item, index) => item > 8);
        console.log(i);

4. 实例方法：includes()

用于确定某个数组是否包含给定的值，返回布尔值

[1, 5, 9, 10, 11].includes(5)  //true
[1, 5, 9, 10, 11].includes(-1)  //false

5. filter()

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

filter()方法接收的参数是一个函数，且该回调函数有一个要求：必须返回一个布尔值

当返回true时，函数内部会自动将这个元素加入到新的数组中；当返回false时，函数内部会过滤这个元素

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

6. map()

创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

7. reduce()

对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。（如全部相乘或全部相加）

arr.reduce(recuder函数, [初始值])

    const arr = [20, 40, 80, 100];
    let total = arr.reduce((previousValue, n) => previousValue + n, 0);
    console.log(total);
    // 第一次：previousValue为0（初始值为0），n为20
    // 第二次：previousValue为20，n为40
    // 第三次：previousValue为60，n为80
    // 第四次：previousValue为140，n为100

七、String 的扩展方法

1. 模板字符串

模板字符串可以解析变量，字符串中可以换行，可以调用函数

        let name = '张三';
        let sayHello = `hello，我的名字叫${name}`;

        const sayHello = function() {
            return `哈哈，阿森纳，案发侠女从`;
        };
        let greet = `${sayHello()}哦哦哦啊vv发v`;
        console.log(greet);

2. 实例方法：startsWith() 和 endsWith()

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

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

        let str = 'Hello world!';
        console.log(str.startsWith('He')); //true
        console.log(str.endsWith('!')); //true

3. 实例方法：repeat()

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

八、Set 数据结构

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

Set 本身是一个构造函数

const s = new Set();

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

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

利用Set数据结构做数组去重

        var arr = ['a', 'a', 'b', 'b', 'b'];
        const s1 = new Set(arr);
        arr = [...s1];
        console.log(arr);

属性：

size 结构中数据的数量

实例方法：

add(value) 向set结构中添加某个值，返回set结构本身

delete(value) 删除某个值，返回布尔值，表示删除是否成功

has(value) 返回布尔值，表示该值是否为set结构的成员

clear() 清除所有成员，没有返回值

遍历

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

九、对象字面量的增强写法

1. 属性的增强写法

    // 1.属性的增强写法
    const name = 'why';
    const age = 17;
    const height = 1.88;

    // ES5的写法
    // const obj = {
    //   name: name,
    //   age: age,
    //   height: height
    // }

    // ES6的写法
    const obj = {
      name,
      age,
      height
    }
    console.log(obj);

2. 函数的增强写法

    // 2.函数的增强写法
    // ES5的写法
    // const obj = {
    //   run: function () { },
    //   eat: function () { }
    // }

    // ES6的写法
    const obj = {
      run() { },
      eat() { }
    }