发表更新learning5 分钟读完 (大约749个字)

变量的解构赋值

解构赋值语法是一种 JavaScript 表达式。通过解构赋值，可以将属性值从对象/数组中取出，赋值给其他变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
// 解构数组
var foo = ["one", "two", "three"];

var [one, two, three] = foo;
console.log(one); //'one'
console.log(two); //'two'
console.log(three); // 'three'

var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 默认值

var a, b;
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

// 交换变量

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

// 解析一个从函数返回的数组

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

// 忽略某些值

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

// 将剩余数组赋值给一个变量

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2,3]

// 用正则表达式匹配提取值

function parseProtocol(url) {
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

  var [, protocol, fullhost, fullpath] = parsedURL;
  return fullhost;
}

console.log(
  parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"); // "https"
);

// 解构对象

var o = {p:42,q:true};
var {p,q} = o;

console.log(p); // 42
console.log(q); // true

// 无声明赋值

var a,b;
({a,b} = {a : 1,b : 2})

// 给新的变量名赋值

var o = {p:42,q:true};
var {p:foo,q:bar} = o;

console.log(foo); // 42
console.log(bar); // true

// 默认值

var {a = 10,b = 5} = {a : 3};
console.log(a);
console.log(b);

// 解构嵌套对象和数组

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

// For of 迭代和解构

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
  // "Name: Mike Smith, Father: Harry Smith"
  // "Name: Tom Jones, Father: Richard Jones"
}

// 从作为函数实参的对象中提取数据

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

以上是我对下列视频及文章的归纳和总结。
ES6 免费视频教程

参考资料:
MDN 解构赋值
ECMAScript 6 入门-变量解构赋值

相关代码仓库:
ES6

发表更新learning21 分钟读完 (大约3211个字)

新的声明方式

声明方式
var 声明语句声明一个变量，并可选地将其初始化为一个值。

语法：

1
var varname1 = [= value1][, varname2][= value2]...[, varnameN][=valueN];

varname
变量名。变量名可以定义为任何合法标识符。
valueN
变量的初始化值。默认值是 undefined。

描述：
变量声明，无论发生在何处，都在执行任何代码之前进行处理。
用var声明的变量的作用域是它当前的执行上下文。
重新声明一个 JavaScript 变量，它将不会丢失其值。
将赋值给未声明变量的值在执行赋值时将其隐式地创建为全局变量（它将成为全局对象的属性）。

阅读更多
发表更新learning / JavaScript2 分钟读完 (大约336个字)

ES6的开发环境搭建

使用Babel把ES6编译成ES5

  1. 运行以下命令安装软件包

    1
    2
    npm install --save-dev @babel/core @babel/cli @babel/preset-env
    npm install --save @babel/polyfill

  2. 在项目根目录中创建.babelrc文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1",
            },
            "useBuiltIns": "usage",
          }
        ]
      ]
    }

  3. 运行下面命令，将src目录中的所有代码编译到dist
    npx babel src -d dist

以上是我对下列视频及文章的归纳和总结。
ES6 免费视频教程

参考资料:
ES6的开发环境搭建

相关代码仓库:
ES6

发表更新12 分钟读完 (大约1806个字)

关于JavaScript的书籍集合

《JavaScript 高级程序设计》

第 20 章 JSON

JSON 是 JavaScript 的一个严格的子集，利用了 JavaScript 中的一些模式来表示结构化数据。
JSON 是一种数据格式，JSON 并不从属于 JavaScript。而且，并不是只有 JavaScript 才使用 JSON，毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。

语法

JSON 的语法可以表示以下三种类型的值。

  • 简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null。但JSON 不支持 JavaScript 中的特殊值 undefined。
  • 对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。
  • 数组：数组也是一种复杂数据类型，表示的是一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型 ———— 简单值、对象或数组。

JSON 不支持变量、函数或对象实例，它就是一种表示结构化数据的格式，虽然与 JavaScript 中表示数据的某些语法相同，但它并不局限于 JavaScript 的范畴。

简单值

最简单的 JSON 数据形式就是简单值。例如，下面这个值是有效的 JSON 数据：

1
2
5;
"Hello world!";

JavaScript 字符串与 JSON 字符串的最大区别在于，JSON 字符串必须使用双引号（单引号会导致语法）

对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var person = {
    name : "Nicholas",
    age : 29
}

// JSON 中的对象要求给属性加引号，实际上，在 JavaScript 中，前面的对象字面量完全可以写成下面这样：
var person = {
    "name" : "Nicholas",
    "age" : 29
};

// JSON 表示上述对象的方式如下：
{
    "name" : "Nicholas",
    "age" : 29
}

与 JavaScript 的对象字面量相比，JSON 对象有两个地方不一样。

  • 没有声明变量（JSON 中没有变量的概念）。
  • 没有末尾的分号（因为这不是 JavaScript 语句，所以不需要分号）。对象的属性必须加双引号，这在 JSON 中是必须的。

对象中嵌套对象：

1
2
3
4
5
6
7
8
{
    "name" : "Nicholas",
    "age" : 29,
    "school" : {
        "name" : "Merrimack College",
        "location" : "North Andover, MA"
    }
}

《JavaScript语言精粹》

页码3有资源误删

精华

分析 JavaScript

好的想法：函数、弱类型、动态对象和对象字面量表示法。
坏的想法：全局变量。

JSlint、ESLint

语法

注释

书中建议避免使用 /* */ 注释，而用 // 注释代替。
例如：

1
2
3
/*
var rm_a = /a*/.match(s);
*/

对象

语句

JavaScript 可以通过条件语句（if 和 switch），循环语句（while、for 和 do）、强制跳转语句（break、return 和 throw）和函数调用来改变这个执行序列。

函数

继承

数组

正则表达式

方法

代码风格

优美的特性

附录

糟粕

鸡肋

JSLint

语法图

JSON

// 页码 26

《学习JavaScript数据结构与算法》(第3版)

《JavaScript 设计模式》

第一篇 面向对象编程

面向对象编程（Object-oriented programming,oop）是一种程序设计范型。它将对象作为程序的基本单元，将程序和数据封装其中，以提高程序的重用性、灵活性和扩展性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
function checkName(){
  //  验证姓名
}

function checkEmail(){
  //  验证邮箱  
}

function checkPassword(){
  //  验证密码  
}

/*
 *  函数的另一种形式
 *  声明了3个全局变量
 *  互相覆盖不易察觉
 */
var checkName = function (){
  //  验证姓名
}

var checkEmail = function (){
  //  验证邮箱  
}

var checkPassword = function (){
  //  验证密码  
}

/*
 *  存放在一个变量里，减少覆盖风险。
 */
var checkobject = {
  checkName: function(){
    //  验证姓名    
  },
  checkEmail: function(){
    //  验证邮箱  
  },
  checkPassword: function(){
    //  验证密码    
  }
}

/*
 *  JavaScript 中函数也是对象。
 *  无法继承
 */
var checkobject = function(){};
checkobject.checkName = function(){
  //  验证姓名    
}
checkobject.checkEmail = function(){
  //  验证邮箱  
},
checkobject.checkPassword = function(){
  //  验证密码    
}

/*
 *  返回新的对象 使用互不影响
 */
var checkobject = function (){
    return {
      checkName: function(){
        //  验证姓名    
      },
      checkEmail: function(){
        //  验证邮箱  
      },
      checkPassword: function(){
        //  验证密码    
      }
    }
}
var a = checkobject();
a.checkEmail()

/*
 *  这样做造成的消耗是奢侈的  
 */
var ckeckobject = function (){
   this.checkName: function(){
     //  验证姓名    
   },
   this.checkEmail: function(){
     //  验证邮箱  
   },
   this.checkPassword: function(){
     //  验证密码    
   }
}
var a = new ckeckobject();
a.checkEmail();

/*
 *  这样创建对象实例的时候，创建出来的对象所拥有的方法就都是一个了。因为它们都要依赖 prototype 原型依次寻找，而
 *  找到的方法都是同一个，它们都绑定在 checkObject 对象类的原型上。
 *  这种方式要将 prototype 写很多遍。
 */
var checkobject = function (){}
checkobject.prototype.checkName: function(){
  //  验证姓名    
}
ckeckobject.prototype.checkEmail: function(){
  //  验证邮箱  
}
ckeckobject.prototype.checkPassword: function(){
  //  验证密码    
}


/*
 *  这两种方式不能混着用，如在后面为对象的原型赋值新对象时，那么它将会覆盖掉之前 prototype 对象赋值的方法  
 */
var checkobject = function (){}
checkobject.prototype={
  checkName: function(){
    //  验证姓名    
  },
  checkEmail: function(){
    //  验证邮箱  
  }, 
  checkPassword: function(){
    //  验证密码    
  }
}
var a = new checkobject();
a.checkName();
a.checkEmail();
a.checkPassword();

/*
 *  避免 a 书写 3遍
 *  那么就要在声明的每个方法末尾处将当前对象返回，在 JavaScript 中 this 指向的就是当前对象，所以你可以将它返回。
 */
var checkobject = {
  checkName: function(){
    //  验证姓名
    return this;
  }
  checkEmail: function(){
    //  验证邮箱
    return this;
  }
  checkPassword: function(){
    //  验证密码
    return this;
  }
}
checkobject.checkName().checkEmail().checkPassword();

var checkobject = function (){}
checkobject.prototype = {
  checkName: function(){
    //  验证姓名
    return this;
  },
  checkEmail: function(){
    //  验证邮箱  
    return this;  
  }, 
  checkPassword: function(){
    //  验证密码
    return this;  
  }
}
var a = new checkobject()
a.checkName.checkEmail().checkPassword();

prototype.js：最大的特点是对原生对象的扩展。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 抽象出一个统一添加方法的功能方法
Function.prototype.addMethod = function (name,fn) {
    this[name] = fn;
    return this;
}

var methods = new Function(); // 或者 var methods = function(){}
methods.addMethod('checkName', function(){ // this 指向 methods 为自身添加方法
// 验证姓名
})；
methods.addMethod('checkEmail', function(){
// 验证邮箱
})；

methods.checkName();
methods.checkEmail();

// 链式写法
methods.addMethod('checkName', function(){
  // 验证姓名
  return this；
}).addMethod('checkEmail', function(){
 // 验证邮箱
　 return this;
})；

// 调用方式
methods.checkName().checkEmail()；

// 类的写法
Function.prototype.addMethod = function(name, fn){
　 this.prototype[name] = fn；
}
var Methods = function(){}
Methods.addMethod('checkName',function(){ // this 指向实例对象 为原型添加方法
  // 验证姓名
}).addMethod('checkEmail',function(){
  // 验证邮箱
})

// 调用方式
var m = new Methods();
m.checkEmail()

面向对象编程就是将你的需求抽象成一个对象，然后针对这对象分析其特性（属性）与动作（方法）。这个对象我们称之为类。面向对象编程思想其中有一个特点就是封装。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Book = function(id,bookname,price) {
  this.id = id
  this.bookname = bookname
  this.price = price
}
Book.prototype.display = function(){
  // 展示这本书
}
/*
 * 或者


  Book.prototype = {
    display: function(){
        
    }
  }
*/
// 使用方式
var book = new Book(10,'javascript设计模式',50);
console.log(book.bookname) // javascript设计模式

相关资料

红宝书第四版精读训练营

红宝书第四版精读训练营代码库

学习JavaScript数据结构与算法（第3版）源码

关注我

链接

分类

归档

标签

API1
Ajax2
Android6
Android Studio4
Angular1
App2
Babel1
BrowserSync1
C#1
C++1
CSS6
CSS 库1
Canvas1
Chrome1
Cordova1
DOM1
ES62
ES81
Electron1
Git1
GitHub1
GitLab1
Gitblit1
Github1
Gulp1
H53
HTML2
HTML5 + Specification1
HTTP1
Hybrid1
Hybrid App3
IndexedDB1
Ionic1
JS 库1
JSDoc1
JSON1
Java2
JavaScript15
JavaScript 库1
JavaScript 技巧1
Linux1
MUI1
Nginx1
Node1
Nuxt2
PHP2
PWA2
Promise2
React2
React Native1
SSR2
SVG1
SVN1
Serverless1
Session1
Tensorflow.js1
Uint8Array1
VSCode 插件1
Vant1
VirtualBox1
Vue7
Vue CLI1
Vue Router2
Vue.js1
Vuex2
Web8
Web SQL1
WebSocket1
Webpack1
Weex1
article48
book9
canvas1
centOS1
cookie1
create.js1
css1
eslint1
fetch1
git1
github2
hexo1
html52
http-server1
iOS1
if-else1
jQuery2
job1
json-server2
learning39
liveReload1
liveStyle1
localStorage1
meteor1
momentjs1
mork1
music2
mysql1
nginx1
nuxt.js1
pc1
phpstudy1
pixi.js1
prepare1
promise1
pwa1
python2
qiankun1
realworld1
serve1
socket.io1
socketio1
specialty1
ssr1
summary2
target1
token1
tween.js1
ubuntu1
umi1
uni-app1
uniCloud1
uniapp1
utils9
vlog18
vscode 扩展1
vue3
vue Cli1
vue router1
vuex1
weapp.socket.io1
web1
webgl1
webpack1
work1
一篇汇总1
专栏1
代码审查1
代码库1
低代码开发1
免费视频教程1
入门1
公开课1
函数1
创业1
前端学习路线1
单位1
反编译1
发布-订阅模式1
可视化开发1
命令行工具1
囚徒健身1
团队1
图片格式1
图谱1
学习工具2
学习技巧1
学习方法1
小程序5
工作环境1
工具1
库1
开发者1
开源1
开源项目1
微信小程序5
微前端1
心态1
快应用1
慕课网2
成长1
技巧3
接口2
数据分析1
数据库1
数据结构1
文件预览1
桌面1
注释1
测试1
测试框架1
理财3
理财课程1
直播1
直播公开课1
直播课1
码云1
私活1
科学上网1
算法1
精华1
组件封装1
网站1
网络1
职业1
肌肉完全训练计划1
腾讯云1
节流1
观察者模式1
计算机网络1
请求缓存1
跨域1
软件1
适配1
防抖1
面试5
面试题1
项目2
项目部署1

订阅更新

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

最新文章

×