什么是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;
}
|