JS高级-ES6
let/const
变量和常量
不能重复定义
case1
{
//js
var a = 10
a = 20
// es6
let b = 10
b = 30
const c = 10
c = 40 //报错
}
存在块级作用域
case2
{
const obj = {
a: 10
}
obj.b = 20
}
多行字符串/模板变量
case
{
var name = 'susan', age = 18, html = ''
//JS
html += '<div>' +
'<p>' + name + '</p>' +
'<p>' + age + '</p>' +
'</div>'
//ES6
html += `<div>
<p>${name}</p>
<p>${age}</p>
</div>
`
}
解构赋值
case1
{
var obj = {
a: 10,
b: 20
}
// JS
var a = obj.a
var b = obj.b
// ES6
let {a, b} = obj
}
case2
{
function fn(){
return {
a: 10,
b: 20
}
}
let {a, b} = fn()
console.log(a, b)
}
块级作用域
case
{
var arr = [1, 2, 3, 4, 5]
// JS
for(var i = 0; i < arr.length; i++) {}
console.log(i)
// ES6
for (let j = 0; j < arr.length; j++) {}
console.log(j)
}
函数默认参数
case
{
// JS
function fn(a, b) {
if (b==null){
b=0
}
}
// ES6
function fn(a, b=0){}
}
箭头函数
case1
{
var arr = [1, 2, 3, 4, 5]
// JS
var arr1 = arr.map(function(item) {
return item+1
})
console.log(arr1)
// ES6
let arr2 = arr.map(item => item+1)
let arr3 = arr.map((item, index) => {
return item+index
})
console.log(arr2)
console.log(arr3)
}
case2
{
function fn() {
var arr = [1, 2, 3, 4, 5]
console.log('fn: '+this)
arr.map(function(item){
console.log('JS: '+this)
})
arr.map(item=>{
console.log('ES6: '+this)
})
}
fn.call({a:10})
}
分析:第一个this是{a:10},第二个this是window对象,第三个this是{a:10}。
Class
先回顾下JS构造函数
case
{
function MathHandle(x,y){
this.x=x
this.y=y
}
MathHandle.prototype.add=function(){
return this.x+this.y
}
var m = new MathHandle(1,2)
console.log(m.add())
}
然后我们看下class语法
{
class MathHandle {
constructor(x,y){
this.x=x
this.y=y
}
add(){
return this.x+this.y
}
} var m = new MathHandle(1,2)
console.log(m.add())
console.log(typeof MathHandle)
console.log(MathHandle === MathHandle.prototype.constructor)
console.log(m.__proto__ === MathHandle.prototype)
}
上面case我们后面添加了2个console
typeof MathHandle // function
MathHandle === MathHandle.prototype.constructor // true
m.__proto__ === MathHandle.prototype // true
我们可以看出class是语法糖,它的本质还是function
继承
先看下JS的继承如何书写
case
function Animal(name){
this.name = name
this.eat = function(){
console.log(this.name + ' eat')
}
}
function Dog(name){
Animal.call(this, name)
this.bark = function(){
console.log(this.name + ' bark')
}
}
Dog.prototype = new Animal()
var dog = new Dog('hashiqi')
dog.bark()
dog.eat()
ps:原型链继承可以继承构造函数里面以及原型链上的属性和方法,实例化子类的时候没法给父类传值。对象冒充继承,没法继承原型链上的属性和方法。
然后看下es6继承如何实现
{
class Animal{
constructor(name){
this.name=name
}
eat(){
console.log(`${this.name}+ eat`)
}
}
class Dog extends Animal{
constructor(name){
super(name)
this.name=name
}
bark(){
console.log(`${this.name} bark`)
}
}
const dog = new Dog('gou')
dog.bark()
dog.eat()
}
Promise的基本语法
解决Callback Hell
case
{
function loadImg(src, callback, fail) {
var img = document.createElement('img')
img.onload=function(){
callback&&callback(img)
}
img.onerror=function(){
fail()
}
img.src=src
}
var src='https://......jpeg'
loadImg(src, function(){
console.log('success')
}, function(){
console.log('fail')
})
}
case2
{
function loadImg(src) {
const promise = new Promise(function(resolve, reject){
var img = document.createElement('img')
img.onload=function(){
resolve(img)
}
img.onerror=function(){
reject()
}
img.src=src
})
return promise
} var src='https://.....jpeg'
var result = loadImg(src)
result.then(function(img){
console.log('success', img)
}, function(){
console.log('fail')
})
result.then(function(img){
console.log('success', img.height)
})
}
new Promise 并返回promise
有两个函数参数,函数有resolve,reject
成功执行resolve,失败调用reject
then监听结果
模块化
case1
export let A = 123 export function test(){
console.log('test')
}
export class Hello {
test(){
console.log('hello')
}
}
import {A, test, Hello} from './a' console.log(A, test, Hello)
import * as m from './a' console.log(m.A, m.test, m.Hello)
case2
let A = 123 function test(){
console.log('test')
}
class Hello {
test(){
console.log('hello')
}
}
export default{
A,
test,
Hello
}
import m from './a' console.log(m.A, m.test, m.Hello)
注意有无default
JS高级-ES6的更多相关文章
- js高级-面向对象继承
一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...
- JS高级(摘自简书)
JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不 ...
- js高级之函数高级部分
基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- 《JS高级程序设计》笔记 —— 解析查询字符串
今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...
随机推荐
- Win10系列:C#应用控件基础14
ProgressBar控件 有时候用户需要执行比较复杂的任务,等待任务完成需要很长时间,在等待的过程中一般会使用进度条提示当前任务的执行进度,让用户更好的掌握任务的执行状态,例如在下载资源时会显示下载 ...
- css3 二级菜单
<!doctype html><!--<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTM ...
- java将所有的字符串转换为大写或小写
public class DaXie { public static void main(String[] args) { /**将所有的字符串转换成大写或小写字母并打印出来*/ String str ...
- Wampserver 403问题
使用Wampserver 2.4.23做反向代理时报403没有权限:是因为在升级到2.4之后的版本只修改httpd.conf文件不管用 正确步骤如下:1.修改httpd.conf 文件中的Requ ...
- day 07 元组,字典和集合等数据类型介绍
元组:就是一个不可变的列表 1.用途,当我们需要记录多个值,并且没有更改的需求的时候,应该使用元组 2定义方式:使用,在 ( ) 中分隔开多个任意类型的值 注:t=("egg",) ...
- 自动化测试-4.selenium的xpath定位
前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...
- cocos2dx开发之util类&方法——取当前系统时间
返回time_t,即从1970年1月1日至今的秒数 time_t getSysTime(){ time_t currentTime = time(NULL); return currentTime; ...
- 帝国cms自动保存图片
<?=ECMS_ShowEditorVar("newstext",$ecmsfirstpost==1?"":stripSlashes($r[newstex ...
- h5 js判断是安卓还是ios设备,跳转到对应的下载地址
/*ios和安卓跳转 js*/$(function(){ var u = navigator.userAgent; var ua = navigator.userAgent.toLowerCase() ...
- PHP常见错误级别及错误码
数字 常量 说明 1 E_ERROR 致命错误,脚本执行中断,就是脚本中有不可识别的东西出现 举例: Error:Invalid parameters. Invalid parameter name ...