【JavaScript】快速入门

摘抄地址快速入门

No1:

JavaScript严格区分大小写

No2:

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

NaN表示Not a Number,当无法计算结果时用NaN表示

Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity

JavaScript允许对任意数据类型做比较

No3:

要特别注意相等运算符==。JavaScript在设计时,有两种比较运算符:

第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;

第二种是===比较,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。

由于JavaScript这个设计缺陷,不要使用==比较,始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等,包括它自己

No4:

undefined,它表示“未定义”。

No5:

在同一个页面的不同的JavaScript文件中,如果都不用var申明,恰好都使用了变量i,将造成变量i互相影响,产生难以调试的错误结果。

使用var申明的变量则不是全局变量,它的范围被限制在该变量被申明的函数体内(函数的概念将稍后讲解),同名变量在不同的函数体内互不冲突

不用var申明的变量会被视为全局变量,为了避免这一缺陷,所有的JavaScript代码都应该使用strict模式。在strict模式下运行的JavaScript代码,强制通过var申明变量,未使用var申明变量就使用的,将导致运行错误。

No6:

由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示。反引号在键盘的ESC下方,数字键1的左边

No7:

模板字符串

var name = ‘小明‘;
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

No8:

字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果:

No9:

直接给Arraylength赋一个新的值会导致Array大小的变化:

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]
var arr = [‘A‘, ‘B‘, ‘C‘];
arr[1] = 99;
arr; // arr现在变为[‘A‘, 99, ‘C‘]
var arr = [1, 2, 3];
arr[5] = ‘x‘;
arr; // arr变为[1, 2, 3, undefined, undefined, ‘x‘]

No10:

【slice】截取

var arr = [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: [‘A‘, ‘B‘, ‘C‘]
arr.slice(3); // 从索引3开始到结束: [‘D‘, ‘E‘, ‘F‘, ‘G‘]
var arr = [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘];
var aCopy = arr.slice();
aCopy; // [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘]
aCopy === arr; // false

【push】向Array的末尾添加若干元素

【pop】把Array的最后一个元素删除掉

【unshift】往Array的头部添加若干元素

【shift】把Array的第一个元素删掉

【splice】修改array

var arr = [‘Microsoft‘, ‘Apple‘, ‘Yahoo‘, ‘AOL‘, ‘Excite‘, ‘Oracle‘];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, ‘Google‘, ‘Facebook‘); // 返回删除的元素 [‘Yahoo‘, ‘AOL‘, ‘Excite‘]
arr; // [‘Microsoft‘, ‘Apple‘, ‘Google‘, ‘Facebook‘, ‘Oracle‘]
// 只删除,不添加:
arr.splice(2, 2); // [‘Google‘, ‘Facebook‘]
arr; // [‘Microsoft‘, ‘Apple‘, ‘Oracle‘]
// 只添加,不删除:
arr.splice(2, 0, ‘Google‘, ‘Facebook‘); // 返回[],因为没有删除任何元素
arr; // [‘Microsoft‘, ‘Apple‘, ‘Google‘, ‘Facebook‘, ‘Oracle‘]

【concat】把当前的Array和另一个Array连接起来,并返回一个新的Array

var arr = [‘A‘, ‘B‘, ‘C‘];
var added = arr.concat([1, 2, 3]);
added; // [‘A‘, ‘B‘, ‘C‘, 1, 2, 3]
arr; // [‘A‘, ‘B‘, ‘C‘]

【join】把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串

ar arr = [‘A‘, ‘B‘, ‘C‘, 1, 2, 3];
arr.join(‘-‘); // ‘A-B-C-1-2-3‘

No11:

【对象】

var xiaoming = {
    name: ‘小明‘,
    birth: 1990,
    school: ‘No.1 Middle School‘,
    height: 1.70,
    weight: 65,
    score: null
};

访问

xiaoming.name; // ‘小明‘
xiaoming.birth; // 1990

var xiaohong = {
    name: ‘小红‘,
    ‘middle-school‘: ‘No.1 Middle School‘
};

访问

xiaohong[‘middle-school‘]; // ‘No.1 Middle School‘
xiaohong[‘name‘]; // ‘小红‘
xiaohong.name; // ‘小红‘
var xiaoming = {
    name: ‘小明‘
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming[‘name‘]; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

【in】

var xiaoming = {
    name: ‘小明‘,
    birth: 1990,
    school: ‘No.1 Middle School‘,
    height: 1.70,
    weight: 65,
    score: null
};
‘name‘ in xiaoming; // true
‘grade‘ in xiaoming; // false

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

var xiaoming = {
    name: ‘小明‘
};
xiaoming.hasOwnProperty(‘name‘); // true
xiaoming.hasOwnProperty(‘toString‘); // false

No12:

JavaScript把nullundefined0NaN和空字符串‘‘视为false,其他值一概视为true

No13:

【循环】

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

注意:在括号里不要写int i=1,因为js是动态语言,不需要定义变量类型

【for...in】

var o = {
    name: ‘Jack‘,
    age: 20,
    city: ‘Beijing‘
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // ‘name‘, ‘age‘, ‘city‘
    }
}

No14:

【Map】

var m = new Map([[‘Michael‘, 95], [‘Bob‘, 75], [‘Tracy‘, 85]]);
m.get(‘Michael‘); // 95
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

【Set】

var s = new Set([1, 2, 3, 3, ‘3‘]);
s; // Set {1, 2, 3, "3"}
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

No15:

【iterable】

ArrayMapSet都属于iterable类型。

【for...of...】

var a = [‘A‘, ‘B‘, ‘C‘];
var s = new Set([‘A‘, ‘B‘, ‘C‘]);
var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + ‘=‘ + x[1]);
}

for ... of循环和for ... in循环的区别:

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

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

No16:

【forEach()】

var s = new Set([‘A‘, ‘B‘, ‘C‘]);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});
var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
m.forEach(function (value, key, map) {
    console.log(value);
});
var a = [‘A‘, ‘B‘, ‘C‘];
a.forEach(function (element) {
    console.log(element);
});

原文地址:https://www.cnblogs.com/anni-qianqian/p/9291683.html

时间: 2024-10-05 04:43:37

【JavaScript】快速入门的相关文章

Javascript快速入门(上篇)

Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.与1995年,由Netscape公司的Brendan Eich设计实现,其相关标准为ECMAScript,当前的版本为ECMAScript 2016. 其组成

Javascript快速入门(下篇)

Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构如下图所示. XMLHttpRequest对象:这个是Ajax的核心对象,其让Javascript构建的HTTP请求并提交给服务器,这样页面就能以异步方式在后台产生请求,让用户可以继续使用这个页面,而不必等待浏览器刷新或加载新的页面.接下来通过一个表格对XMLHttpRequest对象有个总体的了解

JavaScript快速入门(六)——DOM

概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模

javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup--网页超文本应用程

JavaScript快速入门(五)——表达式运算

赋值运算 赋值运算的形式为左值 = 右值.如果同个表达式中有多个赋值运算,则从右到左运算.例如: a = b = c; // 和下面两行等价 b = c; a = b; 另外一种赋值运算的形式叫做复合赋值运算符,形式为左值 op= 右值,其中op=表示部分运算符和=的结合,a op= b和 a = a op b等价.例如下面两句是等价的: a += b; a = a + b; 其中op可以是下列运算符之一: +,-,*,/,%,<<,>>,>>>,&,|,

3、JavaScript快速入门(2)

函数基础 函数主要用来封装具体的功能代码. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 注意:函数的形参是不用声明使用的. 函数的基本语法是这样的: function functionName(arg0, arg1, ... argN) { statements } 例如: function sayHi(sName, sMessage) { alert("Hello " + sName + sMessage); } 调用函数:

JavaScript快速入门-ECMAScript语句

JavaScript语句(if.for.for in.do...while.while.break.continue.switch) 一.if语句 if (condition) statement1 else statement2 1.if ....else..... if (2>1){ alter("2大于1") } else { alert("2小于1") } 2.if....else if ...else... <script> var a=

JavaScript快速入门-ECMAScript本地对象(Array)

Array对象 Array对象和python里面的list对象一样,是用来存储多个对象值的对象,且方法和属性基本上类似. 一.属性 lenght 二.方法  1.concat()  用于连接两个或多个数组.类似python中的extend方法. arrayObject.concat(arrayX,arrayX,......,arrayX) 2.join()用于把数组中的所有元素放入一个字符串.类似python中的join.'*'.join(a) JavaScript中的join用法: 3.pop

JavaScript快速入门-实战(例子)

1.模拟bootstrap中的模态框 效果图:(点我后,弹出对话框,最下面的内容可以看到,但是有一定的透明度.) 思路分析: 整体分为三层,最底层(点我),中间透明层(实现透明效果),最顶层(最新内容展示) 很明显,三个div就可以实现,正常情况上面2层div隐藏起来,通过点击“点我”后,上面2层div浮现出来,这样就实现了动画效果. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten

2014年辛星解读Javascript之DOM快速入门

在Javascript的知识中,有一个所谓的DOM,即文档对象模型,我们可以通过它来访问HTML文档的元素,当网页被加载的时候,浏览器会去创建DOM,有了这个DOM,我们可以使用Javascript去改变页面中HTML元素和属性,改变CSS样式,能够对页面中的事件作出响应. 首先就是查找一个HTML元素,我们可以通过三种方式来做到,即通过id.标签名和类名,通过id是使用getElementById方法,它是doucument的一个方法,通过标签名则可以使用getElementsByTagNam