💻新特性详解篇(一) 🏠专栏:JavaScript
👀个人主页:繁星学编程🍁
🧑个人简介:一个不断提高自我的平凡人🚀
🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀
👊格言:☀️没有走不通的路,只有不敢走的人!☀️
👉让我们一起进步,一起成为更好的自己!!!🎁
文章目录
【ES6】新特性详解
ES6是对于ES2015+的俗称,也可以说是通常叫法。
ES 全称是ECAMScript,它是JavaScript基础构建的一种语言,JavaScript正是建立在ECAMScript语言的基础规范中建立使用的,那么,ECAMScript的使用,对于JavaScript至关重要!
一. let、const和var
ES6新增了两种定义变量和常量的关键字let和const
目的:解决原有语法上的一些不足
let:定义变量
const:定义常量
let/const 和 var的区别:
-
预解析
var 会进行预解析
let/const 没有预解析,必须先声明后使用
// eg: 使用var声明 console.log(username); // undefined // var 会进行预解析 var username = "tom"; console.log(username); // tom fn(); // 1 function fn() { console.log(1); } fn(); // 1
// eg: 使用let声明 console.log(num); let num = 100; console.log(num); // 报错:Uncaught ReferenceError: Cannot access 'num' before initialization
-
重复变量名
var 定义的变量可以重名
let/const 不允许定义重复的变量
// eg:使用var重复声明变量(后面的会覆盖前面的) var num = 100; var num = 200; console.log(num); // 200
// eg:使用let/const重复声明变量报错:(Uncaught SyntaxError: Identifier 'num' has already been declared) let num = 100; let num = 200; const num = 100; const num = 200;
-
块级作用域
var 没有块级作用域, 只有函数能限制变量的使用范围
let/const 有块级作用域, 任何一个可以执行代码的 {} 都会限制变量的使用范围
if (10 > 1) { let num = 100; console.log(num); // 100 const a = 200; console.log(a); // 200 } console.log(a); // 报错:Uncaught ReferenceError: a is not defined console.log(num);
let 和 const区别:
-
变量值可以变
let 定义的变量可以修改值
const 定义的常量不可以修改值
let num = 100; num = 200; console.log(num); // 200
const num = 100; num = 200; console.log(num); // 报错:Uncaught TypeError: Assignment to constant variable
注:const存的值是引用数据类型的时候,只要地址没变就可以
const obj = { username: "tom", }; obj.username = "jerry"; console.log(obj); // {"username": "jerry"}
把const声明的常量的地址改变,就会报错
obj = { age: 18 }; console.log(obj); // 报错:Uncaught TypeError: Assignment to constant variable
-
初始化赋值
let 定义的时候可以不赋值
const 定义的时候必须赋值,而且一旦赋值不允许修改
let num; num = 100; console.log(num); // 100
const num; num = 100; console.log(num); // 报错:Uncaught SyntaxError: Missing initializer in const declaration
二. this的指向和改变this的指向
什么是this?
它是一个js内的关键字,是一个使用在作用域内的关键字。
(1) this的指向
-
全局中的this ==> window
-
函数中的this:
不管函数怎么定义,不管函数在哪定义,只看函数调用方式
- 普通调用 ==> window
- 对象中的this ==> .前面是谁就是谁
- 定时器中的this ==> window
- 事件处理函数 ==> 事件源
- 箭头函数中的this ==> 该作用域外部作用域的this
- 构造函数中的this ==> 本次调用 被自动创建的对象
//在全局使用this指向window
console.log(this); // window
console.log(window); // window
console.log(window === this); // true
// 函数中this指向
// 1. 普通调用 this===> window
function fn() {
console.log(this); // window
}
fn();
// 2. 对象调用
function fn() {
console.log(this); // {name: '小花', f: ƒ}
console.log(this.name); // 小花
}
// 把fn这个函数当做一个值存在对象中键名为f的位置
var obj = {
name: "小花",
f: fn,
};
obj.f();
// 3. 定时器调用 this 指向window
function fn() {
console.log(this); // window
}
setTimeout(fn, 2000);
var username = "tom";
function fn() {
console.log(this); // window
console.log(this.username); // tom
}
var obj = {
username: "小花",
f: fn,
};
setTimeout(obj.f, 2000);
// 4. 事件处理函数 this指向事件源
function fn() {
console.log(this); // #document
}
document.onclick = fn;
(2) 如何改变this的指向方法
-
call()方法
语法:
函数名.call(参数)
参数:
-> 参数1:该函数内的this指向(新指向)
-> 参数2:依次给函数进行形参赋值
特点:立即调用函数
-
apply()方法
语法:
函数名.apply(参数1, 参数2)
参数:
-> 参数1:该函数内的this指向(新指向)
-> 参数2:是一个数组,内部的每一项都是给函数形参赋值
特点:立即调用函数
-
bind()方法
语法:
函数名.bind(参数)
参数:
-> 参数1:该函数内的this指向(新指向)
-> 从参数2开始,依次给函数的形参赋值特点:
- 不会立即调用函数,而是返回一个新函数
- 有一个返回值,是一个和原始函数一模一样的新函数,只不过this被锁死了
var name = 'zjk';
function fun() {
console.log (this.name);
}
var obj= {
name: 'jake'
};
fun(); // zjk
fun.call(obj); //Jake
(3).改变this指向的方法有什么区别
- 三者都可以改变函数this对象的指向
- 三者第一个参数都是this要指向的对象,如果没有这个参数或参数为undefined或null,则默认指向全局window
- 三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入
- bind是返回绑定this之后的函数,apply、call 则是立即执行
三. 箭头函数
ES6 中 新增的书写函数的方式
(1) 语法:() => {}
- () 书写形参的位置
- => 箭头函数的标志
- {} 书写代码的位置
/**
* 1. 通用写法
*/
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
(2) 特点
-
可以省略小括号不写
当形参只有一个的时候可以不写小括号
```js
let fn = arg1 => {
return arg1
}
``` -
可以省略大括号不写
当函数体只有一条语句的时候,可以不写大括号,
会自动把这条语句的结果当做函数的返回值let fn = n => n*n; console.log(fn(8)); // 64
-
箭头函数没有arguments
arguments: 是函数参数的默认集合,天生存在
let fn = () =>{ console.log(arguments); } fn(1,2,3); // 报错:arguments未定义
-
箭头函数没有this
箭头函数内的this 就是该作用域外部作用域的this
箭头函数外面的函数this是啥,箭头函数this就是啥
注意: 事件处理函数不要用箭头函数,会改变this指向
-
箭头函数不能当做构造函数使用
不能和 new 关键字连用
let Person = (name,age) => { this.name = name; this.age = age; } let me = new Person('xiao',30); console.log(me); // 报错:Uncaught TypeError:Person is not a constructor
四. 模板字符串
模板字符串(template string)是增强版的字符串,用反引号(``)标识,特点:
-
字符串中可以出现换行符
-
可以使用 ${变量} 形式输出变量
// 定义字符串
let str = `<ul>
<li>晴天</li>
<li>雨天</li>
<li>多云</li>
<li>大雪</li>
</ul>`;
// 变量拼接
let star = '小雪';
let result = `今天是${star}`;
注意: 当遇到字符串与变量拼接的情况使用模板字符串
五. 简化对象写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
对象简写语法:
- 当对象的key value 是一模一样的时候,
- 可以省略value不写
- 注意:value必须是一个变量
- 当对象内key对应的值是一个函数
- 可以省略 function 和 冒号不写
- 箭头函数不可以省略
注:希望获取对象obj中键名为变量key的值
key被引号包起来, 是一个字符串
console.log(obj['key']);
key没有被引号包起来,表示一个变量
console.log(obj[key]);
let name = '张三';
let slogon = '追求变得更好';
let improve = function () {
console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
name,
slogon,
improve,
change() {
console.log('可以改变你')
}
};
六. 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
作用:快速从对象或者数组中获取数据
1.解构数组
- 语法 var [变量] = 数组
- 特点: 按照索引位置,依次给变量进行赋值
2.解构多维数组
- 解构多维数组, 数组怎么写,解构怎么写,数组换成变量
3.解构对象
-
语法 var { key } = 对象
定义一个变量,获取的是该对象内 同名 key 的数据
注:可以给同名key起一个别名
语法:
var { key: 别名 } = obj
4.解构多维对象
书写方式:对象怎么书写,解构就怎么书写,数据换成变量
//数组的解构赋值
const arr = ['张三', '刘化', '黎级', '郭纵'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const lin = {
name: '林豆',
tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
// 解构多维对象
let info = {
username: 'tom',
age: 18,
phone: 123456,
like: ['唱', '跳', 'rap', '篮球'],
time: '两年半',
score: {
chinese: 80,
math: 100,
english: 300,
}
}
let {
username,
age,
like: [a, b, c, d],
time,
score: {
chinese,
math,
english,
},
phone: tel
} = info
console.log(time , c, tel);
注意: 频繁使用对象方法、数组元素,就可以使用解构赋值形式
七. 函数参数默认值
ES6允许给函数参数赋初始值
形参初始值具有默认的参数,一般靠后。
function add(a,b,c=3){
// 如果实参不传的话,默认c的值为3
return a+b+c;
}
let result = add(1,2);
console.log(result); // 6
八. spread 扩展运算符
扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包。
作用:
-
展开运算符
把数据集合展开(数组,对象,Set, Map …)
就是把数据最外面的符号去掉
-
合并功能
把多个数据合并成一个数据
/**
* 展开数组
*/
let tfboys = ['德玛','西亚','皇子'];
function fn(){
console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let One = {
q: '果敢',
};
let Two = {
w: '勇气'
};
let Three = {
e: '审判'
};
let Four = {
r: '沉默'
};
let gailun = {...One, ...Two,...Three,...Four};
// 接受两个参数,第一个参数表示[0]实参,第二个参数表示从[1] ~ [最后]
function fn(a, ...arg) {
console.log(a, ...arg); // 100 200 300 400 500
}
fn(100, 200, 300, 400, 500)
九. rest 参数
ES6 引入 rest 参数(使用…args,结果为数组形式),用于获取函数的实参,用来代替 arguments(结果为对象形式)
/**
* 作用与 arguments 类似
*/
function add(...args){
console.log(args);
}
add(1,2,3,4,5);
// 结果为:数组形式
/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){
console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);
注意: rest参数非常适合不定个数参数函数的场景
结束语:
希望对您有一点点帮助,如有错误欢迎小伙伴指正。
👍点赞:您的赞赏是我前进的动力!
⭐收藏:您的支持我是创作的源泉!
✍评论:您的建议是我改进的良药!
一起加油!!!💪💪💪