简介
ES6 全称 ECMAScript 6.0 是JavaScript 语言的标准,JavaScript 是对他的实现,几乎每年都会有一个新版本
ECMAScript 是浏览器脚本语言的规范,JavaScript 是他的具体实现
特性
特性一:let 声明变量
特点一
<script>
{
var a = 1;
let b = 2;
}
console.log(a);
console.log(b);
</script>
特点二
<script>
var a=1;
var a=2;
let b=3;
let b=4;
console.log(a);
console.log(b);
</script>
特点三
<script>
console.log(a);
var a = 0;
console.log(b);
let b = 1;
</script>
特性二 :const 声明变量
<script>
const a=1;
a=3;
</script>
特性三 :解构表达式
数组解构
var 声明的变量一样可以
<script>
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c)
</script>
对象解构
<script>
let person = {
name:'jack',
age:24,
language:['java','javaScript','css']
}
let {name:a,age:b,language:c} = person;
console.log(a,b,c);
</script>
特性四 :字符串扩展
扩展的 API
<script>
let str = "hello.vue";
console.log(str.startsWith("he"));
console.log(str.endsWith("vue"));
console.log(str.includes("e"));
</script>
字符串模板
<script>
let a = ` <div>
<div></div>
</div>`;
console.log(a)
</script>
<script>
const person = {
name: "Jack",
age: 12,
language: ['java', 'css', 'js']
}
const { name, age, language } = person;
function say() {
return "我在学习ES6的新特性呢!!!";
}
let info = `我是${name},今年${age+10}岁,我想说 :${say()}`;
console.log(info);
</script>
特性五 :函数优化
函数的默认值
<script>
function add(a,b=1) {
return a+b;
}
console.log(add(20));
</script>
不定参数
不定参数用来表示不确定参数的个数,形如 :…变量名,由… 加上一个具名参数标识符组成。具名参数只能放在参
数列表的最后,并且有且只有一个不定参数。
<script>
function fun(...values) {
console.log(values.length);
}
fun(1,2);
fun(1,2,3);
</script>
箭头函数
只有一个参数时
<script>
var print = obj=>console.log(obj);
print("hello");
</script>
控制台就会打印 hello
多个参数时候 :参数用括号括起来
<script>
var print = (a,b)=>a+b;
console.log( print(1,2));
</script>
多条语句的时候 :语句用花括号括住
<script>
var print = (a,b)=>{
c=a+b;
return a+c;
}
console.log( print(1,2));
</script>
特性六
新增 API
keys(obj) : 获取对象所有的 key
values(obj) : 获取对象所有的 value
entries(obj) : 获取对象所有的 key 和 value 形成的二维数组
<script>
const person = {
name : "jack",
age : 13,
language : ['java','css','javascript']
}
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));
</script>
合并对象
assign 复制
<script>
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
Object.assign(target,source1,source2);
console.log(target)
</script>
对象扩展运算符
<script>
let a = {a:1};
let b = {b:2};
let c = {c:3,...a,...b};
console.log(c);
</script>
声明对象的简写方式
<script>
const name = 'jack';
const age = 12;
const person = {name:name,age:age};
const person1 = {name,age};
console.log(person);
console.log(person1);
</script>
对象的函数属性简写
<script>
const person = {
name : 'jack',
eat : function(food){
console.log(this.name+"在吃"+food);
},
eat1 : food => console.log(person.name+"在吃"+food),
eat2(food){
console.log(this.name+"在吃"+food);
}
}
person.eat("苹果");
person.eat1("香蕉");
person.eat2("葡萄");
</script>
map 和 reduce 方法
map
map方法:接收一个函数,将原数组中的所有元素用这个函数处理后放入新的数组中
<script>
let arr = ['1','2','3'];
arr = arr.map(item => item*2);
console.log(arr);
</script>
reduce
reduce 方法 :为数组中的每个元素执行回调函数,不包括数组中被删除或从未被赋值的元素。
<script>
let arr = [1,2,3];
let result = arr.reduce((a,b)=>{
console.log("上次调用回调返回的值: ",a)
console.log("正在处理的值 : "+b)
return a+b;
});
console.log(result);
</script>
模块化
模块化 就是把代码进行拆分,方便反复使用。类似于 java 中的 导包 :要使用一个包,就得先导包 ;
模块功能主要是由两个命令构成 : export 和 import
export :命令用于规定模块的对外接口
import :命令用于导入其他模块提供的功能
export
export 不仅仅可以导出对象,一切 js 变量都可以导出,比如 :基本类型变量、函数、数组、对象
定义一个 hello.js 文件,里面有个对象,并导出
const utils = {
sum(a,b){
return a+b;
}
}
export {utils};
定义一个 user.js 文件,并将变量导出
const name = 'jack';
const age = 21;
export {name,age};
导出也可以简写为 :
export let name = 'jack';
import
创建一个 main.js 文件去导入这些文件。
import {utils} from "./user.js";
import {name,age} from "./hello.js";
console.log(utils.sum(1,2))
console.log(name);
console.log(age);
由于我们这个是 ES6 的语法,所以我们目前不能测试。。。
|