JavaScript基础

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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, ""或""(空字符串)

    字符串类型

  • 用单引号或双引号表示;多行字符串用 相连;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大小

以上是关于JavaScript基础的主要内容,如果未能解决你的问题,请参考以下文章

30秒就能看懂的JavaScript 代码片段

Yarn: 一个新的JavaScript模块管理器

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段(上)

如何将此 JavaScript 代码片段翻译成 Parenscript?

javascript 代码片段