1、数组
数组:
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.some(): 类似查找, 数组里面某一个元素符合条件,返回true
arr.every(): 数组里面所有的元素都要符合条件,才返回true
其实他们可以接收两个参数:
arr.forEach/map...(循环回调函数, this指向谁);
------------------------------------------------------------
arr.reduce() //从左往右
求数组的和、阶乘
arr.reduceRight() //从右往左
------------------------------------------------------------
2、ES2017新增一个运算符:
幂
Math.pow(2,3)
2 ** 3
for…of…:
arr.keys() 数组下标
arr.entries() 数组某一项
for(let val of arr){
console.log(val);
}
======================================================
3、扩展运算符: …
…
let arr =[1,2,3];
let arr2 = [...arr];
let arr2 = Array.from(arr);
Array.from:
作用: 把类数组(获取一组元素、arguments…) 对象转成数组
个人观点: 具备 length这个东西,就靠谱
Array.of(): 把一组值,转成数组
let arr = Array.of(‘apple’,‘banana’,‘orange’);
console.log(arr);
arr.find(): 查找,找出第一个符合条件的数组成员,如果没有找到,返回undefined
arr.findIndex(): 找的是位置, 没找到返回-1
arr.fill() 填充
arr.fill(填充的东西, 开始位置, 结束位置);
在ES2016里面新增:
arr.indexOf()
arr.includes()
str.includes()
============================================
4、对象:
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.is():用来比较两个值是否相等
Object.is('a','a');
比较两个东西相等:
==
===
Object.is(NaN, NaN);//true
Object.is(+0, -0);//false
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;
对象身上: 计划在ES2018引入
…
let json = {a:3, b:4};
let json2 = {...json};
==================================================
5、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]): 只要有一个成功,就返回
用户登录 -> 用户信息
=========================================
6、模块化:
js不支持模块化
ruby require
python import
在ES6之前,社区制定一套模块规范:
Commonjs 主要服务端 nodeJs require('http')
AMD requireJs, curlJs
CMD seaJs
ES6出来,同意服务端和客户端模块规范:
import {xx} ddd
Math.pow()
Math.abs()
模块化:
注意: 需要放到服务器环境
a). 如何定义模块?
export 东西
export const a =12;
export{
a as aaa,
b as banana
}
b). 如何使用?
import
import './modules/1.js';
import {a as a, banana, c} from './modules/2.js'
import * as modTwo from './modules/2.js';
使用模块:
<script type="module"></script>
import: 特点
a). import 可以是相对路径,也可以是绝对路径
import 'https://code.jquery.com/jquery-3.3.1.js';
b). import模块只会导入一次,无论你引入多少次
c). import './modules/1.js'; 如果这么用,相当于引入文件
d). 有提升效果,import会自动提升到顶部,首先执行
e). 导出去模块内容,如果里面有定时器更改,外面也会改动,不像Common规范缓存
* import() 类似node里面require, 可以动态引入, 默认import语法不能写到if之类里面
返回值,是个promise对象
import('./modules/1.js').then(res=>{
console.log(res.a+res.b);
});
优点:
1. 按需加载
2. 可以写if中
3. 路径也可以动态
Promise.all([])
=============================================
ES2017加 async await: (简化promise)
=============================================
'use strict' 以后默认就是严格模式
7、程序中类
ES6
面向对象 ,类
属性
方法
函数模拟
人: Person
属性: name
展示名字: showName
Person.prototype.showName
ES5之前:
function Person(){
this.name=‘aaa’;
}
Person.prototype.showName=function(){}
ES6中变形:
class Person{
constructor(){
this.name = ‘aaa’;
}
showName(){
}
}
--------------------------
const Person = class{}
------------------------------
let a = 'strive';
let b = 'method';
class Person{
[a+b](){
}
}
let aaa=‘aaa’;
let bbb=‘ddd’;
let json={
[aaa+bbb]:‘welcome 51mmr.net’
}
注意:
- ES6里面class没有提升功能,在ES5,用函数模拟可以,默认函数提升
- ES6里面this 比之前轻松多了
矫正this:
1. fn.call(this指向谁, args1, args2…)
2. fn.apply(this指向谁, [args1, args2…])
8、 fn.bind()
class里面取值函数(getter), 存值函数(setter)
静态方法: 就是类身上方法
static aaa(){
}
父类.aaa();
父类
9、子类
继承:
之前:
Person
Student
现在: extends
class Student extends Person{
}
拖拽