ES6零碎知识点回顾

作者: 橘子柚子橙子_ | 来源:发表于2018-09-09 23:18 被阅读0次

ES6

整理一下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.属性 = 属性值;
    }
}

没完。

ES6零碎知识点回顾

ES6默认开启严格模式

严格模式的作用

严格模式下代码的区别

不能遗漏声明(重点)

不允许使用8进制

不能在if中定义函数

函数的形参不能重名

arguments不再跟踪形参的变化

函数内部的this不再指向window了

鼓励使用let和const

块级作用域

几种绑定点击事件的方法

解构赋值

解构赋值的应用

用最少的代码去交换变量的值

求解斐波那契数列

字符串扩展

常用的字符串方法(不完全整理)

trim方法

应用:去掉字符串前后的空格

模板字符串

repeat

includes,startsWith,endsWith

padStart,padEnd

数组扩展

ES3中常用的数组方法

ES5中常用的数组方法

Array.isArray(): 检查是否是数组

forEach(): 用来遍历数组

map()

filter()

reduce()

some()

every()

find()

findIndex()

includes()

fill()

spread()