数组：
var arr = [10, 20, '30', 'xyz'];
arr.length;//num
arr.indexOf(10); //返回引索位置
arr.match(RegEx); //匹配正则返回匹配成功的字符，或者查找某一个指定的值并返回找到的值
PS: 匹配正则时若匹配多个字符时，返回值为一个数组，数组的[0]为匹配文本，后面的是子文本。
arr.slice(0, 3); //截取部分元素组成一个新的数组
[10,20,'30']
arr.push('a','b'); //在末尾加上相应元素
arr.find(); //在数组中查找第一个满足指定测试的值
arr.pop(); //返回最后一个元素并删除
arr.unshift('a', 'b');//在头部加上一些元素
arr.shift(); //删掉第一个元素
arr.sort(); //排序，按ascii值小到大，并非数字大小
arr.sort(function (a,b) { return a>b?-1:1; });
// 对数字排序
arr.reverse(); //反转
arr.splice(1, 2); //从指定位置开始删除或添加元素
arr=arr.concat(arr2); //连接两个数组
arr.join(','); //用指定字符连接元素
字符串：
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
//或者var message = `你好, ${name}, 你今年${age}岁了!`;
s.toLowerCase(); //转换为小写
s.toUpperCase(); //转换为大写
s.substring(0,5); //返回指定区间子串
'\' 为转换符-----'I\'m \"OK\"!';
类型转换：
var number='a';
number.charCodeAt(); //97 字符转换为ascii
String.fromCharCode(96); //'a' ascii转换为字符
String(12); //'12' 转换为字符串
Number('12'); // 12 转换为数字
Number('ab');//NaN
var str=[1,2,3];
str.toString(); //"1,2,3" 转换为字符串对象,等价于String(str)
Number((0.8-0.6).toFixed(1)); //0.2
//在js中对于浮点的运算默认精度为循环小数0.8-0.6=0.2000000001；
//要进行转换，toFixed(1)，保留一位小数
对象：
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
xiaoming.hasOwnProperty('name');//对象中是否有某一属性
xiaoming['属性名为变量']=1; //给对象添加一个属性及键值
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
'name' in xiaoming;//------------对象中是否存在某个属性
循环
for...in------------------------循环一个对象所有属性
eg:
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
alert(key); // 'name', 'age', 'city'
}
Map
Map是一组键值对的结构，具有极快的查找速度。
结构为：Map( [ [ key, value], [ key, value],...... [ key, value] ])
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
Map的方法有set---添加、has---存在？、get---获得、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'
m.get('Adam'); // undefined
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
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + '=' + x[1]);
}
forEach方法
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);
});//依次输出'A', 'B', 'C'
注意
- 名字是不固定，但是位置是固定的，如果只关心element，那么给forEach一个参数就可以，如果需要index，那么就要给两个参数，如果需要array，就要给三个，也就是这三个参数的含义是定好的。
函数
arguments——关键字，指向当前函数传入的所有参数，类似Array。
常被用来：
获取参数长度：arguments.length;
获取具体参数：arguments[ i ];
rest参数——接受所有传入参数但在function中没有写出来的参数，类似array。
eg：计算很多参数的和
function sum(...rest){
if( arguments.length===0){
return 0;
}
var sum=0;
for(var i of rest){
sum = sum+i;
}
return sum;
}
高阶函数
map
对数组中每一个元素（字符串、数字、对象）操作
实例
对数组的处理
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
重新格式化数组中的对象
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],
// kvArray is still:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
reduce
这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：
arr = [x1, x2, x3, x4];
arr.reduce(f) = f(f(f(x1, x2), x3), x4)
实例 (求和）
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
reduce的完整句法是 arr.reduce( callback, [ initiaValue])
- 其中callback可接受四个参数（括起来），分别是：
accumulator当前累积值
currentValue是正在处理的当前元素
currentIndex是当前元素的索引
array是被处理的数组。参数的位置是固定的，名称随便取。 - 其中[initiaValue]用做第一个参数的值。如果要reduce之后的返回是一个数组，则要写成‘[]’否则会报错。
filter
与map和reduce结构类似，根据返回值的true/false过滤一些元素
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
sort
排序，简单形式arr.sort();//按ASCII来排序。也可以写出高阶的形式，定义它的排序方法。
实例（降序）
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return 1;
}
if (x > y) {
return -1;
}
return 0;
}); // [20, 10, 2, 1]
jQuery
jQuery是一个被广泛应用的库，将所有功能封装在jQuery这个全局变量中。
$ ===jQuery;
基本选择器
1、id选择器
// 查找<div id="abc">:
var div = $('#abc');
2、按标签查找
var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点
3、类选择器
var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
当一个结点有多个class时
var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// <div class="red green">...</div>
// <div class="blue green red">...</div>
4、按属性查找：
id和class都可以称作属性，除此之外还有其他如name/p等
^——开头
$——结尾
var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
5、组合查找
var emailInput = $('input[name=email]');
// 不会找出<div name="email">，只会选择input中的元素
6、多项选择器
用“，”组合起来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来
层级选择器
如果两个元素之间具有层级关系，可以用空格隔开来表示（从上到下）。
子选择器：如果层级关系是父子关系，则用‘>’来连接
$('ul.lang li');
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
函数
find() //查找某结点的指定子节点
parent() //查找其上层结点
next() //下一个
prev() //上一个
filter() //过滤符合条件的结点
map() //对若干结点进行操作，参见map的用法
first() ;//获取第一个结点
last(); //获取最后一个结点
slice(); //参见js的一些基本用法
可以看看JSON的相关内容，经常会用的
学习网站JSON--W3school
等等等
应用
用jQuery获取结点之后呢？就可以对结点进行操作，如：修改结点内容、更改结点的CSS样式、获取结点信息、操作表单、添加/删除结点等等。
详情可参考廖雪峰的教程
事件
一般用于与用户的交互，事件一般是鼠标或键盘的响应。
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
例如：
a.on('click', function () {
alert('Hello!');
});
//或者
a.click(function(){
……
});
//on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
其他常用事件
submit：当<form>提交时触发
ready：当页面被载入并且DOM树完成初始化后触发，可用来写其他的初始化。
PS: ready事件可直接写
$(function () {
// init...
});
change：当<input> ,<select>, <textarea>的内容改变是触发
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
动画
原理非常简单：我们只需要以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点（例如，高宽各增加10％），看起来就像动画了。
var div = $('#test');
div.hide(3000);//在3秒内消失
div.show('slow'); //在0.6内显示
div.toggle();//根据当前状态决定的英文show()还是hide()。
div.slideUp(3000); // 在3秒钟内逐渐向上消失
div.slideDown(3000); // 在3秒钟内逐渐向上出现
div.fadeOut('slow'); // 在0.6秒内淡出
其他
var a = prompt("......"); //输出“......”，并用a获取需要输入的值
typeof(a); //获取数值类型
apply与call的用法
两者都是为了动态改变this而出现的，区别在于接受参数的方式不同，call需要把参数按顺序传递进去，而apply则是把参数放在数组里传递。
var func = function(arg1, arg2) {
};
func.call(this, arg1, arg2);//
func.apply(this, [arg1, arg2]);
网友评论