13-ES5和ES6基础

一、this指向

每一个函数里面都有一个this，可以直接使用；

不同的函数调用方式，里面this的含义是不同的

1. 普通函数 - this指向window

function fn(){
    console.log(this);
}
fn();
1
2
3
4

2. 事件处理函数 - this指向事件源

document.querySelector("h3").onclick = fucntion(){
    console.log(this);
}
1
2
3

3. 定时函数 - this指向window

setTimeout(fn,2000);
1

4. 对象- this指向方法的调用者（对象）

var obj = {
    name:"ab",
    age:12,
    temp:fn,//如果属性值是函数，这个属性叫对象的方法
};
obj.temp();
1
2
3
4
5
6

5. 自定义函数 - this指向window

// 这种写法是匿名函数(一次性)
(function(){
    console.log(this);
})();
1
2
3
4

二、改变this指向

call / apply / bind

1. call

不改变this指向调用：函数名.call(null,实参1,实参2,...)

改变this指向调用：函数名.call(本次调用的this,实参1,实参2,...)

function fn(a,b,c){
    console.log(a,b,c)
    console.log(this)
}
fn.call(null,12,34,56);
fn.call({name:"张三"},12,34,56)
1
2
3
4
5
6

2. apply

不改变this指向调用：函数名.apply(null,[实参1,实参2,...])

改变this指向调用：函数名.apply(本次调用的this,[实参1,实参2,...])

fn.apply({age:18},[12,34,56]);
1

3. bind 生成一个固定this的函数

函数不会调用，会生成一个新的函数

固定了this之后，无法被call和apply再更改

语法：var 固定了this的函数名 = 函数名.bind(固定的this)

var newFn = fn.bind({time:"Mon"});
newFn(12,34,56);
1
2

使用更改this指向方式，求数组的最大值和最小值。
（考虑传入的是数组，apply的传入类型就是数组）

var arr =  [2,463,3,65,23,7]
var max = Math.max.apply(null,arr)
var min = Math.min.apply(null,arr)
console.log(max,min)
1
2
3
4

三、let、const

es6语法

1. var 和 let/const 的区别

• var可以重复定义（相同变量名），let和const不可以重复定义
• var只有全局作用域和函数作用域，let和const是块级作用域（{}）
• var有预解析，let和const没有预解析

2. let 和 const 的区别

• let定义的变量可以重复赋值，const定义的变量不能重复赋值
• let定义的变量可以不赋值，const定义的时候必须赋值

四、箭头函数

es6新增了箭头函数的写法，箭头函数就是普通函数的简写形式。

只能简写赋值式函数，不能简写声明式函数。

语法：(形参1,形参2,...)=>{代码块}

function fn1(){
    console.log("声明式");
};
let fn2 = function (a,b){
    console.log("赋值式",a,b);
};
// 箭头函数
let fnc = (a,b)=>{
    console.log("箭头函数",a,b)
}
fnc(12,34);
1
2
3
4
5
6
7
8
9
10
11

// 简写定时器函数
setTimeout(()=>{
    console.log("定时器函数 箭头函数")
},1000);
// 简写对象中的方法
let obj ={
    name:"小王",
    age:18,
    sayHi:()=>{
        console.log("hi!");
    },
};
obj.sayHi();
1
2
3
4
5
6
7
8
9
10
11
12
13

箭头函数和普通函数的区别

1. 箭头函数里面没有arguments

   const fn = ()=>{
       console.log(arguments); //报错
   };
   fn(1,2,3,4);
   1
   2
   3
   4

2. 箭头函数本身没有this，它的this和所处环境的this一致

   const fn = ()=>{
       console.log(this); // window
   }
   fn();
   1
   2
   3
   4

3. 如果参数只有一个，可以省略小括号()

   const fn = a =>{
       return a*2;
   };
   1
   2
   3

4. 如果{}里面只有一句return代码，可以省略{}和return，会自动return

   const fn = a => a*2;
   console.log(fn(10));
   1
   2

五、函数参数默认值

函数参数没有传值，如果有默认值则使用默认值。

语法：

function 函数名(形参1,形参2=默认值,形参3=默认值){}
const 函数名 = (形参1,形参2=默认值,形参3=默认值)=>{}
1
2

示例：

// 普通函数
const fn = function(a=0){
    console.log(a)
}
fn()
fn(100)
// 箭头函数
const fn = (b=10) =>{
    console.log(b)
}
fn()
fn(100)
1
2
3
4
5
6
7
8
9
10
11
12

注意：

1. 箭头函数如果只有一个参数，如果设置了默认值，则不能省略小括号

2. 如果多个形参，部分形参有默认值，要求有默认值的形参写在后面

六、模板字符串

cs6新增了一个反引号``表示字符串

可以在字符串中使用js表达式，可以任意换行

语法：`${js表达式}`

const name = "小明"
console.log(`hello name`) // hello name
console.log(`hello ${name}`) // hello 小明
1
2
3

七、解构赋值

1. 对象解构

分解对象的属性和值来给变量赋值

语法：{键名1,键名2} = obj

const obj = {
    name:"小明",
    age:12
}
const name = obj.name; const age = obj.age;
// 可以简写成es6的对象结构赋值
const {name,age} = obj;
1
2
3
4
5
6
7

键名重命名，name=>userName，使用冒号：

const {name:userName,age:userAge} = obj

2. 数组解构

分解数组的结构来给变量赋值

语法：[变量1,变量2,变量3] = arr

const arr = ['hello','world',11,22]
const a = arr[0]; const b = arr[1]; const c = arr[2];
//可以简写成
const [a,b,c] = arr;
console.log(a,b,c) // hello world 11
1
2
3
4
5

八、扩展运算符

es6新增的扩展运算符：…

可以在合并 / 构造对象、合并 / 构造数组、函数的形参和实参上展开

// 情况1：数组应用
// 合并两个数组，变成一个新的数组
const arr1 = [12,34,56];
const arr2 = [78,90];
const newArr = [...arr1,...arr2];
console.log(newArr)
// 求数组的最大值
const array = [12,32,11,23,45,74,11,23,3,4,2]
console.log(Math.max(...array));

// 情况2：对象应用
// 合并两个对象的键值对
const obj1 = {name:'lucy',age:18};
const obj2 = {gender:"女",like:"游戏"};
const newObj = {...obj1,...obj2};


// 情况3：函数参数应用
// 作为箭头函数的形参
const fn = (...arr) =>{
    console.log(arr);
}
fn(12,34,56) // 传入的参数形似一个数组的展开 ...arr
arr = [12,34,56]
// 作为函数的实参
const fun =(a,b,c)=>{
    console.log(a,b,c);
}
fun(12,34,56)
const list = [12,34,56];
fun(...list)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

九、对象的简写形式

变量名和属性名同名的时候，可以简写成一个。

如果有的属性名和变量名相同，有的不同，一般简写的写前面

// 构造对象
const obj = {
    name:name,
    age:age,
    gender:gender,
    vip:false,
};
// 简写形式
const obj = {
    name,
    age,
    gender,
    vip:false,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

十、模块化语法

• 关键词：import 和 export
• es6的模块化规范，简称esm
• 导入：import
  • 导入通过export default 导出的：import 新的变量名 from 'js文件路径'
  • 导入通过export 导出的：import {导出变量名1,导出变量名2,...} from 'js文件路径'
  • 运行js文件：import 'js文件路径'
• 导出：export
  • 导出唯一一个：export default 变量名
  • 导出多个：
    • 写法1：export 变量1;export 变量2;
    • 写法2：export {变量名1,变量}
  • 注意点：
    • script标签要添加一个 type = "module"
    • 页面要以http / https形式打开，不能以file形式打开

<script src="./public.js">script>


<script type="module">
    // 语法1： import "js文件路径"
    // 将第三方js导入执行，但不会引入任何全局变量
    import "./public.js"
    console.log(getColor);// 报错，getColor不是全局变量
    
    // 语法2: import 新的变量名 from 'js文件路径'
    import abc from './public.js'
    console.log(abc);
    
    // 语法3：import {导出变量名1,导出变量名2,...} from 'js文件路径'
    import {getColor,getRandom as aaa} from './public.js'
    console.log(getColor,getRandom) // 报错
    console.log(getColor,aaa) 
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

模块化语法：如果第三方js文件有

// 语法1：在要导出的变量名前面加关键字 export 
    export function getColor(){
        ...
    }

// 语法2：export {要导出的变量名1,要导出的变量名2,...}
	function getColor(){
        ...
    }
    function getRandom(a,b){
        ...
    }
    export {getRandom,getColor}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

十一、es6新数据类型

1. Set

Set 是 es6 里新增的一个类似数组的数据类型；

和数组的区别：Set数据类型里面的元素不能重复

语法：new Set([元素1,元素2,...])

const set = new Set([12,34,56,78,34,56])
console.log(set);// 12 34 56 78

// 数组去重
let arr = [1,1,23,4,2,3,2,34,5,3,4]
const mySet = new Set(arr); // set类型
arr = [...mySet] // 转换为数组类型
console.log(arr);
1
2
3
4
5
6
7
8

2. Map

Map 是 es6 里新增的一个类似对象的数据类型；

和对象的区别：Map类型的属性名可以是任意类型，键值对是有序的

（对象的属性名一定是字符串类型，键值对是无序的）

const map = new Map(
    [['name','lucy'],
     [true,17],
     [function(){},[1,2,3]]]
);
// 获取name对应的值
console.log(map.get("name"))
1
2
3
4
5
6
7

3. 基本数据类型

BigInt

• 是一种基本数据类型，是一种内置对象
• 类似number，number有限制（2^53-1）
• BigInt可以表示任意大的整数

Symbol

• 是一种基本数据类型，是一种内置对象
• 每个从Symbol() 返回的symbol值都是唯一的

十二、for…of

• for…of 是用于遍历的，可迭代对象，包括Array，Map，Set，String，arguments等
• 可以遍历数组，Set类型，Map类型
• 一般情况下，不遍历对象

const arr = ["aa","bb","cc"]
// for...in 主要遍历对象
for(let key in arr){
    console.log(key);
}
// for...of 一般不能遍历对象
for(let value of arr){
    console.log(value);
}
1
2
3
4
5
6
7
8
9