码迷,mamicode.com
首页 > 编程语言 > 详细

前端基础之JavaScript

时间:2018-09-04 23:28:45      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:date   rom   ++   oda   自定义对象   java   添加   相同   拼接   

一、JavaScript引入方式

  1、Script标签内写代码

<script>
    //在这里写你的JS代码
</script>

  2、引入额外的JS文件 

<script src="myscript.js"></script>

二、JavaScript语言规范

  1、注释

    // 这是单行注释

    /*

    这是多行注释

    */

  2、结束符

    JavaScript中的语言要以分号(;)为结束符。

三、JavaScript语言基础

  1、变量声明

    <1>JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。

    <2>声明变量使用var变量名;的格式来进行声明。

var name = ‘guo‘;
var age = 18;
/*
注意:
    变量名是区分大小写的。
    推荐使用驼峰式命名规则。
    保留字不能用作变量名。也就是关键字。
*/
/*
补充:
    ES6新增了let命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。
*/
for (let i = 0;i<arr.lenth;i++) {....}

// ES6新增const用来声明常量。一旦声明,其值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3

// TypeError:‘PI‘ is read-only

四、JavaScript数据类型

  JavaScript拥有动态类型

  var x; // 此时x是undefined

  var x = 1; // 此时x是数字

  var x = "guo" // 此时x是字符串

  1、数值(Number)

    JavaScript不去分整型和浮点型,就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123

      还有一种NaN,表示不是一个数字(Not a Number)。

    常用方法:   

parseInt(‘123‘) // 返回123
parseInt(‘ABC‘) // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat(‘123.456‘) // 返回123.456

  2、字符串(String)

var a = ‘Hello‘;
var b = ‘world‘;
var c = a + b;
console.log(c); // 得到Helloworld

    常用方法:拼接字符串一般用“+”

方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value,..) 拼接
.index 子序列位置
.substring(from,to) 根据索引获取子序列
.slice(start,end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter,limit) 分割

   substring和slice的区别:

string.slice(start, stop)和string.substring(start, stop):

两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度

substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换

silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

slice和substring的区别

     补充:

      ES6中引入了模板字符串。模板字符串(template string) 是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串!`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

    注意:如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义。

         JSHint启用ES6语法支持/*jshint esversion: 6*/

  3、布尔值(Boolean)

    区别于python,true和false都是小写。

var a = true;
var b = false;




// ‘‘(空字符串)、0、null、undefined、NaN都是false。

  4、null和undefined

    ★null表示值是空,一般在需要指定或清空一个变量时才会使用,如name=null;

    ★undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。

    null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。

  5、对象(Object)

    JavaScript中的所有事物都是对象:字符串、数值、数组、函数。。。除外,JavaScript允许自定义对象。

    JavaScript提供多个内建对象,比如String、Date、Array等等。

    对象只是带有属性和方法的特殊数据类型。

    数组

    数组对象的作用是:使用单独的变量名来存储一系列的值。类似于python中的列表。

var a = [123,‘abc‘]
console.log(a[1]); // 输出‘abc’

    常用方法:

方法 说明
.length 数组的大小
.push(ele) 尾部追加元素(可以追加多个元素)
.pop() 获取尾部的元素(只可以删除一个)
.unshift() 头部插入元素(可以插入多个元素)
.shift() 头部移除元素(只可以删除一个)
.slice(start,end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串(点前面是数组join后面的为用来连接的内容)
.concat(val,...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素,并向数组添加新元素
.map() 返回一个数组元素调用函数处理后的值的新数组

    关于sort()需要注意:

      如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的          元素都转换成字符串(如有必要),以便进行比较。

      如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,                        其返回值如下:

                              若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
                              若 a 等于 b,则返回 0。
                              若 a 大于 b,则返回一个大于 0 的值。

      示例:

function sortNumber(a,b){
    return a - b
}
var arrl = [11,100,22,55,33,44]
arrl.sort(sortNumber)

// 关于遍历数组中的元素,可以使用下面的方式:
var a = [10,20,30,40];
for (var i=0;i<a.length;i++){
    console.log(a[i])
}

  6、forEach()

    语法:

      forEach(function(currentValue,index,arr),thisValue)

    参数:

 

五、运算符

  1、算数运算符

+ - * / % ++ --

  2、比较运算符

>  >=  <  <=  !=  ==  ===   !==

注意:
    1==‘1‘  // true  弱类型比较
    1===‘1‘ // false  强类型比较

  3、逻辑运算符

&&与      ||或    !非

  4、赋值运算符

=   +=   -=   *=   /=

六、流程控制

  1、if-else

var a = 10;
if (a>5){
    console.log(‘yes‘)
}else{
    console.log(‘no‘)
}

  2、if- else if - else

var a = 5;
if (a>5){
    console.log(‘a>5‘);
}else if (a<5){
    console.log(‘a<5‘);
}else{
    console.log(‘a=5‘);
}

  3、switch

var day = new Date().getDay();
switch(day){
    case 0:
    console.log(‘Sunday‘)
    break;
    case 1:
    console.log(‘Monday‘)
    break;
    case 2:
    console.log(‘Tuesday‘)
    break;
    default:
    console.log(‘no‘)
}

  switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。

  4、for

for (var i=0;i<10;i++){
    console.log(i)
}

  5、while

var i=0;
while(i<10){
    console.log(i);
    i++;
}

  6、三元运算

var a = 1;
var b = 2;
var c = a>b? a:b
console.log(c)

 

 

 

 

 

前端基础之JavaScript

标签:date   rom   ++   oda   自定义对象   java   添加   相同   拼接   

原文地址:https://www.cnblogs.com/wjs521/p/9588996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!