JS §1.快速入门
2016-12-27 11:24
295 查看
使用JS
嵌入页面 或 引用js文件调试
Chrome F12开发者工具var x = 1; console.log(x);
数据类型
Number、字符串、布尔值运算符
==(自动转换数据类型再比较)===(不会自动转换数据类型)
Q1:使用===比较,不要使用==
Q2:NaN与所有其他值都不相等,包括它自己,只能通过isNaN()判断
isNaN(NaN); // true
Q3:比较浮点数
1 / 3 === (1 - 2 / 3); // false Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
Q4:大多数情况下,用null(空的值);undefined(值未定义)仅在判断函数参数是否传递下有用
Q5:JavaScript把null、undefined、0、NaN和空字符串”视为false,其他值一概视为true
变量
大小写英文、数字、$和_的组合,且不能用数字开头动态语言:变量本身类型不固定
strict模式
一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量。在strict模式下,未使用var申明变量就使用的,将导致运行错误。
启用strict模式:在JavaScript代码的第一行写上:
'use strict';
对象
字符串
1.模板字符串(连接)var name = '小明'; var age = 20; var message1 = '你好, ' + name + ', 你今年' + age + '岁了!'; var message2 = '你好, ${name}, 你今年${age}岁了!'; alert(message2);
2.操作字符串
Q6:字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果
var s = 'Test'; s[0] = 'X'; alert(s); // s仍然为'Test'
var s = 'Hello, world!'; s.length; // 13 s[0]; // 'H' s[13]; // undefined 超出范围的索引不会报错,但一律返回undefined
函数名 | 功能 |
---|---|
toUpperCase() | 把一个字符串全部变为大写 |
toLowerCase() | 把一个字符串全部变为小写 |
indexOf() | 会搜索指定字符串出现的位置 |
substring() | 返回指定索引区间的子串 |
var s = 'hello, world'; s.toUpperCase(); // 返回"HELLO, WORLD" s.toLowerCase(); // 返回"hello, world" s.indexOf('world'); // 返回7 s.indexOf('World'); // 没有找到指定的子串,返回-1 s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello' s.substring(7); // 从索引7开始到结束,返回'world'
Array
(数组:按顺序排列的集合)1.JS的数组可以包括任意数据类型
[1, 2, 3.14, 'Hello', null, true]; new Array(1, 2, 3); // 创建了数组[1, 2, 3]
2.直接给Array的length赋一个新的值会导致Array大小的变化;如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化
var arr = [1, 2, 3]; arr.length; // 3 arr.length = 6; arr; // arr变为[1, 2, 3, undefined × 3] arr[8] = 'x'; arr; // arr变为[1, 2, 3, undefined × 5, "x"]
3.一些函数
函数名 | 功能 |
---|---|
indexOf() | 搜索一个指定的元素的位置 |
slice() | 截取Array的部分元素 |
push() | 向Array的末尾添加若干元素 |
pop() | 把Array的最后一个元素删除掉 |
unshift() | 往Array的头部添加若干元素 |
shift() | 把Array的第一个元素删掉 |
sort() | 对当前Array进行排序 |
reverse() | 反转整个Array的元素 |
splice() | 从指定的索引开始删除若干元素,然后再从该位置添加若干元素 |
concat() | 把当前的Array和另一个Array连接起来 |
join() | 当前Array的每个元素都用指定的字符串连接起来 |
var arr = ['A', 'B', 'C', 1, 2, 3]; arr.join('-'); // 'A-B-C-1-2-3'
Q6:在编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。
对象
(由键-值组成的无序集合)var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', hasCar: true, zipcode: null, 'middle-school': 'No.1 Middle School' };
1.访问属性
person.name; // 'Bob' person['middle-school']; // 'No.1 Middle School' person['name']; // 'Bob' person.home; // undefined
2.添加、删除属性
person.home = "YiZheng"; // 新增一个home属性 person.home; // "YiZheng" delete person.home; // 删除home属性 person.home; // undefined
3.检测是否拥有某一属性:in操作符(可能是继承得到的)/hasOwnProperty()
'name' in person; // true 'grade' in person; // false 'toString' in person; // true person.hasOwnProperty('name'); // true person.hasOwnProperty('toString'); // false
Q7:访问不存在的属性不报错,而是返回undefined;删除一个不存在的school属性也不会报错。
4.遍历(for…in…)
for (var key in person) { if (person.hasOwnProperty(key)) { //用hasOwnProperty() 过滤掉对象继承的属性 alert(key); // 'name', 'age', 'city' } }
数组也是对象
var a = ['A', 'B', 'C']; for (var i in a) { alert(i); // '0', '1', '2' alert(a[i]); // 'A', 'B', 'C' }
Q8:for … in对Array的循环得到的是String而不是Number
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
(一组key的集合,不存储value,key不能重复)初始化、添加、删除
var s1 = new Set(); // 空Set var s2 = new Set([1, 2, 3, 3, '3']); // Set {1, 2, 3, "3"} s2.add(4); //Set {1, 2, 3, "3", 4} s2.delete(3);
iterable类型
(包括Array、Map、Set)ES6新增:Map、Set、for … of循环
遍历集合
法1 for … of循环
ar 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 alert(x); } for (var x of s) { // 遍历Set alert(x); } for (var x of m) { // 遍历Map alert(x[0] + '=' + x[1]); }
法2 使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。
var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert(element); }); var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); m.forEach(function (value, key, map) { alert(value); }); var s = new Set(['A', 'B', 'C']); s.forEach(function (element, sameElement, set) { alert(element); });
相关文章推荐
- Node.js开发指南——第3章安装Node.js快速入门(一)
- Node.js开发指南——第3章安装Node.js快速入门(三) 事件
- Spring MVC 教程,快速入门,深入分析――如何访问到静态的文件,如jpg,js,css?
- Cocos2d-JS 快速入门_01 环境搭建(Mac && Windows集合版)
- js基本操作(基础快速入门篇)
- sencha ext js 6 快速入门(必看)
- Vue.js——60分钟快速入门
- React JS快速入门教程
- React JS快速入门教程
- 新手如何快速入门node.js
- Node.js开发指南——第3章安装Node.js快速入门(四)模块和包
- Node.js快速入门
- YUI介绍以及快速入门 Yahoo的JS框架
- Cocos2d-JS 快速入门_01 环境搭建(Mac && Windows集合版)
- Cocos2d-JS快速入门一
- Node.js开发指南——第3章安装Node.js快速入门(二) 异步式I/O
- 快速入门cocos2d-x jsbinding
- 快速入门cocos2d-x jsbinding
- 夺命雷公狗---微信开发54----微信js-sdk接口开发(1)之快速入门
- KnockoutJs快速入门教程