JavaScript笔记


数组:

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选择器

// 查找
: var div = $('#abc');

2、按标签查找

var ps = $('p'); // 返回所有

节点 ps.length; // 数一数页面有多少个

节点

3、类选择器

var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// 
...
//

...

当一个结点有多个class时

var a = $('.red.green'); // 注意没有空格!
// 符合条件的节点:
// 
...
//
...

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]'); 
// 不会找出
,只会选择input中的元素

6、多项选择器
用“,”组合起来

$('p.red,p.green'); // 把

都选出来

层级选择器
如果两个元素之间具有层级关系,可以用空格隔开来表示(从上到下)。

子选择器:如果层级关系是父子关系,则用‘>’来连接

$('ul.lang li');
$('ul.lang>li.lang-javascript'); // 可以选出[
  • JavaScript
  • ]

    函数
    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上,通常是