JavaScript入门基础

JavaScript入门基础

JavaScript是运行在浏览器中的解释型编程语言。在web的世界里只有JavaScript能够跨平台、跨浏览器驱动网页,与用户交互。JavaScript是严格区分大小写的

一、开篇

1.js代码能直接嵌入网页的任何地方,通常放在<head></head>中,但会要求用户把所有js代码都下载解析执行以后在呈现内容;

2.可以把代码单独的放在一个.js文件中,同时,多个页面可以引用同一份.js文件;.js文件与jsp文件一起存放在WebContent目录下;

3.页面中可以多次编写<script></script>,但是浏览器会按照顺序执行这些JavaScript代码;

4.JavaScript中每个语句以 ; 结尾  每个语句块以 {…..}     注释用//或/* */

5.所有类型都是定义变量都是用 var, 如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量,而启用strict模式会强制使用var申明变量(代码的第一行写上: 'use strict'; );

<html>
<head>
  <!-- 在script中引用外部文件,这是同在webcontent目录下--> 
 <script type="text/javascript" src="js/abc.js"></script>
  <script>
      'use strict'; //启用strict模式
     alert('Hello, world');
  </script>
</head>
<body>
   Hello js!
</body>
</html>

  注意:

           1. %求余运算,&&并且,||或者,==自动转换类型在比较,===(建议使用)不自动转换类型,但数据类型不同时会返回false;

           2. NaN 属性是代表非数字值的特殊值,与所有其他值都不相等,包括它自己:

                        NaN === NaN; // false

                        isNaN(NaN); // true,只能用isNaN判断
           3.浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数;

                        Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

           4.alert('我不想执行');

              alert('我也不想执行');

              这样的分两次执行,先执行第一句在执行第二句;
          5.JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义;

二、  字符串

1.字符串用''""括起来的字符表示,字符串内含有“ ” ‘ ’ 的使用转义符 \ ;

2.多行字符串用`….`来表示,+号连接,${name}模板字符串,直接用在字符串中代替为name的属性的值;

字符串操作:

var s = 'Hello';
s.length;   //字符串s的长度
s[0];    // 返回 'H' ,要获取字符串某个指定位置的字符,使用类似Array的下标操作,索引号从0开始:
s[1];    // 返回 'e '
s[2];    // 返回 'l'
s[3];    // 返回 'l'
s[13];   // undefined 超出范围的索引不会报错,但一律返回undefined
s.toUpperCase();     // 返回'HELLO'转换为大写的
s.toLowerCase();     // 返回'hello'转换为小写的
str.indexOf('ll');   // 返回2 在字符串中找到其出现的位置,没有找到指定的子串,返回-1
s.substring(0, 5);   // 从索引0开始到5(不包括5),返回'Hello'
s.substring(x);      // 从索引x开始到结束

字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但也没有任何效果;JavaScript为字符串提供了一些常用方法,调用这些方法本身不会改变原有字符串的内容,而是返回一个新字符串。

三、数组

1.Array提供了一种顺序存储一组元素的功能,并可以按索引来读写。

2.JavaScript的数组可以包括任意数据类型;字符串是不可变的,但是数组是可变的,可以通过索引号来改变;

(1)创建数组,在JavaScript中有两种方法创建数组:

var arr = [1, 2, 3.14, 'Hello', null, true];   //创建数组
var arr = new Array(1,2,3);                    //创建数组
arr.length;                 //获取数组长度,就是数组有几个元素
arr.length = 2;             //给length赋值会改变数组的长度,变为arr={1,2}索引只有0,1
arr[1] = 99;                //索引为1处改变,arr数组变为(1,99,3),而字符串就不行了     
arr[5] = 'x';               // arr变为[1, 2, 3, undefined, undefined, 'x'],不会报错的,不建议这样做。

(2)indexOf()搜索一个指定的元素的位置,与String类似,返回它的索引,没找到返回-1:

var arr = ['A','B', '10',20];   //'10'是一个字符串了
arr.indexOf('A');               // 元素A的索引为0
arr.indexOf('B');               // 元素B的索引为1
arr.indexOf(10);                // 元素10没有找到,返回-1

(3)slice()截取Array的部分元素,就是对应String的substring()版本,然后返回一个新的Array:

var arr =['a','b','c','d','e'];
arr.slice(0, 3);         // 从索引0开始,到索引3结束,但不包括索引3: ['a', 'b', 'c']
arr.slice(3);            // 从索引3开始到结束: ['d', 'e'],不给slice()任何参数,它就从头到尾截取所有元素;

(4)push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

arr.push('A', 'B');             // 直接向array的数组中末尾添加,返回数组长度
arr.pop();                      //从数组的后面删除一个元素,返回被删除的元素
arr.pop();                      // 删除到没有元素后空数组继续pop不会报错,而是返回undefined

(5)unshift()往Array的头部添加若干元素,shift()方法则把Array的第一个元素删掉;

arr.unshift('A', 'B');          //在数组头部添加,返回数组长度
arr.shift();                    //在数组头部删除一个元素,返回被删除的数
arr.shift();                    // 空数组继续shift不会报错,而是返回undefined

(6)sort()可以对当前Array进行排序,直接调用时,按照默认顺序排序;reverse()把整个Array的元素给掉个个,也就是反转;

var arr = ['B', 'C', 'A'];
arr.sort();       // ['A', 'B', 'C']
arr.reverse();    //['C','B','A']

(7)splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素;

var arr = [1, 2, 3, 4, 5, 6];      
arr.splice(2, 3, 'a', 'b');        // 从索引2开始删除3个元素,然后再添加两个元素[1, 2, 'a', 'b', 6]
arr.splice(2, 2);                  // 从索引2开始删除2个元素,返回被删除元素 一个数组
arr.splice(2, 0, 'c', 'd');        // 从索引2开始删除0个元素,返回[],因为没有删除任何元素

(8)concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array(只有截取和连接时是返回一个新的数组的)

var arr = ['A', 'B', 'C'];
var add = arr.concat([1, 2, 3]);   //arr后添加上一个数组后为['A', 'B', 'C', 1, 2, 3];返回了一个新的数组add 
arr.concat(1, 2, [3, 4]);          //所有的都连起来返回一个新的数组['A', 'B', 'C', 1, 2, 3, 4]

(9)join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串;

var arr =['A','B','C',1,2,3];
var s = arr.join('-');
alert(s);             //输出  A-B-C-1-2-3

(10)first(),last()获取第一个和最后一个元素

var arr = [2, 4, 6, 8];
var a = _.first(arr,2); //从数组arr头部开始截取2个元素  2,4
var b = _.last(arr,2);    //从数组arr的尾部开始结局2个元素 6,8
alert(a);

(11)flatten()嵌套多少个数组最后返回的都是一个数组

var a = _.flatten([1, [2], [3, [[4], [5]]]]);   // a=[1, 2, 3, 4, 5]

(12)zip()把多个数组按索引组成新的数组,unzip()反过来(_有时候会显示未定义可能是浏览器问题,有事后又是可以运行的)

var names = ['小明', '小红', '小白'];
var scores = [85, 92, 59];
var nas= _.zip(names, scores);            // 返回一个数组  [['小明', 85], ['小红', 92], ['小白', 59]]
_.unzip(nas);                             // [['小明', '小红', '小白'], [85, 92, 59]]

(13)object(),替代zip(),把两个数组按照索引组成一个对象;

_.zip(names, scores);               // [['小明', 85], ['小红', 92], ['小白', 59]]          
_.object(names, scores);            // {'小明': 85, '小红': 92, '小白': 59}

(14)range()快速生成一个数组

_.range(10); // 从0开始小于10,[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
_.range(1, 11); // 从1开始小于11,[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
_.range(0, 30, 5); //从0开始小于30,步长5, [0, 5, 10, 15, 20, 25]
_.range(0, -10, -1); // 从0开始大于-10,步长-1,[0, -1, -2, -3, -4, -5, -6, -7, -8, -9]

四、对象

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成,用于描述现实世界中的某个对象.

var duixiang ={
name:'李四',
birth:1999,
birthday:'1999.9.9',
'middle-school': 'No.1 Middle School'
}                                      //对象中有点 . 用用‘’扩起来
duixiang.name;                         //李四
duixiang['middle-school'];             //在对象中时加了‘’所以要这样才能访问
duixiang.qqq="hehe";                //添加
delete duixiang.birth;              //可以直接的增加删除                                 
duixiang.hasOwnProperty('name');       //判断是否拥有这个属性true
duixiang.hasOwnProperty('birth');      // false

五、条件和循环

条件判断:if(){} else {} 或者if(){} else if (){} else {}
循环:for()      while() do...while()

var a =[1,2,3]
for (var key in a) {
    alert(key); // 依次输出他的索引
}
for (var key of a){
    alert(key); // 依次输出它的值
}
var b = {
     name:'maomao',
     'y-m-d':'2014.9'
}
for (var key in b){
    alert(key);// 依次输出对象的key,就是属性名;
}
for (var key of b){
    alert(key);// 不可用因为object是不可迭代的
}
//for key of xxx 可以用在array ,map ,set ;

六、map和set,iterable(可迭代的)


JavaScript的对象有个小问题,就是键必须是字符串。

Map是一组键值对的结构,具有极快的查找速度。

var m = new Map([['李四', 95], ['张三', 85], ['毛毛', 75]]);
m.get('毛毛');       // 85
m.set('小二', 65);   //添加新的key-value
m.set('呵呵', 66);
m.has('小二');       //判断是否存在key '小二': true
m.get('呵呵');       // 66
m.delete('小二');    //删除key '小二'

set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key(重复的会被过滤掉)。

var s1 = new Set([1, 2, 3]); // 含1, 2, 3

var s = new Set();
s.add("Thomas Jefferson");//增加元素
s.add(1776);
s.add("founding father");
s.delete(1776);
s.forEach(function (item) {      //对集合中每个元素进行操作
    document.write(item.toString() + ", ");
});

for ... of循环,只循环集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'  没有hello的;
}
//但是使用forEach()更方便
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身,如果是set则写成set
    alert(element);
});

好了,基础入门结束!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值