Javascript常用知识整理(附与java,python的异同)持续更新ing

说实话,再你熟悉了C C++ java python后再学js,总是会有无数错觉,总觉得它的语法像什么,又不太像。作为动态语言又没python那么简洁,里面很多语法借鉴了c和java的那套,但是又不像c那么严格。js是弱类型语言,而且还是有一些动态语言的灵活性在里面。

题记

如果带着之前学C++/java的思路去学js,总觉得十分别扭,特别是它的object和function,真是让人摸不着头脑。

所以说啊,js真是个磨人的小妖精。要征服这个小妖精还真不是一时半会能实现的,所以,还是慢慢来吧,把征服它的过程都记录一下。

注意:本文是一个本人的总结记录文,并不是一个js教程,请不要抱着《从入门到精通》的思路来看本文。如果你有一定的编程基础,或者正在学习js,这个笔记可能对你有点用。(以下笔记是廖雪峰javascript教程,还有freecodecamp教程笔记)

对了,本文持续更新ing....

6-20更新:

ES6规范中引入了Map和Set

map

  • 创建map
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
  • Map具有以下方法:(set get has delete)
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' 如果删除失败返回false
m.get('Adam'); // undefined

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

set

Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。
要创建一个Set,需要提供一个Array作为输入,或者直接创建一个`空

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3重复元素在Set中自动被过滤:
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字3和字符串'3'是不同的元素。

  • add(key)方法
    可以添加元素到Set中,可以重复添加,但不会有效果:
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}
  • delete(key)方法
    可以删除元素:
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

5-26更新:

字符串转正则eval()

有人可能发现了,js的正则表达式并不是字符串,但是实际使用中,我们经常需要字符串去构造正则表达式,这个时候就可以用eval()去转化。eval()可以用来解析字符串
但是eval是一个很危险的操作,如果非必要,尽量少使用

var test = 'this is a test';
var exp = '/\w/ig';
test.match(eval(exp));

数组的splice函数

array.splice(start, deleteCount[, item1[, item2[, ...]]])

js提供了一个splice函数,用来删除index位置处的deleteCount数目的元素,并且在index处加入item1,2,3……(可以不加入)
这个函数可以用来替换数组内的部分元素

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
// removes 0 elements from index 2, and inserts 'drum'
var removed = myFish.splice(2, 0, 'drum');
// myFish is ['angel', 'clown', 'drum', 'mandarin', 'surgeon']
// removed is [], no elements removed

removed = myFish.splice(3, 1);
// myFish is ['angel', 'clown', 'drum', 'surgeon']
// removed is ['mandarin']

removed = myFish.splice(2, 1, 'trumpet');
// myFish is ['angel', 'clown', 'trumpet', 'surgeon']
// removed is ['drum']

数组的slice函数

arr.slice([begin[, end]])

取出数组的从begin到end的元素,重新组成数组。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);// ['Orange','Lemon']

5-25更新:

字符串的slice()和substr()和substring()

str.slice(beginSlice[, endSlice])
str.substr(start[, length])

str.substring(indexStart[, indexEnd])

都是截断函数,但是有一些区别

  • slice和substr能接负数,代表倒数。substring不行
  • substr第二参数代表长度不是end
  • substring的end如果大于start会自动交换,slice不会,会返回""
  • 三者均支持越界
var str = "example";
console.log(str.slice(-3)); // "ple" 
console.log(str.substr(-3)); // "ple" 
console.log(str.substr(2,4)); // "ampl" 
console.log(str.substring(2,4)); // "am" 
console.log(str.slice(4,2)); // "" 
console.log(str.substring(4,2)); // "am" 
console.log(str.slice(2,-1)); // "ampl" 
console.log(str.substring(0,100)); // "example" 
console.log(str.slice(0,100)); // "example" 
console.log(str.substr(0,100)); // "example" 

for in vs for of (ES6新加)

js中也有for in用法,但是和python有些不一样的地方。

  • js中的for in对数组也是返回的是键,比如“0”,“1”……(而且由于历史遗留问题,'name'也在遍历范围内)
  • python中直接返回的是数组中的值
  • js中的for of和python中的for in才是真实对应的哦~不仅可以用于数组也可以用于字符串

所以for in用在json中的遍历比较合适。
比如说你如果需要遍历数组,你可以使用普通for循环做,也可以用for of

var arr = ["a","b","c","d"];
for(var i = 0;i < arr.length;i++)
{
  console.log(arr[i]);
}
for(var i in arr)
{
 //这里的i是字符串,打印出来可以发现是“0”,“1”,“2”……
  console.log(arr[i]);
}
for(var i of arr)
{
  console.log(i);
}

forEach

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

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

注意,forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。

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

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

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

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

如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Array的element:

var a = ['A', 'B', 'C'];
a.forEach(function (element) { 
alert(element);
});

5-23更新:


语法

目前大多语言都是类C的,js也一样(除了python ruby这些自成一派的)

  • 区分大小写
  • 字符串可以用''或“”和python一样
  • 变量不区分类型,和python一样(python不用写var)
  • 每条语句结尾可以省略分号
  • 注释与C,C++,java,php相同
  • 代码段要封闭与C,C++,java同(和python不一样)
  • 运算符完全和C一致,有自加自减,有逗号表达式,有条件运算符!!(和python不一样)
  • 逻辑运算符,条件,循环语句和C一致(和python不一样)
  • 有switch-case语句(和python不一样)

数组

js的数组和python的list一样可以存不同类型不同维度个数据,除了可以用下标查看修改数据外,还有几个方法:

  • push():加到最后
  • pop(): 从最后取
  • shift(): 从开头取
  • unshift(): 加入开头

构造数组的方式还有如下:(除了特别说明的外,都不改变原数组)

用map创建数组

var oldArray = [1,2,3,4]
var timesFour = oldArray.map(function(val){
  return val * 4;
});

用reduce压缩数组

reduce的第2个参数(初始值)可选,如果没有,就从数组第一个开始

var array = [4,5,6,7,8];
var sum = 0;
sum = array.reduce(function(pre,cur){
    return pre+cur;
},0);

用fliter过滤数组

如果我们只需要数组中小于6的元素


var oldArray = [1,2,3,4,5,6,7,8,9,10];
var newArray = oldArray.fliter(function(val){
  return val < 6;
});

数组排序sort

数组有排序的功能(会改变原数组,并且也会返回),如果不带参数,默认是按字符串排序,如果要改变排序方式,可以在里面增加比较函数,规则如下

  • 负数:a在b前
  • 大于:b在a前

var array = [1, 12, 21, 2];
//降序排序
array.sort(function(a,b){
   return  b-a;
});
//升序排序
array.sort(function(a,b){
   return  a-b;
});

逆转数组reverse

改变原数组

var array = [1,2,3,4,5,6,7];
array.reverse();

数组拼接concat

var oldArray = [1,2,3];
var newArray = [];
var concatMe = [4,5,6];
newArray = oldArray.concat(concatMe);

字符串和数组转换

  • 用split切割字符串

var string = "Split me into an array";
var array = [];
array = string.split(' ');
  • 用joint把数组拼接成字符串
var joinMe = ["Split","me","into","an","array"];
var joinedString = '';
joinedString = joinMe.join(' ');

范围

在function之外的是全局变量,否则是局部变量
注意:如果没加var 默认是全局变量!

// Declare your variable here
var myGlobal= 10;

function fun1() {
  // Assign 5 to oopsGlobal Here
  oopsGlobal = 5;
}

// Only change code above this line
function fun2() {
  var output = "";
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }
  console.log(output);
}

输出

console.log()

严格相等

严格相等(===)不仅比较值,还比较类型

因为在js中,7 == “7”


undefined

js中有undefined,当一个变量没定义的时候,可以用下面方法判断

if(typeof(value)=="undefined"){

alert("undefined");

} 

number

JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型:

123; // 整数
1230.456; // 浮点数
0.4561.2345e3; // 科学计数法表示
1.2345x1000,等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity

注意NaN
这个特殊的Number与所有其他值都不相等,包括它自己:

 NaN === NaN; // false

唯一能判断NaN
的方法是通过isNaN()函数:
isNaN(NaN); // true


随机数

js中的随机数是用Math.random()生成的,同样,也是返回(0,1),如果要某个范围,可以用下面的方法

    Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;

正则

js的正则是用的//,很庆辛的发现和vim很像,比如查找"in"可以用下面的正则:

    var testString = "How many non-space characters are there in this sentence?";   
    var expression = /in/gi;  
    var incount= testString.match(expression).length;

“/ /”包含的是正则内容

g 是全局

i 表示忽略大小写

正则表达式都差不多,基本和python一致
除了 * . +
\d表示数字
\D表示非数字
\s表示空格
\S表示非空格
\w表示字符[0-9a-zA-Z_](特别注意有个_)
\W表示非字符


Object 和 json

js中的object数据结构就类似其他语言中的map,hashmap,是一个键值对应的结构。javascript Object notation(JSON)其实也就是指在js中使用的这种数据交换的类型。

访问的方式一般有两种

  • "." 如果是单纯的数字或者没空格的字符串,可以用
  • "[]" 带空格的就要用"[]"了。

举例:

var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};
var name = ourDog.name;  
name = ourDog["name"];
var prop= "name";
name = ourDog[prop];

`
你可以用Array或object嵌套

    var myStorage = {
      "car": {
        "inside": {
          "glove box": ["maps","phone"],
          "passenger seat": "crumbs"
         },
        "outside": {
          "trunk": "jack"
        }
      }
    };
    
    // get maps

    var gloveBoxContents = myStorage.car.inside["glove box"][0]; 

如果要删除一个属性,用delete

    delete ourDog.tails;

如果增加属性,直接使用"."和"[]"就好了,和python差不多

如果要看某个属性存在不存在 hasOwnProperty():

    myObj.hasOwnProperty("top");

由于object的属性和map很像,因此你可以用它来做查表操作:

    var alpha = {
      1:"Z",
      2:"Y",
      3:"X",
      4:"W",
      ...
      24:"C",
      25:"B",
      26:"A"
    };
    alpha[2]; // "Y"
    alpha[24]; // "C"

面向对象

js的面向对象可能是最“直观”而又诡异的。

js可以直接用之前说的方式直接声明一个Object对象

    var car = {
      "wheels":4,
      "engines":1,
      "seats":5
    };

也可以用构造函数的方法:

    var Car = function() {
      this.wheels = 4;
      this.engines = 1;
      this.seats = 1;
    };

创建实例直接用new就行了,然后创建的实例可以直接添加新的属性。

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 1;
};

var myCar = new Car();
myCar.nickname = "coolcar";

私有变量,还记得var吗?如果在类中用var就是局部变量了,也就意味着是私有变量了。如果不使用var,在js中默认是全局变量

    var Car = function() {
      // this is a private variable
      var speed = 10;
    
      // these are public methods
      this.accelerate = function(change) {
        speed += change;
      };
    
      this.decelerate = function() {
        speed -= 5;
      };
    
      this.getSpeed = function() {
        return speed;
      };
    };

为了避免大家因为忘记使用var而导致变量变成全局的这一缺陷,所有的JavaScript代码都应该使用strict模式。我们在后面编写的JavaScript代码将全部采用strict模式。就是在所有的js程序前加上

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

推荐阅读更多精彩内容