5分钟掌握ES6的常用开发技巧

1.let, const 都是块级作用域,其有效范围仅在代码块中。

if( a==1 ){

var b = 'xxx';

}

console.log(b);//xxx

//es6

if(a==1){

let b = 'xxx';

}

console.log(b);//undefined

在被解析的过程中 如果出现重定义的变量也会报错提示,保证你的代码是按照你的意愿正常运行的

const sum = {num1 : 1, num2 : 2};

sum.num2 = 6;

console.log(sum);//{num1:1,num2:6}

常量只是指向了对象的指针,对象本身的内容却依然可以被修改

2.模板字符串

//es5

$('#box').append(

'出售中 ' + obj.num + ' ' +

'剩下的, ' +'' + obj.showNum +' 卖完了!');

//es6

//在es6中,内容模板,可以定义在 `` 包起来的字符串中,其中的内容会保持原有格式

//另外可以在字符串中直接使用模板语言进行变量填充,优雅而简洁

$('#box').append(`出售 ${obj.num} 剩下 ${obj.showNum}`);

3.字符串遍历输出,补全

for(let item of 'str'){

console.log(item);

}

//t

//参数1:[number] 目标字符串长度

//参数2:[string] 进行补全的字符串

'123'.padStart(5, '0')//00123 - 字符串不足5位,在头部补充不足长度的目标字符串

'345'.padEnd(5, '0')//34500 - 在尾部进行字符串补全

4.数组扩展

let a = [1, 2];

let b = [2,3];

let c = [...a, ...b]; //[1, 2, 2, 3] 所有内容合并,但并不会去除重复

Array.of(3,4,5)//快速转换为数组 [3,4,5]

.keys() - 获得数组中所有元素的键名(实际上就是下标索引号)

.values() - 获得数组中所有元素的数据

.entries() - 获得数组中所有数据的键名和数据

for (let i of ['x', 'y'].keys()) {

console.log(i); //0 1

}

for (let elem of ['x', 'y'].values()) {

console.log(elem); //x y

}

for (let [index, elem] of ['x', 'y'].entries()) {

console.log(index, elem); // 0 "x" 1 "y"

}

5.对象扩展

//直接使用变量/常量的名称个为对象属性的名称

let a = 'abc';

let b = {a}; //{a: 'abc'}

判断对象是否为数组

if(Object.isArray(obj)){}

对象内容合并

Object.keys() - 获得对象中所有的键名,以数组的形式返回

var obj = { a:1,b:2 };

var names = Object.keys(obj);//['a', 'b']

Object.values() - 获得对象中所有的值内容,以数组的形式返回

var obj = { a:1,b:2 };

var values = Object.values(obj);//[1, 2]

Object.entries() - 获得对象中所有的成员数据,以数组的形式返回,成员的内容也是数组形式

var obj = { a:1,b:2 };

var values = Object.entries(obj);//[['a',1], ['b',2]]

解构赋值

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

//这里 b 的值为[2,3],这样可以快速使用剩余的数据赋值给变量,

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

//定义了三个变量,并对应赋了值;如果值的个数与变量名个数不匹配,没有对应上的变量值为 undefinedlet obj = {a: 1, b: 2};

let {a, b} = obj;//a=1,b=2

使用变量的方式进行结构赋值,需要严格匹配名称,数组的模式是严格匹配下标

6.模块化

//app.js

let act = {a:1,b:2,c:3};

export default act;

//index.js

import act from 'app.js';//假设 app.js 与index.js 同在一个目录中

console.log(act.a);//1

发表评论
留言与评论(共有 0 条评论)
   
验证码:

相关文章

推荐文章

'); })();