js基础知识点总结系列(一)

1.javascript概述(了解)

1.什么是javascript
 javascript简称为js,是一种运行于js解释器/引擎中的脚本语言
    js的运行环境:
1.独立安装的js解释器(node)
2.嵌入在浏览器内核中的js解释器

2.js的发展史

1.1992年Nombas公司为自己开发了一款脚本语言SciptEase
2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript
3.1996年Microsoft在IE3.0版本中克隆javascript,JScript
4.1997年,javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5,ES6

3.js组成部分

1.核心(ECMAScript)
2.DOM (Document object model)文档对象模型
3.BOM (Browser object model)浏览器对象模型

4.js的特点

1.语法类似于c,java
2.无需编译,由js解释器直接运行
3.弱类型语言
4.面向对象的

2.JavaScript的基础语法

1.搭建运行环境
  1.独立安装的JS解释器-NodeJS
    1.在命令行界面:输入node
  console.log("你好,世界");
  在控制台打印输出
  说明:js是可以独立在js解释器中运行
2.使用浏览器内核中嵌的js解释器
  浏览器内核负责页面内容的渲染,由两部分组成:
     内容排版引擎-解析:HTML/CSS
     脚本解释引擎-解析:javascript
 1.直接在Console(控制台)中输入脚本并运行
 2.将js脚本嵌入在HTML页面中执行
   1.html元素的事件中执行js脚本
      事件-onclick-鼠标单击时要执行的操作
   2.在<script>中编写脚本并执行
      网页的任何位置处,嵌入一对<script>标记,并且将脚本编写在<script>标记中。
       3.使用外部脚本文件(.js为后缀)
     1.创建脚本文件(.js)并在文件中编写脚本
     2.在使用的网页中引用脚本文件
        <script src="脚本文件的url"></script>
      
 3.js调试,F12查看错误,出错时不影响其它代码块,后续代码继续执行。
   <script>
    /*这个脚本错误*/
    document.writ("<h3>周芷若</h3>");
       </script>
      <script>
    /*继续执行*/
        console.log("金花婆婆");  
      </script>
    3.通过语法规范
  1.语句:可执行的最小单元
          必须以;结束
      严格区分大小
      所有的符号必须是英文
      2.注释:
    // :单行注释
    /**/:多行注释

3.变量和常量

1.变量声明

 1.声明变量
  var 变量名;
2.为变量赋值
  变量名=值;
3.声明变量是直接赋值
  var 变量名=值;
  ex:
  var uname="张无忌";
  var age=20;
 注意:
   1.允许在一条语句中声明多个变量,用逗号隔开变量名。
     var uname="韩梅梅",uage=20;
   2.如果声明变量,但未赋值,则值默认为undefined
   3.声明变量时可以不适用var,但不推荐
     uname="tom";

2.变量名的规范

1.不允许以数字开头
2.不允许使用关键词和保留关键字
3.最好见名知意
  var uname; var uage;
4.允许包含字母,数字,下划线(_),$
  var $name="Tom";
5.尽量使用小驼峰命名法
  var userName;
  var uname;
  var _uname;//下划线
  var user_name;//下划线
  var UserName;//大驼峰命名法

4.变量的使用

1.声明变量未赋值,值默认为undefined
2.使用未声明过的变量 报错
3.赋值操作
  变量名出现在=的左边,一律是赋值操作
    var uname="林妹妹";
4.取值操作
  变量只要没出现在=的左边,一律是取值操作
    var uage=30;
console.log(uage);
var num1=uage;

5.常量

1.什么是常量
  在程序中,一经声明就不允许被修改的数据就是常量。
2.语法
  const 常量名=值;
  常量名在程序中,通常采用大写形式。
  const PI=3.1415926;

5.1数据类型
1.数据类型的作用

规定了数据在内存中所占的空间
10.1 64位 8个字节
bit:位
8bit=1byte字节
1024byte=1KB 
1024KB=1MB
1024MB=1G 
1024G=1T

2.数据类型详解

1.数据类型分两大类
  原始类型(基本类型)
  引用类型
  1.原始类型
    1.Number 类型
  数字类型
  作用:可以表示32位的整数,也可以表示64位的浮点数(小数)
  整数:
     1.十进制
       10 
     2.八进制
       由0-7八个数字组成,逢八进一
       八进制中以0开始
       var num=010;
     3.十六进制
       由0-9和A-f组成,逢十六进一
          A:10
      B:11
      C:12
      D:13
      E:14
      F:15
       十六进制中以0X开始
      浮点数:又称小数
    小数点计数法:12.58  
    指数计数法:3.4e3(3.4*10的3次方)
2.String类型
  字符串类型
  作用:表示一系列的文本字符数据,如:姓名,性别,住址...
  字符串中的每个字符,都是由Unicode码的字符,标点和数字组成。
  Unicode码:每个字符在计算机中都有一个唯一的编码表示该字符,
  该码就是unicode码(他是十六进制)
     1.查找一个字符的unicode码:
     "李".charCodeAt();
     //10进制输出

     "李".charCodeAt().toString(2);
     //二进制输出

     "李".charCodeAt().toString(16);
     //十六进制

       李的unicode码是:674e
     2.如何将674e转换为汉字?
        用\u
       ex:
        var str="\u674e";
    console.log(str);//结果是“李”

    汉字的Unicode码的范围:
    \u4e00~\u9fa5
     3.特殊字符需要转义字符
       \n: 换行
       \t: 制表符(缩进)
       \": "
       \': '
       \\: \
3.Boolean类型
  布尔类型
  作用:在程序中表示真或假的结果
  取值:
     true或false
  var isBig=true;
  var isRun=false;
  在参与到数学运算时,true可以当成1做运算,false可以当做0做运算。
  var res=25+true; //结果为26
 4.Undefined类型
  作用:表示使用的数据不存在
  Undefined类型只有一个值,即undefined当声明的变量未赋值(未初始化)时,
  该变量的默认值就是undefined.
5.Null类型
  null用于表示不存在的对象。
      Null类型只有一个值,即null,如果函数或方法要返回的是对象,
      找不到该对象,返回的就是null。


5.2数据类型的转换

  1.隐式(自动)转换
 不同类型的数据在计算过程中自动进行转换
 1.数字+字符串:数字转换为字符串
   var num=15;
var str="Hello";
var res=num+str; //结果:15Hello
 2.数字+布尔:将布尔转换为数字true=1,false=0
   var num1=10;
var isSun=true;
var res1=num1+isSun;//结果:11
 3.字符串+布尔:将布尔转换为字符串
   var str1="Hello";
var isSun1=true;
var res2=str1+isSun1;//结果:Hellotrue
 4.布尔+布尔:将布尔转换为数字
   true=1,false=0;
   var isSun2=true;
var isSun3=flase;
var res=isSun2+isSun3;//结果1
2.强制转换 -转换函数
 1.toString()
   将任意类型的数据转换为字符串
语法:
 var num=变量.toString();
 ex:
 var num=15;
 var str=num.toString();
 console.log(typeof(str));
 2.parseInt()
   将任意类型的数据转换为整数
如果转换不成功,结果为NaN(Not a Number)
语法:var result=parseInt(数据);
 3.parseFloat()
   将任意类型的数据转换为小数
如果转换不成功,结果为NaN
语法:var result=parseFloat(数据);
 4.Number()
   将任意类型数据转为Number类型
注意:如果包含非法字符,则返回NaN
语法:var result=Number(数据);

6.运行符和表达式

1.什么是表达式

由运算符连接操作数所组成的式子就是表达式。
ex:
15+20
var x=y=40
任何一个表达式都会有结果。

2.运算符

  1.算术运算符
  +,-,*,/,%,++,--

  5%2=1;
  ++:自增运算,只做+1操作
  ++在前:先自增,再运算;
  ++在后:先运算,再自增;
  ex:
    var num=5;
console.log(num++);//打印5,变为6
console.log(++num);//变为7,打印7

ex:
    var num=5;
             5   (6)6   6(7)    (8)8
    var res=num+ ++num +num++ + ++num +num++ +num;  
  8(9)   9
结果:42
2.关系运算符(比较)
  >,<,>=,<=,==,===(全等),!=,!==(不全等)
  关系运算的结果:boolean类型(true,false)
  问题:
    1. 5 > "10" 结果:false
   关系运算符两端,只要有一个是number的话,另外一个会隐式转换为number类型,再进行比较。
2."5">"1 0" 结果:true
  "5".charCodeAt(); //53
  "1".charCodeAt(); //49
  "张三丰" > "张无忌" 结果:false
    19977  >   26080
3."3a" > 10 结果:false
  Number("3a")--->NaN
  注意:
    NaN与任何一个数据做比较运算时,结果都是false.
    console.log("3a">10); false
    console.log("3a"==10); false
    console.log("3a"<10); false
    isNaN()函数:
       语法:isNaN(数据);
       作用:判断指定数据是否为非数字,如果不是数字,返回值为true,是数字的话返回的值为false
       console.log(isNaN("3")); //false
       console.log(isNaN("3a")); //ture 

       console.log("3a"!=10);//true
3.逻辑运算符
  !,&&,||

  !:取反
  &&:并且,关联的两个条件都为true,整个表达式的结果为true
  ||:或者,关联的两个条件,只要有一个条件为true,整个表达式的结果就为true

  短路逻辑:
     短路逻辑&&:
     当第一个条件为false时,整体表达式的结果就为false,不需要判断第二个条件
     如果第一个条件为true,会继续判断或执行第二个条件
 短路逻辑||:
     当第一个条件为true时,就不再执行后续表达式,整体结果为true。
     当第一个条件为false时,继续执行第二个条件或操作。

4.位运算符
  <<,>>,&,|,^

  右移是把数变小,左移是把数变大
  &:按位与,判断奇偶性
     任意数字与1做按位与,结果为1,则为奇数,结果为0,则为偶数。
     var num=323;
 var result=num & 1
 console.log(result); //结果为1
  |:按位或,对小数取整
     将任意小数与0做按位或,结果则取整数部分。

  ^:按位异或,用于交换两个数字
      二进制位数,逐位比较,不同则为1,相同则为0
   a=a^b;
   b=b^a;
   a=a^b;
5.赋值运算符和扩展赋值运算符
  1.赋值运算 =
    var uname="TOM";
  2.扩展赋值运算符
    +=,-=,*=,/=,%=,^=...
a=a+1 a+=1;a++;++a
a=a^b
a^=b
6.条件(三目)运算符
  单目(一目)运算符,只需要一个操作数或表达式
  ex: a++,b--,!isRun
  双目(二元)运算符,需要两个操作数或表达式
   +,-,*,/,%,>,<,>=,<=,==,!=,===,!==,&&,||,&,|,^
  三目(三元)运算符,需要三个操作数或表达式
     条件表达式?表达式1:表达式2;
        先判断条件表达式的值,
    如果条件为true,则执行表达式1的操作
    如果条件为false,则执行表达式2的操作
  ex:成绩大于60及格,否则,输出不及格

7.函数-function

1.什么是函数

函数,function,也称为方法(method)
函数是一段预定义好,并可以被反复执行的代码块。
   预定义:提前定义好,并非马上执行。
   代码块:可以包含多条可执行的语句
   反复执行:允许被多次调用
函数-功能
   parseInt();
   parseFloat();
   Number();
   console.log();
   alert();
   document.write();

2.定义和使用函数

1.普通函数的声明和调用(无参数无返回值)
  1.声明
    function 函数名(){
   //函数体
     若干可执行的语句
  
}
  2.调用函数
    在任意javascript合法的位置处通过 函数名(); 对函数进行调用。
 

2.带参函数的声明和调用
  1.声明
    function 函数名(参数列表){
   //函数体
}
参数列表:可以声明0或多个参数,多个参数间用逗号隔开
声明函数时,声明的参数,称之为“形参”
 2.调用
   函数名(参数值列表);
   注意:调用函数时,传递的参数数值,称之为“实参”。
         尽量按照声明函数的格式进行调用
3.带返回值函数声明和调用
  1.声明
    function 函数名(参数){
   //函数体
   return 值;
   //return关键字,程序碰到return关键词,就立马跳出并且把值带出去
}
注意:最多只能返回一个值
  2.调用
    允许使用一个变量接收函数的返回值
    var result=函数名(实参);

8.作用域

1.什么是作用域

  作用域表示的是变量或函数的可访问范围。
  JS中的作用域分两种:
     1.函数作用域
   只在函数范围内有效
 2.全局作用域
   代码的任何位置都有效

2.函数作用域中变量

 又称为局部变量,只在声明的函数中有效
 ex:
   function test(){
     var num=10;
   }

3.全局作用域中的变量

 又称为全局变量,一经声明,任何位置都能用
 1.不在function中声明的变量,为全局变量
 2.声明变量不使用var,无论任何位置声明,都是全局变量(不推荐)

 注意:
   全局变量和局部变量冲突时,优先使用局部变量。
 3.变量的声明提前
   1.什么是声明提前
     在JS程序正式执行之前,function声明的函数,
     会将所有var声明的变量,都预读(声明)到所在作用域的顶部,但赋值还是保留在原位。

9.按值传递

1.什么是按值传递

原始(基本)类型的数据(number,string,bool),在做参数传递时,
都是按照“值传递”的方式进行传参的。
值传递:真正传递参数时,实际上传递的是值的副本(复制出来一个值),
而不是原始值。

2.函数的作用域

1.分为两种
  1.局部函数
    在某个function中声明的函数。
  2.全局函数
    在最外层(<script>中)定义的函数就是全局函数,全局函数一经定义,
    任何位置处都能调用。

10.ECMAScript提供一组全局函数

1.parseInt()
2.parseFloat()
3.isNaN()
4.encodeURI()

URL:uniform resource locator路径
URI:uniform resource Identifier
作用:对统一资源标识符进行编码,并返回编码后的字符串
所谓的进行编码,就是将地址中的多字节文字编成单字节的文字
(英文数字:单字节,汉字2-3字节不等)

5.decodeURI()

  作用:对已经编码的URI进行解码,并返回解码后的字符串。

6.encodeURIComponent()

在encodeURI的基础上,允许对特殊符号进行编码。

7.decodeURIComponent()

    解码特殊符号

8.eval()

作用:执行以字符串表示的js代码

9.JSON.parse()

接受一个JSON字符串并将其转换为JavaScript对象。
const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Skip",age:2,favoriteFood:"Steak"}"

10.JSON.stringify()

   接受一个JavaScript对象并将其转换为JSON字符串。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,168评论 0 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  • JS基础 页面由三部分组成:html:超文本标记语言,负责页面结构css:层叠样式表,负责页面样式js:轻量级的脚...
    小贤笔记阅读 598评论 0 5
  • 山势逼威 陡峭之岩,撞冷眸光 苍茫演义坚实 谁随庄严入定 猛然觉察 那惊魂的危岩 闯入倾斜的遐思 在寂然不动的禅意...
    李家长安阅读 115评论 0 1
  • 18民本 王天涯14786177989 漫漫长夜,思语未眠。 听说,你的世界下雨了; 又听说,你的世界天晴了; 雨...