ES6笔记
2019-04-14 本文已影响0人
_前端码农_
第一章 入门
一、简介
ES6==ES2015
特点:功能更强大,结构更简单
特性:解构赋值、箭头函数、Set和Map、异步操作、类与对象、模块化
二、基本技能
1.构建工具:npm、webpack、babel、gulp
2.基础语法
3.实战演练:express、mockjs用来做服务器接口数据
三、预备知识
1.模块化概念
2.工程构件
3.编程经验
第二章 项目构建
一、基础架构
1.业务逻辑(页面、交互)
2.自动构建(编译、辅助:自动刷新、文件合并、资源压缩)
3.服务接口(数据、接口)
二、任务自动化 gulp
三、编译工具 babel、webpack
四、代码实现
mkdir es6 创建目录
touch tasks/util/args.js 初始化文件
tasks/构建目录
第三章 基本语法
一、let const
function test(){
for(let i=1;i<3;i++){
console.log(i)
}
console.log(i); //i 报错,因为let是块级作用域,es6强制开启严格模式
}
- let不能重复声明
- const 声明的不能修改
二、解构赋值
含义:左边一种结构,右边一种结构,左右一一对应,进行赋值。
分类:数组、对象、字符串、布尔值、函数参数、数值结构赋值。
{
let a,b,rest;
[a,b]=[1,2]
}
{
let a,b,rest;
[a,b,...rest]=[1,2,3,4,5,6];
console.log(a,b,rest); //1,2,[3,4,5,6]
//...把其他的放到一个数组
}
{
let a,b;
({a,b}={a:1,b:2})
console.log(a,b) // 1,2
}
{
let a,b;
[a,b,c=3]=[1,2]
console.log(a,b,c) // 1,2,3
}
{
let a=1,b=2;
[a,b]=[b,a]; //可用于变量交换
console.log(a,b) // 2,1
}
{
function f(){
return [1,2]
}
let a,b;
[a,b]=f();
console.log(a,b) //1,2
}
三、正则扩展
let reg=new RegExp(/xyz/ig,'i') //es6中,后边的会覆盖前边的
console.log(reg.flags) // i 获取修饰符
g修饰符和y修饰符
四、扩展
Number.isNaN()
Number.isInteger()用来判断一个值是否为整数
Number.parseInt(), Number.parseFloat()
五、数组扩展
Array.from方法用于将两类对象转为真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。
// arguments对象
function foo() {
var args = [...arguments];
}
// NodeList对象
[...document.querySelectorAll('div')]
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.of方法用于将一组值,转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
fill方法使用给定值,填充一个数组。数组中原有元素会全部抹去
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
['a','b','c'].fill(7,1,3); //从位置1开始,到位置3结束,用7替换
数组实例的entries(),keys()和values(),keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。