资讯专栏INFORMATION COLUMN

Javascript基础知识(一)

MrZONT / 419人阅读

摘要:它可以接收两个参数,表示要查找的子字符串,表示查找的开始位置,省略的话则从开始位置进行检索。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回。返回一个布尔值,表示指定的对象是否在本对象的原型链中。

前言

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

ECMAScript 和 JavaScript关系

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

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

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)

从上图可以看出,基本数据类型保存的是具体的值,当将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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103091.html

相关文章

  • 基础巩固:JavaScript基础总结(基本概念篇)

    摘要:基础巩固基础总结使用已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现的使用范围原来越广泛。这里要注意,务必将基础部分掌握牢靠,磨刀不误砍柴功,只有将基础部分掌握并建立起系统的知识体系,在后面学习衍生的其他模式才能游刃有余。 基础巩固:JavaScript基础总结 使用JavaScript已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现JavaScript的使用范围原...

    YuboonaZhang 评论0 收藏0
  • JavaScript系列(四) - 收藏集 - 掘金

    摘要:函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言,然而,近几年,函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此,...

    cfanr 评论0 收藏0
  • 如何正确学习JavaScript

    摘要:然而,虽然先生对无所不知,被誉为世界的爱因斯坦,但他的语言精粹并不适合初学者学习。即便如此,在后面我还是会建议把当做补充的学习资源。但目前为止,依然是学习编程的好帮手。周正则表达式,对象,事件,阅读权威指南第,,,章。 既然你找到这篇文章来,说明你是真心想学好JavaScript的。你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript。而面对泛...

    canger 评论0 收藏0
  • 前端练级攻略(第二部分)

    摘要:是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分,你将更好地理解并使用它们。到目前为止,你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。 本文是 前端练级攻略 第二部分,第一部分请看下面: 前端练级攻略(第一部分) 在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如...

    BWrong 评论0 收藏0
  • 编程界也有修仙秘籍?程序员码字3年终得《JavaScript 百炼成仙》

    摘要:百炼成仙走红该书于年月出版,作者杨逸飞是一名从事开发六年的程序员,写过诸多技术博客。作者在博客上对粉丝提出关于百炼成仙的问题进行了统一回复,该博文持续占据热榜第二,热度达。 刚接触编程的小伙伴,估计都想过把枯燥无聊的编程教材变成小说读的念头,这不,说曹操曹操就来了,真的有程序员用写修仙小说的...

    zzbo 评论0 收藏0
  • 理解JavaScript的核心知识点:原型

    摘要:首先,需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考,面向对象编程是其一种思维方式,与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者(包括本人)低估甚至忽视了,这是因为绝大多数人没有想要深刻理解这个机制的内涵,以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

    iKcamp 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<