ES6介绍

论坛 期权论坛 脚本     
匿名技术用户   2020-12-27 17:59   11   0

什么是ES6?

简称ECMAScript 6是JavaScript语言的下一代标准。

ECMAScript和JavaScript的关系?

ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。

变量声明扩展:var let const

var的使用语法:

var 属性名称 = 属性值;

let的适用语法:

let 属性名称 = 属性值;

const的使用语法:

const 属性类型 属性名 = 属性值;

变量的解构赋值:数组解构、对象解构、字符串解构、函数参数解构赋值

数组解构使用语法:

let 属性名 = ["1","2"];

let [1,2] = 属性名;

console.log(1,2);

对象解构使用语法:

let { bar, foo } = { foo: "aaa", bar: "bbb" };

foo // "aaa"

bar // "bbb"

字符串解构使用语法:

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"



let {length : len} = 'hello';

len // 5

函数参数解构赋值语法:

function add([x, y]){

  return x + y;

}

add([1, 2]); // 3

函数参数的解构也可以使用默认值,语法是:

function move({x = 0, y = 0} = {}) {

  return [x, y];

}

move({x: 3, y: 8}); // [3, 8]

move({x: 3}); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]

函数扩展:参数的默认值、rest参数、箭头函数

参数的默认值使用语法:

function log(x, y) {

  y = y || 'World';

  console.log(x, y);

}

log('Hello') // Hello World

log('Hello', 'China') // Hello China

log('Hello', '') // Hello World

rest参数的使用语法:

function add(...values) {

  let sum = 0;

  for (var val of values) {

    sum += val;

  }

  return sum;

}

add(2, 5, 3) // 10

箭头函数的使用语法:

let sayHello = (name)=>{

console.log(name);

}

sayHello("Helloworld");

对象扩展:主要体现在属性和方法的简写上

字符串扩展的使用语法:

for (let codePoint of 'foo') {

  console.log(codePoint)

}

// "f"

// "o"

// "o"

模板字符串的扩展语法:

$('#result').append(`

  There are <b>${basket.count}</b> items

   in your basket, <em>${basket.onSale}</em>

  are on sale!

`);

数组的扩展语法:

function push(array, ...items) {

  array.push(...items);

}

function add(x, y) {

  return x + y;

}

const numbers = [4, 38];

add(...numbers) // 42

对象的扩展语法:

let birth = '2000/01/01';

const Person = {

  name: '张三',

  //等同于birth: birth

  birth,

  // 等同于hello: function ()...

  hello() { console.log('我的名字是', this.name); }

};

模块Module: export、import

export和import命令的使用方法:

模块功能主要由两个命令构成:export和import

export用于对外链接

import用于对内链接

语法是:

// profile.js

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;



// profile.js

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;



export {firstName, lastName, year};



使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

// import main.js



import {firstName, lastName, year} from './profile';



function setName(element) {

    element.textContent = firstName + ' ' + lastName;

}



分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP