JavaScript学习笔记

JavasScript学习笔记

1、字符串的不可变性

eg.

let str = "abcd"
str[0] = 'f'
console.log(str[0]);// 输出是a

不能改变单个字符的值，只能重新赋值整个字符串。

判断类型：

typeof(str) == ‘string’

2、数组

Array可以包含任意的数据类型

let arr = [1,2,3,null,'abc']

1、长度

arr.length

2、indexOf，通过元素获得下标索引

3、slice（） 截取Array的一部分，返回一个新的数组

4、push,pop

​ push;压入到尾部

​ pop弹出一个元素

5、unshift（），shift（）

​ unshift压入到头部

​ shift弹出头部的一个元素

6、sort（）排序

7、元素反转reverse（）

8、concat（）拼接数组，返回一个新是数组

9、连接符join（）

​ 打印拼接数组，使用特定的字符串连接

let arr = ["c","b","a"]
arr.join("-")
"c-b-a"

10、多维数组

let arr = [[1,2,3],[4,5,6]]
arr[0][1]// 2

3、对象

// 定义了一个对象
var 对象名 = {
    属性名： 属性值，
    属性名： 属性值，
    属性名： 属性值
}

用{}包裹，键值对描述属性。

JavaScript中所有的键都是字符串，值是任意对象。

1、使用一个不存在的对象属性，不会报错！ undefined而已

2、动态的删减属性(delete删除属性)

delete person.name

3、动态的添加(直接给新属性添加值)

person.haha = "hello"

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

'haha' in person
true
// 继承
'toString' in person
true

5、判断一个属性是否是对象自身的

person.hasOwnProperty('toString')
false
person.hasOwnProperty('haha')
true

4、流程控制

1、if-else判断

2、while循环

while(age<100){
    age = age +1;
    console.log(age)
}

3、for循环

for(let i = 0;i<100;i++){
    console.log(i)
}

4、forEach循环(ES5.1)

var age = [1,2,3,4,5]
age.forEach(function(value){
    console.log(value)
})

5、for…in遍历/for…of(ES6)

for(var num in age){
    // num是索引
    console.log(age[num])
}
for(var num of age){
    // num是值
    console.log(num)
}

5、Map和Set（ES6新特性）

// 取值
var map = new Map(['tom',100],['jack',90])
var name = map.get('tom')
console.log(name)//获得100

//设值
map.set('admin',100);
map.delete('tom')

//遍历map
for....of..

Set:无序不重复的集合

(可以去重复值)

var set = new Set([3,2,2,2])
set.delete(2)
set.add(1)
//是否有这个元素
console.log(set.has(3))

//遍历
for...of

5、函数

方法：对象（属性，方法）

函数：不属于对象

5.1定义函数

定义方式一

function abs(x){
    if(x>=0){
        return x;    
    }else{
        return -x;
    }
}

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

把函数赋值给对象，对象就成函数了。

var abs = function(x){

}

不存在参数如何规避？

// 手动抛出异常
if(typeof x!=='number'){
    throw 'Not a Number'
}

arguments

arguments 是一个关键字

代表传递进来的所有参数是一个数组。

即使你只定义了一个参数，但是你传入多个参数，可以用arguments来获取。

…rest

ES6新特性，获取除了已经定义的参数之外的参数。

function fun(a,b,c,...rest){
    console.log(rest)
}

5.2、变量的作用域

var定义的变量实际是有作用域的。

在函数内声明，则在函数体外不可以使用。（闭包可实现）

内部函数可以访问外部函数的成员，反之则不行。

假如，内部函数变量和外部函数的变量重名，则用内部的。从内往外找。

5.3提升变量的作用域

function a(){
    var x = 'x'+y;
    console.log(x);
    var y ='y';
}
//结果：输出xundefined
//结论：js执行引擎，自动提示了y的声明，但不会提升y的赋值。

变量的定义都写在前面。

//var x,y,z…

5.4全局变量

在外部定义。

全局对象window。

默认所有的全局变量都绑定在window对象下。

alert()也是window下的变量。

方法也是变量，也是可以赋值的。

js只有一个全局作用域，就是window。

5.5规范

由于所有的全局变量都会绑定到window上，如果使用了不同的js文件，使用了相同的全局变量，就会冲突。

如何减少冲突？

//唯一全局变量
var a = {}；

//定义全局变量
a.name = "jadfa";
a.add = function(a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突。

局部作用域let

ES6引入，解决局部作用域冲突问题。

{}里面，一个作用域。

常量const

ES6之前，只要是全部使用大写字母定义的变量就认为是常量，不要去动它。

ES6后用const定义。只读。

5.6方法

方法就是把函数方到对象里面。

方法调用一定要带（）

this。代表调用它的人。

apply

在js中可以控制this的指向

getAge.apply(对象，[]);//this指向了指定对象

6、内部对象

标准对象

typeof 123
"number"

typeof '123'
"string"

typeof []
"object"

typeof NaN
"number"

typeof Math.abs
"function"

typeof true 
"boolean"

typeof undefined
"undefined"

6.1、Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//0-11
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinuters();//分
now.getSeconds();//秒

now.getTime();//时间戳，距离1970.。

6.2、JSON

轻量级的数据交换格式。

在javascript中一切皆为对象，任何js支持的类型都可以用JSON来表示。

格式

对象都用{}

数组都用[]

键值对key：value

对象转换JSON字符串

JSON.stringify()

JSON字符串解析成对象

JSON.parse()

JSON和JS对象的区别

var obj = {a: 'hello',b: 'ji'}
var json = '{"a": "hello","b": "ji"}'

7、面向对象编程

7.1、proto继承原型对象

var Student = {
    name: "liuguo",
    age: 3,
    run: function(){
        console.log("run...")
    }
}
var xiaoming = {
    name: "xiaoming"
};
//继承
xiaoming.__proto__ = Student;

7.2、class继承

ES6引入class关键字

1、定义一个类，属性，方法

class Studnet{
    constructor(name){
        this.name = name;
    }
    hello(){
        alter('hello')
    }
}
var xiaoming = new Student("xiaoming")

2、继承

class XiaoStudent extends Student{
	construtor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        console.log("adfaf")
    }
}

class的本质还是__proto__，只是为了更方便书写。

原型链

无限继承

8、操作BOM对象

BOM：浏览器对象模型

window代表浏览器窗口

navigator：封装了浏览器的 信息

screen：屏幕width，height

location：当前页面的url信息

reload()//刷新网页

assign（）//设置新的地址

document

代表当前的页面

获取文档节点document.getElementById()

获取cookir

document.cookie

history

history.back()//后退

history.forward()//前进

9、操作DOM对象

更新：更新DOM节点

node.innerText

node.innerHTML

node.style.

遍历DOM节点：得到节点

要操作一个DOM节点，就必须先获得这个节点。

删除一个DOM节点

先获取父节点，再通过父节点删除自己。

var father = p1.parentElement
father.removeChild(p1)

father.removeChild(father.children[0])

添加一个新的节点

innerHTML//会覆盖

var newp =  document.createElement('p')
newp.id = 'newp'
nwep.innerText = "helloworld"

newp.setAttribute('','')

node.appendChild(newp);

10、JQuery

里面存在大量的javascript函数

script 标签引入
​ 公式: $(selector).action()

$代表JQuery

selector就是css的选择器

//选中标签,进行函数操作

$('#id').click(function(){
	console.log("afs")
})

事件
mousedown()
mouseover()
等等

11、闭包

闭包就是嵌套函数，内部的函数可以访问外部函数的作用域。

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

作用：

1. 可以在函数的外部访问到函数内部的局部变量。
2. 让这些变量始终保存在内存中，不会随着函数的结束而自动销毁。

但我们可以使用闭包来模拟私有方法
如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。