JavaScript基础-原创手记-慕课网

JavaScript基础

JS的基本数据类型

数值类型

parseInt():把字符串中的数据转换成数值

例：parseInt('123') parseInt('2.34')的值为2，此方法从转边开始检查，碰到不认识的字符就停止，所以值为2

例：parseInt('100',2) 将‘100’按2进制转换成10进制的值为4，parseInt('100',8) 值为64，parseInt('100',undefined)值为100

toString():转成字符串

isFinite()：判断是否为数字

isNaN():判断是否为非数字

parseFloat():转换成小数

布尔类型

true 和false

以下6种方式全为flase：undefined, null, false, 0, NaN, ""或""(空字符串)

字符串类型

用单引号或双引号表示；多行字符串用 \n相连；ES6标准用反引号,用+拼接

例：var hello = `hi, i am yhy`

引用变量：用$来引用

`${hello}`

hello.charAt(n):取hello中第n个字符

字符串接接：'a'+'b'+'c'

hello.indexof('h'):返回h所在的位置，没找到返回-1； indexof('i',2) 从第2个位置起查找

hello.lastIndexof('h'):从最后边开始查找

hello.slice(1,9): 取hello中第一个到第9个的值

hello.split('i'): 以i来分割字符串，得到的值中不包括i

hello.toLowerCase():把字符串转换成小写

hello.toUpperCase():把字符串转换成大写

hello.includes():返回布尔值，表示是否找到了参数字符串 hello.includes('hello')

hello.startsWith() hello.endsWith()

hello.repeat(n):字符串重复n次

hello.padEnd(n,'xxx'):在字符串后补充xxx来凑够n位

hello.padStart(n,'xxx'):在字符串前补充,第二个参数省略的话用空格补充

内置类型之null与undefined

null 值为空，有类型，是一个对像不是全局标识符

undefined 未定义，没有类型；是全局标识符

null === undefined false 三个=号即比较内容又比较类型

null == undefined true 两个=号比较内容

！null true

isNaN(1+null) false 1加上一个空后变为有值，是一个数字类型，所以为false

isNaN(1+undefined) true 1加上一个未定义类型后有值，但没有类型，所以为true

symbol类型

一种新的类型，得到一个唯一的值，不会被轻易的改掉

let s=Symbol() ES6之后用let定义变量名

ES6的类数组array-like对象

声明：var alist=[],添加元素alist[索引]=元素

特性：可以存不同的数据类型，数组长度可变，索引可以是数字也可以是字符串，可以多层嵌套

长度：可变

方法：concat()连接数组,返回一个值；join()将数组元素连接起来形成一个字符串，pop()删除并返回该元素，push()添加元素，reverse()倒序数组，shift()移出元素

slice()返回数组的一部分，sort()排序；splice()插入，删除或替换元素，unshift()在头部插入元素

var aList = []

undefined

var aList = [1,2,3,4,5]

undefined

aList

Array(5) [ 1, 2, 3, 4, 5 ]

typeof aList

"object"

aList.name='yhyang'

"yhyang"

aList

(5) […]

0: 1

1: 2

2: 3

3: 4

4: 5

length: 5

name: "yhyang"

<prototype>: Array []

aList.length

aList.age=18

aList.length

aList.length=3

aList

Array(3) [ 1, 2, 3 ]

delete aList["name"]

true

aList

Array(3) [ 1, 2, 3 ]

delete aList[0]

true

aList

Array(3) [ <1 empty slot>, 2, 3 ]

aList = []

Array []

ReferenceError: a is not defined[详细了解] debugger eval code:1:1

aList =[[1,2,3],[4,5,6],[7,8,9]]

Array(3) [ (3) […], (3) […], (3) […] ]

aList

(3) […]

0: Array(3) [ 1, 2, 3 ]

1: Array(3) [ 4, 5, 6 ]

2: Array(3) [ 7, 8, 9 ]

length: 3

<prototype>: Array []

aList[1][1]

ES6的object对象

概念：无序的集合，由若干个键值对组成；对象是属性的容器每个属性有k,v；对象是无类型的，可以嵌套，属性可以动态添加，属性都是字符串

创建：var obj_a = {} typeof obj_a obj_a.name = 'yhyang' 当key为关键字时obj_b["for"] = 'test',key默认不允许带-号

可以这样obj_b["aaa-bbb"] = 'test'取值的时候也用[""]来取

对象的引用，不会被复制：a = b a与b用的是同一份内容

prototype是标配对象：委托：属性通过原型链往上查找，Object.prototype没有的属性会产生undefined 如：obj_a.book这里book是一个不存在的属性，

查找时会一层层的向上查找Object.prototype查找不到时显示undefined

属性判断hasOwnProperty:不检查原型链

删除：delete

全局变量：命名空间，唯一使用，灵活可靠

this 关键字

直接被调用的函数，this为全局对象

被某个对象调用的函数，this为当前对象

var obj_this = {name:'yhyang'}

obj_this.doSomeThing = function(){

console.log(this); //此处的this为对象obj_this调用，所以值为name:'yhyang'

var that = this;

function test(){

console.log(this); //此处this为全局this

console.log(that);

}

test();

}

obj_this.doSomeThing();

function hello(){

console.log(this); //此处this为全局this

obj = {}

obj.f = function test(){

console.log(this); //此处this为对象f的this，所以值为f

}

obj.f();

}

hello();

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

这里是要执行的代码

}

函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中：

var x = function (a, b) {return a * b};

在函数表达式存储在变量后，变量也可作为一个函数使用：

var x = function (a, b) {return a * b};

var z = x(4, 3);

作用域

块级作用域

function f5(){

let n = 5;

if(true){

let n=10;

}

console.log(n);

}

f5();

此时打印的值为5，let定义的n=5 n=10分属于两个块

function f10(){

var n=5;

if(true){

var=10;

}

console.log(n);

}

f10();

此时打印10，当变量用var定义时，后边的会把前边的的覆盖，var n=10会提升到var n=5的位置。

function foo(){

const a=true;

function bar(){

const a=false;

console.log(a);

}

bar();

console.log(a);

}

foo();

在不同的块中，同名的const变量可以重新赋值

var tmp = new Date();

function ff(){

//var tmp;

console.log(tmp);

if(false){

console.log(tmp);

var tmp='hello';

}

ff();

上例中第一个console.log(tmp)会打印undefined，原因是最后边的var tmp='hello'会提升到function的下边变成var tmp，只是定义，没有值，所以会打印undefined

//var的for循环

var s='hello';

for(var i=0;i<s;i++){

console.log(s[i]);

}

会打印i的值为5，把var换成let可让i只在for内部使用，i的值变为is not defined

闭包

定义在函数内部的函数，作用为读取函数里面的变量

function createIncrementor(start){

return function (){

return start++;

};

}

var inc = createIncrementor(5);

console.log(inc());

5的值会累加

箭头函数

定义语法： =>

支持表达式模式和语句模式

var f = v => v;

// 相当于下边

var f = function (v) {

return v;

};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

var f = () => 5;

var f = function () {return 5;};

var sum = (num1,num2) => num1 + num2;

var sum = function(num1,num2){return num1 + num2;};

代码块部分多于一条语句要用{}括起来并且要有return 语句返回

[,'A'].forEach((x,i) => console.log(i)); // forEach方法 x,i对应前边数组的下标

[7,'A'].forEach((x,i) => console.log(i));

[7,'A'].forEach(i => console.log(i));

['a',,'b'].filter(x =>true);

[1,2,3,4,5].filter(x => x>2);

[,'a'].every(x => x==='a');

[1,2,3,4,5].every(x => x>2);

[1,,2].reduce((x,y) => x+y);

[,'a'].some(x=>x !=='a')

[,'a'].map(x=>1);

[1,2,3,4,5].map(x => x*2);

箭头函数作用域

和父作用域具有一样的this,绑定定义时所在的作用域

箭头函数根本没有自己的this，导致内部的this就是外层代码块的this

function Timer(){

this.s1 = 0;

this.s2 = 0;

setInterval(() => this.s1++, 1000);

setInterval(function(){

this.s2++;},1000);

}

var timer = new Timer();

setTimeout(() => console.log('s1:',timer.s1),3100);

setTimeout(() =>console.log('s2:',timer.s2),3100);

JavaScript基础

ES6的数据结构 Set与Map

Map 是一级键值对的结构，按插入顺序排列 const map= new Map() cm.set('name','yhyang')

相关方法:set添加，delete删除，get获取值，size查看大小,forEach遍历内容，clear清空，keys查看键，values查看值

Set 也是一组key的集合，存储唯一的值 var s1 = new Set() s1.add(1) s1.add(2)

相关方法：add 添加，delete删除，has判断有没有值，clear清空，size大小