欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6新特性

程序员文章站 2022-04-07 13:49:28
...

1.什么是ECMAScript?

1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商 协会)以JavaScript为基础,制定了 标准规范。JavaScript和 JScript都是 的标准实现者,随后各大浏览器厂商纷纷实现了标准。

2.ES6的新特性

2.1 let和const命令

var 存在一个问题,就是定义的变量会莫名成为全局变量!

for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    //我在循环外:5,这是var的缺陷,在外部也可以使用
    console.log("var,我在循环外:" + i);

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

    for (let j = 0; j < 5; j++) {
        console.log(j);
    }
    //报错,let定义之后,外部不可以使用 (j)
    console.log("let,我在循环外:" + j);

const声明的变量是常量,不能修改。

 var k = 100;  //const定义常量,不能改变
    console.log(k);

2.2 字符串扩展

  • includes():是否找到了参数字符串,返回值为布尔值
  • startsWith() :字符串的头部是否以**开头,返回值为布尔值
  • endsWith() :字符串的尾部是否以**结尾,返回值为布尔值
    ES6新特性
    字符串模板:ES6中提供 ` 作为字符串模板标记
    ES6新特性

2.3 解构表达式

2.3.1 数组解构

ES6新特性

2.3.2 对象解构

ES6新特性

2.4 函数优化

2.4.1 函数参数设置默认值

原本写法:设置b的默认值为1

    function fun1(a, b) {
        if (!b) {
            b = 1;
        }
        console.log(a/b);
    }

现在写法:

	//设置b的默认值为1,当不给b传值时,默认值生效
    function fun1(a, b = 1) {
        console.log(a/b);
    }

2.4.2 箭头函数()=> {}

一个参数时:

var print = function (obj) {
    console.log(obj);
}
// 简写为:
var print = obj => console.log(obj);

多个参数时:

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

代码不止一行时:用{ }包起来

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

对象的函数属性:

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 hello = ({name}) =>  console.log("hello," + name);

2.5 map和reduce

2.5.1 map

map() :接收一个函数,将原来数组中的所有元素用这个函数处理后放入新数组返回。
举例:将一个字符串数组转化为int数组

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

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

ES6新特性

2.5.2 reduce

reduce():接收一个函数(该函数接收两个参数,第一个参数是上一次reduce处理的结果,第二个参数是数组中要处理的下一个元素)和一个初始值。
reduce()会从左到右将数组中的元素用reduce处理,并把处理结果作为下一次reduce的第一个参数。
ES6新特性

2.6 对象扩展

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

2.7 数组扩展

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