《廖雪峰JavaScript-快速入门》笔记

caozhijian 发布于2019-08-23 16:54 / 1269人阅读

摘要：文章内容来源廖雪峰快速入门赋值注释数据类型不区分整数和浮点数，统一用表示。条件判断使用来进行条件判断。最新的规范引入了新的数据类型，是一组键值对的结构，具有极快的查找速度。一个数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

文章内容来源：廖雪峰JavaScript-快速入门

赋值

var x = 1;

注释

// comment
/* comment */

数据类型 Number

JavaScript不区分整数和浮点数，统一用Number表示。

123;
0.456;
1.2345e3;
NaN;
Infinity;

字符串

字符串是以单引号"或双引号"括起来的任意文本。

"Hello ";
"World!";

布尔

一个布尔值只有true、false两种值。

数组

JavaScript的数组可以包括任意数据类型。

[1, 2, 3.14, "Hello", null, true];

对象

JavaScript的对象是一组由键-值组成的无序集合，对象的键都是字符串类型，值可以是任意数据类型。

var mi = {
  name: "YuMi",
  age: 22
}

要获取一个对象的属性，我们用对象变量.属性名的方式：

mi.name;
mi.age;

变量名

变量名是大小写英文、数字、$和_的组合，且不能用数字开头。

条件判断

JavaScript使用if () { ... } else { ... }来进行条件判断。

循环 for

for(var i = 0; i < arr.length; i++) {
  x = arr[i];
  console.log(x);
}

for...in

for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：

var mi = {
  name: "YuMi",
  age: 22
};
for (var key in mi) {
  console.log(key); // "name", "age", ...
}

要过滤掉对象继承的属性，用hasOwnProperty()来实现。

var mi = {
    name: "YuMi",
    age: 22
};
for (var key in mi) {
  if(mi.hasOwnProperty(key)) {
    console.log(key); // "name", "age"
  }
}

for ... in循环可以直接循环出Array的索引。

var a = ["A", "B", "C"];
for (var i in a) {
  // 得到的 i 是 String 而不是 Number 。
  console.log(i); // "0", "1", "2"
  console.log(a[i]); // "A", "B", "C"
}

while/do...while

略。

Map/Set Map

最新的ES6规范引入了新的数据类型Map，Map是一组键值对的结构，具有极快的查找速度。

初始化Map需要一个二维数组：

var m = new Map([["Michael", 95], ["Bob", 75], ["Tracy", 85]]);
m.get("Michael"); // 95

或者直接初始化一个空Map：

var m = new Map(); // 空Map
m.set("Adam", 67); // 添加新的key-value
m.set("Bob", 59);
m.has("Adam"); // 是否存在key "Adam": true
m.get("Adam"); // 67
m.delete("Adam"); // 删除key "Adam"
m.get("Adam"); // undefined

多次对一个key放入value，后面的值会把前面的值冲掉。

Set

Set和Map类似，也是一组key的集合，但不存储value。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
s2.add(4);
s2.delete(3);

iterable

为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

var a = ["A", "B", "C"];
a.name = "Hello";
for (var x in a) {
    console.log(x); // "0", "1", "2", "name"
}

for ... of循环则完全修复了这些问题，它只循环集合本身的元素：

var a = ["A", "B", "C"];
a.name = "Hello";
for (var x of a) {
    console.log(x); // "A", "B", "C"
}

更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数：

var a = ["A", "B", "C"];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ", index = " + index);
});

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(["A", "B", "C"]);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Map的回调函数参数依次为value、key和map本身：

var m = new Map([[1, "x"], [2, "y"], [3, "z"]]);
m.forEach(function (value, key, map) {
    console.log(value);
});

个人静态博客：

气泡的前端日记： https://rheabubbles.github.io

服务器托管私有云廖雪峰廖雪峰python python廖雪峰 python 廖雪峰

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103497.html

Python初学者的资源总结

摘要：图文教程教程廖雪峰的编程教室微信公众号快速教程零基础学，地址老齐学习笔记第二版个人点评我是跟着的编程教室的微信公众号每天学习一课来学习的，当时的动力是据说女神也在学完习，后来也看过廖雪峰老师的教程，和老齐的没有看过。之前看到了汪汪汪不是我的语言在喵在野的基础上写的这篇文章《Python 零基础入门资料整理（更新版）》，感觉实在是太简陋了。虽说是针对初学者的Python零基础入...

AJie 2019-07-24 17:57 评论0 收藏0
PHPer书单

摘要：想提升自己，还得多看书多看书多看书下面是我收集到的一些程序员应该看得书单及在线教程，自己也没有全部看完。共勉吧当然，如果你有好的书想分享给大家的或者觉得书单不合理，可以去通过进行提交。讲师温铭，软件基金会主席，最佳实践作者。想提升自己，还得多看书！多看书！多看书！下面是我收集到的一些PHP程序员应该看得书单及在线教程，自己也没有全部看完。共勉吧！当然，如果你有好的书想分享给大家的或者...

jimhs 2019-07-01 12:35 评论0 收藏0
入门级前端开发可能需要的安利列表

摘要：开发篇版本管理工具，无脑的视图操作，功能强大并且支持多账号点我跳转网站篇学习最重要的是经常百度，要始终坚信着你的水平能遇到的坑，别人都帮你踩过了。另外就是开发过程多看文档，很多问题文档都会有相关的解决方案，多看几次就能想到解决方法。 IDE篇程序员最重要的的就是IDE了，一个好的IDE可以帮你省略大量的时间，以及少生很多闷气，下面开始前端的IDE推荐： VSCode 最推荐的IDE...

Flands 2019-08-22 18:28 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0