一、ECMAScript6简介
1.ES6是什么
ES6是JavaScript的最新版本
JavaScript包含： ECMAScript JavaScript的语法部分 ES3-ES5 BOM DOM 常见面试题： ES和js的关系： ES是JavaScript的标准；JavaScript是ES的实现。
ES6是2015年发布的新一版本的JavaScript，又称为：ES2015
2.ES的版本问题
2015年 ES2015 ES6 划时代的版本 2016 ES2016 ES7 2017 ES2017 ES8 2018 ES2018 ... ... 2021 ES2021
3.ES6与ES5之间的关系
ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简介、标准化.
4.ES6和ES5有哪些差异
新增：
-
类 class
-
继承
-
...运算符
-
解构
改变：
-
变量
-
函数
-
数组
-
字符串
-
对象
5.总结
学了ES6，就忘了ES5
二、变量的扩展：let和const
2.1 let
let 是ES6中新增一个用来定义变量的关键字
let和var的区别：
-
var有变量提升 let没有变量提升(先声明，再使用)
-
var 允许变量重复定义 let不允许变量重复定义
-
var 定义的变量属于函数作用域、let定义的变量属于块作用域
-
let定义的变量有暂时性死区，var没有
//暂时性死区 function show(){ console.log(a);//暂时性死区 //.... let a=10; // console.log(a); } show(); -
var定义的变量会变成顶级对象(window)的属性，let不会
应用：let和for循环
let lis = document.querySelectorAll('ul li');
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(i);
}
}
解析(了解)
//上面代码可以拆分为如下：
//系统每一次都会产生一个新的变量，来保存上一次变量的值，并且赋值给下一次的循环
{
let i = 0;
// let temp;
{
lis[0].onclick = function () {
alert(i)
}
// i++;
temp = ++i;
}
{
// let i = 1;
i = temp;
lis[1].onclick = function () {
alert(i)
}
temp = ++i;
}
{
// let i = 2;
i = temp;
lis[2].onclick = function () {
alert(i)
}
temp = ++i;
}
{
let i = temp;
lis[3].onclick = function () {
alert(i)
}
temp = ++i;
}
}
2.2 const
const使用来定义常量。
let所拥有的的特点，const都有。
const特点：
-
不允许被重新赋值
-
常量必须在定义的时候，就初始化(赋值)
-
建议：const定义的常量的名称，一般为大写
用途：
用于定义项目中的公共内容、变量
三、字符串的扩展
ES6中新增了通过反引号来定义字符串
特点：
-
支持换行
-
支持使用${}在字符串中插入变量
``
示例：
let arr = [
{ id: 1, name: "李逵", age: 30 },
{ id: 2, name: "李四", age: 40 },
{ id: 3, name: "李鬼", age: 50 },
{ id: 4, name: "李某", age: 20 },
];
//将数据展示到页面中
let s = '';
arr.forEach(function (item) {
// console.log(item);
s += ` <li><span>${item.id}</span>---- <span>${item.name}</span> --- <span>${item.age}</span></li>`
});
document.querySelector('ul').innerHTML = s;
四、变量解构赋值
在 ES6中允许按照一定的模式来解析数组、对象，赋值给变量，这种解析模式称为：解构赋值。
解构的诀窍：
-
保证=两边的模式一致 [],{}
-
将=右边的内容解析赋值左边的变量
4.1 数组的解构
数组特点：有序的哈希结构
let arr = [1, 2, 3];//模式一致 let [a, b, c] = arr;//按顺序解构 // console.log(a, b, c);
分析：数组是一种有序的结构，在解析数据的时候，按照顺序来解析和赋值(一一对应的关系)
数组的常见解构：
-
完全解构
-
不完全解构
-
解构失败
-
解构变量默认值
-
解构的缺省
//1.完全解构(变量的个数与数据个数一致)
// let [a, b] = [10, 20];
// console.log(a, b);
//2.不完全解构(变量的个数少于数据的个数)
// let [a] = [10, 20];
// console.log(a);
//3.解构失败(变量的个数多于数据的个数)
let [a, b, c] = [10, 20]
console.log(a, b, c);
//4.解构的默认值
let [a=0, b=0, c = 0] = [10, 20];//c默认值为0
// let [a, b, c = 0] = [10, 20,30]
console.log(a, b, c);
//5.解构的缺省
let [, , , b] = [10, 20, 30, 40];
4.2 对象解构
4.3 解构和函数
数组示例：
// function show(a,b){
// console.log(a+b);
// }
// function show1(arr){
// // let s= arr.reduce(function(a,b){
// // return a+=b;
// // },0)
// // console.log(s);
// }
// function show1([a = 0, b = 0]) {
// // let [a, b] = arr;
// console.log(a + b);
// }
// show1([10])
// show1([10, 20])
// show1([])
// show1();//错误做法 保证=两边的模式一致
// // [a,b]=[10,20]
// [a,b]=undefined;//error
拓展知识
数组的迭代方法：
-
forEach(callbackfn)
-
参数说明：callbackfn 回调函数；该回调函数最多可以接收三个参数，分别是：value,index,arr
示例：
arr.forEach(function (value) {//推荐 console.log(value); return; })注意：forEach不能被return打断
-
-
some(callbackfn) 遍历数组，判断数组中是否有元素满足条件;有一个满足，返回true，都不满足，返回false
-
参数：回调函数；该回调函数最多可以接收三个参数，分别是：value,index,arr
示例：
var arr = [10, 201, 301, 1000]; var rst = arr.some(function (v) {//v 数组中的每个元素 return v > 200; }); -
-
every() 遍历数组，判断数组中是否每一个元素都满足条件;满足返回true;有一个不满足则返回false
示例：
var rst=arr.every(function(value){ return value>200; }) -
map() 遍历数组；返回的结果会组成一个新的数组返回
示例：
//4.4 map 遍历数组，为每一个元素都进行操作之后，返回由新元素组成的数组
// var arr = [10, 20, 30, 900];
// var arr0=arr.map(function(v){
// return v+10;
// })
// console.log(arr0);
-
filter() 遍历数组;将数组中满足过滤条件的元素返回，组成新数组
示例：
var arr = [10, 20, 30, 40, 100, 99]; var arrx = arr.filter(function (v, i) { // console.log(v,i); return v > 60;//条件 }); console.log(arrx); -
arr.reduce(callbackfn,initvalue) 返回累加结果
-
参数说明：callbackfn 回调函数 initvalue 回调函数第一个参数的初始值
-
用法一：initvalue没有赋值，
-
回调函数第一次执行的时候，第一个参数的值为数组的第一个元素，第二个参数的值为数组的第二个元素
-
非第一次遍历，则回调函数的第一个参数为上一次累加的结果，第二个参数为当遍历的元素
-
// var arr=[11,22,55,200,300]; // //累加器 // var sum=arr.reduce(function (a, b) { // // console.log(a, b); // // return a+b; // return a*b; // });-
用法二：initvalue有初始值
-
遍历时，回调函数的第一个参数为默认值，第二个参数为当前遍历的元素；依次类推
let arr = [ { id: 1, name: "李逵", age: 30 }, { id: 2, name: "李四", age: 40 }, { id: 3, name: "李鬼", age: 50 }, { id: 4, name: "李某", age: 20 }, ]; let s = arr.reduce(function (s, item) { return s += ` <li><span>${item.id}</span>---- <span>${item.name}</span> --- <span>${item.age}</span></li>` }, '') -
-
-
扫一扫
6659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
