Javascript基础知识(一)

前言

前端开发最基本的就是HTML + CSS + JS了,刚入行时听到的介绍就是,写页面亦如造房子,HTML为搭户型,CSS是房屋装饰,JS则好比是水电安装,是最后的功能了。 下面我们开始装水电了.....

ECMAScript 和 JavaScript关系

ECMAScript是由欧洲计算机制造商协会(European Computer Manufacturers Association)颁布的关于JavaScript的语言规范,即JS的发展是以ECMAScript为标准进行的。自1997年发布首版以来,已经历经N多版,好像我还在百度搜索letconst等ES6语法时,听说现在倏的就ES10都出草案了!目前个人开发主要是 ES5/6ECMAScript版本历史

Javascript基础语法

1. 输出
window.alert('hello guys!')//弹出警告窗
document.write('I am contents.');//将内容写到HTML文档中
console.log('我在控制台输出!','others');//将内容输出到浏览器控制台
console.log('Let us play %s this %s !','basketball','friday');//%s 字符串占位符===>
// 'Let us play basketball this friday'
var familyInfo = { 
    name:'前端牛逼',
    id:666
}
console.log('家族ID是 %d,家族信息是 %O',1235,familyInfo)//%d 整数占位符 %O对象占位符
//当然,如果觉得这样的log输出有点“脱裤子放屁”,还是直接如下不用占位符吧
console.log('家族ID是:',familyID ,'家族信息是',familyInfo);

//有一些用的相对少些的Log输出:

console.debug(object)
//在控制台输出一条消息,包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令,//就不会出现超链接(和console.log()一样)。

console.info(object)
//在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。

console.warn(object)
//在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。

console.error(object)
//在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。

console.dir(object)
//以列表形式输出一个对象的所有属性,有点和你查看DOM窗口相类似。
2.运算
var num  = (5 + 2)*10; // 70   = + - *  / %(取膜 ) ++ --
10%3// 1
//注意一下这两个区别
var i = 0;
var num =  i++;//0  
var num1 = ++i;//1


//比较运算
var count =  0; 
if(count > 0){console.log('num 大于 0')}//  JS比较运算符中:     == === !== != <  > 
null == undefined //true
null === undefined //false

不同数据类型做比较时的一些规则

//逻辑运算符
// &&    and    
 (2 < 10 && 3 > 1) //true
// || or     
(a || b) //只要一个为true,结果即为true 
// ! not    
 var num = 0;
!num //true(将num转换为布尔值再取反);
3.javascript 关键字和保留字(备胎咯)

关键字 (用于标识要执行的操作): break、case、catch、continue、default、delete、do、else、finally、for、function、
if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void

保留字(当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到):abstract
boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int

4.注释
//单行注释
//console.log('num');

 alert('error') // 单行末注释

//块注释
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/
5.条件语句
if(isVVmusic){
//客户端内
}else{
//端外
}

if(sex == '男'){
 console.log('小哥哥')
}else if(sex == '女'){
 console.log('小姐姐')
}else{
 console.log('萨瓦迪卡~')
}


switch(res.retCode){
    case 1000:
        console.log('创建活动成功!')
        break;
    case 1001:
        console.log('不在申请时间内!')
        break;
    case 1002:
        console.log('userID不存在!')
        break;
    default:
       console.log('参数不正确');
}

//有一种情况可能只是要根据条件去取一个值,比如toast的提示文案,这时用条件判断显得裹脚布又长又臭的时候,可以考虑另一种方式比如:
var toastTexts = {
    '1000':'创建活动成功!',
    '1001':'不在申请时间内!',
    '1002':'参数不正确',
    '1003':'userID不存在!',
    '1008':'比赛以结束',
    ......
}
if(res && res.retCode){
 let toast = toastTexts[res.retCode];
 alert(toast);
}

6.循环语句

  • for - 循环代码块一定的次数

for (语句 1; 语句 2; 语句 3){

被执行的代码块

}
语句 1 (代码块)开始前执行

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

for (var i =0 ;i<list.length;i++){
       var item = list[i];
       console.log(item.name);  
    }
  • for/in - 循环遍历对象的属性
var res = {
        name:'刘德华',
        age:50,
        place:'hongkong'
    }  
    for (var key in res){
      console.log('%O : %O',key,res[key]);  
    }
  • while - 当指定的条件为 true 时循环指定的代码块
var i =0;
    while (i<5)
    {
        if(i === 2) break;
        console.log('当前数字是'+ i);
        i++;
    }
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

    do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。

var i = 0;
    do{
        console.log('number is '+ i)
        i++;
    } 
   while (i<5);

break 语句用于跳出循环。(不可以用于es6的forEach)

continue 用于跳过循环中的一个迭代。

JavaScript数据类型

Javascript的数据类型可以分为:基本数据类型(值类型)引用数据类型

值类型(基本类型):

  • 字符串(String)
  • 数字(Number)
  • 空(Null)
  • 未定义(Undefined)
  • 布尔(Boolean)
  • Symbol(*Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值)

引用数据类型:

  • 对象(Object)
  • 数组(Array)
  • 函数(Function)

Javascript基础知识(一)

从上图可以看出,基本数据类型保存的是具体的值,当将a变量的值赋值给b变量,b变量之后的任何    操作就和a无关了;而当把引用数据类型的值赋值给些个( C、D )变量,C得到的是一个引用地址,同样D也是,当操作C或者D中某一个的属性时,实际上是顺着这条同样的引用地址改了堆内存中的值,因此其它引用了这一相同地址的变量再取自身当中某属性值时,都是被更改过的。

判断数据类型

typeof   123   //'number'
    typeof   'abc'  //'string'
    typeof    true       //'boolean'
    typeof    undefined   //'undefined'
    typeof    null        //'object'
    typeof    { }           //'object'
    typeof    [ ]           //'object'
    typeof    console.log       //'function'

各类型常用的操作方法

1.String

  • charAt 获取字符串中指定位置的字符,若指定位置没有,则返回空字符串
'let us play basketball!'.charAt(0);//'l'   返回索引位置0处的字符
'let us play basketball!'.charAt(100000);// '' 如果参数 大于 'string'.length-1 (找不到)即返回 ''
  • charCodeAt 获取字符串指定位置字符的unicode编码
'let us play basketball!'.charCodeAt(1);// 101 
'let us play basketball!'.charCodeAt(1000) //NaN 如果参数 大于 'string'.length-1 (找不到)即返回 NaN
  • fromCharCode() 可接受一个或多个Unicode值,然后返回一个字符串。
String.fromCharCode(97, 98, 99, 100, 101); //'abcde'
  • indexOf(string,start)用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数,string表示要查找的子字符串,start表示查找的开始位置,省略的话则从开始位置进行检索。
'let us play basketball!'.indexOf('us');// 4
'let us play basketball!'.indexOf('us',5);// -1 找不到则返回-1
  • lastIndexOf(string) 与indexOf类似,它返回的是一个指定的子字符串值最后出现的位置,其检索顺序是从后向前
'let us play basketball!'.lastIndexOf('b');// 18
'let us play basketball!'.lastIndexOf(' ',5);// 3 从索引为5处开始往前查找

-search(substr/regexp) 检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回-1。

'let us play basketball!'.search('us');// 4
'let us play basketball!'.search(/us/);// 4
'let us play basketball!'.search(/usb/);// -1
  • subString(start,end) 从start位置截取到end位置截取字符串
'let us play basketball!'.substring(4,6);// 'us' //注意是包括开始项位置,不包括结束项位置
'let us play basketball!'.substring(7);// "play basketball!" //第二个参数不传,则默认截取到最后一位
'let us play basketball!'.substring(1000);//''  参数大于字符串length时返回 ""
  • slice(start,end) 与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。而区别在于,slice()中的参数可以为负值,如果参数是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符。
'let us play basketball!'.slice(0,3);// 'let'  
'let us play basketball!'.slice(-5,-1);// 'ball' //截取顺序依然是从左到右
  • replace(string/regexp,string) 字符串替换 第一个参数可以是字符串也可以是正则,将匹配到的内容用第2个参数替换掉
'let us play basketball!'.replace('us','me');// "let me play basketball!"
'let us play basketball!'.replace(/basketball/,'baseball');// "let us play baseball!"
'let us play basketball!'.replace(/ /g,'--');// "let--us--play--basketball!" 利用g修饰符全部替换
  • split('') 按某字符将整个字符串拆分成数组,参数为字符串或者正则
'let us play basketball!'.split(' ');//["let", "us", "play", "basketball!"]
'let us play basketball!'.split(/ /);//["let", "us", "play", "basketball!"]
  • toLowerCase()和toUpperCase() 将字符串转换成全部大写或者全部小写
'let us play basketball!'.toUpperCase();//LET US PLAY BASKETBALL!"

2.Array

  • push(arg1,arg2,arg3) 向数组后面依次添加新的一项,返回的是新数组的长度
var arr1 = [1,2,3];
arr1.push(3,4,5);//6
console.log(arr1);//[1, 2, 3, 3, 4, 5]
  • pop() 删除数组最后一项,并且返回该项
var arr1 = [1,2,3];
arr1.pop();//3
console.log(arr1);//[1, 2]
  • shift() 删除数组第一项,并且返回该项
var arr1 = [1,2,3];
arr1.shift();//1
console.log(arr1);//[2,3]
  • unshift() 向数组开头添加一项,并且返回新数组长度
var arr1 = [1,2,3];
arr1.unshift(0);// 4
console.log(arr1);//[0,1,2,3]
  • concat() 将多个数组拼成一个新的数组,并返回新数组
var arr1 = [1,2,3],
    arr2 = [4,5,6],
    arr3;
arr3 = arr1.concat(arr2);
console.log(arr1);// [1,2,3]
console.log(arr2);//[4,5,6]
console.log(arr3);//[1,2,3,4,5,6]
  • join() 把数组中的每一项 按照指定的分隔符拼接成字符串
var arr1 = ['let','us','play','basketball'];
var str1 = arr1.join(' ');
console.log(str1);//"let us play basketball"
  • splice 删除数组中的任意项 返回值是被删除的数组项(会改变原数组)
var arr1 = ['let','us','play','basketball'];
var arr2 = arr1.splice(0,2);
console.log(arr1);// ["play", "basketball"]
console.log(arr2); //["let", "us"]
  • slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项(不改变原数组)
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1,3);
console.log(arr1);// [1, 2, 3, 4, 5, 6]
console.log(arr2); // [2, 3] 也是包括开始位置项,不包括结束位置项
  • reverse:倒序数组 返回值倒序数组 (原有数组改变)
var arr1 = ['a','b','c','d'];
var arr2 = arr1.reverse();
console.log(arr1);//["d", "c", "b", "a"]
console.log(arr2);//["d", "c", "b", "a"]
  • sort 数组排序
var arr1 = [1,5,6,8,2];
arr1.sort(function(a,b){return a-b});//[1, 2, 5, 6, 8] 升序
arr1.sort(function(a,b){return b-a});// [8, 6, 5, 2, 1] 降序

3.Object

  • hasOwnProperty():返回一个布尔值,表示某个对象是否含有指定的属性,而且此属性非原型链继承。
var obj1 = {name:'kobe',age:18};
obj1.hasOwnProperty('name');//true
obj1.hasOwnProperty('height');//false
  • isPrototypeOf():返回一个布尔值,表示指定的对象是否在本对象的原型链中。
var Plays = function(obj){
    this.name = obj.name;
    this.age = obj.age;
}
var player1 = new Plays({name:'kobe',age:18});
console.log(Plays.prototype.isPrototypeOf(player1));//true
  • propertyIsEnumerable():判断指定属性是否可枚举。
var obj1 = {a:1};
obj1.propertyIsEnumerable('a');//true
obj1.propertyIsEnumerable('__proto__');//false
  • toString():返回对象的字符串表示。
var obj1 = {a:1};
obj1.toString();//"[object Object]"
  • watch():给对象的某个属性增加监听。
  • unwatch():移除对象某个属性的监听。
  • valueOf():返回指定对象的原始值。

4.Number

  • toFixed(x)——把数字转换为字符串,x为小数点后位数
10.235233.toFixed(1);///10.2
  • toPrecision(x)——把数字格式化为指定的长度
23.3336.toPrecision(2);//23
111.toPrecision(2); //Uncaught SyntaxError: Invalid or unexpected token
  • valueOf()——返回值
var boo = new Boolean(false)
document.write(boo.valueOf());//false

以上就是我的分享内容了!

相关推荐