JavaScript 简记

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 6.2k | 阅读时长 ≈ 10 分钟

对象

对象的创建

1
2
3
4
5
person = {
    name: "xians",
    age: 18,
    sex: 0
}

通过delete删除对象的属性

1
2
delete person.sex
true

给对象添加属性值

1
2
person.ha = ha
"ha"

判断属性值是否在这个对象中

1
2
"age" in person
true

Map Set

map

1
2
3
4
let m = new Map() 
m.set(‘java’,1) // 为Map设置键值对
m.get('java') 1 // 通过键获取值
m.has('java') true // 判断是否有这个键

set: 无序不重复的集合

1
2
3
4
let s = new Set()
set.add(1)
set.delete(1) true
set.has(1) false // 判断是否有这个值

数组

数组的定义

1
2
3
4
5
6
7
8
9
let arr1 = []; //创建一个空数组

let arr2 = [1,3,4]; //创建一个有3个数值的数组，以逗号隔开

let arr3 = ['a', 'b'];  //创建一个包含字符串的数组

console.log(arr3.lenght); //可以通过lenght属性获取字符串的长度

arr.lenght = 0; //可以改变数组中元素的个数

获取数组元素

1
2
3
4
5
6
//格式：数组名[下标]
//功能：获取对应下标的那个值，如果下标不存在，则返回undefined
let arr = ['red', 'green', 'blue'];
console.log(arr[0]); //red
console.log(arr[2]); //blue
console.log(arr[3]); //undefined

遍历数组

1
2
3
for(let i=0; i<arr.length-1; i++){
    //遍历数组元素
}

concat()

用于连接两个或多个数组，返回一个新数组

1
2
3
4
5
6
let a = [1, 2, 3];
let b = a.concat(4,5);

for(let i=0; i<b.length; i++){
	console.log(b[i]);
} //1,2,3,4,5

join()

用于把数组中的所有元素放入一个字符串

1
2
3
4
5
6
let a = [1, 2, 3];
let b = a.join();
let c = a.join('||')；
console.log(a); //1,2,3
console.log(b); //1,2,3
console.log(c); //1||2||3

pop()

返回数组的最后一个元素，并删除

1
2
3
let a = [1, 2, 3];
console.log(a.pop()); //3
console.log(a); //1,2

push()

在数组的尾部添加一个元素，返回更新后数组的长度

1
2
3
4
let a = [1, 2, 3];
console.log(a); //1,2,3
a.push(4);
console.log(a); //1,2,3,4

shift()

返回数组中第一个元素，并删除

1
2
3
let a = [1, 2, 3];
console.log(a.shift()); //1
console.log(a); //2,3

unshift()

在数组的头部添加一个元素

1
2
3
let a = [1, 2, 3];
a.unshift(0);
console.log(a); //0,1,2,3

sort()

对数组排序

1
2
let a = [3,2,5,1,4];
console.log(a.sort()); //1,2,3,4,5

reverse()

颠倒数组中元素的顺序

1
2
3
let a = [1, 2, 3];
b = a.reverse();
console.log(b); //3,2,1

splice()

插入、删除或替换数组的元素

splice 接受三个参数，第一个参数是位置，第二个参数是删除的个数，第三个则是要修改的值(可选参数)

1
2
3
4
5
6
7
let a = [1,2,3,4,5,6,7,8];
a.splice(4) //5,6,7,8
console.log(a) //1,2,3,4
a.splice(1,2) //2,3
console.log(a) //1,4
a.splice(1,1,12)
console.log(a) //1,12

slice()

返回数组中一部分，或者说是一个子数组

1
2
3
let a = [1,2,3,4,5];
let b = a.slice(2,4); //3,4 顾头不顾尾
console.log(b)  // 返回一个新数组

字符串

substring()

1
2
str.substring(1) //从第一个字符截取到最后一个
str.substring(1,3) // 顾头不顾尾

charAt()

返回字符串中的第n个字符，参数为字符串中的下标

1
2
let str = 'hello world';
console.log(str.charAt(1)); //e

concat()

连接字符串

1
2
let str = 'hello';
console.log(str.concat(' world'));

indexOf()

方法可返回某个指定的字符串值在字符串中首次出现的位置

1
2
3
4
let str = 'hello world';
console.log(str.indexOf('w')); //6
console.log(str.indexOf('w', 4)); //6
//可选参数为字符串开始索引的位置

slice()

提取字符串中的子串

1
2
3
let str = 'hello world';
console.log(str.slice(0,5)); //hello
console.log(str.slice(6,-1)); //worl  -1为最后一个字符

split()

将字符串分割成字符串组

1
2
3
4
let str = 'hello';
console.log(str.split('')); // ["h", "e", "l", "l", "o"]
'a|b|c|d|e'.splitd('|'); //['a', 'b', 'c', 'd', 'e']
'a|b|c|d|e'.splitd('|', 3); //['a', 'b', 'c']

iterator

使用for of遍历数组

1
2
3
4
let arr = [3,4,5]
for (let x of arr){
    console.log(x)
}

map 和set 同理

使用for in 遍历数组

1
2
3
4
let arr = [3,4,5]
for (let y in arr){
    console.log(y)
}

函数

定义函数

1
2
3
4
5
6
7
function abs(x){
    // 函数体
}

let abs = function(x){
    // 第二种创建函数的方式
}·

手动抛出异常

1
2
3
4
5
6
7
8
9
10
let abs = function(x) {
    if (typeof x != 'number'){
        throw 'Not a Number'
    }
    if (x >= 0) {
        return x
    } else {
        return -x
    }
}

arguments

将所有传进来的参数设为一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let abs = function(x) {

    console.log("x=>"+ x)
    for (let i = 0; i<arguments.length; i++) {
        console.log(arguments[i])
    }

    if (typeof x != 'number'){
        throw 'Not a Number'
    }
    if (x >= 0) {
        return x
    } else {
        return -x
    }
}

rest

获取除当前已定义的参数

1
2
3
4
5
let a = function(x,y,...rest) {
    console.log(rest)
}

a(123,113,121,2,3,1) //[121, 2, 3, 1]
定义唯一全局变量
1
2
3
4
5
6
var global = {}

global.name = 'xians'
global.add = function(a + b){
    return a + b
}

对象

class关键字定义对象

1
2
3
4
5
6
7
8
9
10
11
12
class Student {

    constructor(name) {
        this.name = name
    }

    hello() {
        console.log("hello")
    }
}

let xians = new Student('xians')

Dom

节点的概念
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
  <html>
  <head>
     <meta charset="utf-8">
      <title>DOM</title>
  </head>
  <body>
      <h2><a href="http://www.baidu.com">javascript DOM</a></h2>
      <p>对HTML元素进行操作，可添加、改变或移除css样式等</p>
      <ul>
          <li>Javascript</li>
          <li>DOM</li>
          <li>CSS</li>
      </ul>
  </body>
  </html>

985719216-58e43a81f2080_articlex.jpg

1
2
3
4
5
元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。
获取节点

  • 通过id获取元素节点

    1
    2
    let  div1 = document.getElementById("d1");
    document.write(div1);

  • 通过标签名称获取元素节点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let  divs = document.getElementsByTagName("div");
     
    for(i=0;i<divs.length;i++){
      alert(divs[i])
    }
    //需要注意的是获得是一个数组

    let  div = document.getElementsByTagName("div")[0];
    //这样可以具体到某一个元素

  • 通过类名获取元素节点

    1
    2
    3
    4
    5
    6
    let  elements= document.getElementsByClassName("d");
     
    for(i=0;i<elements.length;i++){
        alert(divs[i])
    }
    //这里也是一个数组

  • 通过css选择器获取元素节点

    1
    2
    3
    4
     let jq = document.querySelector('.div');

     let jq = document.querySelectorAll('div');
    //匹配所有div元素
推荐阅读

节点详解

深入浅出

插入节点
1
2
3
4
let li = document.createElement('p');
p1.id = 'p1'
p1.innerHTML = '<b>123</b>';
parent.appendchild(p1)
更新节点
1
2
id.innerText = '123' // 修改文本的值
id.innerHtml = '<b>123</b>' // 解析为html
删除节点
1
2
3
4
5
6
7
8
let self = document.getElementById('id')
let parent = id.parentElement
parent.removeChild(self) // 需要调用父节点来删除

parent.removeChild(parent.children[0])
parent.removeChild(parent.children[1])
parent.removeChild(parent.children[2])
// 删除是一个动态的行为，节点一直更新
修改样式
1
2
id.style.color = 'red'
id.style.fontSize = '15px' // 使用驼峰命名方式
返回元素的首个子元素内容
1
2
3
4
5
6
//获取body元素的首个子元素内容：
let c = document.body.children[0].innerHTML;


//也可以
let c = body.getElementsByTagName('td')[0].innerHTML;
兼容获取当前style样式
1
2
3
4
5
6
7
function getStyle(obj, 'name'){
    if(window.getComputedStyle){
        return getComputedStyle(obj, null)[name];
    }else{
        return obj.currentStyle[name]
    }
};
解决event兼容问题
1
event = event || window.event;
取消冒泡
1
event.cancelBubble = true;
事件补充
1
2
3
4
5
6
7
8
9
10
11
12
13
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX: 相对文档的水平座标
event.clientY: 相对文档的垂直座标
event.offsetX: 相对容器的水平坐标
event.offsetY: 相对容器的垂直坐标
document.documentElement.scrollTop: 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop: 相对文档的水平座标+垂直方向滚动的量

Bom

window 浏览器窗口

1
2
3
4
5
6
7
8
9
10
window.alert(1)
undefined
window.outerHeight
807
window.outerWidth
1330
window.innerHeight
368
window.innerWidth
1316

screen: 屏幕尺寸

1
2
3
4
screen.height
864
screen.width
1536
0%