高级JavaScript第篇
Posted 小hu同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高级JavaScript第篇相关的知识，希望对你有一定的参考价值。
ES6语法
ES6相关概念
什么是ES6
ES的全称是ECMAscript，它是由ECMA国际话标准组织制定的一项脚本语言的标准化规范。
为什么使用ES6？
每一次标准的诞生都意味着语言的完善，功能的加强。
javascript语言本身也有一些令人不满意的地方。
- 变量提升特效增加了程序运行时的不可预测性
- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
ES6新增语法
let 关键字
ES6中新增了用于声明变量的关键字
let 声明的变量只在所处于的块级有限
if(true){
let a = 10;
}
console.log(a);//a is not defined
**注意：**使用let关键字声明的变量才具有块级作用域，使用Var声明的变量不具备块级作用域特效。
不存在变量提升
console.log(a);// a is not defined
let a =20;
暂时性死区
利用let 声明的变量会绑定在这个块级作用域，不会受外界的影响
var tem = 123;
if(true){
tem = 'abc';
let tem;
}
面试题
var arr = [];
for(var i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr[0]();
arr[1]();
**图解：**此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。
let arr = [];
for(let i = 0;i<2;i++){
arr[i] = function(){
console.log(i);
}
}
arr[0]();
arr[1]();
图解:此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值。
小结
- let关键字就是用来声明变量的
- 使用let关键字声明的变量具有块级作用域
- 在一个大括号中使用let关键字声明的变量才具有块级作用域，var关键字是不具备这个特点的
- 防止循环变量变成全局变量
- 使用let关键字声明的变量没有变量提升
- 使用let关键字声明的变量具有暂时性死区特性
const
声明常量，常量就是值（内存地址）不能变化的量
具有块级作用域
if(true){
const a = 10;
}
console.log(a)//a is not defined
声明常量时必须赋值
const AB;//Missing initializer in const declaration
常量赋值后，值不能修改
const AB = 12;
AB = 13;//Assignment to constant variable.
const ary = [100,200];
ary[0]='a';
ary[1]='b';
console.log(ary);//['a','b'];
art = ['a','b']//Assignment to constant variable.
小结
- const声明的变量是一个常量
- 既然是常量不能重新赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
- 声明const时候必须要给定值
let、const、var的区别
- 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
- 使用const声明的是常量，在后面出现的代码中不能在修改该常量的值
解构赋值
ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构
数组解构
let[a,b,c] = [1,2,3];
console.log(a);//打印结果为1
console.log(b);//打印结果为2
console.log(c);//打印结果为3
//如果数组解构不成功，变量的值为undefined
对象解构
let jsons ={name:'xiaohu',age:'18'};
let {name,age} = jsons;
console.log(name);//打印结果为‘xiaohu’
console.log(age);//打印结果为20
let {name:myname,age:myage} = jsons;//myname myage 为别名
console.log(myname);//‘xiaohu’
console.log(myage);//‘18’
小结
- 解构赋值就是把数据解构分解，然后给变量进行赋值
- 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
- 数组解构中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用个逗号隔开
- 利用解构赋值能够让我们方便的去取对象中的属性跟方法
箭头函数
ES6中新增的定义函数的方式
() = >{}
//（）：代表是函数；
// => :必须要的符号，指向哪一个代码块；
// {} ：函数体
const fn () =>{}//表示把一个函数赋值给fn
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
//原来的函数写法
function father (father1,father2){
return father1+father2;
}
//ES6写法
const father = (father1,father2)=>father1+father2;
如形参里面只有一个，可以省略小括号
function fn (a){
return a;
}
//ES6写法
const fn = a => a;
箭头函数不绑定this关键字，箭头函数中的this，指向的是桉树定义位置上下文this
const obj = {name:"小hu同学"}
function fn(){
console.log(this);//this指向时obj对象
return() =>{
console.log(this);
//这个this指向的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是obj对象，所以这个this也指向的是obj对象
}
}
//我们思考一下下面两句代码是什么意思？
const Fns = fn.call(obj);
Fns();
小结
- 箭头函数中不绑定this,箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
- 箭头函数的有点在于解决了匿名函数this指向的问题（匿名函数的执行环境更具有全局性），包括setTimout和serInterval中所造成的问题
常见面试题
1、this指向问题
var age = 18;
var obj = {
age:20,
say:()=>{
alert(this.age)
}
}
obj.say();
//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数
function sum (a,...z){
console.log(a);//
console.log(z);
}
sum(1,2,3)
剩余参数和结构配合使用
let students = ['xiao1','xiao2','xiao3'];
let [s1,...s2] = students;
console.log(s1);//'xiao1'
console.log(s2);//'[xiao2,'xiao3']'
ES6内置对象扩展
Array的扩展方法
扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let array = [1,2,3];
...array //1,2,3
console.log(...array);//1,2,3
console.log(1,2,3);
扩展运算符可以应用与合并数组
//方法一
let ary =[1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary,ary2];
//方法二
ary.push(...ary2);
将类数组或可遍历对象转换为真正的数组
let Arrays = document.getElementsByTagName('div');
Arrays = [...Arrays];
构造函数方法：Array.from()
将伪数组或可遍历对象转换为真正的数组
//定义一个集合
let arrays = {
'0':'a',
'1':'b',
'2':'c',
length:3
};
//转换为数组
let arr2 = Array.from(arrays);//['a','b','c']
方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后值放入返回的数组
let arrays = {
"0":1,
"1":2,
length:2
}
let newAry = Array.from(arrayLike, item => item *2)//[2,4]
注意：如果是对象，那么属性需要写对应的索引
实例方法：find（）
用于找出一个符合条件的数组成员，如果没有找到返回undefined
let ary =[{
id:1,
name:'小王'
},{
id:2,
name:'小李'
}];
let target = arr.find((item,index) => item.id ==2);
//找数组里面符合条件的值当数组中元素id等于2的查找出来，注意，指回匹配第一个
实例方法：findIndex()
用于找出第一个符合t条件的数组成员的位置，如果没有找到就返回-1
let ary - [1,4,5,6,8];
let index = ary.findIndex((value,index) = > value > 7);
console.log(index);//1
实例方法：includes()
判断某个数组是否包含给定的值，返回布尔值
[1,2,4].includes(2)//true
[1,2,4].includes(3)//false
String的扩展方法
模板字符串
ES6新增的创建字符串的方式，使用反引号定义
let name = `xiaohu`;
模板字符串中可以解析变量
let name = '小明';
let sayHello = `hello,my name is ${name}`;
console.log(sayHello)
//打印出来的结果为 hello,my name is 小明
模板字符串中可以换行
let result ={
name:'xiaohu',
age:20,
sex:'男'
}
let html = `
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
`;
在模板字符串中可以调用函数
const say = function(
return '都看到这里了，不点赞，收藏，加关注嘛！';
};
let greet = `${say()} 码字不易`;
console.log(greet)
//打印结果是 都看到这里了，不点赞，收藏，加关注嘛！码字不易
实例方法：startsWith() 和 endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
实例方法：repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
Set数据结构
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成Set数据结构
const s =new Set();
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set ([1,2,3,4,4]);
//{1,2,3,4}
实例方法
- add（value）:添加某个值，返Set结构本身
- delete（value）：删除某个值，返回一个布尔值，表示删除成功
- has(value):返回一个布尔值，表示该值是为Set的成员
- clear():清除所有成员，没有返回值
const S = new Set ();
s.add(1).add(2).add(3);
//向Set里面添加值
s.delete(2) //删除set结构中的2值
s.has(1) //表示set结构中是否有1这个值 返回布尔值
s.clear() //清除set 结构中的所有值
//注意：删除的是元素的值，不是代表的索引
遍历
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
s.forEach(value => console.log(value))
以上是关于高级JavaScript第篇的主要内容，如果未能解决你的问题，请参考以下文章
Android性能优化第篇---Memory Monitor检测内存泄露
VSCode自定义代码片段12——JavaScript的Promise对象