ES6的一些常用语法

最新推荐文章于 2022-07-27 20:24:29 发布

异常yc

最新推荐文章于 2022-07-27 20:24:29 发布

阅读量196

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45799076/article/details/103663489

版权

ES5和6的一些新特性

此博客仅作本人知识点总结,许多地方都有所省略,小白勿仿

1.创建一个空的html页面：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <script>
    
    </script>
    <body>
        
    </body>
    </html>

1.1.let 和 const 命令

var

js定义变量只有一个关键字：var
var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。
例如这样的一段代码：

    for(var i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("外：" + i)
    //打印结果0.1.2.3.4.外5

let

let所声明的变量，只在let命令所在的代码块内有效。

把刚才的var改成let

    for(let i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("外：" + i)
    //打印结果0.1.2.3.4,  还一个报错未定义, 这就正常了

const

const声明的变量是常量，不能被修改

2.字符串扩展

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

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

3.解构表达式

3.1数组解构

比如有一个数组：

let arr = [1,2,3]

想获取其中的值，只能通过角标。ES6可以这样：


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

//结果：1 . 2 . 3

3.2对象解构

例如有个person对象：

    const person = {
        name:"gm",
        age:21,
        language: ['java','js','css']
    }

可以这么做：

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

如过想要用其它变量接收，需要额外指定别名：

const {name:n} = person
n = gm

{name:n}：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。

4.函数优化

4.1 函数参数默认值

在ES6以前无法给一个函数参数设置默认值，只能采用变通写法：

    function add(a , b) {
        // 判断b是否为空，为空就给默认值1
        b = b || 1;
        return a + b;
    }
    // 传一个参数
    console.log(add(10));

现在可以这么写：

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

4.2 箭头函数

ES6中定义函数的简写方式：

一个参数时：

var print = function (obj) {
    console.log(obj);
}
// 简写为：
var 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;
}

4.3 对象的函数属性简写

比如一个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);
    }
}

4.4 箭头函数结合解构表达式

比如有一个函数：

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

5.1 数组中新增了map和reduce方法。

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

举例：一个字符串数组转为int数组

    let arr = ['1','2','-3','4'];
    console.log(arr)
    //结果['1','2','-3','4']
    arr = arr.map(s => parseInt(s));
    console.log(arr)
	//结果[1,2,-3,4]

5.2reduce()：接收一个函数（必须）和一个初始值（可选

第一个参数（函数）接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素

reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

举例：

 const arr = [1,2,-3,4]
 arr.reduce((a,b) => a + b)
//没有初始值结果：4
arr.reduce((a,b) => a+b, 1)
//指定初始值结果：5

5.3 对象扩展

ES6给Object拓展了许多新的方法，如：

keys(obj)：获取对象的所有key形成的数组
values(obj)：获取对象的所有value形成的数组
entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],…]
assign(dest, …src) ：将多个src对象的值拷贝到 dest中（浅拷贝）。

5.4数组扩展

ES6给数组新增了许多方法：

find(callback)：数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
findIndex(callback)：数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
includes(数组元素)：与find类似，如果匹配到元素，则返回true，代表找到了。