JS快速入门
字符串
模板字符串
需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果:
var s = 'Test';
s[0] = 'X';
alert(s); // s仍然为'Test'
数组
pop()
则把Array
的最后一个元素删除掉:
shift()
方法则把Array
的第一个元素删掉:
push()
向Array
的末尾添加若干元素
unshift()往Array
的头部添加若干元素
js中那些方法不改变原来的数组对象
js数组方法 改变原数组和不改变原数组的方法整理
js二维数组
对象
访问属性是通过.
操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用''
括起来:
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
实际上JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型。
delete xiaoming.age; // 删除age属性
delete xiaoming['name']; // 删除name属性
要判断一个属性是否是xiaoming
自身拥有的,而不是继承得到的,可以用hasOwnProperty()
方法:
var xiaoming = {
name: '小明'
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
条件判断
JavaScript把null
、undefined
、0
、NaN
和 '' 视为false
,其他值一概视为true
循环
for
循环的一个变体是for ... in
循环,它可以把一个对象的所有属性依次循环出来:
要过滤掉对象继承的属性,用hasOwnProperty()
来实现:
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}
用do { ... } while()
循环要小心,循环体会至少执行1次,而for
和while
循环则可能一次都不执行。
Map和Set
JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。
为了解决这个问题,最新的ES6规范引入了新的数据类型Map
。
Map
增删改查:set / delete / set / has
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set(123, 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); //
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
Set
增删改查:add / delete / forEach / has
Set是一组不重复key的集合,不存储value。
通过add(key)
方法可以添加元素到Set
中,可以重复添加,但不会有效果:
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {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}
- Array
增删改查:push / splice / forEach / find
- Object
增删改查:obj['t']=1 / delete obj['t'] / obj['t']=2 / 't' in obj
iterable
遍历Array
可以采用下标循环,遍历Map
和Set
就无法使用下标。
为了统一集合类型,ES6标准引入了新的iterable
类型,Array
、Map
和Set
都属于iterable
类型。
for ... of
循环和for ... in
循环有何区别?
for ... in
循环由于历史遗留问题,它遍历的实际上是对象的属性名称。
当我们手动给Array
对象添加了额外的属性后,for ... in
循环将带来意想不到的意外效果:
for ... in
循环将把name
包括在内,但Array
的length
属性却不包括在内。
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
console.log(x); // '0', '1', '2', 'name'
}
for ... of
循环则完全修复了这些问题,这就是为什么要引入新的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);
});
输出:
A, index = 0
B, index = 1
C, index = 2 如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们,例如
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
console.log(element);
});
Set:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element) {
console.log(element);
});
Map:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
输出:
1x
2y
3z
JS快速入门的更多相关文章
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- JS快速入门(二)
目录 JS快速入门(二) 结构图 BOM window对象 open() window子对象 location对象 history对象(了解) navigator 对象 screen对象 BOM 定时 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- JS快速入门(一)
目录 Javascript快速入门(一) 变量的命名规则 变量与常量 变量 常量 数据类型 数值型:Number 字符串:String 常用方法: 布尔类型:Boolean 未定义类型 :Undefi ...
- JavaScript学习02(js快速入门)
快速入门 基本语法 JavaScript的语法和Java的语法类似,每个语句以;结束,语句块用{...}.但是JavaScrip并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代 ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- React JS快速入门教程
翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
随机推荐
- iis和tomcat(整合)
---恢复内容开始--- (一) 为什么要把IIS.Tomcat整合到一起?假如你遇到这种情况,你开发了一个javaweb项目要部署到服务器上,但是这个服务器上已经部署了asp.asp.net ...
- 二叉苹果树|codevs5565|luoguP2015|树形DP|Elena
二叉苹果树 题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1. 我们用一根树枝两端连接的 ...
- 阿里云容器服务与ASP.NET Core部署:用 docker secrets 保存 appsettings.Production.json
这是我们使用阿里云容器服务基于 docker 容器部署 asp.net core 应用遇到的另一个问题 —— 如果将包含敏感信息的应用配置文件 appsettings.Production.json ...
- python中的argv使用
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个“外部”很关键,所以那些试图从代码来说明它作用的解释一直没看明白.因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list), ...
- Vue 超快速学习
Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...
- 请运行TestStaticInitializeBlock.java示例,观察输出结果,总结出“静态初始化块的执行顺序”。
答:执行顺序:静态初始化块->初始化块->构造函数 静态初始化块:在第一次加载类时执行,与对象的创建无关. 构造代码块:在调用构造方法时执行. 构造函数:在调用构造函数时执行.
- express工程的优化和请求参数的处理
1.让工程自动刷新 在Express的默认工程中,ejs, jade等模板的改变会立刻被渲染到浏览器中,但是js的改变不能立即刷新.这时候我们要用到一些自动刷新工具, 如 nodemon, super ...
- Chap4:探究操作系统[The Linux Command Line]
1 learn some more commands: (1) ls-List directory contents (2) file -Determine file type (3) less-Vi ...
- Xcode报错Xcode导入runtime框架函数参数没有提示或Too many arguments to function call, expected 0, have 2错误
前言:在引入<objc/runtime.h> 与 <objc/message.h> 后,调用objc_msgSend(),会报如下错误: 报错原因: 从Xcode6之后,苹果不 ...
- 一种比较简单的实现ping的方式
<span style="font-family: Arial, Helvetica, sans-serif;">头文件</span> <span s ...