ES6新特性
程序员文章站
2022-04-07 13:49:28
...
1.什么是ECMAScript?
1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商 协会)以JavaScript为基础,制定了 标准规范。JavaScript和 JScript都是 的标准实现者,随后各大浏览器厂商纷纷实现了标准。
2.ES6的新特性
2.1 let和const命令
var 存在一个问题,就是定义的变量会莫名成为全局变量!
for (var i = 0; i < 5; i++) {
console.log(i);
}
//我在循环外:5,这是var的缺陷,在外部也可以使用
console.log("var,我在循环外:" + i);
let声明的变量,只在let命令所在的代码块内有效
for (let j = 0; j < 5; j++) {
console.log(j);
}
//报错,let定义之后,外部不可以使用 (j)
console.log("let,我在循环外:" + j);
const声明的变量是常量,不能修改。
var k = 100; //const定义常量,不能改变
console.log(k);
2.2 字符串扩展
- includes():是否找到了参数字符串,返回值为布尔值
- startsWith() :字符串的头部是否以**开头,返回值为布尔值
- endsWith() :字符串的尾部是否以**结尾,返回值为布尔值
字符串模板:ES6中提供 ` 作为字符串模板标记
2.3 解构表达式
2.3.1 数组解构
2.3.2 对象解构
2.4 函数优化
2.4.1 函数参数设置默认值
原本写法:设置b的默认值为1
function fun1(a, b) {
if (!b) {
b = 1;
}
console.log(a/b);
}
现在写法:
//设置b的默认值为1,当不给b传值时,默认值生效
function fun1(a, b = 1) {
console.log(a/b);
}
2.4.2 箭头函数()=> {}
一个参数时:
var print = function (obj) {
console.log(obj);
}
// 简写为:
var print = obj => console.log(obj);
多个参数时:
// 两个参数的情况:
var sum = function (a , b) {
return a + b; }
// 简写为:
var sum = (a,b) => a+b;
代码不止一行时:用{ }包起来
var sum3 = (a,b) => {
return a + b; }
对象的函数属性:
let person = {
name: "jack",
// 以前:
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版:
eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
// 简写版:
eat3(food){
console.log(this.name + "在吃" + food);
}
}
箭头函数结合解构表达式:
原来:
const person = {
name:"jack",
age:21,
language: ['java','js','css']
}
function hello(person) {
console.log("hello," + person.name) }
使用箭头函数结合解构表达式之后
var hello = ({name}) => console.log("hello," + name);
2.5 map和reduce
2.5.1 map
map() :接收一个函数,将原来数组中的所有元素用这个函数处理后放入新数组返回。
举例:将一个字符串数组转化为int数组
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)
2.5.2 reduce
reduce():接收一个函数(该函数接收两个参数,第一个参数是上一次reduce处理的结果,第二个参数是数组中要处理的下一个元素)和一个初始值。
reduce()会从左到右将数组中的元素用reduce处理,并把处理结果作为下一次reduce的第一个参数。
2.6 对象扩展
- keys(obj):获取对象的所有key形成的数组
- values(obj):获取对象的所有value形成的数组
- entries(obj):获取对象的所有key和value形成的二维数组。格式: [[k1,v1],[k2,v2],…]
- assign(dest, …src) :将多个src对象的值 拷贝到 dest中(浅拷贝)。
2.7 数组扩展
- find(callback):数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
- findIndex(callback):数组实例的findIndex方法的用法与find方法非常 类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条 件,则返回-1。
- includes(数组元素):与find类似,如果匹配到元素,则返回true,代表找 到了。
上一篇: 剑指Offer - 面试题36. 二叉搜索树与双向链表(中序循环/递归)
下一篇: ES6新特性
推荐阅读
-
新电脑如何分区 新电脑怎么分盘
-
深入理解Android组件间通信机制对面向对象特性的影响详解
-
PHP move_uploaded_file() 函数(将上传的文件移动到新位置)
-
Android Studio3.0新特性及安装图文教程
-
神经网络API、Kotlin支持,那些你必须知道的Android 8.1预览版和Android Studio 3.0新特性
-
自在小铺线下分享会即将启动,美业新零售,新时代的大势所趋
-
MySQL5.7 group by新特性报错1055的解决办法
-
SQL学习笔记五去重,给新加字段赋值的方法
-
微信新表情在哪 微信默认新表情使用方法
-
html5基础标签(html5视频标签 html5新标签用法)