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 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方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

上一篇下一篇

猜你喜欢

热点阅读