pk10免费滚雪球计划 北京pk赛车人工计划 一分钟赛车是官方的吗 北京pk10数学天才揭秘 北京pk10网赌害人案例 北京pk10保罗软件计划 pk10模式长期稳赚6码 北京pk10公式大全 网络赛车赌博是骗局吗 北京pk赛车是不是真的 北京pk10八码公式教程 一无所有怎么白手起家 北京pk10正规平台平台 北京pk赛车历史开结果 pk10买8码杀2码好方法 北京pk10冠亚和值漏洞 正规北京pk赛车彩票 玩北京pk10输钱经历 北京pk10专家在线计划 北京pk赛车正规吗 北京pk10为什么不禁止 北京pk拾赛车有人赢吗 北京pk10代理违法吗 pk10挂机模式真的稳赢 pk10冠军固定公式软件 北京pk10如何看大小 北京pk哈赛车官方网站 北京pk10六码公式教程 pk10去一尾算法举例 北京pk10冠军5码方法
阅读更多

4顶
0踩

编程语言

转载新闻 ES6 javascript 实用开发技巧

2018-04-16 10:48 by 副主编 jihong10102006 评论(3) 有30148人浏览
定义变量/常量

ES6 中新增加了 let 和 const 两个命令,let 用于定义变量,const 用于定义常量 两个命令与原有的 var 命令所不同的地方在于,let, const 都是块级作用域,其有效范围仅在代码块中,实例如下:
//es5
if(1==1){
  var b = 'foo';
}
console.log(b);//foo

//es6
if(1==1){
  let b = 'foo';
}
console.log(b);//undefined

定义常量对象

const a = {a:1,b:2};
a.b = 3;
console.log(a);//{a:1,b:3}

上例中,常量 a 中的内容在定义后,再进行修改依然有效,原因是对于对象类型的使用是指针式引用,常量只是指向了对象的指针,对象本身的内容却依然可以被修改,注意,数组(Array) 也是对象; 那么如果在定义常量时使用基础数据类型:string, number, boolean 等
const a = 1;
a = 2;// Uncaught TypeError: Assignment to constant variable.

在使用中,建议使用 let 与 const 完全代替 var 命令

数?#36947;?#23637;

转换
Number.parseInt - 将字符串或数字转换为整数 Number.parseFloat - 将字符串或数字转换为浮点数

Number.parseInt, Number.parseFloat 与 parseInt, parseFloat 功能一致,在ES6中,推荐使用 Number. 的方式进行调用,这么做的目的是为了让代码的使用方式尽可能减少全?#20013;?#26041;法,使用得语言逐步模块化

测试函数

//测试是否整数
Number.isInteger(21)//true
Number.isInteger(1.11)//false

//测试是否NaN
Number.isNaN(Nan)//true
Number.isNaN(1)//false

字符串扩展

字符串内容测试
'abcdef'.includes('c');//true
'abcdef'.includes('ye');//false
'abcdef'.startsWith('a');//true
'abcdef'.endsWitch('f');//true
//includes(), startsWith(), endsWith() 都支?#20540;?#20108;个?#38382;?
//类型为数字类型,意为从第 n 个字符开始,endsWith()的第二个?#38382;?#26377;点不一样
'abcdef'.includes('c', 4);//false 从第5个字符开始查找是否有 'c' 这个字符
'abcdef'.startsWith('d', 3);//true 从第4个字符开始查找是否是以 'd' 字符为开头
'abcdef'.endsWith('d', 4);//true 前面的4个字符里,是否以 'd' 字符为结尾

字符串内容重复输出

'a'.repeat(5);//aaaaa 重复输出5遍

原生支持模板语言
//es5
$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);
//es6
//在es6中,内容模板,可以定义在 `` 包起来的字符串中,其中的内容会保持原有格式
//另外可以在字符串中直接使用模板语言进行变量填充,优雅而简洁
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

字符串遍历输出
//for ...of 格式为 es6 中的 Iterator 迭代器的输出方式
for(let c of 'abc'){
  console.log(c);
}
//a
//b
//c

字符串补全

//?#38382;?:[number] 目标字符串长度
//?#38382;?:[string] 进行补全的字符串
'12345'.padStart(7, '0')//0012345 - 字符串不足7位,在头部补充不足长度的目标字符串
'12345'.padEnd(7, '0')//1234500 - 在尾部进行字符串补全

数组扩展

合并数组

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

快速转换为数组

Array.of(3,4,5)//[3,4,5]

数组内容测试

//判断对象是否为数组
if(Array.isArray(obj)){...}

[1,2,3].includes(5);//false,检索数据中是否有5

//找出第一个匹配表达式的结果,注意是只要匹配到一项,函数即会返回
let a = [1, 3, -4, 10].find(function(value, index, arr){
  return value < 0;
});
console.log(a);//-4

//找出第一个匹配表达式的结果下标
let a = [1, 3, -4, 10].findIndex(function(value, index, arr){
  return value < 0;
});
console.log(a);//2

内容过滤

//排除负数内容
let a = [1, 3, -4, 10].filter(function(item){
  return item > 0;
});
console.log(a);//[1, 3, 10]

内容实例

keys() - 获得数组中所有元素的键名(实际上就是下标索引号)
values() - 获得数组中所有元素的数据
entries() - 获得数组中所有数据的键名和数据
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

.entries(), .keys(), .values() 功能与 Object 中的几个同名函数功能类似,实际使用中实用性不高,对于数组的操作,直接进行遍历即可

对象扩展

属性的简洁表示

//直接使用变量/常量的名称个为对象属性的名称
let a = 'abc';
let b = {a};//{a: 'abc'}

function f(x, y){ return {x, y};}
//等效于
function f(x, y){ return {x: x, y: y}}

let o = {
  f(){ return 1; }
}
//等效于
let o = {
  f: function(){ return 1; }
}

判断对象是否为数组

if(Object.isArray(someobj)){}

对象内容合并

let a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};
let d = Object.assign(a, b, c);
console.log(d);//{a:1,b:4,c:5}
console.log(a);//{a:1,b:4}
//上面的合并方式会同时更新 a 对象的内容,a 的属性如果有多次合并会被更新数据,
//但自身没有的属性,其它对象有的属性不会被添加到 a 身上;
//?#38382;?#21015;中的对象只会影响第一个,后面的?#38382;?#23545;象不会被修改数据

//推荐使用这种方式进行对象数据合并
let a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};
let d = Object.assign({}, a, b, c);//第一个?#38382;?#22686;加一个空对象,在合并时让它被更新,不影响实?#23454;?#23545;象变量内容
console.log(d);//{a:1,b:4,c:5}//与上面的方式合并结果一致,使用这种方式, a 对象的内容就不会被影响了

对象内容合并的方向是从?#38382;?#39034;序的后向前合并

对象内容集合

Object.keys() - 获得对象中所有的键名,以数组的?#38382;?#36820;回
var obj = { a:1,b:2 };
var names = Object.keys(obj);//['a', 'b']

Object.values() - 获得对象中所有的?#30340;?#23481;,以数组的?#38382;?#36820;回
var obj = { a:1,b:2 };
var values = Object.values(obj);//[1, 2]

Object.entries() - 获得对象中所有的成员数据,以数组的?#38382;?#36820;回,成员的内容也是数组?#38382;?
var obj = { a:1,b:2 };
var values = Object.entries(obj);//[['a',1], ['b',2]]

其实观察可发现,Object.keys(), Object.values(), Object.entries(),与 Java 的 MAP 中的方法是一致的,不论是方法名还是具体的用法,这也可以帮忙理解这些功能 API

解构赋值

let [a, b, c] = [1, 2, 3];
//定义了三个变量,并对应赋了值;如果值的个数与变量名个数不匹配,没有对应上的变量值为 undefined

let [a, b, c='default'] = [1, 2];
//指定默认值,在定义变量?#26412;?#25351;定了默认值,如果赋值时,没有给定内容,则会取默认值

let [a, …b] = [1,2,3];
//这里 b 的值为[2,3],这样可以快速使用剩余的数据赋值给变量,
//但实际使用中为了避免代码阅读的歧义,不推荐这么使用,仅作了解即可

let [a,b,c] = 'yes';
console.log(a);//y
console.log(b);//e
console.log(c);//s
字符串的解构赋值会以单个字符的方式进行赋值

let {length}='yes';
console.log(length);//3
以对象赋值的方式,如果名称是字符串的自带属性,则会获得属性值

let arr = [1,2];
let obj = {a:1,b:2};
function test ({a = 10, b}){
	console.log('a:',a);
	console.log('b:',b);
}
test(obj);
解构赋值的使用实例,作为函数传参,并使用默认值

对象结构解构

let obj = {a: 1, b: 2};
let {a, b} = obj;//a=1,b=2
使用变量的方式进行结构赋值,需要严格匹配名称,数组的模式是严格匹配下标

let obj = {a: 1, b: 2};
let {a=0, b=5} = obj;
赋值并给定默认值

let obj = {a: 1, b: 2};
let {a:A, b} = obj;//A=1,b=2,a报错,变量未定义
获得内容后,将变量进行改名

let obj = {a: 1, b: 2};
let a = 0;
({a, b} = obj);
对已存在的 a 进行修改值,并生成新的变量 b

let obj = {
	arr: ['aaa',{a:1}]
};
let {arr:[b, {a}]} = obj;//这里的arr互相?#25104;?
console.log(b);
console.log(a);
获得对象的子数据,并?#25104;?#21040;相应的变量,这里需要注意的是结构要对应

模块化

最简单实例的使用场景

//a.js
let a = {a:1,b:2,c:3};
export default a;

//b.js
import a from 'a.js';//假设 a.js 与 b.js 同在一个目录中
console.log(a.a);//1

以上简单的实例就两个脚本文件举例?#24471;?#20102;两个文件在实际使用,可以进行互相引用,并获得目标文件中的数据;我们可以认为一个脚本文件就是一个 模块,那么在实际开发过程中,可以将业务处理内容,或是数据处理过程 抽象 在一个文件中,在需要使用时,由其它模块引入并使用其中的数据

完整内容:https://github.com/TerryZ/js-develop-skill-summary
来自: oschina
4
0
评论 共 3 条 请登录后发表评论
3 楼 wj181291228 2018-10-30 11:21
 
写的很好
2 楼 Alex_Cheung 2018-06-06 06:41
直接看网上阮一峰老师的《ECMAScript 6 入门》也很不错。开源书籍来的。
1 楼 bewithme 2018-04-20 11:49
写得很通俗易懂

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics 玩北京pk10久玩必输