💻新特性详解篇（一） 🏠专栏：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); // 200const 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); // 100const 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) 特点
-
可以省略小括号不写
当形参只有一个的时候可以不写小括号
```jslet 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参数非常适合不定个数参数函数的场景
结束语：
希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
