文章目录
一、this指向
每一个函数里面都有一个this,可以直接使用;
不同的函数调用方式,里面this的含义是不同的
1. 普通函数 - this指向window
function fn(){
console.log(this);
}
fn();
2. 事件处理函数 - this指向事件源
document.querySelector("h3").onclick = fucntion(){
console.log(this);
}
3. 定时函数 - this指向window
setTimeout(fn,2000);
4. 对象- this指向方法的调用者(对象)
var obj = {
name:"ab",
age:12,
temp:fn,//如果属性值是函数,这个属性叫对象的方法
};
obj.temp();
5. 自定义函数 - this指向window
// 这种写法是匿名函数(一次性)
(function(){
console.log(this);
})();
二、改变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)
2. apply
不改变this指向调用:函数名.apply(null,[实参1,实参2,...])
改变this指向调用:函数名.apply(本次调用的this,[实参1,实参2,...])
fn.apply({age:18},[12,34,56]);
3. bind 生成一个固定this的函数
函数不会调用,会生成一个新的函数
固定了this之后,无法被call和apply再更改
语法:var 固定了this的函数名 = 函数名.bind(固定的this)
var newFn = fn.bind({time:"Mon"});
newFn(12,34,56);
使用更改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)
三、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);
// 简写定时器函数
setTimeout(()=>{
console.log("定时器函数 箭头函数")
},1000);
// 简写对象中的方法
let obj ={
name:"小王",
age:18,
sayHi:()=>{
console.log("hi!");
},
};
obj.sayHi();
箭头函数和普通函数的区别
箭头函数里面没有arguments
const fn = ()=>{ console.log(arguments); //报错 }; fn(1,2,3,4);
箭头函数本身没有this,它的this和所处环境的this一致
const fn = ()=>{ console.log(this); // window } fn();
如果参数只有一个,可以省略小括号()
const fn = a =>{ return a*2; };
如果{}里面只有一句return代码,可以省略{}和return,会自动return
const fn = a => a*2; console.log(fn(10));
五、函数参数默认值
函数参数没有传值,如果有默认值则使用默认值。
语法:
function 函数名(形参1,形参2=默认值,形参3=默认值){}
const 函数名 = (形参1,形参2=默认值,形参3=默认值)=>{}
示例:
// 普通函数
const fn = function(a=0){
console.log(a)
}
fn()
fn(100)
// 箭头函数
const fn = (b=10) =>{
console.log(b)
}
fn()
fn(100)
注意:
1. 箭头函数如果只有一个参数,如果设置了默认值,则不能省略小括号
2. 如果多个形参,部分形参有默认值,要求有默认值的形参写在后面
六、模板字符串
cs6新增了一个反引号``表示字符串
可以在字符串中使用js表达式,可以任意换行
语法:`${js表达式}`
const name = "小明"
console.log(`hello name`) // hello name
console.log(`hello ${name}`) // hello 小明
七、解构赋值
1. 对象解构
分解对象的属性和值来给变量赋值
语法:{键名1,键名2} = obj
const obj = {
name:"小明",
age:12
}
const name = obj.name; const age = obj.age;
// 可以简写成es6的对象结构赋值
const {name,age} = obj;
键名重命名,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
八、扩展运算符
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)
九、对象的简写形式
变量名和属性名同名的时候,可以简写成一个。
如果有的属性名和变量名相同,有的不同,一般简写的写前面
// 构造对象
const obj = {
name:name,
age:age,
gender:gender,
vip:false,
};
// 简写形式
const obj = {
name,
age,
gender,
vip:false,
};
十、模块化语法
- 关键词:
import
和export
- es6的模块化规范,简称esm
- 导入:
import
- 导入通过export default 导出的:
import 新的变量名 from 'js文件路径'
- 导入通过export 导出的:
import {导出变量名1,导出变量名2,...} from 'js文件路径'
- 运行js文件:
import 'js文件路径'
- 导入通过export default 导出的:
- 导出:
export
- 导出唯一一个:
export default 变量名
- 导出多个:
- 写法1:
export 变量1;export 变量2;
- 写法2:
export {变量名1,变量}
- 写法1:
- 注意点:
- script标签要添加一个
type = "module"
- 页面要以http / https形式打开,不能以file形式打开
- script标签要添加一个
- 导出唯一一个:
<!-- 1. 非模块化引入 -->
<script src="./public.js"></script>
<!-- 2. 模块化引入 -->
<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>
模块化语法:如果第三方js文件有
// 语法1:在要导出的变量名前面加关键字 export
export function getColor(){
...
}
// 语法2:export {要导出的变量名1,要导出的变量名2,...}
function getColor(){
...
}
function getRandom(a,b){
...
}
export {getRandom,getColor}
十一、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);
2. Map
Map 是 es6 里新增的一个类似对象的数据类型;
和对象的区别:Map类型的属性名可以是任意类型,键值对是有序的
(对象的属性名一定是字符串类型,键值对是无序的)
const map = new Map(
[['name','lucy'],
[true,17],
[function(){},[1,2,3]]]
);
// 获取name对应的值
console.log(map.get("name"))
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);
}