ECMAScript6基础

ES6实际上是ECMA（欧洲计算机制造协会）在2015年发布的JavaScript第6版标准，它引入了一些新的功能，下面来看看它有哪些新鲜的特性吧。

怎么在IDEA2020.1中新建static web工程，查看这里：IDEA2020 新建static web项目

let和const类型

(1)let

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

将变量i的类型修改为let后

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

由此可见，let类型修复了var类型数组越界的问题

(2)const

const定义了一个不可修改的常量：

字符串扩展

includes

startsWith

endsWith

let str='hello es6'
str.includes('hello')
//true
str.includes('els')
//false
str.startsWith('he')
//true
str.endsWith('s6')
//true

使用字符串没有办法实现" "内换行：

通过使用``解决了换行问题

str=`
    my
    name
    is
    es6
`

解构表达式

解构数组

解构对象

函数优化

原始为参数赋默认值的写法

es6写法

function(a,b=1){
	console.log(a+b)
}

箭头函数

多个参数，函数内容一行写不下的情况

var fun = (a,b)=> {
	业务逻辑
}

一个参数，函数内容一行可以写下的情况

var fun = a => console.log(a)

解构表达式与箭头函数合用

const person = {
                name: "nick",
                age: 21
            }
var hi = ({name}) => console.log(name)
hi(person)

对象中函数的三种写法

• 方式一，最经典
• 方式二，箭头函数，新颖
• 方式三，最简洁，优雅（推介）

var person1 = {
    name: 'jack',
    eat: function (food) {
        console.log(this.name + "喜欢吃" + food)
    },
    eat2: (food) => {
        console.log(person1.name + "喜欢吃" + food)
    },
    eat3(food) {
        console.log(person1.name + "喜欢吃" + food)
    }
}

person1.eat("米饭")
//jack喜欢吃米饭
undefined
person1.eat2("西瓜")
//jack喜欢吃西瓜
undefined
person1.eat3("水蜜桃")
//jack喜欢吃水蜜桃

map和reduce

• map()，对数组的每一个元素都调用回调函数
• reduce()，从数组的第一个和第二个参数开始，将它俩作为回调函数参数，并将回调函数的执行结果作为下一次的第一个参数，此时第三个元素作为第二个参数，数组元素从左到右依次执行

let arr = [10, 20, 30] 
arr.map(a => (a + 10)) //[20, 30, 40]
arr.reduce((a, b) => a + b, 100) //160

对象扩展

对Object对象扩展三个方法

• keys()
• values()
• entries()，获取一个二元数组，每个键值对作为够成一个一元数组，然后成为二元数组的成员
• assign()，将原对象的属性和值添加到目标对象中去

const person = {
    name: "nick",
    age: 21
}

var person1 = {
    name: 'jack',
    eat: function (food) {
        console.log(this.name + "喜欢吃" + food)
    },
    eat2: (food) => {
        console.log(person1.name + "喜欢吃" + food)
    },
    eat3(food) {
        console.log(person1.name + "喜欢吃" + food)
    }
}

Object.keys(person)
//["name", "age"]
Object.entries(person)
//[Array(2), Array(2)]0: (2) ["name", "nick"]1: (2) ["age", 21]length: 2__proto__: Array(0)

var obj = {
    weather:"windy"
}

Object.assign(obj,person1)
//{weather: "windy", name: "jack", eat: ƒ, eat2: ƒ, eat3: ƒ}

assign()使用演示：

数组扩展

• find()，查找元素
• findIndex()，查找元素下标
• includes()，是否包含元素

let arr = [10, 20, 30] 
arr.find(a => a==20)
//20
arr.find(a => a>20)
//30
arr.findIndex(a => a>20)
//2
arr.includes(30)
//true
arr.includes(34)