ES5&ES6新特性

淡淡的烟草味﹌ 2022-04-11 12:13 342阅读 0赞

## ES5和6的一些新特性 ##

**1、let和const**

var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。

for(var i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("循环外：" + i)

1、let所声明的变量，只在let命令所在的代码块内有效。
    2、const声明的变量是常量，不能被修改

会报错：

for(let i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("循环外：" + i)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70][]

**2、字符串扩展**

ES6为字符串扩展了几个新的API：

- includes()：返回布尔值，表示是否找到了参数字符串。
    - startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    - endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

**3、解构表达式**

数组解构:

let arr = [1,2,3]
    const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
    // 然后打印
    console.log(x,y,z);

对象解构：

const person = {
        name:"jack",
        age:21,
        language: ['java','js','css']
    }
    
    // 解构表达式获取值
    const {name,age,language} = person;
    // 打印
    console.log(name);
    console.log(age);
    console.log(language);

**4、函数优化**

现在的写法：

function add(a=2 , b = 1) {
        return a + b;
    }
    // 传一个参数
    console.log(add(10));

箭头函数：

一个参数：

let print = function (obj) {
        console.log(obj);
    }
    // 简写为：
    let print2 = obj => console.log(obj);

多个参数：

// 两个参数的情况：
    var sum = function (a , b) {
        return a + b;
    }
    // 简写为：
    var sum2 = (a,b) => a+b;

代码不止一行，可以用`{}`括起来

var sum3 = (a,b) => {
        return a + b;
    }

对象的函数属性简写、person对象、有eat方法

let person = {
        name: "jack",
        // 以前：
        eat: function (food) {
            console.log(this.name + "在吃" + food);
        },
        // 箭头函数版：
        eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
        // 简写版：
        eat3(food){
            console.log(this.name + "在吃" + food);
        }
    }

箭头函索结合解构表达式：

const person = {
        name:"jack",
        age:21,
        language: ['java','js','css']
    }
    
    function hello(person) {
        console.log("hello," + person.name)
    }
    
    或写成
    var  hi = ({name}) => console.log("hello,"+ name);

**5、map和reduce**

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
    
    reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
    
    - 第一个参数是上一次reduce处理的结果
    - 第二个参数是数组中要处理的下一个元素

转为int数组
    let arr = ['1','20','-5','3'];
    console.log(arr)
    
    arr = arr.map(s => parseInt(s));
    
    console.log(arr)

const arr = [1,2,-3,3];
    arr.reduce((a,b)=> a+b)
    显示：3

**6、promise**

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

**7、set和map**

Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。

map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：

*  object是 <string,object>集合
 *  map是<object,object>集合
 *      // map接收一个数组，数组中的元素是键值对数组
        const map = new Map([
            ['key1','value1'],
            ['key2','value2'],
        ])
        // 或者接收一个set
        const set = new Set([
            ['key1','value1'],
            ['key2','value2'],
        ])
        const map2 = new Map(set)
        // 或者其它map
        const map3 = new Map(map);
    
    **8、模块化**

模块化就是把代码进行拆分，方便重复利用 、模块功能主要由两个命令构成：`export`和`import`。

*  `export`命令用于规定模块的对外接口，
 *  `import`命令用于导入其他模块提供的功能。

定义一个对象：

const util = {
        sum(a,b){
            return a + b;
        }
    }

使用export将这个对象导出：

const util = {
        sum(a,b){
            return a + b;
        }
    }
    export util;
    
    可简写：
    export const util = {
        sum(a,b){
            return a + b;
        }
    }

导出多个值时

var name = "jack"
    var age = 21
    export {name,age}
    
    可简写
    // 无需声明对象的名字
    export default {
    	sum(a,b){
            return a + b;
        }
    }

导入上面的util

// 导入util
    import util from 'hello.js'
    // 调用util中的属性
    util.sum(1,2)

导放name和age属性

import {name, age} from 'user.js'
    
    console.log(name + " , 今年"+ age +"岁了")

**9、对象扩展**

- keys(obj)：获取对象的所有key形成的数组
    - values(obj)：获取对象的所有value形成的数组

**10、数组扩展**

find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70]: /images/20220411/5b5d03f969a14ed5ad24cf694ac3cc34.png