2020-08-05

ES6新特性

1.字符串扩展

ES6为新的字符串扩展了几个新的api:
  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

在这里插入图片描述
ES6中提供了`来作为字符串模板标记。我们可以这么玩:
在这里插入图片描述

在两个`之间的部分都会被作为字符串的值,不管你任意换行,甚至加入js脚本
键盘是的1的左侧,tab的上侧,esc的正下方

2.解构表达式

数组结构

比如有一个数组

let arr = [1,2,3]

我想获取其中的值,只能通过角标。ES6可以这样:

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

结果:
在这里插入图片描述

对象解构

例如有个person对象:

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

我们可以这么做:

// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);

结果:
在这里插入图片描述
如过想要用其它变量接收,需要额外指定别名:
在这里插入图片描述

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

3.函数优化

函数参数默认值

在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));
箭头函数

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;
}
对象的函数属性简写

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

map和reduce

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

map

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

举例:有一个字符串数组,我们希望转为int数组

let arr = ['1','20','-5','3'];
console.log(arr)

arr = arr.map(s => parseInt(s));

console.log(arr)
reduce

reduce():接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:

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

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

const arr = [1,20,-5,3]

没有初始值:
在这里插入图片描述
指定初始值:

在这里插入图片描述
link

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页