ES6新特性

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的区别【面试题】

varlet的区别:
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只能遍历数组,字符串(遍历数组是数组元素,字符串是字符串中字符)
  • 7
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值