整理一下ES6相关的知识点
ES6默认开启严格模式
严格模式在es5中就已经有了,但是是可选的.在es6中,一定是严格模式.
所以,想要把es6 → es5,必定会打开严格模式.
严格模式的作用
- 消除javascript语法的一些不合理,不严谨之处,减少一些怪异行为
- 消除代码运行的一些不安全之处,提高代码运行的安全
- 提高编译器效率,增加运行速度
严格模式下代码的区别
不能遗漏声明(重点)
"use strict";
var a = 1;
b = 2;
console.info(a,b);
这样就会报错
不允许使用8进制
不能在if中定义函数
函数的形参不能重名
arguments
不再跟踪形参的变化
非严格模式下:
// "use strict";
function f(a, b) {
arguments[0] = 100;
console.info(a,b);
}
f(1,2); // 100,2
严格模式下:
"use strict";
function f(a, b) {
arguments[0] = 100;
console.info(a,b);
}
f(1,2); // 1,2
函数内部的this
不再指向window
了
"use strict";
console.info(this); // 指向window
function f() {
console.info(this); // undefined
}
f()
鼓励使用let
和const
在es6中可以继续使用var
,但是鼓励使用let
和const
let
与var
相比较,有一些区别:
- 块级作用域,出了
{}
就不能使用 - 暂时性死区
- 没有变量提升
- 不会成为
window
的属性 - 不能重复声明
块级作用域
在es5中,只有两种作用域:
- 全局作用域
- 局部作用域
console.log(t); // var存在变量的提升,所以结果为:undefined
var t = 1;
console.info(t); // let不存在变量的提升,所以会报错
let t = 1;
在es6中,存在block
作用域.
几种绑定点击事件的方法
HTML代码如下:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
要求: 在某个li
上点击,就输出该li
的index
值.
// 方法1,传统的js
"use strict";
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
console.log(this.index)
}
}
// 方法2,使用闭包
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function (index) {
return function () {
console.log(index)
}
}(i);
}
var lis = document.getElementsByTagName("li");
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
console.info(i);
}
}
解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.
let arr = [1,2];
let x = arr[0];
let y = arr[1];
console.log(x,y); // x=1,y=2
上面的代码可以简写为:
let arr = [1,2];
[x,y] = arr;
console.log(x,y)
或者是这样写:
let [x,y,z] = [1,2,3];
console.log(x,y,z); // x=1,y=2,z=3
也可以是这样的:
let [, , x] = [1,2,3];
console.log(x); // x=3
解构赋值的应用
用最少的代码去交换变量的值
// 方法1
let a = 1; b = 2; c;
console.info(a,b);
c = b;
b = a;
a = c;
console.info(a,b);
// 方法2
let [a,b] = [1,2];
console.info(a,b); // a=1,b=2
[a,b] = [b,a];
console.info(a,b); // a=2,b=1
求解斐波那契数列
求斐波那契数列中某个数字的值:
// 方法1: 使用数组
let arr = [0,1];
for ( let i = 1; i < 20; i++){
arr[i] = arr[i-1] + arr[i-2];
arr.push(arr[i]);
}
console.log(arr[20]);
上面的这种方法,性能很低,使用ES6新特性:
// 使用ES6新特性
let a = 0, b = 1;
for (let i = 2; i < 20; i++) {
[b,a] = [a+b,b];
console.info(i,b);
}
字符串扩展
常用的字符串方法(不完全整理)
-
big()
,用大号字体显示字符串 -
charAt()
,返回在指定位置的字符 -
concat()
,连接字符串 -
indexOf()
,检索字符串 -
replace()
,替换与正则表达式匹配的子串 -
slice()
,提取字符串的片段,并在新的字符串中返回被提取的部分 -
split()
,把字符串分割为字符串数组 -
toUpperCase()
,把字符串转换为大写 -
toLowerCase()
,把字符串转换为小写
trim方法
用来去掉字符串前后的空格.
应用:去掉字符串前后的空格
// 方法1:使用正则表达式
let name = " tom ";
console.info(name,name.length);
let newName = name.replace(/\s/g,'');
console.info(newName,newName.length);
// 使用trim()方法
let name = " tom ";
console.info(name,name.length);
let newName = name.trim();
console.info(newName,newName.length);
模板字符串
格式:${}
let student = {name: "tom",age: 18};
console.info( `姓名:${student.name},年龄:${student.age}` );
repeat
作用:重复指定的内容一定的次数
格式:字符串.repeat(n),n就是需要重复的次数
let str = '明天你好';
console.info( str.repeat(3) );
// 明天你好明天你好明天你好
includes
,startsWith
,endsWith
-
includes
:判断字符串是否包换特定的子串 -
startsWith
:判断字符串是否以特定的子串开始 -
endsWith
:判断字符串是否以特定的子串结束
padStart
,padEnd
英文中,pad
有垫片的意思,比如说,桌子的腿儿不一样长,那就可以用一个垫片垫一下.
padStart
,padEnd
里的pad
也有类似的意思.字符串长度不够了,就垫
一下.
格式:
- 字符串.padStart(n,字符)
- 字符串.padEnd(n,字符)
let str = "hello".padStart(15);
console.info(str,str.length);
let str = "hello".padStart(15,"h");
console.info(str,str.length);
数组扩展
ES3中常用的数组方法
-
push()
:在数组最后插入元素 -
pop()
:在数组最后取元素 -
shift()
:删除并返回数组第一个元素 -
unshift()
:在数组开始添加元素,并添加元素后数组长度 -
sort()
:排序 -
reverse()
:反转数组 -
slice()
:截取一部分,或复制数组 -
splice()
:删除(替换) -
join()
:把数组串成字符串 -
concat()
:连接多个数组
ES5中常用的数组方法
Array.isArray()
: 检查是否是数组
let arr = [1,2,3,4];
console.info( Array.isArray(arr) );
forEach()
: 用来遍历数组
let arr = [1,2,3,4];
arr.forEach ( (item,index,arr) => {
// item:数组元素
// index:数组元素的索引值
// arr:当前的数组
// 注意:三者的顺序不要写反
console.info( `当前的元素是:${item},它的索引值是${index},属于数组${arr}` );
} )
对于forEach()
,需要注意:
- 三个形参不需要全部写
- 修改
item
不影响原数组 - 不能
break
- 没有返回值
map()
功能: 逐一处理原数组,返回一个新数组
let arr = [1,2,3,4];
let newArr = arr.map ( (item) => {
// item:数组元素
// index:数组元素的索引值
// arr:当前的数组
// 注意:三者的顺序不要写反
return item + 1;
} );
console.info(newArr);
filter()
功能:逐一过滤原数组元素,留下符合条件的元素得到一个新素组
let arr = [1,2,3,4];
let newArr = arr.filter ( (item) => {
// item:数组元素
return item > 1; // 过滤值>1的元素
} );
console.info(newArr);
reduce()
功能:不断的将前一项与后一项的值进行运算,并返回最终结果.
let arr = [1,2,3,4];
let result = arr.reduce ( (prev,next) => {
// item:数组元素
return prev + next; // 求数组中所有元素的和
} );
console.info(result);
some()
功能:只要数组中有某一个元素符合条件,就返回true
let arr = [1,2,3,4];
let result = arr.some ( (item) => {
// item:数组元素
return item > 1; // 有一个元素满足条件,即返回true
} );
console.info(result);
every()
功能:当数组中所有的元素都满足条件,才返回true
let arr = [1,2,3,4];
let result = arr.every ( (item) => {
// item:数组元素
return item > 3; // 当所有的元素都满足条件,才返回true
} );
console.info(result);
find()
功能:用于查找第一个符合条件的数组元素,找不到则是undefined
let arr = [1,2,3,5];
let result = arr.find ( (item) => {
// item:数组元素
return item > 6; // 返回undefined
} );
console.info(result);
findIndex()
功能:查找第一个满足条件的数组元素,并返回其索引值.无,则返回-1
let arr = [1,6,9,5];
let result = arr.findIndex ( (item) => {
// item:数组元素
return item > 6;
// 返回符合条件的第一个数组元素的索引
// 没有,则返回-1
} );
console.info(result);
includes()
功能:用于判断数组是否包含某元素
let arr = [1,6,9,5];
let result = arr.includes(6);
// 判断数组是否包含某个元素
// 如包含,则返回true;否则,返回false
console.info(result);
fill()
功能:给数组填充指定值.
fill
方法用于空数组的初始化非常方便,已有数据会被覆盖.
fill
方法可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置.
let arr = new Array(5); // 构建一个length=5的数组
arr.fill("hello world"); // 用"hello world"填充
arr.forEach((item,index) => console.info(item,index));
arr.fill("你好,程序",2,4); // 用"你好,程序"覆盖数组的[2,4)
arr.forEach((item,index) => console.info(item,index));
console.dir(arr);
spread()
功能:把一个数据集合展开为一个一个的数据
常见的用法:
- 快速复制一个数组的方法
// 方法1: 使用map()
let arr1 = [1,3,5,7,9];
let arr2 = arr1.map(item => {return item});
console.info(arr2);
// 方法2
let arr1 = [1,3,5,7,9];
let arr2 = [];
for (let i = 0; i < arr1.length; i++) {
arr2.push(arr1[i]);
}
console.info(arr2);
// 方法3: 使用concat()
let arr1 = [1,3,5,7,9];
let arr2 = [].concat(arr1);
console.info(arr2);
// 方法4: 使用spread()
let arr1 = [1,3,5,7,9];
let arr2 = [...arr1];
console.info(arr2);
- 把字符串转换为数组
// 方法1: 使用split()
let str = "hello world";
let arr = str.split("");
console.info(arr);
// 方法2: 使用spread()
let str = "hello world";
let arr = [...str];
console.info(arr);
- 合并数组
let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [5,6];
let arr = [...arr1,...arr2,...arr3];
console.info(arr);
函数扩展
参数的默认值
// 给函数f设置默认值,a=1,b=2
function f(a = 1, b = 2) {
console.info(a,b);
}
f(); // 两个参数均使用默认值
f(3); // 参数b使用默认值
f(5,6); // 两个参数均不使用默认值
rest参数
作用:获取函数多余的参数,取代arguments
对象
在不确定传递的参数数量的情况下,就可以使用rest
function f(a, ...rest) {
console.info(a,rest);
// 会输出:1,[2,3]
}
f(1,2,3);
注意:rest
参数只能写在最后一个
为什么可以替代arguments
因为它和arguments
一样,都是整个实参列表.
区别:rest
是一个数组,而arguments
是一个类数组,而非真正的数组
function f(...rest) {
console.info(rest);
console.info(arguments);
}
f(1,2,3);
一个应用:求实参中的最大值
function f(...rest) {
console.info(rest);
// Math.max方法不能直接在数组上使用,需要使用spread()方法把数组打散
console.info(Math.max(...rest));
}
f(1,2,3);
箭头函数
基本语法:
([param],[param]) => {
statements;
}
例如:
let f = (x) => {return x*x};
console.info( f(10) );
几种简写方法
- 零个或多个参数
()
不能省略 - 一个参数可以
()
可以省略 - 如果函数体只有一句代码,不写
{}
- 如果函数体代码超过一句,则不可省略
{}
- 如果有
return
,则要写{}
- 如果函数体只有一句代码,并且有
return
,则不写{}
和return
箭头函数的特点
- 没有自己的
this
- 不可以当做构造函数
- 不可以使用
arguments
对象
使用class
定义类
格式:
class 类名 {
constructor(参数) {
this.属性名 = 属性值;
}
}
方法名() {
}
例如:
class People {
constructor(name,age,height,weight) {
this.name = name;
this.age = age;
this.height = height;
this.weight = weight;
}
description(){
document.write(`姓名:${this.name},年龄:${this.age},身高:${this.height},体重:${this.weight}`)
}
}
let tom = new People("tom",18,"80kg","180cm");
tom.description();
extends
class 子类 extends 父类 {
constructor() {
super();
this.属性 = 属性值;
}
}
没完。
网友评论