javascript注
1、浮点数:
- e表示法(科学计数法-10的指数次幂): let floatNum = 3.12e2; //等于312
- 浮点数的最高精度是17位小数。
- 浮点数计算精度远不如整数,0.15加0.15的和是0.3,但是0.1加0.2的和不是0.3而是0.30000000000000004。
- 因为浮点数的精度问题,所以比较两个浮点数是否相等只能判断差值是否小于某个阈值:Math.abs(a-b) < 0.00001;
2、数值:
- 数值范围:-Infinity(Number.NEGATIVE_INFINITY)到Infinity(Number.POSITIVE_INFINITY)
- NaN:非数值
- isNaN:判断元素是不是不是数字,isNaN('10'); //false,(可以被转换为数值10) isNaN('true'); //false,(可以被转换为数值1)
3、数值转换:
- Number()
- Boolean值,true和false分别被转换为1和0
- null值,返回0
- undefined值,返回NaN
- 数字值,返回数字
- 字符值,包含数字会直接返回数字(忽略前导的0),包含十六进制格式会返回对应的十进制整数,空的会返回0,否则就返回NaN。
- 对象,调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的字符串值。
- parseInt()
- 字符值,包含数字会直接返回数字
- 0开头加数字的,ES3返回八进制对应的十进制数,ES5忽略前导的0,返回十进制数
- 0x开头加数字的,返回十六进制对应的十进制数
- parseFloat():始终都会忽略前导的0,只解析十进制数
4、字符串:
"I\'m ok!"; //如果字符串中含有引号可以用转义字符\
toUpperCase(); //把一个字符串变大写
toLowerCase(); //把一个字符串变小写
indexOf('ww'); //返回‘ww’在字符串里的索引位置
substring(2,5); //返回索引值在2-5之间的子串
5、数组:
var arr = [10, 20, 30, '30'];
arr.indexOf('30'); //搜索指定元素的索引值,返回3
arr.slice(1,2); //截取索引值1-2之间的array元素,返回[20, 30]
arr.push('A', 'B'); //向数组末尾添加若干元素
arr.pop(); //删除数组的最后一个元素
arr.unshift('B'); //向数组头部添加若干元素
arr.shift(); //删除数组的第一个元素
arr.sort(); //对数组进行排序,会直接修改当前数组的元素位置
arr.reverse(); //数组反转
arr.splice(2,3,'H','B'); //从索引2开始删除3个元素,再添加两个元素
arr.concat([1, 2]); //链接两个数组,返回新的数组
arr.join('-'); //数组遍历成字符串,并用指定的‘-’连接起来
6、对象
var jone = {
name: 'Jone',
birth: 1900,
school: 'No.1 Middle School',
height: 1.85,
age: function(){
var y = new Date().getFullYear() - this.birth; //this指向当前对象
return y;
}
};
jone.height; //返回1.85
'name' in jone; //判断对象中是否有某个属性,返回true
'toString' in jone; //该属性是继承得到的,也返回true
jone.hasOwnProperty('toString'); //判断属性是不是自身拥有的,返回false
jone.age();
function getAge(){
var y = new Date().getFullYear() - this.birth;
return y;
}
var jone = {
name: 'Jone',
birth: 1900,
school: 'No.1 Middle School',
height: 1.85,
age: getAge
};
getAge.apply(jone, []); //jone调用getAge方法,参数为空
getAge.call(jone,); //jone调用getAge方法,参数为空
冻结对象jone:一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。
Object.freeze(jone);
7、Map(ES6,一组键值对)
var m = new Map([['Jone', 95], ['Bob', 80]]);
m.get('Bob'); //返回80
m.set('Adam', 88); //添加新的key-value
m.delete('Bob'); //删除key‘Bob’
8、Set(ES6,一组key的集合,没有重复的key)
var s1 = new Set(); //空set
var s2 = new Set([1, 2, 3]);
s2.add(4); //为set添加key‘4’
s2.delete(3); //为set删除key‘3’
9、iterable(ES6)
for ... in循环出来的是属性名,for...of完全修复了这些问题
var a = ['A', 'C', 'D'];
var s = new Set(['A', 'B']);
var m = new Map([[1, 'x'], [2, 'y']]);
for(let x of a){ //遍历
console.log(x);
}
for(let x of s){ //遍历
console.log(x);
}
for(let x of m){ //遍历
console.log(x[0] + '=' + x[1]);
}
forEach是ES5.1标准引入的
//Set没有索引,因此前两个参数都是元素本身,参数可省略
var s = new Set(['1', '2']);
s.forEach(function(element, sameElement, set){
console.log(element);
});
//Map的参数依次为value、key、map本身
var m = new Map([['A', '1'], ['B', '2']]);
m.forEach(function(value, key, map){
console.log(key + '=' + value);
});
10、函数
函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。注意return语句一定不要换行。
function abs(a,b){
console.log(arguments.length); //返回函数参数的个数,返回2
}
...rest参数(ES6):用于返回除了前面参数外的所有参数,只能写在最后
function foo(a, b, ...rest){
console.log(rest);
}
foo(1,2,3,4,5); //返回[3, 4, 5]
11、变量作用域:全局变量和局部变量
- var声明的变量会向上提升
- ES6新的const和let变量都具有块级作用域
- 变量解构:let[x, y, z] = [1, 2, 3];
12、高阶函数
map():按照原始数组元素顺序一次处理元素,不会改变原始数组(参数:当前元素的值,当前元素的索引值,当前元素属于的数组对象)
function pow(x){
return x*x;
}
var arr = [1, 2, 3, 4];
var result = arr.map(pow); //result:[1, 4, 9, 16]
reduce():函数累加器,从左往右计算(参数:初始值,或者计算结束后的返回值,当前元素,当前元素的索引值,当前元素属于的数组对象)
var arr = [1, 3, 5, 7, 9];
arr.reduce(function(x,y){
return x*10+y;
}); //
filter():根据特定条件过滤数组(参数:当前元素的值,当前元素的索引值,当前元素属于的数组对象)
var arr = [1, 2, 4, 6, 7];
var r = arr.filter(function(x){
return x%2 === 0;
}); //[2, 4, 6]
//利用filter去除重复元素
var arr = ['app', 'saa', 'apple', 'app', 'des', 'apple'];
var r = arr.filter(function(ele, index, self){
return self.indexOf(ele) === index;
});
sort():按照指定规则为数组排序
//数字从小到大排序
var arr = [1, 50, 10, 2];
var r = arr.sort(function(x,y){
if(x<y){
return -1;
}else if(x>y){
return 1;
}else{
return 0;
}
});
//字母升序排列
var r = arr.sort(function(x1,y1){
x2 = x1.toUpperCase();
y2 = y1.toUpperCase();
if(x2<y2){
return -1;
}else if(x2>y2){
return 1;
}else{
return 0;
}
});
数组every():检测所有元素是否符合条件,如果都符合就返回true,否则返回false(参数:当前元素的值,当前元素的索引值,当前元素属于的数组对象)
//判断是否所有元素是不是小写
var arr = ['app', 'add', 'brand', 'bed'];
var r = arr.every(function(x){
return x.toLowerCase() === x;
});
数组find():查找符合条件的第一个元素(参数:当前元素的值,当前元素的索引值,当前元素属于的数组对象)
数组findIndex():查找符合条件的第一个元素的索引(参数:当前元素的值,当前元素的索引值,当前元素属于的数组对象)
generator(生成器,ES6):generator可以在执行过程中多次返回
try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}
13、Date对象
var d = new Date();
d; //Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getFullYear(); //
d.getMonth(); //
d.getDate(); //
d.getDay(); //
d.getHours(); //
d.getMinutes(); //
d.getSeconds(); //
d.getMillideconds(); //
d.getTime(); //
14、RegExp正则表达式
\d匹配一个数字;\w匹配一个字母或数字;\s匹配一个空格;.匹配任意字符;*表示任意字符;+表示至少一个字符;?表示0或1个字符;{n}表示n个字符;{n,m}表示n-m个字符。
\d{3,8}; //匹配3-8个数字
要做更精确的匹配,可以用[]表示范围。^表示行的开头;$表示行的结尾。
^\d; //表示必须以数字开头
\d$; //表示必须以数字结尾
[0-9a-zA-Z\_]+; //表示至少由一个数字、字母或者下划线组成的字符串
js有两种正则表达式,一种是通过/正则表达式/写出来,第二种是通过new RegExp('正则表达式')创建出来。
var r1 = /^\d{3,8}\-\d{1,2}$/;
var r2 new RegExp('^\d{3,8}\-\d{1,2}$');
正则表达式分组,()表示要提取的分组。
var r1 = /^(\d{3})-(\d{3,8})$/;
r1.exec('010-123456'); //['010-123456', '010', '123456']
全局匹配g:当我们指定g
标志后,每次运行exec()
,正则表达式本身会更新lastIndex
属性,表示上次匹配到的最后索引(不能使用/^...$/
)
var s = 'JavaScript, VBScript, JScript and ECMAScript';
var re=/[a-zA-Z]+Script/g; // 使用全局匹配:
re.exec(s); // ['JavaScript']
re.lastIndex; // re.exec(s); // ['VBScript']
re.lastIndex; // re.exec(s); // ['JScript']
re.lastIndex; // re.exec(s); // ['ECMAScript']
re.lastIndex; // re.exec(s); // null,直到结束仍没有匹配到
15、面向对象编程
构造函数:
//每个对象都共享hello函数,减少内存
function Student(name){
this.name = name;
}
Student.prototype.hello = function(){
alert('Hello,' + this.name + '!');
}
let l1 = new Student('Joe');
let l2 = new Student('Kitty');
l1.hello === l2.hello; //true
//不推荐,浪费内存
function Student(name){
this.name = name;
this.hello = function(){
alert('Hello,' + this.name + '!');
}
}
let l1 = new Student('Joe');
let l2 = new Student('Kitty');
l1.hello === l2.hello; //false
class:
class student {
constructor(name){
this.name = name;
}
}
//class继承
class Cat extends Student {
constructor(name){
super(name); //用super调用父类的构造方法
} say() { return 'Hello,' + this.name + '!'; } }
16、DOM
更新DOM:innerHTML和textContent
p.innerHTML = '<p>new</p>'; //html代码
P.textContent = 'new'; //纯文字
插入DOM:appendChild和insertBefore
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div> //appendChild
var list = document.getElementById('list');
var js = document.createElement('p');
list.appendChild(js);
//insertBefore
var java = document.getElementById('java ');
liat.insertBefore(js, java);
删除DOM:removeChild
liat.removeChild(java);
classList:
//contains判断是否包含样式
document.getElementById('a').classList.contains('active');
//add新增样式
document.getElementById('a').classList.add('active');
//remove移除样式
document.getElementById('a').classList.remove('active');
//toggle不管类名是否存在,true强制添加类,false强制移除类
document.getElementById('a').classList.toggle('active', true);
document.getElementById('a').classList.toggle('active', false);
//item返回索引值为0的类名
document.getElementById('a').classList.item(0);
//length返回类的个数
document.getElementById('a').classList.length;
17、表单提交
出于安全考虑,提交表单时不传输明文口令,而是MD5
var pwd = document.getElementById('password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = toMD5(pwd.value);
return true;
18、上传文件控件
let f = document.getElementById('text-file-upload');
let filename = f.value;
//判断文件格式
if(!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))){
alert('请上传正确的文件格式!');
return false;
}
上传图片并预览
<div id="image-preview" style="width: 400px; height: 400px; border: 1px solid gray; overflow: hidden;">
<img src="" alt="img" width="400" style="display: none;">
</div>
<input id="image-upload" type="file" accept="image/jpeg,image/jpg,image/gif,image/png">
<script>
let f = document.getElementById('image-upload');
let s = document.getElementById('image-preview').querySelector('img');
f.addEventListener('change',function(){
if(!(f.value)){
alert('没有选择文件');
return false;
}
//获取file信息
let file = f.files[0];
if(file.type !== 'image/jpeg' && file.type !== 'image/jpg' &&file.type !== 'image/gif' &&file.type !== 'image/png'){
alert('不是有效的图片文件');
return false;
} //限制图片格式
if(file.size/1024>2048){
alert('上传图片大小不要超过2M');
return false;
} //限制图片大小
//读取文件
let reader = new FileReader();
reader.onload = function(e){
s.src = e.target.result;
s.style.display = 'block';
};
//以DataURL的形式读取文件
reader.readAsDataURL(file);
});
</script>
19、JSON
JSON.stringify(obj); //对象转换为json串
20、
21、
offsetWidth | 水平方向 width + 左右padding + 左右border-width |
offsetHeight | 垂直方向 height + 上下padding + 上下border-width |
clientWidth | 水平方向 width + 左右padding |
clientHeight | 垂直方向 height + 上下padding |
offsetTop | 获取当前元素到 定位父节点 的top方向的距离 |
offsetLeft | 获取当前元素到 定位父节点 的left方向的距离 |
scrollWidth | 元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth |
scrollHeight | 元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight |
innerWidth | 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏) |
innerHeight | 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏) |
javascript注的更多相关文章
- JavaScript学习笔记之下拉选择框的操作
对于下拉框的操作十分繁多,这几天项目须要就总结一下 一.动态构建option 有时候我们须要动态构建下拉选择框里面的值,这里我们就要用到 var varItem = new Option(" ...
- JavaScript基础知识(概念、常量和变量)
1.JavaScript概念 JavaScript是脚本语言; 编写之后,可以直接运行(缺失了编译的过程) 2.JavaScript发展 LiveScript => JavaScri ...
- JavaScript中对象的属性
在JavaScript中,属性决定了一个对象的状态,本文详细的研究了它们是如何工作的. 属性类型 JavaScript中有三种不同类型的属性:命名数据属性(named data properties) ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Flask框架搭建一个日程表
目录 前言 项目介绍 技术栈 Flask Web开发流程 一.搭建环境 1.1: 创建虚拟环境 1.2: 安装依赖包 1.3: 创建依赖包列表文件 1.4: 测试hello word 二.应用程序开发 ...
- Java学习第六篇:集合类
一.Java集合类框架 Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合:从Java5以后,J ...
- 【Android】怎样写一个JsBridge
JsBridge 简单介绍 Android JsBridge 就是用来在 Android app的原生 java 代码与 javascript 代码中架设通信(调用)桥梁的辅助工具. 原文地址点这里 ...
- JavaScript的一点简介(注:本文诸多观点源于JavaScript高级程序设计,如有侵权,立即删除)
JavaScript是一门最易让人误解的语言,该语言中精华与糟粕并存(可能比一般语言的这个比例要大一些):但“千淘万漉虽辛苦,吹尽黄沙始到金”,层层面纱下是易用灵活.优雅轻灵的内在.很久以前,Java ...
随机推荐
- MySQL的日志系统
一.日志类型 逻辑日志:存储了逻辑SQL修改语句 物理日志:存储了数据被修改的值 二.binlog 1.定义 binlog 是 MySQL 的逻辑日志,也叫二进制日志.归档日志,由 MySQL Ser ...
- 模板 - Prim
Kruskal算法要对边排序,然后打个并查集维护,但是实际上Prim有他好玩的地方,就把Dijkstra的到点的距离从dis[v]:dis[u]+w改成边dis[v]:w. 那肯定是Prim好写一点. ...
- java压缩文件中文名乱码问题
import java.util.zip.ZipEntry; import java.util.zip.ZipOutputStream; 改为 import org.apache.tools.zip. ...
- Java学习路线(完整详细版)
Java学习路线(完整详细版) https://jingyan.baidu.com/article/c1a3101e110864de656deb83.html
- C语言之带有数量可变的宏参数#define
1.定义格式如下 #define PR(...) printf(__VA_ARGS__) ...表示可变参数,__VA_ARGS__的作用是替换省略号的内容. 2.示例 #define ERROR( ...
- 为什么 Android 开发者都应该尝试一下 Anko?
简评: 这里介绍的仅仅是 Anko 中很小的一部分,Kotlin + Anko 真的让 Android 开发简化了不少,用了 Anko 基本就可以告别那些什么 Android 不得不知的代码收集贴了. ...
- 安装mysql的步骤并利用mysql原始密码修改自定义密码
1.给刚下载好的mysql软件tar包,进行解包 命令:tar -xf mysql-5.7.26-1.el7.x86_64.rpm-bundle.tar 然后利用yum装包 命令:yum -y ins ...
- json格式字符串转字典
//json格式字符串转字典+ (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString { if (jsonStr ...
- 一张图明白jenkins和docker作用
可以看出,jenkins充当的是一个自动构建的作用,构建完后自动部署到机器上.如果没有docker,那么就是直接把打包好的jar包直接部署到服务器.现在是把jar包部署到服务器上的docker容器上. ...
- idea 新手入门配置
1.配置新建类时,创建者信息 2.配置svn 1. 在idea中不显示无用的内容,配置如下 .hprof;.iml;.pyc;.pyo;.rbc;.yarb;~;.DS_Store;.git;.hg ...