es6 filter函数的用法_面试必备之es6总结-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42298081/article/details/112348071

这篇博客详细介绍了ES6的重要特性，包括var、let、const的区别，箭头函数的使用场景，数组的map、reduce、filter和forEach方法，函数参数的默认值，解构赋值的规则，字符串的新方法以及Promise的实现原理和状态。同时，阐述了ES6在大型企业应用开发中的重要地位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自从ES6发布以来，就受到了广大开发者的欢迎。它的新特性解决了很多实际开发中的痛点，并且使得JavaScript逐步成为一门能够开发大型企业应用的编程语言，基于这种技术环境下，很多公司都将ES6视为开发的其中一个标准，因此在招聘人才的时候，也会对其进行ES6知识的考察。

1.var let const 区别

(1). var声明的变量会挂载在window上，而let和const声明的变量不会：

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined

(2). var声明变量存在变量提升，let和const不存在变量提升

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值
var a = 100;
复制代码console.log(b); // 报错：b is not defined  ===> 找不到b这个变量
let b = 10;
复制代码console.log(c); // 报错：c is not defined  ===> 找不到c这个变量
const c = 10;

(3).let和const声明形成块作用域

if(1){
var a = 100;
let b = 10;
}

console.log(a); // 100
console.log(b)  // 报错：b is not defined  ===> 找不到b这个变量

if(1){

var a = 100;

const c = 1;
}
console.log(a); // 100
console.log(c)  // 报错：c is not defined  ===> 找不到c这个变量

(4).同一作用域下let和const不能声明同名变量，而var可以

var a = 100;
console.log(a); // 100

var a = 10;
console.log(a); // 10
复制代码let a = 100;
let a = 10;

//  控制台报错：Identifier 'a' has already been declared  ===> 标识符a已经被声明了。

(5). 暂存死区

var a = 100;

if(1){
    a = 10;
//在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
// 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

(6).const

1、一旦声明必须赋值,不能使用null占位。
*
*  &emsp;2、声明后不能再修改
*
*  &emsp;3、如果声明的是复合类型数据，可以修改其属性
*
* */
const a = 100; 

const list = [];
list[0] = 10;
console.log(list);&emsp;&emsp;// [10]

const obj = {a:100};
obj.name = 'apple';
obj.a = 10000;
console.log(obj);&emsp;&emsp;// {a:10000,name:'apple'}

2. 箭头函数

(1)不需要function关键字来创建函数es5创建函数var aa = function() {}
复制代码
es6创建函数

var aa = () => {}
(2)可以极大的简写函数

es5函数

var fn = function(a) {
return a + 5
  }
复制代码
可以利用箭头函数简写为：

var fn = a => a + 5;
简写规则：

    当函数所传参数只有一个时，可以去掉();        eg: (a) => {}   简写为：a => {}
    当函数体中只返回值，而没有其他操作时，可以去掉{}；eg: (a, b) => {return a+b} 简写为：(a, b) => a+

(3)当要求动态上下文的时候，就不能够使用箭头函数，也就是this的固定化。

1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象；
2、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误；
3、不能够使用arguments对象；
4、不能使用yield命令；

3. 数组新增常用的4个方法

(1)map --映射

let arr=[66,59,80];
let result=arr.map(item => {
if(item >= 60){
return "及格"
}else{
return "不及格"
}
});
//result:["及格", "不及格", "及格"]

(2) reduce --汇总

let arr = [12,69,180,8763];
let result = arr.reduce((tmp, item, index) => {
console.log(tmp, item, index);
return tmp + item;
 });
console.log(result);//求和

(3)filter --过滤

let arr=[
    {title: '电源线', price: 50},
    {title: '电脑', price: 13000},
    {title: '键盘', price: 120},
    {title: '手机', price: 9000}
];

let result=arr.filter(json=>json.price>=5000);

console.log(result);//[{title: '电脑', price: 13000},{title: '手机', price: 9000}]

(4)forEach --迭代

let arr=[12,5,8,9];

arr.forEach((item,index)=>{
console.log(index+': '+item); //0: 12  1: 5  2: 8  3: 9
});

4. 函数的参数

(1)收集参数

function show(a, b, ...args){
  console.log(args)
}
show(1,2,3,4,5,6) //输出[3,4,5,6]

(2)展开数组

const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]); //输出[1,2,3,4,5,6]
console.log(...arr1); //输出1，2，3

(3)默认值

const show = (a=666, b=999) => {
console.log(a); //输出666
console.log(b); //输出999
}

show();

5. 解构赋值

(1)左右两边结构必须一样；
(2)右边必须是个合法的值；
(3)声明和赋值不能分开(必须在一句话里完成)；

let [a,b,c]=[1,2,3,999];
let {e,d,g}={e: 4, d: 5, f: 6, g: 7};
console.log(a,b,c,e,d,g);
//输出1 2 3 4 5 7

6. 字符串

(1)多了两个新方法: startsWith endsWith

//startsWith

let str='https//http://mp.blog.youkuaiyun.com/postedit/79478118';

if(str.startsWith('http://')){
  alert('普通网址');
}else if(str.startsWith('https://')){
  alert('加密网址');
}else if(str.startsWith('git://')){
  alert('git地址');
}else if(str.startsWith('svn://')){
  alert('svn地址');
}else{
  alert('其他');
}

//endsWith

let str='12121.png';

if(str.endsWith('.txt')){
  alert('文本文件');
}else if(str.endsWith('.jpg')){
  alert('JPG图片');
}else{
  alert('其他');
  }

(2)字符串模板

优点：方便字符串拼接；可以折行

let title='标题';
let content='内容';
let str='

\

`'+title+'`

\

'+content+'

\

';

let str2=`<div><h1>${title}h1><p>${content}p>div>`;

7. promise 实现原理? promise的三种状态

promise实际上解决jquery的ajax回调地域(解决层层嵌套),只是异步编程的一种解决方案

new promise(})const p1 =

三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)

promise两个特点:

(1)对象的状态不受外界影响

(2)一旦状态改变，就不会再变，任何时候都可以得到这个结果。

promise 缺点: 无法取消promise,如果不设置回调函数,promise内部抛出错误第三，当处于pending状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

8.对es6的了解

ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

转发在看就是最大的支持❤️