一、了解ES6

1)ES6官网:http://www.ecma-international.org/ecma-262/6.0/

2)Javascript是ECMAScript的实现和扩展

3)ES学习建议:

  • 基础语法(包括与旧版的差异优劣;新版有哪些坑等等)
  • 应用场景
  • 多在项目中应用

补充:VSCode的插件Live Server的作用:

  • 页面更改后自动刷新
  • 使用的是http协议而非file://

二、ES6特性入坑

1)let\const

let

// let定义变量
let name = "zhangsan" // var会造成变量穿透
for(var i=0;i<5;i++){
console.log(i);
};
console.log("===这里就是变量穿透===>" + i) // 结果:===这里就是变量穿透===>5
// let不会造成变量穿透
for(let i=0;i<5;i++){
console.log(i);
};
console.log("===这里就是变量穿透===>" + i) // 结果:i is not defined

const:

// ES5
Object.defineProperty(window, 'es', {
value:'es6',
writable:false
})
console.log(es) // window.es,括号内为简写;结果:es6
window.es = 'es2015'
console.log(window.es) // 结果:es6 // ES6 const:常量
// 1
const es = 'es6'
console.log(es) // 结果:es6
//es = 'es2015' // 这行报错
console.log(es) // 2.const 常量名不允许重复声明
var str = 'es6'
var str = 'es2015'
console.log(str) // es2015 // 3
// const 声明的常量 不属于 顶层对象window
// var 声明的变量 属于 顶层对象window // 4.const不存在常量提升
// var变量提升
console.log(str) // 结果:undefined
var str = 'es6'
// 相当于
var str
console.log(str) // 结果:undefined
str = 'es6' // 5.const声明的常量具有块级作用域
// var
if(true){
var strsix = 'es6'
}
console.log(strsix) // 结果:es6

const声明常量的本质

const声明的常量真的不可以改变吗

const esObj = {
name:'es6',
year:2015,
}
esObj.name = 'es2015'
console.log(esObj.name) // 结果:es2015 const esObj = {
name:'es6',
year:2015,
}
Object.freeze(esObj)
esObj.name = 'es2015'
console.log(esObj.name) // 结果:es6 const arr = ['es6', 'es7', 'es8']
Object.freeze(arr)
arr[0] = 'es2015'
console.log(arr[0]) // 结果:es6 const esObj = {
name:'es6',
year:2015,
extension:['es7', 'es8'],
}
// Object.freeze(esObj)
myFreeze(esObj)
esObj.extension[0] = 'es2016'
console.log(esObj.extension[0]) // 结果:es7 // 对深层次的数据进行冻结
function myFreeze(obj){
Object.freeze(obj)
// ES5的forEach;keys()方法得到的是数组
Object.keys(obj).forEach(function(key){
if(typeof obj[key] === 'object'){
myFreeze(obj[key])
}
});
} // 建议优先使用const

2)箭头函数

2-1箭头函数

// 1-1.原始写法
const sum = function(x, y){
return x + y
}
const res = sum(4, 4)
console.log(res)
// 1-2
// 默认参数 给参数列表设定初始值
function add(a=100,b=100) {
console.log(a,b);
}
// 执行方法,会用默认值填充,打印出来100,100
add();
// 覆盖默认值打印 结果是1,2
add(1,2); // 2.箭头函数写法
const sum2 = (x, y) => {
return x + y
}
// 相当于: const sum2 = (x, y) => x + y
const res2 = sum2(5, 5)
console.log(res2) // 3.只有一个形参,小括号可省略 // 4
const btnObj = document.querySelector('#btn')
// console.log(btnObj)
btnObj.addEventListener('click', () => {
/*箭头函数里面没有this,当需要在箭头函数里用到this时,
它会通过当前的作用域链,向它上层的作用域内去找this指向,到底
指向的谁*/
console.log(this) // 结果:window
this.style.backgroundColor = '#f00'
})

2-2箭头函数任何场景都可以使用吗

// 1
const obj = {
name1:'cy',
showName:function(){
console.log('名字:'+ this.name1) //名字:cy
},
// 简写:
showName(){
console.log('名字='+ this.name1) //名字=cy
}, showName:() => {
console.log('名字:'+ this.name1) // 名字:undefined
},
}
obj.showName() // 2
/*function sum2(x, y){
// function里面的关键字arguments,arguments能够取到形参的值和其它东西
console.log(arguments)
}
sum2(3, 3)*/ const sum = (x, y) => {
// 在箭头函数中不能使用arguments
console.log(arguments)
return x + y
}
sum(4, 4) // arguments is not defined // 3
// 在ES5中使用函数模拟一个类
function Course(mame, price){
this.name = name
this.price = price
}
const c1 = new Course('es', 500)
console.log(c1)
// ES5中类的方法定义在原型中
Course.prototype.study = function(){
console.log(`学习: ${this.name}`) // ES6模板字符串
}
c1.study()
// ES6箭头函数不能作为构造函数
const Course = (mame, price) => {
this.name = name
this.price = price
}
// TypeError:Course is not a constructor
const c2 = new Course('es', 500)
console.log(c2)
// ES6箭头函数不能定义原型方法
Course.prototype.study = () => {
console.log(`学习: ${this.name}`) // ES6模板字符串
}
c1.study()

3)解构赋值

3-1解构赋值

// 1
const course = {
name:'es6',
price:500,
teacher:{
name2:'cy',
age:89,
},
say(){
console.log(this) // this指window
console.log('名字');
}
}
/*传统的做法:
var name = course.name
var price =course.price
course.say()
*/
/*const {name2, price} = course
默认情况name,price必须是JSONKey.
console.log(name2) //结果:undefined */
const {name, price, teacher:{name2, age}, say} = course
console.log(name, price, name2, age)
say() // 2
const course = {
name:'es6',
price:500,
teacher:{
name:'cy',
age:89,
}
}
// courseName:为别名,可以用冒号取别名
const {name:courseName, price, teacher:{name, age}} = course
console.log(courseName, price, name, age) // 3
const arr = ['es6', 'es7', 'es8']
const [a, b, c] = arr
console.log(a, b, c)

3-2准确的使用解构赋值

  • 函数参数
  • 函数返回值
  • 变量互换
  • JSON应用
  • Ajax请求应用
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js"></script>
<script>
// 1.作为函数的形式参数使用
/*const sum = arr =>{
let res = 0
for(let i = 0; i < arr.length; i++){
res += arr[i]
}
console.log(res)
}
sum([1, 2, 3]) const sum = ([a, b, c]) =>{
console.log(a + b + c)
}
sum([1, 2, 3]) */ const foo = ({name, age, school='默认值,传值则改'}) => {
console.log(name, age, school)
}
foo({
name:'张三',
age:20
}) // 2.作为函数的返回值使用
const foo = () => {
return {
name:'cy',
age:20
}
}
const {name, age} = foo() // 3.两个变量的值互换
let a = 1
let b = 2
[b, a] = [a, b]
console.log(a, b) // 结果:2 1 // 4.JSON应用
const json = '{"name":"es","price":"500"}'
/*const obj = JSON.parse(json)
console.log(obj) // {name:"es", price:"500"} */
const {name, price} = JSON.parse(json)
console.log(name, price) // 5.Ajax请求应用
/*axios.get('./data.json').then(function(res){
console.log(res)
})*/
axios.get('./data.json').then(res => {
console.log(res.data)
})
// axios.get('./data.json').then(res => {console.log(res.data)})相当于
axios.get('./data.json').then(({data}) => {
console.log(data)
})
axios.get('./data.json').then(({data:{name, type}}) => {
console.log(name, type)
})
</script>

4)模板字符串

const name = 'itcast'
console.log(`hello ${name}`)

5)对象简写

如果一个对象中的key和value的名字一样的情况下可以定义成一个。

function person(name, age) {
// return {name:name,age:age};
// 对象简写
return {name, age};
};
// 调用和执行
var json = person("小花花美美", 20);
console.log(json.name, json.age);
//========= 实战应用 =============
//<button onclick="login()">登录</button>
function login() {
var username = $("#username").val();
var password = $("#password").val();
// 发送ajax
$.ajax({
type: "post",
// 对象简写
data: {username, password},
// 原始写分
//data:{username:username,password:password},
success() {
}
});
}

6)传播操作符【...】

把一个对象的属性传播到另外一个对象中

// ==== ... 对象融合====
var person1 = {
name: '小飞飞',
age: 16,
};
var person2 = {
...person1,
gender:1,
tel:13478900
};
console.log(person2);
// ==== ... 对象取值====
var person3 = {
name:"李四",
gender:1,
tel:"11111",
address:'广州'
};
// ...person4 把剩下没取走给我
var {name,gender,...person4} = person3
console.log(name)
console.log(age)
console.log(person4) // 模拟后台:异步查询返回用户数据
function findUsers(){
$.get("xxxxx",function(res){
var res = {
pages:11,
pageSize:10,
pageNo:1,
firstFlag:true,
lastFlag:false,
total:123,
data:[{},{},{},{}],
};
// ... 对象取值
var {data:users,...pagesjon} = res;
// 等价于
/* var users = res.data;
var pagesjon = {
res = {
pages:11,
pageSize:10,
pageNo:1,
firstFlag:true,
lastFlag:false,
total:123,
}; */
})
}

7)数组map和reduce方法

map

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组

let arr = ['1', '20', '-5', '3'];
var newarr = arr.map(value => {
return parseInt(value) * 2;
});
console.log("原数组:" + arr)
console.log("new数组:" + newarr)

reduce

reduce(function()(必须),初始值(可选) )

  • 第一个参数是上一次reduce处理的结果
  • 第二个参数是数组中要处理的下一个元素

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

let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = arr2.reduce((a, b) => a + b);
console.log(result);

带你快速入坑ES6的更多相关文章

  1. Python这么强大, 怎样才能快速入坑?

    作为一种年轻的编程语言,Python为何能在短短几年的时间内就以迅雷不及掩耳之势驰骋编程界?答案很简单,在人工智能时代,AlphaGo 都在使用的 Python语言,是最接近 AI 的编程语言. 随着 ...

  2. A short Glimpse to Spectral Sequences 快速入坑谱序列(英文)

    In this short paper with a few of page (but a lot of language mistake), I want to introduce the theo ...

  3. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  4. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  5. 1-STM32带你入坑系列(STM32介绍)

    由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车 ...

  6. webpack入坑之旅(四)扬帆起航

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  7. vue2.x入坑总结—回顾对比angularJS/React的一统

    从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https:// ...

  8. web前端入坑第二篇:web前端到底怎么学?干货资料! 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  9. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  10. cozmo 入坑日记及开发环境搭建

    前几日,朋友在群里发了一个机器人的小视频,视频里机器人可以对话,可以推箱子,开心以后会哈哈大笑,非常有趣. 详细了解里一下,这是个叫 cozmo 的智能机器人,可以配合 SDK 用 python 编程 ...

随机推荐

  1. 【Unity3D】IK动画

    1 IK简介 ​ 2D动画.人体模型及动画.人物跟随鼠标位置中介绍了 Aniamtion.Animator.人体模型.人体骨骼.人体动画等基础知识及人体动画的应用,本文将进一步介绍 IK 动画. ​ ...

  2. 红胖子(红模仿)的博文大全:开发技术集合大版本更新v4.0.0

    <红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术.树莓派.三维.OpenCV.OpenGL.ffmpeg.OSG.单片机.软硬结合等等)持续更新中...>大版本更新,更新后版本 ...

  3. dataclass装饰器

    简介 根据定义dataclass时指"一个带有默认值的可变的namedtuple" 简单来说,就是你定义一个很普通的类,@dataclass装饰器可以 帮你生成__repr__._ ...

  4. 【LeetCode链表#10】删除链表中倒数第n个节点(双指针)

    删除链表倒数第N个节点 力扣题目链接(opens new window) 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 进阶:你能尝试使用一趟扫描实现吗? 示例 1: 输入:he ...

  5. 【Azure 云服务】指标哪去了?在执行 Swap (交换生产部署和Staging部署) 操作后看不见云服务的旧指标

    问题描述 打开云服务(Cloud Service)的Metrics页面,发现过去了指标不见了? 以虚点构成无数据的图表. 问题解答 查看云服务的活动日志(Activity Logs),发现最近执行的操 ...

  6. 【Azure Redis 缓存】Redis的监控方式? 是否有API接口调用来获取监控值

    问题描述 对于PaaS的Azure Cache for Redis,Azure中有哪些监控方式?是否能有api接口调用来获取监控值? 问题答案 1) 在Redis的门户中,使用Metrics查看Red ...

  7.  liunx上安装django ,启动uwsgi ,语音播报python实现过程

    由于需要做一个语音播报实现,用到的技术是python  ,需要事先搭环境,安装uwsgi  djagno环境,以下内容为百度上找到的好一点的内容,确实照着做成功了,转载一下,下次更好找资料 liunx ...

  8. JS3-高级事件

    获取事件和处理事件的第二种方式:事件监听 如何获取和处理鼠标与键盘的基本事件? 事件监听方式 eventTarget.addEventListener(type,listener[,useCaptur ...

  9. STM32 LwIP学习过程问题总结(一):LwIP ping不通,抓包发现ICMP校验和为0x0000

    一.问题 今天在将之前的STM32 LwIP1.4.1版本程序移植到2.1.2版本上时,发现ping不同,但是开发板有ICMP回复包,黄颜色警告checksum为0x0000.说明LwIP移植应该是没 ...

  10. Android CheckBox控件去除图标 样式改造

    有个UI需要实现下面这种效果,但我之前是使用的CheckBox,本着能改就改的原则,还是把CheckBox改造一份,终于是实现了图中的效果 过程 1.去除CheckBox的左侧图标 CheckBox默 ...