1.变量的使用

（1）let的使用

（2）const的使用

2.解构赋值

(1) 数组解构

（2）对象解构

3.箭头函数

（1）箭头函数的写法

（2）箭头函数的this指向问题

4.三点运算符

（1）剩余运算符

a.传不定参或实参为数组的情形

b.数组解构

c.函数传对象

（2）扩展运算符

a.输出数组元素

b.合并数组

c.将类数组转为真正的数组：包括节点类数组、字符串

d.复制数组（相当于深拷贝）

5.数组扩展方法

(1)Array.from()

(2)array.find()或array.findIndex()

(3)array.includes()

（4）array.map()

（5）array.filter()

（6）array.reduce()

（7）array.fill()

（8）for...of

（9）for...in

（10）遍历对象

(11) forEach()

（12）in的使用

（13）array.some()

(14) array.join()

（15）Array.of()

6.字符串扩展方法

(1) 模板字符串

（2）startsWith()或endsWith()

(3)repeat()

7.对象扩展

(1)对象的简写

（2）构建属性

（3）合并对象

8.set数据结构

（1）size获取长度

（2）add添加元素

（3）delete删除元素

（4）has判断元素是否存在

（5）forEach()遍历元素

（6）clear清空元素

9.symbol对象的使用

（1）相同的赋值，变量也相同，除非使用Symbol.for()

（2）不能与运算符进行计算

本文主要介绍ES6中的一些语法。

1.变量的使用

（1）let的使用

a.提供块级作用域

b.不存在变量提升，需要先声明再使用，否则会出现“暂时性死区”

c.不能重复声明

（2）const的使用

a.定义常量，不可更改，声明时需要初始化

b.提供块级作用域

c.定义数组或对象时，可修改其中的元素或属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><script>let str = "abc";if (true) {let str = "123";console.log("if:", str);}console.log("全局:", str);// 1:块级作用域// for(let i=1;i<10;i++){//    console.log(i);// }// console.log(i);//未定义// 2:不存在变量提升// console.log(i);//报错// let i=1;// console.log(i);// 3:"暂时性死区"：用let声明的变量需要先声明后使用// var i=1;// if(true){//  i=2;//  let i=3;// }// 4:不允许重复声明// let a=1;// let a=3; //重复了 报错// 5:let案例// let arr = [];// for(let i=0;i<3;i++){//  arr[i] = function(){//   console.log(i);//  }// }// arr[0]();// arr[1]();// arr[2]();</script>
</body></html>

2.解构赋值

(1) 数组解构

a.基本解构，一一对应

b.不需要赋值的变量，可不写，要用逗号空出位置

c.一组数可以赋值为一个数组，需要利用三点运算符

d.可为变量取默认值，若未赋值或者赋的值是undefined,会取默认值

（2）对象解构

a.基本解构，通过属性名一一赋值

b.在属性名的冒号后添加名称，可为变量重新命名

c.也可取默认值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><script>// 1:数组的解构赋值// let arr = [1,2,3];// let [a,b,c] = arr;// console.log(a,b,c);// 2：二维数组// let [a,[b,c],d] = [1,[2,3],4];//    console.log(a,b,c,d);// 3:省略变量// let [a,,c] = [1,2,3];// console.log(a,c);// 4:合并数组的值// let [a, ...b] = [1, 2, 3, 4];// console.log(b); //数组// console.log(...b); //a,b,c// console.log(2, 3, 4);// 5:默认值 如果是undefined 默认值生效// let [a, b = '2'] = [1, undefined];// console.log(b);// =========对象结构===========// 1:对象结构// let Person = {realname:"张三",age:19};// let {realname:myrealname,age,height=173} = Person;//重命名// console.log(myrealname,age,height);// ========解构应用=========// 1：交换两个变量的值// let a=1;// let b=2;// [b,a] =  [a,b];// console.log(a,b);// 2:"结构函数"// function func(){//  return [1,2,3,4];// }// let [a,b,c,d] = func();// console.log(a,b,c,d);</script>
</body></html>

3.箭头函数

（1）箭头函数的写法

一般的，箭头函数的基本写法为：名称()=>{}.

注意：当执行语句只有一条时，可省略大括号和return.当参数只有一个时，可省略小括号

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>// function sum(a,b){//    return a+b;// }// sum(1,2);// 1:箭头函数的写法// const sum = (a,b)=>{//  return a+b;// }// let res =  sum(1,2);// console.log(res);// 2: 箭头函数简写// 代码块只有一句话省略{}和return// const sum = (a,b)=> a+b;// let res =  sum(1,2);// console.log(res);// 3:只有一个参数 小括号可以省略// const sum = a => a+3;// let res =  sum(1);// console.log(res);</script></body>
</html>

（2）箭头函数的this指向问题

通过与普通函数的比较，介绍箭头函数的this指向。

a.全局函数下

普通函数的this指向window对象，箭头函数的this也指向window对象

b.对象中

一般而言，普通方法的this指向对象本身，箭头函数的this指向全局对象

c.构造函数中

普通方法和箭头函数中的this都指向实例化对象。要注意的是，箭头函数中的this指向不会变化。

总结：

普通函数的this，与调用者有关。

箭头函数中的this，与上下文有关，是该函数所在作用域下this指向的值。可以简单理解为，定义箭头函数中的作用域的this指向谁，它就指向谁

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><script>//1：全局函数下的this// 1.1普通函数this 跟调用者有关// function global(){//    console.log(this);// } // global();// 1.2 箭头函数的this 箭头函数this this静态 根据上下文的this// const global = ()=>{//    console.log(this);// }// global();// 二：对象方法里面的this。// const Person = {//    realname:"张三",age:19,//   say:function(){//       console.log(this);//    }// }// Person.say(); //person实例// 2:对象箭头函数的this// const Person = {//     realname: "张三",//     age: 19,//     say: () => {//         console.log(this);//     }// }// Person.say(); //windows// 三：构造函数的this  构造函数的this就是当前实例// 箭头函数的this一旦定义了就不允许改变// function Person(realname, age) {//     this.realname = realname;//     this.age = age;//     this.say = () => {//         console.log(this); //这个this不会 当时new 实例是谁就是谁//     }//     this.say1 = function() {//         console.log(this);//     }// }// const P1 = new Person("张三", 19);// const P2 = new Person("李四", 20);// P1.say.call(P2);// P1.say.apply(P2);// P1.say.bind(P2)();// P1.say1.call(P2);// P1.say1.apply(P2);// P1.say1.bind(P2)();</script>
</body></html>

下面的案例有助于你理解普通函数与箭头函数中this指向的问题。需要注意的是，当利用call改变fn的调用对象时，调用fn()的普通函数，this会指向obj对象。但是，调用其中返回出来的普通函数时，this的指向仍是window对象，并未改变。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const obj = {name: 'zs'}// (1)// function fn() {//     console.log(this);//     return function() {//         console.log(this);//     }// }// fn()();// 都指向window// （2）// function fn() {//     console.log(this);//     return () => {//         console.log(this);//     }// }// fn()();// 都指向Window// （3）// let fn = () => {//     console.log(this);//     return function() {//         console.log(this);//     }// }// fn()();// 都指向Window// （4）// let fn = () => {//     console.log(this);//     return () => {//         console.log(this);//     }// }// fn()();// 都指向window// （5）function fn() {console.log(this); //obj调用，指向objreturn function() {console.log(this); //指向window}}fn.call(obj)();// (6)// function fn() {//     console.log(this);//     return () => {//         console.log(this);//     }// }// fn.call(obj)();// 都指向obj// (7)// let fn = () => {//     console.log(this);//     return function() {//         console.log(this);//     }// }// fn.call(obj)();//都指向window// (8)// let fn = () => {//     console.log(this);//     return () => {//         console.log(this);//     }// }// fn.call(obj)();// 都指向window</script>
</body></html>

4.三点运算符

（1）剩余运算符

a.传不定参或实参为数组的情形

  //     1.传不定参function sum(a, ...num) {let sum = a;for (let i = 0; i < num.length; i++) {sum += num[i];}return sum;}// 2.实参为数组function addTwo(a, b) {return a + b;}console.log(addTwo(...[1, 6]));console.log(sum(10, 2, 3, 4));

b.数组解构

 let [a, ...b] = [1, 4, 5, 6];console.log(a, b);

c.函数传对象

  function obj({uname: u,age: a}) {console.log(u, a)}obj({uname: 'zs',age: 16})

（2）扩展运算符

a.输出数组元素

b.合并数组

c.将类数组转为真正的数组：包括节点类数组、字符串

d.复制数组（相当于深拷贝）

 let divs = document.querySelectorAll('div');// 二、扩展运算符// 1.输出数组let array1 = [5, 6, 7, 8];console.log(...array1);//2.合并数组let array2 = [9, 10, 11];let array3 = [...array1, ...array2]console.log(array3);//3.将类数组转为真正的数组// (1)转节点类数组console.log(divs);console.log([...divs]);//（2）转字符console.log('890');console.log([...'890']);//(3)复制数组（深拷贝）let array4 = [3, 6, 9];let array5 = [...array4];array5[0] = 190;console.log(array4);console.log(array5);

5.数组扩展方法

(1)Array.from()

将类数组转为真正的数组

(2)array.find()或array.findIndex()

找到符合条件的第一个元素或其对应的索引

(3)array.includes()

判断数组是否包含某个元素，返回true或false

  // 1.Array.from():将类数组转为真正的数组let str = '123';console.log(Array.from(str));let obj = {0: 'zs',1: 19,length: 3};console.log(Array.from(obj));//2.arr.find():找到符合条件的第一个元素let arra1 = [1, 5, 6, -3, 4]console.log(arra1.find(item => item < 0));//2.arr.findIndex():找到符合条件的第一个元素的索引let arra2 = [1, -3, 6, 4]console.log(arra2.findIndex(item => item < 0));//3.arr.includes:判断数组是否包含某个元素console.log(arra2.includes(-3));console.log(arra2.includes(16));

（4）array.map()

修改数组中的每个元素

（5）array.filter()

筛选出符合条件的所有元素

（6）array.reduce()

“累加器”的效果，total为初始值，也是返回值，c代表当前值。第二个参数可设置reduce的初始值。

（7）array.fill()

将数组元素填充为指定内容，第一个参数为指定的内容，后两个规定填充的起始位置

（8）for...of

访问数组的元素

（9）for...in

访问数组元素的下标

（10）遍历对象

a.利用for...in

b.利用Object.keys先获取属性，再利用for...of遍历

c.Object.values()获取对象属性的值

(11) forEach()

遍历数组，三个参数：分别代表数组元素、索引和整个数组

（12）in的使用

判断属性是否存在（数组判断索引，对象判断属性）

（13）array.some()

判断数组中是否有元素满足特定条件

(14) array.join()

以特定字符连接数组元素

（15）Array.of()

将一串字符转为数组

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>//1.arry.map():修改数组每个元素let a = [1, 2, 3];let a1 = a.map(item => item + 100);console.log(a1);//2.arry.filter()：过滤出符合条件的所有元素let b = [-1, 4, -6, 78, 56, -90];let b1 = b.filter(item => item < 0)console.log(b1);//3.arry.reduce():'累加器'let c = [1, 2, 3, 4, 5];let sum = c.reduce((total, c) => total - c)console.log(sum);//4.arry.fill():填充，结束下标的元素不包括let d = [1, 2, 3, 4, 5];let d1 = d.fill(100, 1, 3)console.log(d1);//求数组最大值let e = [12, 45, 34, 67, 23, 2];let max = e.reduce((i, c) => i < c ? c : i)console.log(max);// 5.for...oflet f = [1, 2, 3, 4, 5];for (let i of f) {console.log(i);}//6. for...inlet g = ['a', 'b', 'c', 'd', 'e'];for (let i in g) {console.log(g[i]);}//7.遍历对象(利用Object.keys先获取属性，再利用for...of遍历)let h = {name: 'zs',age: 20,career: 'engineer'}let keys = Object.keys(h)for (let i of keys) {console.log(h[i]);}// 8.forEach()let j = ['x', 'y', 'z'];j.forEach(element => {console.log(element);});// 9.in判断属性是否存在（数组判断索引，对象判断属性）let k = [3, 6, 9, 12];console.log(3 in k); //trueconsole.log(4 in k); //falselet l = {realname: 'zs',age: 20}console.log('age' in l); //true// 10.some：判断数组中是否有元素满足特定条件let m = [1, -7, 7, 8];console.log(m.some(e => e < 0)); //true// 11.join:以特定字符连接数组元素console.log('4,6,8'.split(','));console.log([4, 6, 8].join('*'));//12.Array.of():将一串字符转为数组console.log(Array.of(1, 2, 3));</script>
</body></html>

6.字符串扩展方法

(1) 模板字符串

（2）startsWith()或endsWith()

判断字符串是否以特定字符开始或结束

(3)repeat()

重复字符串

<script>// 1.模板字符串:可使用变量、函数以及基本的计算let a = 'Jack';console.log(`Hello ${a}`);//2.startsWith,endsWith:判断字符串是否以特定字符开始或结束console.log('Hello'.startsWith('H'));console.log('Hello'.startsWith('He'));console.log('Hello'.startsWith('o'));console.log('Hello'.endsWith('llo'));console.log('Hello'.endsWith('ll'));//2.重复字符串console.log('James'.repeat(5));</script>

7.对象扩展

(1)对象的简写

当属性名与变量名相同时，可省略变量名

（2）构建属性

利用中括号及变量名即可添加指定的属性

（3）合并对象

a.利用Object.assign(对象1，对象2，...)

b.利用三点运算符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1.简写let uname = 'zs',age = 20,key = 'height';const Stu = {uname,age};console.log(Stu);//2.构建属性Stu[key] = 178;console.log(Stu);//3.合并对象const Obj1 = {uname: 'ls'};const Obj2 = {age: 20};const Obj3 = Object.assign(Obj1, Obj2);console.log(Obj3);const Obj4 = {...Obj1,...Obj2}console.log(Obj4);</script>
</body></html></html>

8.set数据结构

set数据结构其最大的特点就是自带去重，不会存储重复的值。下面介绍它的基本使用。

（1）size获取长度

（2）add添加元素

（3）delete删除元素

（4）has判断元素是否存在

（5）forEach()遍历元素

（6）clear清空元素

最后利用set实现数组去重的小案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 元素唯一const a = new Set([1, 2, 3, 4]);console.log(a);// 长度console.log(a.size);// 添加a.add(5).add(6).add(1);console.log(a);// 删除a.delete(1);console.log(a);// 判断是否存在console.log(a.has(3));console.log(a.has(100));// 遍历a.forEach(i => console.log(i));// 清空a.clear();console.log(a);//数组去重(解构后用[]包裹)const a1 = [1, 3, 4, 5, 5, 6, 1, 3];console.log([...new Set(a1)]);</script>
</body></html>

9.symbol对象的使用

symbol对象有以下特点：

（1）相同的赋值，变量也相同，除非使用Symbol.for()

（2）不能与运算符进行计算

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1、symbol创建完全唯一的值let a = Symbol(),c,d;let b = Symbol();console.log(c === d);console.log(a === b);let e, f;// 2、创建唯一值e = Symbol.for();f = Symbol.for();console.log(e === f);// 3、不能与运算符计算// e - 1;const Method = {say: function() {console.log('He can say!');},sing: function() {console.log('He can sing!');},walk: Symbol(),run: Symbol()};const Person = {realName: 'zs',age: 20,walk: function() {console.log('会走路');},run: function() {console.log('会跑步');}};// 4.获取所有的键console.log(Reflect.ownKeys(Method));console.log(Reflect.ownKeys(Person));Person[Method.walk] = () => {console.log('He can walk!');};Person[Method.run] = () => {console.log('He can run!');};// 5.获取对象Symbol对应的键,通过键可以调用对应的函数let sKeys = Object.getOwnPropertySymbols(Person)console.log(sKeys);Person[sKeys[0]]()Person[Method.walk]();Person.walk();Person[sKeys[1]]()Person[Method.run]();Person.run();</script>
</body></html>

JavaScript之ES6语法相关推荐

JavaScript (11) ES6语法
1. ES6 语法 ECMAScript 6 是继ECMAScript 5 之后发布的JavaScript 语言的新一代标准,加入了很多新的特性和语法,该标准于2015年6月17日发布了正式版本,并被 ...
javascript中es6语法
es6语法简介: // 1.历史:// 1995-----JavaScript诞生// 1997-----ECMAScript标准确立// 1999-----ES3出现,与此同时IE5风靡一时// 2 ...
javascript创建类方法汇总（包含es6语法）
复制以下代码,使用node xxx.js 即可运行 /*********************************** * 使用class关键字定义类(ES6 语法) ************ ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类在ES5中,我们写一个类,通常是这么写的 function Person(name,age){this.name = name;this.age = age ...
WebStorm ES6 语法支持设置
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ES6的目标,是使得Java ...
ES6语法的学习与实践
ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...
vue-cli项目布署问题解决：空白页、静态资源文件404错误、refrenceError:promise未定义（部分浏览器不支持ES6语法）
(前言:文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式) 首先简单理解webpack打包: 个人理解:项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码 ...
【Vue.js 知识量化】ES6 语法积累
ES6 语法 let / var const 的使用 class.extends.super 箭头函数(arrow function) 模版字符串(template string) 结构(destru ...

JavaScript之ES6语法

1.变量的使用

（1）let的使用

（2）const的使用

2.解构赋值

(1) 数组解构

（2）对象解构

3.箭头函数

（1）箭头函数的写法

（2）箭头函数的this指向问题

4.三点运算符

（1）剩余运算符

a.传不定参或实参为数组的情形

b.数组解构

c.函数传对象

（2）扩展运算符

a.输出数组元素

b.合并数组

c.将类数组转为真正的数组：包括节点类数组、字符串

d.复制数组（相当于深拷贝）

5.数组扩展方法

(1)Array.from()

(2)array.find()或array.findIndex()

(3)array.includes()

（4）array.map()

（5）array.filter()

（6）array.reduce()

（7）array.fill()

（8）for...of

（9）for...in

（10）遍历对象

(11) forEach()

（12）in的使用

（13）array.some()

(14) array.join()

（15）Array.of()

6.字符串扩展方法

(1) 模板字符串

（2）startsWith()或endsWith()

(3)repeat()

7.对象扩展

(1)对象的简写

（2）构建属性

（3）合并对象

8.set数据结构

（1）size获取长度

（2）add添加元素

（3）delete删除元素

（4）has判断元素是否存在

（5）forEach()遍历元素

（6）clear清空元素

9.symbol对象的使用

（1）相同的赋值，变量也相同，除非使用Symbol.for()

（2）不能与运算符进行计算

JavaScript之ES6语法相关推荐

最新文章

热门文章