ES6 新语法 01

最新推荐文章于 2025-09-11 21:33:52 发布

转载最新推荐文章于 2025-09-11 21:33:52 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a5ebbac518825735300a1dd

文章标签：

#json

本文详细介绍了ES6中新增的变量声明方式、解构赋值、箭头函数、默认参数等特性，并对数组的新方法进行了深入讲解，同时探讨了面向对象的新写法。

变量/赋值

var 可以重复定义、不能限制修改、没有块级作用域
let 不能重复定义、变量、块级作用域
const 不能重复定义、常量、块级作用域

解构赋值：

左右两边必须一样；右边得是个东西

必须定义和赋值同步完成

let [a,b]={a: 12, b: 5};
let {a,b}={12,5};
let [x,{a:{b,c},d},y] = [12,{a:{b:1,c:2},d:3},88];
console.log(`a的值是${a},b的值是${b},c的值是${c},d的值是${d}`);
复制代码

箭头函数

function (参数,参数){
  函数体
}
(参数,参数)=>{
  函数体
}
复制代码

如果有且仅有1个参数，()可以省
如果函数体只有一句话，而且是return，{}可以省

let arr = [2,10,5,99];
let sort_arr = arr.sort((n1,n2)=>n1-n2);// 函数体只有一句 return
alert(sort_arr);
复制代码

默认参数

ES5 默认赋值的写法

function show(a, b, c){
  b=b||5;
  c=c||12;// 调用方法如果 c 的值为空，此处赋值12
console.log(a,b,c);
}
show(12, 37);
复制代码

ES6 默认赋值新写法

function show(a=1, b=2, c=3){
console.log(a,b,c);// 12 37 3
}
show(12, 37);
复制代码

参数展开(剩余参数、数组展开)

let arr=[12,5,8,99];
//...arr    <=>    12,5,8,99
let arr2=[...arr, arr];
let arr3=[...arr,...arr];
let [a,b,c,d] = arr;
console.log(arr2);// [12, 5, 8, 99, Array(4)]
console.log(arr3);// [12, 5, 8, 99, 12, 5, 8, 99]
console.log(`a的值是${a},b的值是${b},c的值是${c},d的值是${d}`);// a的值是12,b的值是5,c的值是8,d的值是99
复制代码

“三个点”的第1个用途：接收剩余参数

 function show(a, b, ...args) //  剩余参数必须在参数列表的最后
复制代码

“三个点”的第2个用途：展开一个数组

function show(a, b, ...args){
console.log(a,b,args);// 12 37 Array(4)
}
show(12, 37, 88, 99, 123, 56);
复制代码

数组(新增5种方法)

forEeach 遍历：

let arr = [1,2,3,4];
arr.forEach(function(element,index,arr){
    alert(arguments.length);//forEach有3个参数，箭头函数不适应arguments
console.log(a+','+b+','+c);
console.log(`第${index}个元素是${element},最后一个元素是${arr}`);//0 1 (4) [1, 2, 3, 4]
});
复制代码

利用 forEeach 方法求和

let sum = 0;
arr.forEach(element=>sum+=element);
alert(sum);
复制代码

map 映射：

arr.map(function(element,index,arr){
    alert(arguments.length);//map有3个参数，箭头函数不适应arguments
console.log(a+','+b+','+c);
console.log(`第${index}个元素是${element},最后一个元素是${arr}`);
});
复制代码

map 方法求分数是否及格

let score = [100,20,30,70,50];
let result = score.map(element=>element>60?"及格":"不及格");
alert(result);
复制代码

reduce 汇总：

let arr = [1,2,3,4,5];
arr.reduce(function(tmp,element,index,arr){
// alert(arguments.length);//reduce 有4个参数
// console.log(a+','+b+','+c+','+d);
console.log(`首个参数是${tmp},第${index}次相加的元素是${element},最后一个元素是${arr}`);
});
复制代码

reduce 求平均数

let avg = arr.reduce((tmp,element,index)=>{
if (index!=arr.length-1) {
return tmp+element;
    }else{
return (tmp+element)/arr.length;
    }
});
alert(avg);
复制代码

filter 过滤：

let arr = [1,3,4,5];
arr.filter(function(element,index,arr){
    alert(arguments.length);//filter函数有3个参数
console.log(`第${index}个元素是${element},最后一个元素是${arr}`);
});
复制代码

filter 过滤出数组中能被2整除的数

let result = arr.filter(function(element){
if (element%2==0) {
return true;
    }else{
return false;
    }
});
//上述可简写成：
let result = arr.filter(item=>item%2==0);/
alert(result);
复制代码

Array.from：处理 array-like 型数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
</style>
<script>
window.onload=function (){
let aDiv=document.getElementsByTagName('div');//aDiv并不是一个真正意义上的数组
Array.from(aDiv).forEach(div=>{
        div.style.background='yellow';
      });
    };
</script>
</head>
<body>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</body>
</html>
复制代码

json

简写：名字和值一样的，可以省

let a=12;
let b=5;
let json={a, b};
console.log(json);//{a: 12, b: 5}
复制代码

function可以不写

let json={
   a: 12,
   b: 5,
   show(){
    alert(this.a+this.b);
  }
/*show: function (){
    alert(this.a+this.b);
  }*/
};
json.show();
复制代码

字符串

字符串模板：植入变量、任意折行 a变量的值是：${a}
startsWith 方法
endsWith 方法

面向对象

传统 Js 面向对象的民间写法(非官方，不统一)

function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function (){
  alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
  alert('我'+this.age+'岁');
};
let p=new Person('blue', 18);
p.showName();
p.showAge();
//传统 js 继承写法-------------------------
function Worker(name, age, job){
  Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
  alert('我是做：'+this.job);
};
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
复制代码

ES6 面向对象的官方新写法

class Person{
constructor(name, age){
this.name=name;
this.age=age;
  }
  showName(){
    alert('我叫'+this.name);
  }
  showAge(){
    alert('我'+this.age+'岁');
  }
}
let p=new Person('blue', 18);
p.showName();
p.showAge();
//ES6 继承新写法-------------------------
class Worker extends Person{
constructor(name, age, job){
//super-超类(父类)
super(name, age);
this.job=job;
  }
  showJob(){
    alert('我是做：'+this.job);
  }
}
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
复制代码