快速掌握ES6语法

常量变量 let and const

先说说常量和变量的概念吧，

常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的 ID，

变量是说赋值后有更改的需求的，比如游戏名，游戏密码。

在之前的 JavaScript 中是不区分常量和变量的统统使用 var 来定义全局变量，

var userId = 666;

var userPassword = "mimabunengshuo";

现在 ES6 中使用 let 定义局部变量，const 定义局部常量

const userId = 666;

let userPassword = "wobuzidao";

为什么需要使用局部变量与常量

//我希望重复打印 0 到 9 ，打印10次

//使用 var

function varI(){

    for(var i = 0;i < 10;i++){

        for(var i = 0;i < 10;i++){

            console.log("varI:"+i);

        }

    }

}

//使用 let

function letI(){

    for(let i = 0;i < 10;i++){

        for(let i = 0;i < 10;i++){

            console.log("letI:"+i);

        }

    }

}

varI();//结果打印只有一次 0 到 9

letI();//顺利完成

如果非要使用 var 完成这个需求的话可以使用闭包

关于闭包本次不多做讨论

function varI() {

    for (var i = 0; i < 10; i++) {

        function test() {

            for (var i = 0; i < 10; i++) {

                console.log("varI:" + i);

            }

        }

        test();

    }

}

varI();//顺利完成

结构赋值

左右两边必须是一样的数据类型，或者转换后是一样的类型；
等号右边的值应该是数组或对象，不是对象或数组，就先将其转为对象；
定义和赋值必须同步完成

例如声明变量

let a = 1;

let b = 2;

let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

常用实例

1.交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

2.提取 JSON 数据

解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {

  status: true,

  data: ["nicai", "wobuzhidao"]

};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

箭头函数

在 ES6 之前定义函数是这样写

var f = function (i){

    return  i + 5;

}

有了箭头函数可以这样写（去掉 function 关键词，在"()"后面加"=>"）

let f = (i) => {

    return  i + 5;

}

好像没有太大区别？

箭头函数只有一个参数时,可以省略"()",只写参数；当只有一条返回语句时，可以省略"{}",以及 return 语句

上面的可以这样写

let f = i => return i + 5;

箭头函数的 this 是固定不变的，就是指向定义时所在的对象，而不是使用时所在的对象

假如将 ES6 的箭头函数转换为 ES5 的普通函数,可以看到，箭头函数的 this 是在引用外层的 this

// ES6

function foo() {

  setTimeout(() => {

    console.log('id:', this.id);

  }, 100);

}

// ES5

function foo() {

  var _this = this;

  setTimeout(function () {

    console.log('id:', _this.id);

  }, 100);

}

字符串模板

字符串模板主要用来处理变量和字符串混合的情况
字符串使用反引号(字符串)来包裹字符串，用$符加大括号 ( ${JavaScript}) 来包裹任意的 JavaScript 表达式
字符串模板中可以使用回车

比如用 JavaScript 来生成 HTML 元素，元素的文本想使用自己 JavaScript 运算后的结果

ES5 中比较麻烦

$('#dom').append(

  '<div>你的用户名是：' + userName + '<br> ' +

  '你已经注册了 ' + oNumber +'年</div>'

);

ES6中相对简单

$('#dom').append(

  `<div>你的用户名是：${userName}<br>你已经注册了${oNumber}年</div>`

);

面向对象

class 用来定义一个类
extends 用来表示继承哪个类
constructor 构造函数可以定义私有方法和属性,此函数外的为共享的
super() 在 constructor 使用该方法继承父类的 this 对象

代码示例

class user {

    constructor() {

        this.name = '用户1';

    }

    sayHello(say) {

        console.log(`${this.name}，有人对你说：${say}`);

    }

}

let user1 = new user();

user1.sayHello('你好'); //用户1，有人对你说：你好

class xiaoming extends user {

    constructor() {

        super();

        this.name = '小明';

    }

}

let xiaoming1 = new xiaoming();

xiaoming1.sayHello('你好'); //小明，有人对你说：你好

let user2 = new user();

user2.sayHello('你好')//用户1，有人对你说：你好

函数

参数默认值

在 JavaScript 传统语法中如果想设置函数默认值一般我们采用判断的形式

function example (a,b,c) {

    a = a||'string';

    b = b||'number';

    c = c||'json';

    console.log(a);

    console.log(b);

    console.log(c); // 'string' 'number' 'json'

}

在新的语法中我们可以在参数声明的同时赋予默认值

function example (a = 'string',b = 'number',c = 'json') {

    console.log(a);

    console.log(b);

    console.log(c); // 'string' 'number' 'json'

}

参数展开

在 JavaScript 传统语法中如果不确定参数的数量，并且想获取所有的参数，一般使用 arguments （函数自带的变量，数组类型，存放所有的参数）

function example (){

    console.log(arguments);

}

在新的语法中我们可以使用三个点 ... 表示接收全部参数

function example (...oVar){

    console.log(oVar);

}

还可以结合解构赋值，实现不用按顺序传递参数

function (...opaction){

    let {url,type,succ,err} = opaction;

    if(!url){

        return false;

    }else{

        console.log(url);

        console.log(type);

        console.log(succ);

        console.log(err);

    }

}

数组

map() 方法创建一个新数组，然后每次从开始给回调函数传递一个原来数组的成员，直到结束

let oArray = [5, 7, 1, 56];

const oMap = oArray .map(x => x * 3);

console.log(oMap);// Array [15, 21, 3, 168]

//映射：一个对一个
reduce() 方法接收一个函数作为累加器(升序执行)，最终计算为一个值

var numbers = [1, 2, 3, 4];

function getSum(total, num) {

return total + num;

}

console.log(numbers.reduce(getSum)); // 10

//汇总：一堆返回一个
filter() 方法创建一个新的数组，新数组中的元素是回调函数中符合条件的所有元素。

var ages = [95, 59, 18, 21];

function checkAdult(age) {

return age >= 60;

}

console.log(ages.filter(checkAdult));// 95

//过滤：一堆返回部分
forEach() 方法调用数组的每个元素,并将元素传递给回调函数

//遍历：以上的都可以通过 forEach() 来手动实现，并且可以实现更加个性的自定义操作

var array1 = ['a', 'b', 'c'];

array1.forEach(element => {

console.log(element);

});// a b c
Array.from() 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象

//常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象

// NodeList对象

let ps = document.getElementsByClassName('p');//所有取到的 dom 元素都是 NodeList 格式，不是真正意义上的数组

Array.from(ps).filter(p => {

return p.textContent.length > 9;//先用 from() 将所有取到的 p 标签转换为真正的数组然后过滤掉前十个

});

// arguments对象

function foo() {

var args = Array.from(arguments);

// arguments 也不是真正意义上的数组

}

json JavaScript对象字面量

关于什么是 json 这里不过多介绍，主要看看 ES6 里 json JavaScript对象字面量是怎样的

很多JavaScript开发人员都错误地把JavaScript对象字面量（Object Literals）称为JSON对象（JSON Objects）包括我自己

在这里推荐一篇文章,感谢那些帮我指出错误并告诉我正确知识的人，谢谢

key and value

当键名和键值是一样的情况下可以只写一个，在引入组件与库中特定方法时，可以看到（关于如何引入其他文件，将在之后的文章写）

//传统

{

    name: name,

}

//ES6

{

    name

}

function

如果在之前了解过微信小程序，vue ，或者将要学习那么应该会经常看到这两种函数的写法

{

    onLoad() {

        butClick() {

            return false;

        }

    }

    methods: {

        butClick() {

            return false;

        }

    }

}

但是如果不用框架，写这样的代码，会报错

这是因为框架其实可以看做一个函数，上面这种代码是传递给函数的参数（这个参数的接收方法在本篇文章的开头）

这个参数是以 json 对象的形式传递的，

而 ES6 中当 value 旳值是一个函数时可以省略冒号和 function 关键字

//传统

{

    butClick: function (){

        return false;

    }

}

//ES6

{

    butClick() {

        return false;

    }

}

巴特西

快速掌握ES6语法

最新文章

热门文章