JavaScript

快速入门

基本语法

语法

Point Example
; var x=1;
'' 'Hello world!'
"" "Hello world!"
// //这是注释
alert alert('Hi')

数据类型和变量

Number

字符串

'' ''''

布尔值

&&
||
!

比较运算符

== ===
isNaN()

null和undefined

数组

[1,2,3,'a']
new array(1,2,3)

对象

变量

strict模式

'use strict';

字符串

多行字符串

``

模板字符串

需要使用``
${}

操作字符串

var s='Hello world!';
s.length;
s[0];
字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果
s.toUpperCase();
s.toLowerCase();
s.indexOf('world');
s.substring(0,5);//from 0 to 5(not included)

数组

var arr=[1,2,3.14,'Hello',null,true];
arr.length;

请注意,直接给Array的length赋一个新的值会导致Array大小的变化

Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array

请注意,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化

indexOf

arr.indexOf(2);
arr.indexOf('Hello');

slice

对应String中的substring()版本
arr.slice(0,3);

push&pop

arr.push('l');
arr.pop();

unshift&shift

arr.unshift('l');
arr.shift();

sort

arr.sort();

reverse

arr.reverse();

splice

splice()方法是修改Array的万能方法,它可以从指定索引开始删除若干元素,然后再从该位置添加若干元素
arr.splice(2,3,'a','g');
arr.splice(2,3);
arr.splice(2,0,'a','g');

concat

concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array

请注意,concat()方法并没有修改当前Array,而是返回了一个新的Array

实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里

var added=arr.concat([1,2,3]);
var newadded=arr.concat(1,2,[3,4]);

join

join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串

var arr=[1,2,3];
arr.join('-');//'1-2-3'

多维数组

var arr=[[1,2,3],[1,2],3];

上述Array包含3个元素,其中头两个元素本身也是Array

对象

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。
var xiaoming={
name:'xiaoming'
};
xiaoming.name;
xiaoming.age=18;
delete xiaoming.age;
delete xiaoming['name'];
xiaoming.name='xiaoming';

如果我们要检测xiaoming是否拥有某一属性,可以用in操作符
'name' in xiaoming;
'age' in xiaoming;

判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法
xiaoming.hasOwnProperty('name');
xiaoming.hasOwnProperty('age');

条件判断

if ... else ...

if else

循环

for循环

var i;
for (i=1;i<10000;i++)
{
...
}

for ... in ...

var o={
name:'Jack',
age:20,
city:'Beijing'
};
for (var key in o) {
...
}

请注意,for ... in对Array的循环得到的是String而不是Number。

while

do ... while

Map&Set

Map

var m=new Map([['Michael',95],['Bob',75],['Tracy',85]]);

Map方法 Example
set m.set('Adam',67);
has m.has('Adam');
get m.get('Adam');
delete m.delete('Adam');

Set

var s=new Set([1,2,3]);
s.add(4);
s.delete(4);

iterable

for ... of ...

你可能会有疑问,for ... of循环和for ... in循环有何区别?

for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称

一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性

当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果

for ... in循环将把name包括在内,但Array的length属性却不包括在内。

for ... of循环则完全修复了这些问题,它只循环集合本身的元素
这就是为什么要引入新的for ... of循环

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

Set:
s.forEach(function (element,sameElement,set) {
console.log(element);
});

Map:
m.forEach(function (value,key,map) {
console.log(value);
});

Array:
a.forEach(function (element) {
console.log(element);
});


From liaoxuefeng

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,233评论 6 495
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,357评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,831评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,313评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,417评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,470评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,482评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,265评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,708评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,997评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,176评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,503评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,150评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,391评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,034评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,063评论 2 352

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,145评论 0 13
  • 基础入门 1、基本语法(注意:js严格区分大小写) 定义变量(字符串尽量使用单引号) 赋值 判断语句 循环语句 注...
    httIsHere阅读 293评论 0 0
  • 注:本文所有知识点总结或摘抄自廖雪峰javascript教程,点击查看更详细的讲解。 1.javascript简介...
    hanyuntao阅读 524评论 0 13
  • 1. 本文是在学习廖雪峰先生的JavaScrip教程 后的归纳 2. 本文是第一次采用markdown进行书写 J...
    ting723阅读 729评论 0 5
  • 前言:最近在前端这块,发现自己生疏了,连最基本的js都忘的差不多了。于是趁着周末,参考了廖雪峰老师的JS教程以及自...
    SkyLine7阅读 621评论 0 2