es6语法
1.this的指向
2.修改this指向的方法
3.let和const关键字
4.箭头函数
5.函数参数默认值
6.模板字符串
7.解构赋值
8…展开运算符
9.对象的简写形式
10.es6模块化语法
1.this的指向【面试题】
`概念`: js内部提供的一个关键词。
`全局环境中的this`: window对象。因为什么呢?调用函数是:函数名(); 其实可以看成是 window.函数名()。也就是挂载到了window上自然指向window全局
`在普通函数中的this`:this取决于谁调用,谁调用我,this就指向谁,跟如何定义无关
`对象中方法的this`: 利用对象调用的函数,this指向对象本身
`定时器中的this`: window对象
`事件函数中的this`: 事件源
`箭头函数中的this`: 两种理解:
1. :该函数声明时所处的作用域
2. :箭头函数内没有自己的this,箭头函数内的this就是外部作用域的this。
换句话说,当你需要判断箭头函数内的this的时候,和函数怎么调用没有关系了,要看函数定义在什么位置
`构造函数中的this`:构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象,所以构造函数中的this->实例化对象
'注意': 一般情况,this会指向函数的调用者
`经验一 :`
在js的非严格模式下适用:箭头函数除外
1. 函数的this,不管函数定义在哪里,不管函数怎么定义,只看函数的调用方式
只要我想知道this是谁
就看这个this是写在哪个函数里边
这个函数是怎么被调用的(只看父级函数被调用没,其他不管,父级没调用,自己调用那就指向window)
`经验二 :`
2. 严格模式下,全局函数没有 this,全局this是个 undefiend,其他照搬经验一 即可
严格模式:'use strict'
2.修改this指向的3种方法【面试题】
`call方法`:
1. 立即执行对应的函数
2. 第一个参数用来修改this指向, 不需要被接收
3. 可以设置多个参数,形参会依次错位的接收
`apply方法`:
1. 立即执行对应的函数
2. 第一个参数用来修改this指向, 不需要被接收
3. 只能设置两个参数,第2个参数必须是数组或者伪数组,形参会依次接收数组里面的每一数组元素
`bind方法`:
1. 不会立即执行对应的函数,而是返回一个修改了this指向的新函数
2. 第一个参数用来修改this指向, 不需要被接收
3. 可以设置多个参数,形参会依次错位的接收
# 面试题: call,apply和bind方法的区别?
3.let和const关键字
`概念`: es6语法提供的两个关键字,专门用来声明变量的。
3.0 let 和 const使用场景:
` let一般应用于基本数据类型;const 一般应用于引用数据类型,也就是函数对象等。`
3.1 var和let的区别【面试题】
var 和 let的区别:
1. var可以重复声明相同的变量,可能会造成程序问题; let不可以重复声明相同的变量
2. var声明的变量会挂载到window对象上,let声明的变量不会挂载到window对象上
3. var声明的变量只有全局和函数作用域,let声明的变量具有块级作用域,用'{}'表示块级作用域
4. var声明的变量支持变量提升, let声明的变量不支持变量提升
`暂时性死区`:
1. let所声明的变量一定要在声明后使用,否则报错
2. let不允许在相同作用域内,重复声明同一个变量
3. typeof 不再是一个百分之百安全的操作
console.log(a); // ReferenceError: Cannot access 'a' before initialization :a 不能在初始化之前进入
let a = 123;
typeof a // ReferenceError: Cannot access 'a' before initialization
let a
3.2 const声明常量
`常量`: 不能改变的数据,和变量相对的
// const的特点:
// 1. 不能重复声明相同的常量名
// 2. 常量不能修改值
// 3. 常量必须赋初始值
// 4. 使用常量可以提高代码的执行效率
// 常量的使用场景:
// 1. js内置的一些不会改变属性: Math.PI
// 2. const 变量名 = function(){}
// 3. 预计不会改变的数据
4.箭头函数
# 箭头函数是用来替代函数表达式的语法。任何使用函数表达式的地方都可以使用箭头函数
`语法`:
const 变量名 = () => {
// 函数体
}
`可以简写的两个地方`:
1. 如果有且仅有一个形参,可以省略形参的小括号
const fn = item => {}
2. 如果函数体的代码只有一行,可以省略花括号+return关键词
const fn1 = arr.map((item) => {
return item + 2
})
简写为: const fn1 = arr.map(item => item + 2)
`注意`:箭头函数的this指向:该函数声明时所处的作用域
5.函数参数默认值
# 函数参数默认值的作用:让程序变得更健壮,兼容性更强
`es5通过逻辑或运算来实现`
// function fn(hero, saying) {
// hero = hero || '亚索' // 如果hero为true, 就将hero的值赋值给hero, 否则就把默认值亚索赋值给hero
// saying = saying || '哈撒给'
// return `${hero}说:${saying}`
// }
// console.log(fn());
// console.log(fn('小妲己'));
// console.log(fn('小妲己', '随便说'));
`es6通过直接在形参后面赋值来实现`
function fn1(hero = '亚索', saying = '哈撒给') {
return `${hero}说:${saying}`
}
// console.log(fn1());
console.log(fn1('小妲己'));
console.log(fn1('小妲己', '随便说'));
6.es6模板字符串【回顾】
// 普通字符串和es6模板字符串的区别:
// 1. 普通字符串用单引号或者双引号包起来;模板字符串用反引号包起来;
// 2. 普通字符串不支持直接换行,模板字符串支持换行
// 3. 普通字符串需要使用'+'拼接变量; es6模板字符串直接用模板站位符包起来即可
// 普通字符串
var uname = '渣渣辉'
var age = 18
var relation = '兄弟'
// var str = '大家好,我是渣渣辉,我今年18岁,是兄弟就来砍我一刀';
var str = '大家好,我是' + uname + ',我今年' + age + '岁,\n是' + relation + '就来砍我一刀'
console.log(str);
// var str1 = `大家好,我是渣渣辉,是兄弟就来砍我一刀`
var str1 = `大家好,我是${uname}, 我今年${age}岁,
是${relation}就来砍我一刀`
console.log(str1);
7.数组,对象,解构赋值:::
口诀:数组(要位不要名), 对象(要名不要位)
# 数组解构: 快捷的将某些数组元素从数组中取出来
let [变量1, 变量2, ...] = 数组
// 以上:从数组中将每一对应数量的数组元素解构出来,并且一一赋值给等号左边的变量
# 对象解构: 快捷的将某些属性和方法从对象中取出来
let { 变量1, 变量2, ... } = 对象
'注意':等号左边的变量名必须和对象的属性名或者方法名一样
#了解下面:
# 字符串解构
字符串的解构可以理解为一维数组的解构,这在处理字符串的时候特别方便.
let [a,b,c] ='123'
console.log(a,b,c,typeof c) //1,2,3,string
//解构出来的是字符类型的数据 长度
let {length:s} ='123'
console.log(s,typeof s) //3,number
//同理,数组也有长度
let {length:s} = [1,2,3]
console,log(s,typeof s) //3,number
# 函数参数在传参的时候,其实是自动解构了
function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2
8…展开运算符
# 作用:实现数组和对象的合并,以及将伪数组转换为真正的数组
var arr = ['坤坤', '凡凡', '宏宏']
console.log(...arr);
// 展开运算符实现数组合并
var arr1 = ['波波', '迪迪']
// console.log(arr.concat(arr1));
var arr2 = [...arr, ...arr1, 123, 234]
console.log(arr2);
// 展开运算符实现伪数组转换为真正的数组
function fn() {
// console.log(arguments);
var args = [...arguments]
console.log(args);
}
fn(1, 2, 3, 4)
// 2. 展开对象
var obj1 = {
uname: '小貂蝉',
hobby: '蹲草丛',
addr: '科技六路'
}
var obj = {
uname: '小妲己',
age: 18,
sex: '女'
}
// uname: '小妲己', age: 18, sex: '女'
// console.log(...obj);
// 合并对象
// Object.assign({}, 源对象1, 源对象2, ...)
// let obj2 = Object.assign({}, obj, obj1)
// console.log(obj2);
'注意':合并对象时,如果对象里面有相同的属性,后面的会覆盖前面的
let obj2 = { ...obj, ...obj1, commpany: '王者农药' }
console.log(obj2);
9.对象可以简写的两个地方
`1.`
// 对象可以简写的两个地方:
// 1. 如果对象的属性名和属性值一样,保留一个即可
// 2. 对于对象里面的方法,可以省略':function'
var uname = '小妲己'
var obj = {
uname,
say: function () {
console.log(111);
},
listen() {
console.log(222);
}
}
console.log(obj);
obj.listen()
10.es6模块化
`模块化`:在js中,每一个文件都是一个模块,模块之间可以相互导入导出。
# 先导出,再导入
`分开导出`: 在每一个需要导出的标识符前面加上'export'关键字
export function fn() {}
export let str = 'xxx'
`一起导出`:在内容的末尾添加export default {}
export default {
fn1, // 这是对象的简写形式
strB
}
`针对分开导出,对象解构的形式来导入`
import { fn, str } from '路径'
`针对一起导出的内容,只能使用变量来接收`
import 变量 from '路径'
# 注意:在html文件中导入:<script type='module' src = 'js文件路径'></script>
11.for…in 和 for…of
var arr = [1, 2, 3, 4, 5]
for (var val of arr) {
console.log(val); // val就是数组元素
}
var obj = {
uname: '小妲己',
age: 18
}
for (var key of obj) {
console.log(key); // 报错
}
// for...in可以遍历数组: key是数组的索引
for (var key in arr) {
console.log(key);
}
// 注意:for...in既可以遍历对象(遍历对象是属性名,数组是索引,字符串是下标),又可以遍历数组; for...of只能遍历数组,字符串(遍历数组是数组元素,字符串是字符串中字符)