ES6笔记

一、替代

　　1、arr.indexOf——》arr.includes()

2、Math.pow(2,3) ——》2**3 幂函数

　　3、字符串查找

　　　　字符串是否以谁开头:str.startsWith(检测东西) eg：检测地址

　　　字符串是否以谁结尾: str.endsWith(检测东西) .png

　　　重复字符串:str.repeat(次数);

二、数组循环

1、for

2、while

3、forEach //代替普通的for

4、arry.map() //数据交互映射配合return使用，返回一个新数组

5、arry.filter() //过滤不符合的元素返回true，就留下，返回一个新数组

6、arry.some() //类似查找，数组里面某个元素符合条件，返回true

7、arry.every() //数组里面所有元素都符合条件，返回true

8、arry.reduce() //求数组的和和乘阶从左往右

9、arry.reduceRight() //从右往左

10、for...of ——》 arry.keys()数组下标、arry.entries()//数组某一项

11、... 扩展运算符 let arry=[1,2,3] console.log(...arry)

12、Array.from 把类似数组转成数组（获取一些元素、argumnets）对象转成数组

13、Array.of() 把一组字符转成数组 let arr = Array.of('apple','banana','orange'); console.log(arr);

14、Array.fined() 查找，找出第一个符合条件的数组成员，没找到返回undefined

15、Array.finedIndex() 查找位置，未找到返回-1

16、Array.fill() 填充 arr.fill(填充的东西, 开始位置, 结束位置);

三、对象

1、json简洁语法

let json ={

　　b,
　　showA(){ //个人建议: 一定注意，不要用箭头函数
　　},
　　showB(){
　　}
}

2、Objdect.is() 用来比较两个值是否相等

Object.is(NaN, NaN);

Object.is(+0, -0);

3、Object.assign(): 用途:：1. 复制一个对象 2. 合并参数

let 新的对象 = Object.assign(目标对象, source1, srouce2....)

4、Object.keys() Object.entries(); Object.values();

5、let json = {a:3, b:4}; let json2 = {...json};

四、Promise: 承诺，许诺 作用: 解决异步回调问题（传统方式，大部分用回调函数，事件）

语法:
let promise = new Promise(function(resolve, reject){
//resolve, 成功调用
//reject 失败调用
});

本人用法

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]): 只要有一个成功，就返回

五、模块化:

注意：需要放到服务器环境
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';

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. 路径也可以动态

六、类

ES5之前：
function Person(){
　　this.name='aaa';
}
Person.prototype.showName=function(){}

ES6中变形:
class Person{
　　constructor(){
　　　　this.name = 'aaa';
　　}
　　showName(){

　　}
}

**************************************

let a = 'strive'; let b = 'method';

class Person{
　　[a+b](){
　　}
}

注意：
1. ES6里面class没有提升功能，在ES5，用函数模拟可以，默认函数提升
2. ES6里面this 比之前轻松多了

矫正this:
1. fn.call(this指向谁, args1, args2....)
2. fn.apply(this指向谁, [args1, args2....])
3. fn.bind()

七、继承

现在: extends
class Student extends Person{

}

八、解构赋值（注意左右两边，结构格式保持一致）

a、交换值

let a=1

let b=3

[b,a]=[a,b]

console.log(a,b)

// 3 1

b、数组名称取值

let [a,b,c] =[12,5, 6];

c、json不用点的方式取值

json:
let {name,age, job} = {
name:'Strive',
age:18,
job:'码畜'
};

let {name:n,age:g, job:a} = json;

d、解构时候可以给默认值：
let [a,b, c="默认值"] = ['aaa','bbb'];

let a = 12;
let b = 5;

this指向

1、this出现在全局函数，指向window

2、严格模式，this出现在全局函数，this为undefined

3、当某个函数为对象的一个属性时，在这个函数内部this指向这个对象

　　var car = {

    name:'丰田',
    run() {
        console.log(this); // {name: "丰田", run: ƒ}
    }
}

4、this出现在构造函数中，指向构造函数新创建的对象

var Car = function(name) {

this.name = name;

console.log(this); // Car {name: "亚洲龙"}
// Car {name: "汉兰达"}
}
var myCar_1 = new Car('亚洲龙');
var myCar_2 = new Car('汉兰达');

5、当一个元素被绑定事件处理函数时，this指向被点击的这个元素

var btn = document.querySelector('button');
btn.onclick = function() {
    console.log(this); // <button>this</button>
}
6、this出现在箭头函数中时，this和父级作用域的this指向相同

二、修改this的指向

call()、apply()和bind()方法三者作用都是改变this指向

posted @ 2020-01-06 09:37 Dena.chen 阅读(86) 评论(0) 收藏举报

刷新页面返回顶部

Dena.chen

ES6笔记

公告