JavaScript基础

Posted 2021-01-17

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, ""或""(空字符串)

  字符串类型

• 用单引号或双引号表示；多行字符串用 相连；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
5
aList.age=18
18
aList.length
5
aList.length=3
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 []
a
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]
5

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;

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

闭包

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

function createIncrementor(start){
    return function (){
        return start++;
    };
}

var inc =  createIncrementor(5);
console.log(inc());
console.log(inc());
console.log(inc());
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);

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大小