一、基本语法

1、引入

（1）html内

  1. <script>
  2. alert('aaa');
  3. </script>

（2）单独js文件

a.js

  1. alert('aaa');

test.html

  1. <script src="a.js"></script>

（3）延迟加载

  1. <script src="a.js" defer></script>

2、查看结果

（1）对话框

  1. alert();

（2）控制台

  1. console.log();

3、变量

（1）字面量

字面量是没有意义的，例如一个数字。

  1. console.log(60);   // 年龄、数量、成绩，是没有意义的

（2）变量名命名规则

英文字母、数字、下划线，$ 符，只允许这四种。

注：首字母不能是数字

（3）命名风格：

  • 蛇形： user_name ，多个单词用下划线连接；用于常量。
  • 驼峰： userName，getUserName，第二个单词起首字母大写；用于变量、函数
  • 大驼峰：UserName，帕斯卡；用于类、构造函数

（4）变量的声明

声明变量用 let ，var 以淘汰。

  1. let num = 60;

请注意，JavaScript严格区分大小写，如果弄错了大小写，程序将报错或者运行不正常。

  1. let num;    // 只声明不赋值， 此时 num 的值为 undefined

第一次赋值叫 初始化，第二次赋值 叫更新

将声明与赋值二合一

  1. let num = 99;

（5）常量

常量名，推荐全部大写

  1. const APP_NAME = "在线商城"

代码中首选使用常量，除非可以确定这个数据会发生变化。

4、数据类型

（1）数值

数值有整数和小数。

  1. let data = 123;
  2. let price = 99.99

js不区分小数和整数

  1. 123         // 整数
  2. 123.1       // 浮点数 
  3. 123e3       // 科学计数法
  4. -99         // 负数
  5. NaN         // not a number
  6. Infinity    //表示无限大

数值问题

  1. console.log((1/3) === (1-2/3));    //false
  2. console.log(Math.abs(1/3 - 2/3) < 0.000001);   //true

（2）字符串

字符串用单引号或者双引号

  1. 'abc'
  2. "abc"

注：字符串不可变

转以字符

  1. \
  2. \n
  3. \t
  4. \u4e2d    \\Unicode 编码
  5. \x41      \\Ascii编码

多行（反引号）

  1. vat a = `
  2. adfsa
  3. sde
  4. ewf
  5. e
  6. t4
  7. `

模板字符串

  1. let name = "test"
  2. let age = 3
  3. let msg = `你好鸭，$(name)`

字符串方法

  1. let name = "test"
  2. name.length
  3. name[0]               // 索引取值
  4. name.toUpperCase()    // 转为大写
  5. name.toLowerCase()
  6. name.indexOf('e')     // 获取字符 e 的下标
  7. name.substring(1,3)   //前闭后开

（3）布尔值

  1. true
  2. false

（4）两个特殊值： undefined、null

  1. let res;
  2. console.log(typeof res);        // undefined
  3. res = null;
  4. console.log(typeof res);        // object

（5）原子类型

number、string、boolean、undefined、null

具有单值，不可再分，它是构成符合类型的基础。

（6）引用类型

①、数组

  1. const price = [95, 89, 49, 93, 89]

一个变量名：price，它是一组数据的引用，通过price 可以访问到这个集合中任何一个成员。

访问方式：可以通过索引访问

  1. console.log(price);
  2. console.log(price[0]);
  3. console.log(price[1]);

注：

数组中成员可以是任何类型。

  1. const arr1 = [
  2.   123,
  3.   "abc",
  4.   null,
  5.   true,
  6.   [1, 2, 3, 4, 5],
  7.   function () {
  8.     console.log("Hello World");
  9.   },
  10. ];
  11. console.log(arr1);
  12. console.log(arr1[4]);
  13. console.log(arr1[5]);

引用类型判断不能用 typeof

判断是否为数组： Array.isArray()

②、对象

对象和数组很像，不同点在于它的索引是一个字符串或者标识符。

  1. const = item1 = ['笔记本电脑', 5, 5999]
  2. const item1 = {
  3.     // 属性：变量在对象中叫属性
  4.     'name': '笔记本电脑',
  5.     'num': 5,
  6.     'price': 5999
  7. }

查看对象的方式：

  1. console.log(item1);
  3. // 查看对象的某个属性，可以使用点语法
  4. console.log(item1.num);
  5. console.log(item1.price);

对象的查看可以用： console.table() 来查看。

注：当属性使用了非法标识符时，必须转为字符串，json就采用了这种语法。

  1. const item2 = {
  2.     // 属性：变量在对象中叫属性
  3.     'my name': '笔记本电脑',
  4.     'num': 5,
  5.     'min-price': 29.9
  6. }
  8. console.log(item2['my name']);
  9. console.log(item2['min-price']);

数组中包含对象

  1. const items = [
  2.     {name:"电脑", num:2, price: 2999},
  3.     {name:"手机", num:3, price: 1999},
  4.     {name:"相机", num:1, price: 12999},
  5. ]

  1. items[1].name     // 手机
  2. items[1].price    // 1999

对象可以将数据与函数封装到一起，作为一个独立的编程单元

  1. <script>
  2.     let obj = {
  3.         id: 1,
  4.         username: 'jack',
  5.         num: [1,2,3],
  6.         getUser: function(obj){
  7.             return 'id = ' + obj.id + ', username: ' + obj.username;
  8.         }
  9.     }
  10.     console.log(obj.getUser(obj));
  11.     console.log(obj.getUser());
  12. </script>
  14. ![](https://img.php.cn/upload/image/949/647/702/1649472902323705.png)
  • console.log(obj.getUser());
  • 以上代码中，当方法getUser执行时需要参数，所以会报错。
  • 如果在方法getUser中传入 obj 对象那么就不报错了。

注：

  • 在对象中可以使用变量 this 来引用对象自身。
  1. <script>
  2.     let obj = {
  3.         id: 1,
  4.         username: 'jack',
  5.         num: [1,2,3],
  6.         getUser: function(){
  7.             return 'id = ' + this.id + ', username: ' + this.username;
  8.         }
  9.     }
  10.     console.log(obj.getUser());     // 输出：id = 1, username: jack
  11. </script>

③、函数

函数是对象也是一个值，可以当成一个参数传递，也可以当成返回值。

函数推荐使用：动词 + 名称 的命名方式。

  1. function getTotal(name){
  2.     return 'hello ' + name;
  3. }

查看函数的类型： console.log(typeof getTotal);

既然函数是对象，那么对象就有属性和方法：

  1. // 查看函数名
  2. console.log(getTotal.name);
  4. // 查看函数中有多少个参数
  5. console.log(getTotal.length);

1）函数作为参数

回调函数

  • 函数可以当作一个参数，传入函数中。
  1. <script>
  2.     console.log(typeof function(){});
  4.     function f1(callback){
  5.         console.log(typeof callback);
  6.         console.log(callback());
  7.     }
  9.     f1(function(){
  10.         return 'hello world';
  11.     })
  12. </script>

2）函数作为返回值

函数当返回值：闭包。

  1. <script>
  2.     function f2(){
  3.         let a = 1;
  4.         return function(){
  5.             // 此时子函数中的a不是自己的，是父函数的。
  6.             return a++;
  7.         }
  8.     }
  9.     console.log(f2());
  10.     console.log(f2()());
  11.     const f = f2();
  12.     console.log(f());
  13.     console.log(f());
  14.     console.log(f());
  15. </script>

3）函数就是对象，对象可以添加属性和方法

  1. <script>
  2.     let f3 = function(){};
  3.     f3.myemail = 'admin@qq.com';
  4.     console.log(f3);                      // 输出：ƒ (){}
  5.     console.log(f3.myemail);              // 输出：admin@qq.com 
  7.     f3.getEmail = function(){
  8.         console.log(this.myemail);
  9.     }
  10.     f3.getEmail();                       // 输出：admin@qq.com 
  11. </script>

（7）隐式转换

①、数值和字符串相加

  1. <script>
  2.     console.log("hello" + 100);
  3.     console.log(100 + "hello");
  4. </script>

②、数值和布尔值相加

  1. <script>
  2.     console.log(true + 1);            // 2
  3.     console.log(typeof(true + 1));    // number
  4. </script>

（8）小结

变量、常量、数据类型

数据类型：

基本类型：number、string、bool、undefined、null

引用类型：数组、对象、函数，array、object、function

更多相关文章

  1. Android(安卓)API学习 SoundPool 和 MediaPlayer
  2. android Application学习之二
  3. Unity与Android接口互相调用
  4. Android(安卓)Interface Definition Language (AIDL) android接
  5. 函数参数及返回值、模板字面量及模板函数演示
  6. classList对象与用blur事件进行表单非空验证
  7. JS 函数
  8. Android(安卓)事件分发机制
  9. Android(安卓)Native中Android.mk编译链接时命名冲突的问题

随机推荐

  1. 不同类型业务系统技术架构的差异化
  2. 程序员何苦为难程序员
  3. 推荐系统实战
  4. 程序员，你的一千万在哪里
  5. 图解HTTP（一）
  6. 推荐
  7. 《推荐系统实践》—— 读后总结
  8. 图解HTTP（二）
  9. 《Effective Java》—— 读后总结
  10. 《一线架构师实践指南》—— 读后总结