文章目录

ES6语法
- ES6相关概念
- - 什么是ES6
  - 为什么使用ES6？
- ES6新增语法
- - let 关键字
  - - let 声明的变量只在所处于的块级有限
    - 不存在变量提升
    - 暂时性死区
    - 面试题
    - 小结
  - const
  - - 具有块级作用域
    - 声明常量时必须赋值
    - 常量赋值后，值不能修改
    - 小结
  - let、const、var的区别
  - 解构赋值
  - - 数组解构
    - 对象解构
    - 小结
  - 箭头函数
  - - 小结
    - 常见面试题
  - 剩余参数
  - - 剩余参数和结构配合使用
- ES6内置对象扩展
- - Array的扩展方法
  - - 扩展运算符（展开语法）
    - - 扩展运算符可以应用与合并数组
      - 将类数组或可遍历对象转换为真正的数组
    - 构造函数方法：Array.from()
    - 实例方法：find（）
    - 实例方法：findIndex()
    - 实例方法：includes()
  - String的扩展方法
  - - 模板字符串
    - - 模板字符串中可以解析变量
      - 模板字符串中可以换行
      - 在模板字符串中可以调用函数
    - 实例方法：startsWith() 和 endsWith()
    - 实例方法：repeat()
  - Set数据结构
  - - 实例方法
    - 遍历

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);//打印结果为20let {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第（五）篇相关推荐

《JavaScript高级程序设计》五、引用类型（基本包装类型）
<JavaScript高级程序设计>五.引用类型(基本包装类型) 目录: Boolean类型 Number类型 String类型字符方法字符位置方法字符操作方法字符大小转换方法字 ...
回顾《JavaScript高级程序设计》目录篇
<JavaScript高级程序设计>看这一份够了,前提是等我更完... 回顾<JavaScript高级程序设计>目录篇精简<JavaScript高级程序设计>四 ...
CCNP-第五篇-OSPF高级版(二)
CCNP-第五篇-OSPF高级版(二) 链路状态数据库=LSDB=拓扑表 link state database 收到之后放入自己的数据库再计算最新的放入路由表根据COST值来计算 >COST ...
【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
文章目录一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...
学习javascript这一篇就够了超详细笔记（建议收藏）上
学习javascript这一篇就够了超详细笔记(建议收藏)上 1.初识计算机基础导读编程语言计算机基础初识js 浏览器执行 js组成 js初体验-三种书写位置 js注释 js输入输出语句 2. ...
JavaScript的1000+篇文章总结
JavaScript的1000+篇文章总结本文收集和总结了有关JavaScript的1000+篇文章,由于篇幅有限只能总结近期的内容,想了解更多内容可以访问:http://www.ai2news.c ...
学会JavaScript这一篇就够了~
文章目录 [One] JavaScript语言基础一.数据类型 1.数值型 2.字符串型 3.布尔型二.常量和变量 1.常量 2.变量--例子:输出球员的信息三.运算符 1.算术运算符--例子: ...
第五篇：Visual Studio 2008 Web开发使用的新特性
第五篇:Visual Studio 2008 Web开发使用的新特性本篇翻译自MSDN. .NET Framwork 3.5与Visual Studio 2008 包含很多新特性.AJAX的Web开 ...
带你少走弯路：五篇文章学完吴恩达机器学习
本文是吴恩达老师的机器学习课程[1]的笔记和代码复现部分,这门课是经典,没有之一.但是有个问题,就是内容较多,有些内容确实有点过时. 如何在最短时间学完这门课程?作为课程的主要翻译者和笔记作者,我推荐 ...
【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
类的继承案例解析,python相关知识延伸作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

高级JavaScript第（五）篇