day16 ES5和ES6

最新推荐文章于 2023-03-04 14:04:28 发布

qq_38068491

最新推荐文章于 2023-03-04 14:04:28 发布

阅读量187

点赞数

本文链接：https://blog.youkuaiyun.com/qq_38068491/article/details/83270607

版权

一、严格模式：

"use strict";(严格模式下必须要加上这个代码)

1）定义变量必须要有var

2）严格模式下，八进制被禁用

var num = 057;

alert(num)；

3）arguments与形参不同

function box(a){

a++;

console.log(a,arguments[0]);//非严格模式下结果是6，6

} //严格模式下结果是6，5

box(5)

4）eval()解析在严格模式下有自己的作用域。不被外部访问。

var a = 3;

eval("var a = 5");

alert(a);//3

二、let声明变量

1) let 不允许重复声明变量;

let a = 2;

let a = 4;

alert(a)//报错

2) 必须在某个{}内部使用;

if(true){

let a = 0；}

alert(a);//a is not defined

块级作用域案例：点击某个li,获取li对应的下标

var li = document.getElementsByTagName("li");

for (let i = 0; i < li.length; i++) {

li[i].onclick = function(){

alert(i);//0 1 2

}

3)let 在函数体内部声明的变量没有变量提升；

暂时性死区：通过let声明的变量变量声明之前该变量不可用，这种现象就称作暂时性死区

例子1：alert(a)(光标的地方就是暂时性死区)

let a = 4;//a is not defined

例子2：function box(){

(光标的地方就是暂时性死区)

alert(a);

let a = 4;

}

box();//a is not defined

三、this详解。（重要）

1.this的指向：

1）this指向直接调用它的对象。

2）函数的回调函数中的this指向window（监听事件除外，它的this指向是对象）

1）普通函数this指向window

function box(){

console.log(this);//指向window

}

box（）；//指向window

btn.onclick = function(){

console.log(this);//指向当前对象button（btn）

box();//指向window

}

2）对象方法中的this指向当前对象

var obj = {

name : "tom",

run : function(){

console.log(this);//当前对象obj

}

obj.run();

2.this指向的改变

1)bind(this):可以改变匿名函数内部的this指向

btn.onclick = function(){

setInterval(function(){

console.log(this);//指向btn

}.bind(this),1000); }

2)call(this):函数调用时可以改变this指向；

var btn = document.getElementById("btn");

btn.onclick = function(){

box.call(this);//指向btn

box.apply(this);//指向btn

}

var box = function(){ ======> 相当于function box（）{}

console.log(this);//指向window

}

3)apply(this):函数调用时可以改变this指向；

var btn = document.getElementById("btn");

btn.onclick = function(){

box（);

}

var box = function(){

console.log(this);//指向btn

}.apply(btn);

四、for of :

var arr = [32,43,45,23,43];

for(var item of arr){

console.log(item);//item 遍历得到的item是数组的每一个元素

}

for..of与for..in的区别

a.for in遍历数组得到的是数组的下标，并且下标是字符串

for of遍历数组得到的是数组的元素。

b.for in主要用于遍历对象。

for of不能遍历对象。

c.for of可以用来遍历map集合

for in不能遍历map集合

五、const关键字

const用户定义常量。（不能变）

常量命名方式：

为了与变量区别，一般用大写

const PI = 3.1415;

PI = 3.14;

alert(PI) //报错

六、字符串模板

解析字符串中的变量，使用`${ 变量名 }`

字符串模板：` `;主要是为了减少字符串拼接时容易出现的拼接错误

`jflwejelf${变量名}`;${}里面可以解析变量，也可以解析函数。

例子：function fn(){

return 34;

}

var s = `辕脸${fn()}辕人`;

alert(s);//辕脸34辕人

七、箭头函数

function box(){};

var box = function(){};

var box = () => {};

1)凡是匿名函数都可以写在箭头函数

例子：document.onclick=() => {

alert("ok");

}

2)所有的方法中的回调函数都可以写成箭头函数。

例子：var i=0;

setInterval(() => {

i++;

console.log(i);

},1000)；

3)所有赋值方式的函数都可以写成箭头函数。

例子：var box = () =>{ 相当于function box(){

alert("hello箭头函数"); alert("hello箭头函数");

} }

box(); box();

4）箭头函数中的this

a.箭头函数没有this,箭头函数中的this继承父级而来。

例子：var box=document.getElementById("box");

box.onclick = function(){

var fn = () => { 因为是这行中没有封闭起来

console.log(this);//指向父级box

}

fn();

}

b.箭头函数无法通过bind(),call(),apply()改变this的指向。

八、解构赋值

作用：

1.一次性可以定义多个变量

var [a,b,c] = [34,23,43,6,5];

console.log(a,b,c);//34,23,43

2.可以快速的获取对象中对应属性的值，并且无视属性顺序。

var {age,userName} = {userName:"tom",age:20};

console.log(userName,age);//tom 20

3.可以轻松实现两个数的交换。

var num1 = 67;

var num2 = 89;

var [num1,num2] = [num2,num1];

console.log(num1,num2);//89 67

4.在函数中的使用，一次性可以返回多个结果。

function box(){

return [43,65,76];

}

alert(box())//43,65,76

var [a,b,c] = box();

console.log(a,b,c)//43,65,76

var obj = {

uname:"tom",

age:32

}

function box({age,uname}){

console.log(uname,age);

}

box(obj);//tom 32

解构赋值实现冒泡排序

function fn(arr){

for (var i = 0; i < arr.length-1; i++) {

for(var j=0;j<arr.length-1-i;j++){

if(arr[j]>arr[j+1]){

[arr[j],arr[j+1]]=[arr[j+1],arr[j]];

}

return arr;

}

console.log(fn([12,43,2,54,34,23,65]));

九、Array.from()；把伪数组转成真正的数组。

1）伪数组：arguments,通过document.getElementsByTagName("li")等得到的元素集合也是一个伪数组

2）伪数组不能用数组的方法，可以用下标访问，但是通过Array.from()方法把伪数组转成真正的数组，就可以使用数组的方法了。

例子：function box(){

console.log(Array.from(arguments).sort(function(a,b){

return a-b;

}));

}

box(43,54,23,654,32);

3）把属性含有length的对象转成数组

例子：var obj={

"0":23,

1:54,

2:89,（要是这里写成3:89，则输出的是undefined）

length:3

} （注意：键必须是从0开始，并且要有顺序，有无“”都可以。）

Array.from(obj,function(item,index){

console.log(item,typeof index)（回调函数相当于遍历）

});

面试题：定义一个函数，功能实现生成m个n的数组要求：不利用循环

function fn(m,n){

var newArr = Array.from({length:m},() => {

return n;

});

return newArr;

}

console.log(fn(5,3));//3,3,3,3,3

十、set集合

1）定义一个set集合：

var set = new Set();

set集合主要用来保存数据。

2）set集合的特点：

1.自动去重

var set=new Set([23,"43",543,23,54,43]);

console.log(set); //Set {23, "43", 543, 54, 43}

2.不会进行自动类型转换

传参：

new Set( 23,43,23 );不能这样传

new Set( [23,43,23] );要用[ ]的方式传参

或者:

var set = new Set()

set.add( 23 ).set.add( 43 ).set.add( 23 )...

例子：var set=new Set();

set.add([23,12]).add(23).add({name:"tom"});

console.log(set);//Set {[23, 12], 23, Object {name: "tom"}}

3）set集合的属性

set.size:获取set集合数据个数