let和const命令

var

之前，写js变量的时候。只有一个关键字：var

但var有一个问题，就是定义的变量有时候会成为全局变量。

例如：

for(var i = 0; i < 5; i++){ console.log(i); } console.log("循环外：" + i);

可以看出，在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问题。

let

let所声明的变量，只在let所在的代码块内有效。

例如：（把var改成let）

for(let i = 0; i < 5; i++){ console.log(i); } console.log("循环外：" + i);

输出结果：

这样，就把变量的i的作用域控制在了循环内部。

const

const声明的变量是常量，不能被修改；类似于Java中的final关键字。

例如：

const a = 10; console.log("a = " , a); //给a重新赋值 a = 20; console.log("a = " , a);

输出结果：

可以看到，变量a的值是不能修改的。

字符串扩展

字符串API

在ES6中，为字符串扩展了几个新的API

includes(“xxx”)：返回布尔值，表示是否包含xxx

startsWith(“xxx”)：返回布尔值，表示是否以xxx开头

endsWith(“xxx”)：返回布尔值,表示是否以xxx结尾

示例：

let str = "Hello Javascript";

console.log(str, "中是否包含 hello ==>", str.includes("hello"));

console.log(str, "中是否包含 hi ==>", str.includes("hi"));

console.log(str, "中是否以 h 开头==>", str.startsWith("h"));

console.log(str, "中是否以 a 开头==>", str.startsWith("a"));

console.log(str, "中是否以 a 结尾==>", str.endsWith("a"));

console.log(str, "中是否以 t 结尾==>", str.endsWith("t"));

输出结果：

ES6中提供了`来作为字符串模板标记。

示例：

输出结果：

两个`之间的部分都会被记做字符串的值，可以任意换行。

解构表达式

什么是解构？

ES6中允许安装一定模式从数组对象中提取值，然后对变量进行赋值，这样被称之为解构

数组解构

例如，有一个数组

let arr = [1,2,3]

之前，想要获取其中的值，只能通过下标。但ES6可以这样做：

let arr = [1,2,3]; const [a,b,c] = arr; // a,b,c将与arr中的每个位置对应来取值 console.log(a,b,c); const [x] = arr; // 只匹配一个参数值 console.log(x);

结果：

对象解构

例如，定义一个对象

const person = { name: "Tom", age: 20, language: ['Java','JavaScript','Python'] }

使用解构表达式取值：

const {name,age,language} = person;// {}内的属性名必须是person的属性名

console.log(name);

console.log(age);

console.log(language);

// 如果想用其他变量接收，需要指定别名

const {name:n} = person;

console.log("n: ",n);

结果：

函数优化

函数数默认值

在ES6之前，无法给一个函数参数设置默认值，只能采用变通写法：

// 如果没有给参数b传值，则b=1 function add(a,b){ b = b || 1; return a+b; } console.log(add(10)); //输出11 console.log(add(10，20)); //输出30

使用了ES6之后，可以这样写

function add(a,b = 1){ return a+b; } console.log(add(10)); //输出11 console.log(add(10，20)); //输出30

函数箭头

ES6中，定义一个函数的简写方式：

一个参数时：

let print = function (obj){ console.log(obj); } // 简写为： let print2 = obj => console.log(obj);

多个参数时

let sum = function(a,b){ return a + b; } // 简写为： let sum2 = (a,b) => a + b;

没有参数时

// 没有参数时，需要用()进行占位，代表参数部分 let hello = function(){ console.log("Hello ...") } // 简写为： let hello2 = () => console.log("Hello ...")

当有多行代码时，可以使用{ }括起来

let sum3 = (a.b) =>{ return a+b; } let hello3 = () =>{ console.log("Hello"); console.log("World"); }; hello3();

对象的函数属性简写

比如有一个Person对象，里面有eat()方法

let person = {

name: "Tom",

// ES6之前

eat: function (food){

console.log(this.name + "在吃" + food);

}

// 箭头函数写法

eat2: food => console.log(person.name + "在吃" + food);

// 简写版

eat3(food){

console.log(this.name + "在吃" + food);

}

箭头函数结合解构表达式

例如，有这样一个函数

const person = {

name: "Tom",

age: 20,

language: ["Java","Python","JS"]

}

function hello(person){

console.log("Hello," + person.name);

}

使用箭头函数和解构表达式的写法

var hi = ({name}) => console.log("hello," + name); hi(person);

Map和Reduce

在ES6中，数组新增了map() 和 reduce()方法

map()

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新的数组返回。

例如：有一个字符串数组，要求把它转换为int数组

let arr = ['1','2','3','4'] console.log(arr); let newArr = arr.map(s => parseInt(s)); console.log(newArr);

结果：

reduce()

reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果，

第二个参数是数组中要处理的下一个元素

reduce()会从左至右依次把数组中的元素用reduce()处理，并把处理结果作为下一次reduce的第一个参数，如果是第一次，会把前两个元素作为计算参数，或者把传入的初始值参数作为起始值。

例如：

const arr = [2,5,-10,20];

没有指定初始值：

指定了初始值：

运算符扩展

扩展运算符（spread）是三个点（…），将一个数组转为用逗号分隔的参数序列。

用法：

console.log(...[1,2,3]); // 1 2 3

console.log(1,...[2,3,4],5); // 1 2 3 4 5

function add(x,y) {

return x+y;

}

const number = [1, 2];

console.log(add(...number)); // 3

let arr = [...[1,2,3],...[4,5,6]];

console.log(arr); //[1,2,3,4,5,6]

const [first,...rest] = [1,2,3,4,5,6];

console.log(first,rest); // 1 [2,3,4,5,6]

console.log([..."hello"]); // ["h","e","l","l","o"]

Promise

所谓Promise，简单来说就是容器，里面保存着某个未来才会结束的事件（通常为异步操作）的结果。从语法上说，Promise是一个对象，它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用这样的方式进行处理。

可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

语法：

const promise = new Promise(function (resolve, reject) {

// 执行异步操作

if (/*异步操作成功*/){

// 调用resolve，代表Promise将返回成功的结果

resolve(value)

}else {

// 调用reject，代表Promise将返回错误的结果

reject(error)

}

})

如果想用等到promise异步操作执行完成，做一些事情，可以通过promise的then()方法来实现：

promise.then(function(value)){ // 异步执行成功后的回调 }

如果想要处理Promise异步执行失败的事件，还可以跟上catch：

promise.then(function(value)){ // 异步执行成功后的回调 }.catch(function(error)){ // 异步执行失败后的回调 }

示例：

const promise = new Promise(function (resolve, reject) {

setTimeout(() =>{

const num = Math.random();

if (num < 0.5){

resolve("success,num:" + num)

}else {

reject("error,num:" + num)

}

},300)

});

// 调用promise

promise.then(function (msg) {

console.log(msg);

}).catch(function (msg) {

console.log(msg);

})

结果：

Set和Map

ES6提供了Set和Map的数据结构。

Set

Set本质与数组类似。不同于Set中只能保存不同的元素，如果元素相同会被忽略。和Java中的Set集合非常相似。

构造函数：

let set = new Set(); set.add(1); // [1] let set2 = new Set([1,2,3,4,5]) // [1,2,3,4,5];

方法：

// 添加，元素内容不可重复，重复会被忽略

set.add()

// 清空

set.clear()

// 删除指定元素，删除的是元素内容，而不是下标

set.delete(value)

// 判断指定元素是否存在

set.has(value)

// 遍历

set.forEach(function(){})

// 元素个数

set.size

Map

Map本质是与Object类似的结构。不同在于Object强制规定key值只能是字符串。而Map对象的key可以是任意对象：

object是<String, Object>集合
map是<Object, Object>集合

构造函数：

// map接收一个数组，数组中的元素是键值对数组

const map = new Map([

['key1','value1'],

['key2','value2']

]);

// 或者接收一个set

const set = new Set([

['key3','value3'],

['key4','value4']

]);

const map1 = new Map(map);

const map2 = new Map(set);

方法：

map.set(key,value)

map.clear()

map.delete(key)

map.has(key)

map.forEach(function(key,value){})

map.size

map.values()

map.keys()

map.entries()

for(let key of map.keys()){

console.log(key);

}

console.log(...map.values())

class（类）的基本语法

JavaScript的传统方法是通过构造函数定义并生成对象。ES6中引入了class的概念，通过class关键字自定义类。

基本用法：

class User{

// 构造函数

constructor(name,age = 20){

this.name = name;

this.age = age;

}

// 定义方法

sayHello(){

return "Hello: " + this.name;

}

// 静态方法

static isAdult(age){

if (age >= 18){

return " 成年 " + age;

}

return " 未成年 " + age;

}

let user = new User("Tom",23);

console.log(user);

console.log(user.sayHello());

// 静态方法需要使用类来调用

console.log(User.isAdult(user.age));

</script>

结果：

类的继承：

class User{

// 构造函数

constructor(name,age = 20){

this.name = name;

this.age = age;

}

// 定义方法

sayHello(){

return "Hello: " + this.name;

}

// 静态方法

static isAdult(age){

if (age >= 18){

return " 成年 " + age;

}

return " 未成年 " + age;

}

class Jerry extends User{

constructor(){

super("Jerry",17);

this.address = "Shanghai";

}

let jerry = new Jerry();

console.log(jerry);

console.log(jerry.sayHello());

// 静态方法需要使用类来调用

console.log(Jerry.isAdult(jerry.age));

</script>

结果：

Generator函数

generator是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator函数有两个特征

function命令与函数名之间有一个*****号
函数体内部使用yield语句定义不同的内部状态

用法：

function * hello() {

yield "hello";

yield "world";

return "over"

}

let hi = hello();

console.log(hi.next());

</script>

结果：

可以看到，通过hello()返回的hi对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。知道遇到return关键字或者函数执行完毕，这个时候返回的done状态为true，表示已经执行完毕。

for…of循环

通过for…of可以循环遍历Generator函数返回的迭代器。

用法：

function * hello() {

yield "hello";

yield "world";

return "over"

}

let hi = hello();

for (let obj of hi) {

console.log(obj);

}

</script>

输出结果：

网站首页 > 技术文章正文

ES6新特性（es6新特性及作用）

let和const命令

var

let

const

解构表达式

数组解构

对象解构

函数优化

函数数默认值

函数箭头

对象的函数属性简写

箭头函数结合解构表达式

Map和Reduce

map()

运算符扩展

Set和Map

Set

Map

class（类）的基本语法

Generator函数

for…of循环

猜你喜欢

网站首页 > 技术文章 正文

ES6新特性（es6新特性及作用）

let和const命令

var

let

const

解构表达式

数组解构

对象解构

函数优化

函数数默认值

函数箭头

对象的函数属性简写

箭头函数结合解构表达式

Map和Reduce

map()

运算符扩展

Set和Map

Set

Map

class（类）的基本语法

Generator函数

for…of循环

猜你喜欢

网站首页 > 技术文章正文