ES5&ES6新特性

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)

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，则返回该元素

ES5和6的一些新特性

猜你喜欢