GitHub

babel

全局安装babelnpm i babel-cli -g
npm i babel-preset-es2015 babel-cli --save-dev
新建.babelrc文件

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

修改package.json

"scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },

使用npm run build

变量声明

var 是全局声明的变量
var a = 2;
{
    var a = 3;
}
console.log(a)

let 是局部声明的变量
var a = 3;
{
    let a = 2;
}
console.log(a)

let 解决全局污染问题
for (let i=0; i<10; i++) {
    console.log("循环体中"+ i)
}
console.log("循环体外" + i)  //i is not defined

解构

数组的解构赋值
let [a,b,c] = [1,2,3]
console.log(a)

可以设置默认值
let [a,b=5,c] = [1]
console.log(a)  //1
console.log(b)  //5
console.log(c)  //undefined

注意undefined和null的区别，undefined是什么都没有，null是有值但是为null
let [a,b=5,c] = [1,undefined, null]
console.log(a)  //1
console.log(b)  //5
console.log(c)  //null

对象的解构赋值，属性名必须相同
let {foo, bar} = {foo: 'Hello',bar: 'ES6'}
console.log(foo +'  '+ bar)

如果解构之前定义变量，需要给解构语句加一个圆括号
let foo;
({foo} = {foo: 'hello es6'})
console.log(foo)

字符串也能解构
let [a,b,c,d,e] = 'hello'
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)

扩展运算符和rest运算符

扩展运算符
function show(...arg) {
    console.log(arg[0])
    console.log(arg[1])
    console.log(arg[2])
}
show(1,2,3)

扩展运算符解决数组引用问题
let arr1 = ['hello', 'world'];
let arr2 = [...arr1];
arr2.push('hello es6');
console.log(arr1)  //'hello', 'world'

rest运算符
function add (first, second,...arg) {
    console.log(first)
    console.log(second)
}
add(1,2,3,4,5);

for of
function add (first, second,...arg) {
    for (let a of arg) {
        console.log(a)
    }
}
add(1,2,3,4,5);  //3, 4, 5

模板字符串

模板字符串
var name = 'jack';
var total = `this is ${name}`
console.log(total)

字符串的方法
let str1 = 'abcdefg'
let str2 = 'abc'
console.log(str1.includes(str2))  //true
console.log(str1.startsWith(str2)) //true，还有endsWith一样的使用方法

数字操作

//二进制声明
let binary = 0B10101;
console.log(binary);   //21
console.log('------------------------------------')

//八进制声明
let b = 0o21;
console.log(b)  //17
console.log('------------------------------------')

//数字验证Number.isFinite()，数字会返回true
let num = 3.55;
console.log(Number.isFinite(num))  //true
console.log(Number.isFinite('num'))  //false
console.log(Number.isFinite(NaN))  //false
console.log(Number.isFinite(undefined))  //false
console.log('------------------------------------')

//判断是否为NaN
let num2 = 123;
console.log(Number.isNaN(num2))
console.log('------------------------------------')

//判断是否为整数
let num3 = 11.2;
console.log(Number.isInteger(num3))
console.log('------------------------------------')

//最大安全整数
console.log(Number.MAX_SAFE_INTEGER)
console.log('------------------------------------')

let num4 = Math.pow(2,53) -1;
console.log(Number.isSafeInteger(num4))

数组方法

json数组格式，利用Array.from()方法
let json = {
    "0": "name",
    "1": "age",
    "2": "sex",
    length: 3
}
var arr = Array.from(json)
console.log(arr)

这种形式的就不行，属性名必须是0,1,2这样的索引形式，并且必须有length属性
let json = {
    "name": "jack",
    "age": "18",
    "sex": "male",
    length: 3
}
var arr = Array.from(json)
console.log(arr)

Array.of()方法，把传入的数字或者字符串转换成数组
var arr = Array.of(1,2,3,4,5)
console.log(arr)

var arrStr = Array.of('hello', 'es6', 'world')
console.log(arrStr)

find()实例方法，实例方法不是Array的方法，是一个真实数组的方法
let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

fill()实例方法
let arr = [1,2,3,4,5,6];
arr.fill('hello',1,4)
console.log(arr)  //[1, "hello", "hello", "hello", 5, 6]

for of循环
let arr = ['hello','world','es6','vue'];
for (let item of arr) {
    console.log(item)
}

打出索引
let arr = ['hello','world','es6','vue'];
for (let index of arr.keys()) {
    console.log(index)
}

同时打出索引和值，用entries()方法
let arr = ['hello','world','es6','vue'];
for (let [index,item] of arr.entries()) {
    console.log(index+":"+item)
}

entries()返回一个iterator迭代器，可以手动使用next()
let arr = ['hello','world','es6','vue'];
let list = arr.entries();
console.log(list)  //Array Iterator {}
console.log(list.next().value)  //[0, "hello"]

箭头函数

es6中主动抛出错误,es6中并且可以抛出默认值
function add (a, b=1) {
    if (a == 0) {
        throw new Error('a can not be 0')
    } else {
        return a + b
    }
}
console.log(add(0))

如果形参使用了默认值，再使用'use strict'，就会报错，必须取消使用默认值

es6使用 函数名.length可以获取到必须传入的参数个数
function add (a, b=1) {
    if (a == 0) {
        throw new Error('a can not be 0')
    } else {
        return a + b
    }
}
console.log(add.length)  //这里为1因为使用了默认值

箭头函数
var add = (a,b) => {
    console.log('两句话必须加{}')
    return a + b;
}
console.log(add(1,2))

函数及数组

对象的函数解构
let json = {
    "a": "111",
    "b": "222"
}
function fun ({a,b}) {
    console.log(a)
    console.log(b)
}
fun(json)

数组的函数解构
let arr = ['a','b','c']
function fun (a,b,c) {
    console.log(a)
    console.log(b)
    console.log(c)
}
fun(...arr)

in用来判断数组或对象中是否含有元素
let json = {
    "a": "111",
    "b": "222"
}
console.log('a' in json)  //true

这里判断的是是不是在0索引上有元素
let arr = ['a', 'b']
console.log(0 in arr)  //true
console.log(1 in arr)  //true
console.log(2 in arr)  //false

数组的遍历方法：forEach()  filter()  some()  map()

数组转换成字符串 join()和toString()
let arr = ['web','javascript','html']
console.log(arr.join('|'))  //用|分隔
console.log(arr.toString())  //用逗号分隔

ES6对象

对象赋值
let name = 'hello'
let age = 19
let person = {name, age}
console.log(person)  //{name: "hello", age: 19}

对象key值构建，当对象的key值为变量(从后台获取时)
let key = 'name';
var obj = {
    [key]: 'javascript'
}
console.log(obj.name)

Object.js()方法比较两个对象是否相等

Object.assign()方法合并对象
let a = {
    name: 'java'
}
let b = {
    age: 19
}
let c = Object.assign(a,b)
console.log(c)  //{name: "java", age: 19}

Symbol

Symbol
let a = Symbol('hello')
console.log(a)  //红色
console.log(a.toString())  //黑色

Symbol当做对象的key
let key = Symbol();
var obj = {
    [key]: 'javascript'
}
console.log(obj[key])
obj[key] = 'html'
console.log(obj[key])

Symbol对对象属性的保护
let obj = {
    name: 'zhang'
}
let age = Symbol()
obj[age] = 18
console.log(obj)
console.log('----------------')
for (let item in obj) {
    console.log(item)  //这里for循环只能打出name
}

set 和 map

//set 和 map
var set1 = new Set(['hello','world'])
console.log(set1)

/**
 * set的方法有：add() delete() has() clear() for of和forEach循环
 */

 /**
  * map的方法有 set()  get() has() delete() clear()
  */

//WeakSet只能传入对象

promise

let state=1;
function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    if(state==1){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }
}
function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    if(state==1){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }
}
function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }
}
new Promise(step1).then(function(data){
    console.log(data);
    return new Promise(step2);
}).then(function(data){
     console.log(data);
    return new Promise(step3);
}).then(function(data){
    console.log(data);
    return data;
});

promise对象接受一个参数，这个参数是个处理函数，又有两个参数，一个是resolve函数，一个是reject函数，使用.then()里面接受两个参数，一个是resolve具体函数，一个是reject具体函数

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
dist		dist
src		src
.babelrc		.babelrc
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

babel

变量声明

解构

扩展运算符和rest运算符

模板字符串

数字操作

数组方法

箭头函数

函数及数组

ES6对象

Symbol

set 和 map

promise

About

Releases

Packages

Languages

OffTheWaller/ES6

Folders and files

Latest commit

History

Repository files navigation

babel

变量声明

解构

扩展运算符和rest运算符

模板字符串

数字操作

数组方法

箭头函数

函数及数组

ES6对象

Symbol

set 和 map

promise

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages