ES6学习记录(基础篇)
2018-12-02 本文已影响10人
逆袭的小菜鸟
1、关于定义(声明)变量:
es6之前变量（var）作用域:
全局
函数作用域
let 相当于之前的 var
const 常量， 定义好了不能改变
let注意:
1. 没有预解析，不存在变量提升
在代码块内，只要let定义变量，在之前使用，都是报错
先定义完，在使用
2. 同一个作用域里， 不能重复定义变量
3. for循环，for循环里面是父级作用域，里面又一个
const: 特性和let一样
const定义变量不能修改
const定义完变量，必须有值，不能后赋值，不能修改
Object.freeze(对象)定义的对象也不能修改
块级作用域:
{
//块级作用域
}
es支持块集作用域
{
//TODO
}
es6之前可以通过函数模拟块级作用域
IIFE
(function(){
//TODO
})()
2、解构赋值:
let [a,b,c] =[12, 5, 6];
注意: 左右两边，结构格式要保持一致
json:
let {name,age, job} = {
name:'Strive',
age:18,
job:'码畜'
};
let {name:n,age:g, job:a} = json;
解构时候可以给默认值：
let [a,b, c="默认值"] = ['aaa','bbb'];
let a = 12;
let b = 5;
import {a,b,c} from './mod'
3、字符串模板:
字符串模板：
优点: 可以随意换行
` ${变量名字}`
let name ='Strive';
let age = 18;
let str = `这个人叫${name}, 年龄是 ${age}岁`;
关于字符串一些东西:
字符串查找:
es6之前str.indexOf(要找的东西) 返回索引(位置) ，没找到返回-1
es6之后str.includes(要找的东西) 返回值 true/false
4、函数:
(1)函数变化:
1. 函数默认参数
function show({x=0,y=0}={}){
console.log(x,y);
}
show()
2. 函数参数默认已经定义了，不能再使用let，const声明
function show(a=18){
let a = 101; //错误
console.log(a);
}
show()
(2)扩展运算符、Rest运算符:
展开数组
... :
[1,2,3,4] -> ... [1,2,3,4] -> 1,2,3,4,5
...:
1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
eg:
function show(...a){
console.log(a);
}
show(1,2,3,4,5);
剩余参数: 必须放到最后
(3) 箭头函数:
=>
let show = () => 1;
() => return东西
() =>{
语句
return
}
注意:
1. this问题, 定义函数所在的对象，不在是运行时所在的对象
2. 箭头函数里面没有arguments, 用 ‘...’
3. 箭头函数不能当构造函数
5、数组
ES5里面新增一些东西
循环:
1. for
for(let i=0; i<arr.length; i++)
2. while
arr.forEach() // 代替普通for
arr.forEach(function(val, index, arr){
console.log(val, index, arr);
});
arr.map() // 非常有用，做数据交互 "映射"
正常情况下，需要配合return，返回是一个新的数组
若是没有return，相当于forEach
注意：平时只要用map，一定是要有return
重新整理数据结构:
[{title:'aaa'}] -> [{t:'aaaa'}]
arr.filter(): 过滤，过滤一些不合格“元素”， 如果回调函数返回true，就留下来
arr.find(): 查找，找出第一个符合条件的数组成员，如果没有找到，返回undefined，和filter类似只是这个返回的是成员而不是数组
arr.findIndex(): 找的是位置， 没找到返回-1
arr.some(): 类似查找, 数组里面某一个元素符合条件，返回true
arr.every(): 数组里面所有的元素都要符合条件，才返回true
其实他们可以接收两个参数:
arr.forEach/map...(循环回调函数, this指向谁);
------------------------------------------------------------
arr.reduce() //从左往右
求数组的和、阶乘
eg：求和1到10
let arr = [1,2,3,4,5,6,7,8,9,10];
let res = arr.reduce((prev, cur, index, arr) =>{
return prev+cur;
});
console.log(res);
------------------------------------------------------------
arr.reduceRight() //从右往左
------------------------------------------------------------
ES2017新增一个运算符:
幂
Math.pow(2,3)
2 ** 3
======================================================
for....of....：
arr.keys() 数组下标
arr.entries() 数组某一项
for(let val of arr){
console.log(val);
}
------------------------------------------------------------
在ES2016里面新增:
arr.indexOf()
arr.includes()
str.includes()
6、对象
json
对象简介语法(相当有用):
let json ={
a:1,
b:2,
showA:function(){
return this.a;
}
showB:function(){
return this.b;
}
}
let json ={
a,
b,
showA(){ //个人建议: 一定注意，不要用箭头函数
},
showB(){
}
}
new Vuex.Store({
state,
mutation,
types,
actions
});
new Vue({
router,
App,
vuex
})
------------------------------------------------------------
Object.assign(): 用来合并对象
let 新的对象 = Object.assign(目标对象, source1, srouce2....)
function ajax(options){ //用户传
let defaults={
type:'get',
header:
data:{}
....
};
let json = Object.assign({}, defaults, options);
.....
}
用途:
1. 复制一个对象
2. 合并参数
------------------------------------------------------------
ES2017引入:
Object.keys()
Object.entries();
Object.values();
let {keys, values, entries} = Object;let {keys, values, entries} = Object;
对象身上: 计划在ES2018引入
...
let json = {a:3, b:4};
let json2 = {...json};
7、Promise
作用: 解决异步回调问题
传统方式，大部分用回调函数，事件
ajax(url,{ //获取token
ajax(url,()=>{ //获取用户信息
ajax(url, ()=>{
//获取用户相关新闻
})
})
})
语法:
let promise = new Promise(function(resolve, reject){
//resolve, 成功调用
//reject 失败调用
});
promise.then(res=>{
}, err=>{
})
promise.catch(err=>{})
本人用法:
new Promise().then(res=>{
}).catch(err=>{
})
Promise.resolve('aa') : 将现有的东西，转成一个promise对象， resolve状态，成功状态
等价于:
new Promise(resolve =>{
resolve('aaa')
});
Promise.reject('aaa'): 将现有的东西，转成一个promise对象，reject状态，失败状态
等价于:
new Promise((resolve, reject) =>{
reject('aaa')
});
Promise.all([p1, p2, p3]): 把promise打包，扔到一个数组里面，打包完还是一个promise对象
必须确保，所有的promise对象，都是resolve状态，都是成功状态
Promise.race([p1, p2, p3]): 只要有一个成功，就返回
eg:用户登录 -> 用户信息
<script>
let status = 1;
let userLogin = (resolve, reject) =>{
setTimeout(()=>{
if(status == 1){
resolve({data:'登录成功', msg:'xxx', token:'xxsadfsadfas'});
}else{
reject('失败了');
}
},2000);
};
let getUserInfo = (resolve, reject) =>{
setTimeout(()=>{
if(status == 1){
resolve({data:'获取用户信息成功', msg:'asdfasdf', token:'xxsadfsadfas'});
}else{
reject('失败了');
}
},1000);
}
new Promise(userLogin).then(res=>{
console.log('用户登录成功');
return new Promise(getUserInfo);
}).then(res=>{
console.log('获取用户信息成功');
console.log(res);
})
</script>
该学习记录摘自肖老师的课堂笔记，在此记录整理以便后续回忆，大家喜欢也可以去听下，老师对于es6基础的讲解还是不错的学习课程
