三.ES6基础知识一(超详细！！！)

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量183 收藏
点赞数
分类专栏： ES6 文章标签： javascript html5 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53915382/article/details/120588584
版权

1.变量声明

let 用于声明一个变量

  • 变量不会提升,即在变量声明之前无法使用该变量

  • 不可以重复声明

  • 具有块级作用域，只在当前作用域有效

const 用于声明一个常量

  • 变量声明不会被提升，即在变量声明之前无法使用该变量

  • 不允许重复声明。

  • 具有局部作用域，即const声明的变量只能在对应代码块中使用

  • const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改。

// ES5 var变量声明会提前
console.log(a);
var a = 1;

// ES6 let,const变量声明不会提前，有块级作用域的概念，不允许重复声明
// const声明的变量，声明时就要赋值，而且不允许修改

// 1.变量声明不会提前
// console.log(name);    //报错 1.变量声明不会提前
let name = 'wll';
{
  let name2 = 'cjk';
  console.log('内部',name2,name);
}
console.log('外部',name);

// 2.有块级作用域的概念
for (let i = 1;i<10;i++){
  console.log(i);
}
// console.log(i);  //报错 2.有块级作用域的概念

function myFun(){   //函数有局部作用域
  var age = 12;
  console.log(name);
}
myFun();
// console.log(age); //报错

//3.不允许重复声明
const a = 1;
// const a = true;   //报错  3.不允许重复声明


// 4.const声明的变量，声明时就要赋值，而且不允许修改
//const c;    //报错 const声明的变量声明时就要赋值
const c = 0;
// c++;        //报错 const声明的变量不允许修改

2.数组解构

1）数组的不完全解构

// 数组的不完全解构
let [a,b] = [1,2,3];  //结果 1 2
let [a,b,c] = [1,[2,3],4];
console.log(a,b,c);   //1 [ 2, 3 ] 4
let [a,[b],c] = [1,[2,3],4];
console.log(a,b,c);     //1 2 4

2）集合解构 ...扩展运算符

// 拓展运算符
// ...用在=左边，有聚合的作用，生成新的对象和数组
// ...用在=右边，有拆分、剥离的作用
let [a,...b] = [1,2,3]
console.log(a,b);   // 结果 1 [ 2, 3 ]

3）默认值解构（当匹配值严格等于undefined时，默认值生效）

// 数组解构设置默认值，有的话匹配，没有的话用默认值
let [a,b,c] = [1,2];
console.log(a,b,c);   //结果 1 2 undefined
let [a,b,c=10] = [1,2];
console.log(a,b,c);     //结果  1 2 10
let [a,b,c=10] = [1,2,3];
console.log(a,b,c);     //结果  1 2 3

4）默认值也可以是函数

function myFun(){
  console.log('函数');    //函数没有定义返回值
}
let [a,b,c=myFun()] = [1,2];    //c为myFun函数的返回值return
console.log(a,b,c);     //1 2 undefined

3.对象解构

1）对象解构

使用对象的简写形式，省略了key值，保留了value值对应的变量

等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值 ​ 如果变量名和属性名不一致，需要重命名

// 对象解构 使用对象的简写形式，省略了key值，保留了value值对应的变量
let {name,age} = {name:'wll',age:22};   
console.log(name,age);    //wll 22
let {name:username,age:userage} = {name:'wll',age:22};
console.log(username,userage);    //wll 22

2）嵌套解构

一层一层解构，先解构最外层

// 嵌套解构
let obj = {p:['hello',{y:'world'}]};
let {p:[a,{y:b}]} = obj;  //一层一层解构，先解构最外层
console.log(a,b);   //hello world

3）对象解构 设置默认值

默认值生效的条件是，对象的属性值严格等于undefined

// 对象解构 设置默认值
let {name,age,gender} = {name:'wll',age:12};
console.log(name,age,gender);   //wll 12 undefined
let {name,age,gender='female'} = {name:'wll',age:12};
console.log(name,age,gender);     //wll 12 female
let {name,age,gender='female'} = {name:'wll',age:12,gender:'male'};
console.log(name,age,gender);     //wll 12 male

4）对象解构的拓展

// 对象解构的拓展
let {a,...b} = {a:1,b:2,c:3};
console.log(a,b);       //1 { b: 2, c: 3 }
let {...b} = {a:1,b:2,c:3};
console.log(b);           //{ a: 1, b: 2, c: 3 }

5) 对象的深拷贝

开辟了一个新的内存空间

let obj = {a:1,b:2,c:3};
let {...b} = obj;
console.log(b);             //{ a: 1, b: 2, c: 3 }
console.log(obj === b);     //false

6) 经典面试题

const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);
//1,2,3,[11,999],undefined,undefined,5,{i: 6, j: 7}

4.字符串解构

1)可以使用数组解构，使用数组结构可以获取指定字符

2)使用对象解构,使用对象结构可以获取实例属性方法

3)字符串转数组(数组解构，拓展运算符)

// 字符串既可以使用数组[]解构，也可以使用对象{}解构
let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);   //h e l l o
let {length,toString} = 'hello';
console.log(length,toString);   //5 [Function: toString]
// 字符串转数组(数组解构，拓展运算符)
let [...arr] = 'hello';
console.log(arr);     //[ 'h', 'e', 'l', 'l', 'o' ]

5.number解构和Boolean解构

1)数字和Boolean只能使用{}解构其原型对象中的方法和属性

2)而不能使用[]解构，因为数字和Boolean是不可迭代的

//数字和Boolean只能使用{}解构其原型对象中的方法和属性
//而不能使用[]解构，因为数字和Boolean是不可迭代的
// let [a,b] = 10;   //报错，数字不迭代
// let [a] = true;     //报错，布尔不迭代

let {valueOf} = 10;
console.log(valueOf);   //[Function: valueOf]

let {valueOf} = true;
console.log(valueOf);     //[Function: valueOf]

6.对象拓展

对象简写

ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。

let name='wll';
let age =12;
let obj = {
  name,
  age,
  sayName(){
    console.log(this.name);
  }
}
obj.sayName();		//wll

静态方法

1）Object.is() 比较两个值是否一样

// === 比较两个值是否全等
//1. Object.is() 比较两个值是否一样
console.log(1 === 1);           //true
console.log(Object.is(1,1));    //true
console.log(+0 === -0);           //true
console.log(Object.is(+0,-0));    //false
console.log(NaN === NaN);             //false
console.log(Object.is(NaN,NaN));      //true

2）Object.assign() 深拷贝

//2. Object.assign()    对象的深复制
let obj1 = {};
let obj2 = {name:'cjk',age:12};
let obj3 = {name:'wll',gender:'female'};

//深复制，将obj2复制给obj1，返回值是obj1
Object.assign(obj1,obj2);       
console.log(Object.assign(obj1,obj2)); 	//{ name: 'cjk', age: 12 }
console.log(obj1);		//{ name: 'cjk', age: 12 }
console.log(obj1 === obj2);   //false

 //将obj2和obj3合并之后复制给obj1，若obj2和obj3中有相同的部分，应使用后定义的那部分
Object.assign(obj1,obj2,obj3);   
console.log(obj1);		
//{ name: 'wll', age: 12, gender: 'female' }

3）Object.setPrototypeOf() 设置原型对象中的方法 Object.getPrototypeOf() 获取原型对象中的方法

//3.Object.setPrototypeOf()设置原型对象中的方法
//Object.getPrototypeOf()获取原型对象中的方法
let obj1 = {};
let obj2 = {name:'cjk',age:12};
let obj3 = {name:'wll',gender:'female'};
Object.setPrototypeOf(obj1,obj2);   
console.log(obj1.__proto__);      //{ name: 'cjk', age: 12 }
console.log(obj1.constructor.prototype);      //[Object: null prototype] {}
console.log(Object.getPrototypeOf(obj1));     //{ name: 'cjk', age: 12 }

4）Object.keys() 获取所有属性名组成的数组

Object.values() 获取所有属性值组成的数组

Object.entries() 获取键值对组成的数组

//4.Object.keys() 获取所有属性名组成的数组
//Object.values() 获取所有属性值组成的数组
//Object.entries()  获取键值对组成的数组
let obj1 = {
  name:'wll',
  age:22,
  gender:'female'
}
let keys = Object.keys(obj1);   
let values = Object.values(obj1);
let entries = Object.entries(obj1);
console.log(keys,values,entries);
//[ 'name', 'age', 'gender' ] 
//[ 'wll', 22, 'female' ] 
//[ [ 'name', 'wll' ], [ 'age', 22 ], [ 'gender', 'female' ] ]
entries.forEach((item,index)=>{
  console.log(index,item[0],item[1]);
})
// 0 name wll
// 1 age 22
// 2 gender female

7.拓展运算符

1.在=左边：聚合的作用，返回值和外层包裹的标识符有关系

// ...用在=左边，有聚合的作用，生成新的对象和数组
let [a,...b] = [1,2,3]
console.log(a,b);   // 结果 1 [ 2, 3 ]

let {a,...b} = {a:1,b:2,c:3};
console.log(a,b);       //1 { b: 2, c: 3 }
let {...b} = {a:1,b:2,c:3};
console.log(b);           //{ a: 1, b: 2, c: 3 }

2.在=右边：剥离(展开)的作用，把对象或数组中每个属性或键值对单独

// 拓展运算符用在=右边的，可以剥离出来
let obj1 = {
  name:'wll',
  age:22
}
let obj2 = {
  ...obj1,
  name:'cjk',        
  gender:'female'
}
console.log(obj2);      
 //{ name: 'cjk', age: 22, gender: 'female' }  如果有相同的属性，则后来者居上

let arr1 = ['tom','lerry','jecky'];
let arr2 = [...arr1,'wll','cjk'];   
console.log(arr2);
//[ 'tom', 'lerry', 'jecky', 'wll', 'cjk' ]

3.用在函数形参位置，叫rest参数，相当于在=左边的功能(聚合的作用)

//ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。
// ...用在函数的形参位置，叫做rest参数，也叫拓展运算符的逆运算
let myFun4 = function (a,...b){
  console.log(a,b);
}
myFun4(1,2,3,4,5,6)   //1 [ 2, 3, 4, 5, 6 ]

8.数组API

1）Array.from()

将其他类型数据转换成数组

//1.Array.from()  将其他类型数据转换成数组
// ES5 Array.prototyoe.slice.call('类数组对象',0)
let arrObj = {
  0:'zhangsan',
  1:'lisi',
  2:'terry',
  length:3
}
console.log(Array.from(arrObj));    
//[ 'zhangsan', 'lisi', 'terry' ]
let str = 'hello'
let arr1 = Array.from(str);
console.log(arr1);    //[ 'h', 'e', 'l', 'l', 'o' ]

2）Array.of()

用于将一组值转换为数组。这个的主要目的是弥补数组构造函数Array()的不足

//2.Array.of()  用于将一组值转换为数组。这个的主要目的是弥补数组构造函数Array()的不足。
let arr1 = Array.of(3);
console.log(arr1);      //[ 3 ]

3)Array.prototype.find()

find()方法用于找出第一个符合条件的数组成员。或者undefined

//3.Array.prototype.find()  find()方法用于找出第一个符合条件的数组成员。或者undefined
let arr1 = Array.of(1,2,3,4,5,6);
let result = arr1.find((item,index)=>{
  return item > 2
})
console.log(result);    //3

4)Array.prototype.findIndex()

findIndex()找出第一个符合条件的数组成员的索引。如果所有成员都不符合条件，则返回-1

//4.Array.prototype.findIndex()     //findIndex()找出第一个符合条件的数组成员的位置。如果所有成员都不符合条件，则返回-1.
let arr1 = Array.of(1,2,3,4,5,6);
let result = arr1.findIndex((item,index)=>{
  return item > 2
})
console.log(result);    //2

5)Array.prototype.includes()

该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES6引入了该方法。

//5.Array.prototype.includes()    该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES6引入了该方法。
let arr1 = Array.of(1,2,3,4,5,6);
let result1 = arr1.includes(1);
console.log(result1);		//true

6）Array.prototype.fill()

fill()方法使用给定的值填充一个数组。改变原数组

//6.Array.prototype.fill()  fill()方法使用给定的值填充一个数组。改变原数组
let arr1 = Array.of(1,2,3,4,5,6);
let result2 = arr1.fill(7);			//改变原数组
console.log(result2 === arr1);    	//true

7）遍历

Array.prototype.keys() keys()是对键名的遍历

Array.prototype.values() values()是对属性值的遍历

Array.prototype.entries() entries()是对键值对的遍历。

//7.Array.prototype.keys()    keys()是对键名的遍历
//Array.prototype.values()    values()是对属性值的遍历
//Array.prototype.entries()   entries()是对键值对的遍历。
let arr1 = Array.of(1,2,3,4,5,6);
let keys = arr1.keys();
let values = arr1.values();
let entries = arr1.entries();
console.log(keys,values,entries);   //Object [Array Iterator] {}
console.log(Array.from(keys));    //[ 0, 1, 2, 3, 4, 5 ]
console.log(Array.from(values));  //[ 1, 2, 3, 4, 5, 6 ]
console.log(Array.from(entries));   //[ [ 0, 1 ], [ 1, 2 ], [ 2, 3 ], [ 3, 4 ], [ 4, 5 ], [ 5, 6 ] ]
不会代码的二玲吖
关注
专栏目录
四.ES6基础知识二(超详细！！！）
weixin_53915382的博客
10-07 227
9.函数 ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。通常情况下，定义了默认值的参数，应该是函数的尾参数 函数的length属性，将返回没有指定默认值的参数个数 如果设置的默认值不是函数的尾参数，那么length只计算默认值前面的参数的长度 参数默认值可以与解构赋值的默认值，结合起来使用。 1）形参默认值 let myFun1 = function(a,b,c = 10){ console.log(a,b,c); console.log(arguments);
Vue知识点 超详细!万字说明！
逍遥的博客
10-09 411
Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手 vue官网：https://cn.vuejs.org/v2/guide/comparison.html Vue是什么 Vue是一套用于构建用户界面的渐进式框架 "前端框架" 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供.
ES6 reduce数组方法 是一个聚合或者减少方法
周家大小姐
09-08 1435
reduce 可以替换我们的map和foreach /** * 计算数组中所有值的总和 */ var numbers = [10,20,10,40]; var sum = 0 // ES5 for(var i = 0 ; i&lt;numbers.length; i++){ sum += numbers[i] } console.log(sum)//80 // ES6 var s...
JS 遍历对象的值：Object.values()方法的使用
分享前端技术心得
11-09 678
如果需要将一个对象里面所有的属性的值遍历出来，可以使用Object.values()方法，遍历出来的值会以数组的形式存储。
Elasticsearch之聚合aggregations
Dreamer.
01-11 5097
聚合可以让我们极其方便的实现对数据的统计、分析。例如： 什么品牌的手机最受欢迎？ 这些手机的平均价格、最高价格、最低价格？ 这些手机每月的销售情况如何？ 实现这些统计功能的比数据库的sql要方便的多，而且查询速度非常快，可以实现实时搜索效果。 1 基本概念 Elasticsearch中的聚合，包含多种类型，最常用的两种，一个叫桶，一个叫度量： 桶（bucket） 桶的作用，是按照某种方式对...
javaScript中console.log()的用法
热门推荐
夏朵朵的博客
04-16 5万+
console.log()类似于alert啊，不过不会打断操作。主要是方便调式javascript用的。你可以看到你在页面中输出的内容，不过需要浏览器支持控制台输出。在浏览器界面使用快捷键 F12 就能打开控制台，这个F12 最确切的叫法是开发人员工具。其中，Console 即控制台。点击右键的 Clear console 菜单 或者 输入 clear() /console.clear()然后按回...
js数组常用操作
a0731999666333的博客
09-16 190
数组创建 第一种，使用 Array 构造函数： var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(10); // 创建一个包含10项的数组 var arr3 = new Array("a", "b","c"); // 创建一个包含3个字符串的数组 第二种，使用数组字面量表示法： var arr1 = []; //创建一个空数组 ...
es6基础知识点整理一
couch potato的博客
08-11 131
变量
ES6详细讲解
qq_51986661的博客
11-25 3115
ES61995年的美国，有一家名为netscape(网景)的公司打造了一款主要用于check验证的脚本语言，而恰在此时，Sun公司的java语言火的一塌糊涂，netscape公司为蹭其热度，便将该脚本语言命名为JavaScript。不料JavaScript居然被越来越多的人使用，后效仿大秦的货币统一政策将其提交给国际标准组织ECMA。该组织发布的标准被称做ECMAScript。2015年6月发布的版本称为，简称ES6。从ES6开始，该组织每年会发布一个版本，版本号比年份最后一位大1，至今最新版本为。
前端面试八股文-超详细的前端基础知识的应用与技巧
04-30
### 前端面试八股文-超详细的前端基础知识的应用与技巧 #### 一、JavaScript 数据类型详解 JavaScript 是一种广泛使用的脚本语言，尤其在前端开发领域扮演着至关重要的角色。了解 JavaScript 的数据类型是掌握这门...
前端学习必经知识,你了解吗!,pdf
07-29
在前端学习的道路上，有许多核心知识点是每个开发者都应该掌握的。...HTTP，即超文本传输协议，是互联网上应用最为...这些都是构建现代Web应用不可或缺的基础知识，掌握它们对于任何一个前端开发者来说都是至关重要的。
Vue真是太好了 壹万多字的Vue知识点 超详细!
qianduan666a的博客
07-20 340
Vue真是太好了 壹万多字的Vue知识点 超详细! ️1⃣️、Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手传送门https://cn.vuejs.org/v2/guide/comparison.html ️2⃣️、Vue是什么 Vue是一套用于构建用户界面的渐进式框架 "前端框架" 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代..
2021最新大厂前端面试题总结（百度、字节跳动、腾讯、小米.....），附面试经验！
weixin_56134381的博客
05-06 1万+
首先肯定是找一个简洁不浮夸却有很精美的简历模板，然后将自己的信息填上去，主要的就是：姓名、电话、照片、擅长的技术栈、教育经历、实习经历、项目经历、证书、社交网站。这里要强调的是：不太熟悉的东西别往上写，没用的东西别往上写。 然后就是投简历的渠道问题了，这里我要给个建议，最好找别人内推一下，因为这样更快让你的简历被看到，避免长时间没有音讯。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 980
Vue 2 中使用 Vue I18n 插件实现中英文切换
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1041
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 482
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
如何使用Redisson的布隆过滤器？
付聪
10-02 456
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1223
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
TypeScript基础知识详解
"TypeScript基础知识概览" TypeScript作为JavaScript的超集，是在JavaScript的基础上增加了可选的静态类型和面向对象编程特性。它旨在提供一种工具，可以在代码运行前进行静态类型检查，帮助开发者提前发现类型错误...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值