likes
comments
collection
share

D1-初识JavaScrpt

作者站长头像
站长
· 阅读数 37

JavaScript是一种广泛应用于Web开发的脚本语言，它可以让网页具有交互性，实现动态效果。本文将记录我学习JavaScript的过程，包括JavaScript的诞生、数据类型以及我对原型的理解等。

1. JavaScript的诞生

  JavaScript最初是由Netscape公司的Brendan Eich在1995年为了解决浏览器兼容性问题而发明的。当时，HTML和CSS主要用于描述网页的结构和样式，但它们不能实现动态效果。为了解决这个问题，Brendan Eich决定开发一种新的脚本语言，这就是我们今天所熟知的JavaScript。

2.JavaScript简单使用

1、JavaScript写在何处

① 作为外部文件引入

<script src="文件路径"></script>

② 内嵌在HTML中

<script>
    alert("这是内嵌式js代码");
</script>

说明：

  放在<head>中的JS代码会在页面加载完成之前就读取，而放在<body>中的JS代码，会在整个页面加载完成之后读取。 这就说明了，如果我们想定义一个全局对象，而这个对象是页面中的某个按钮时，我们必须将其放入<body>中，道理很明显：如果放入<head>，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。

2、JavaScript简单使用

① 注释：

// 单行注释

/*
    多行注释
    多行注释
    多行注释
*/

② 声明变量：

  let（ES6）声明变量，const声明常量。

let variable = 10
const constant = 20
variable = 20
constant = 30  // webstorm会报错
console.log(variable);  // 20
console.log(chang);  // 30

③ 输入输出：

  为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

// prompt 弹出输入框 用户可以按照指引输入内容
var name = prompt('请输入您的姓名')

// alert 弹出警示框 输出的 展示给用户的
alert(name + ' 你好!')

// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的:' + name)

3. JavaScript的数据类型

JS中的数据类型有以下七种：

  • 数字（Number），整数或浮点数，例如： 42 或者 3.14159。
  • 字符串（String），字符串是一串表示文本值的字符序列，例如："Howdy"。
  • 布尔值（Boolean），有 2 个值分别是：true 和 false。
  • undefined，和 null 一样是一个特殊的关键字，undefined 表示变量未赋值时的属性。
  • null，一个表明 null 值的特殊关键字。JavaScript 是大小写敏感的，因此 null 与 Null、NULL或变体完全不同。
  • 代表（Symbol，在 ECMAScript 6 中新添加的类型）。一种实例是唯一且不可改变的数据类型。
  • 以及对象（Object）。

下面分别介绍它们：

① Number(数字)：用于表示整数或浮点数

let num1 = 10 // 整数
let num2 = 0.1 // 小数
let num3 = 1e10 // 科学计数法
let num4 = 0b1010 // 二进制
let num5 = Infinity // 无穷大
let num6 = NaN // 非数字
let n1 = '你好'-1 
let n2 = 0/0 
console.log(n1) // NaN
console.log(n2) // NaN
console.log(Number.MAX_VALUE); // 最大值
// 因为js的精度问题，0.1+0.2结果不等于0.3而等于0.30000000000000004
console.log(0.1+0.2);

② String(字符串)：用于表示文本

let userName = '张三'
let phoneNumber = '12345678901'
console.log(userName.length); // 2
console.log(userName[0]); // 张
console.log(phoneNumber); // 12345678901
// 通过substring截取字符串
console.log(phoneNumber.substring(7, 11)); // 8901

③ Boolean(布尔值)：用来判断true或者false，它一般和if条件判断搭配使用

// js中定义了五个false值，即相当于false的值
// 0、NaN、undefined、null、''
if(!undefined){
    console.log('undefined为false值'); // undefined为false值
}

if(!NaN){
    console.log('NaN为false值'); // NaN为false值
}

if(!null){
    console.log('null为false值'); // null为false值
}

if(!0){
    console.log('0为false值'); // 0为false值
}

if(!''){
    console.log('""为false值'); // ""为false值
}

④ Undefined(未定义)：表示变量尚未赋值或不存在。

let a
console.log(a) // undefined（控制台里面显示灰色）

⑤ Null(空值)：表示没有值的对象。

let b = null
console.log(b) // null

⑥ Symbol(代表)：通过Symbol函数生成，用于表示独一无二的值

const sym = Symbol.for("aaa");

⑦ Object(对象)：用于表示复杂的数据结构，如键值对，常用于描述一个事物。

let user = {
    name: '张三',
    age: 18,
    hobby: ['吃饭', '睡觉', '打豆豆'],
    address: {
        city: '北京',
        street: '天安门'
    }
}

// 对象的操作
// 1.获取对象中的属性
// 通过.获取属性 能够获取到对象中的属性或方法
const name = user.name
console.log(name); // 张三
// .一个不存在的属性，会返回undefined
console.log(user.money); // undefined
// 通过[]获取属性
console.log(user['name']); // 张三
// 获取对象的所有的key值
console.log(Object.keys(user)); // [ 'name', 'age', 'hobby', 'address' ]
// 2.修改对象中的属性
// 通过“对象名.属性名=新值”修改对象中的属性
user.name = '李四'
console.log(user.name); // 李四
// 3.添加对象中的属性
// 通过“对象名.属性名=值”添加对象中的属性
user.money = 100
console.log(user.money); // 100
// 4.删除对象中的属性
// 通过“delete 对象名.属性名”删除对象中的属性
// 删除key会连同value一起删除
delete user.money
console.log(user.money); // undefined

4. 对JavaScript原型的理解

Object that provides shared properties for other objects 给其它对象提供共享属性的对象    —— ES2019 规范

  原型(prototype)是JavaScript中的一种重要概念，它是所有对象共享的属性和方法的集合。在JavaScript中，每个对象都有一个原型对象，当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，那么JavaScript会去它的原型对象上查找。这就实现了继承和重用功能。

hasOwnProperty()方法可以帮我们检测一个对象是否含有特定的自身属性，它无法检测出原型

let obj = {
    a: 1,
}

// 该方法返回true/false
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('toString')); // false

in运算符可以帮我们检测一个对象是否含有某个属性，它可以检测出原型

let obj = {
    a: 1,
}



// 该方法返回true/false
console.log('toString' in obj); // true
console.log('toString' in obj); // true

  在规范里，prototype 被定义为：给其它对象提供共享属性的对象。 也就是说，prototype 自己也是对象，只是被用以承担某个职能罢了。 给定所有对象，我们当然可以为不同对象分配不同职能，然后给予不同称谓。 prototype 只是其中一种划分，我们也可以根据自己的需要，做出自己的划分和命名。

  同理，当某个对象，承担了为其它对象提供共享属性的职责时，它就成了该对象的 prototype。当它失去这个职能（比如子对象的原型被设置为其它对象），它就不叫该对象的 prototype。 换句话说，当我们说 prototype 对象时，是在做一个简略描述，实际上说的是 “xxx 对象的 prototype 对象”。如果不跟其它对象产生关联，就不构成 prototype 这个称谓。

  因此，prototype 描述的是两个对象之间的某种关系（其中一个，为另一个提供属性访问权限）。它是类似 father 父亲一样的称谓，而不是具有超能力的异常对象。 所有对象，都可以作为另一个对象的 prototype 来用。

5.JavaScript中的类型转换

1、显式类型转换

① String--->Number

  特点：只能识别纯数字的字符串包括整数，小数，科学计数法

let a= Number('10')
let b=Number('Hello')
let c=Number(undefined)
let d=Number('1.23e10')
console.log(a); // 10
console.log(b); // NaN
console.log(c); // NaN
console.log(d); // 12300000000

② number--->string

let a= Number('10')
let aStr=a.toString()
console.log(aStr); // 10

③ boo1---->number

let boolN=Number(true)
let boolF=Number(false)
// true=1 false=0
console.log(boolN); // 1
console.log(boolF); // 0

④ number--->bool

let e=0
let f=-10
let bool1=Boolean(e)
let bool2=Boolean(f)
console.log(bool1);
console.log(bool2);

⑤ object--->string

let obj={
    a:10,
    b:20
}
const str1=obj.toString()
console.log(str1);
// 序列化 JSON.stringify()将对象转换为字符串
const str2=JSON.stringify(obj)
console.log(str2);

2、隐式类型转换

  由于JavaScript是一种非常灵活的语言, 导致数据类型存在大量隐式转换, 这里面有很多坑。

① + 的隐式转换

// 只要+号的一边是字符, 最终的结果就是字符 
console.log('123' + '456') // '123456' 
console.log('123' + 456) // '123456' 
console.log('123' + true) // '123true' 
// 特殊 
undefined + 1 // NaN

② == 的隐式转换（== 与 != 不判断类型）

// 字符型 转换成 数字型  
'1' == 1 // true 
// 布尔型 转换成 数字型
true == 1 // true 
// 二者结合
'1' == true // true 
// 特殊
NaN != NaN // true 
undefined == null // true

6.JavaScript中的运算符

1、算数运算符

D1-初识JavaScrpt

2、自增自减运算符 —— 一元操作符

var num1 = 10
var num2 = 10

// 前置自增：先+1, 再返回结果
console.log(++num1)  // 11

// 后置自增：先返回结果, 再+1
console.log(num2++)  // 10
console.log(num2) // 11

3、比较运算符

  比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果，有> < >= <= == === != !== 8种。

// 字符串间的比较是通过ASCII码进行逐字比较的
console.log('100' < '99')  

// == 与 != 不判断类型  === 与 !== 判断类型
console.log(1 == '1'); 
console.log(1 === '1'); 
console.log(1 != '1'); 
console.log(1 !== '1');

4、逻辑运算符

  逻辑运算符有：&& 与、 || 或、 ! 非   逻辑运算符的操作数是布尔型，如果不是，则会存在隐式转换。

// 字符串间的比较是通过ASCII码进行逐字比较的
console.log('100' < '99')  

// == 与 != 不判断类型  === 与 !== 判断类型
console.log(2>1 && 3>2); 
console.log(2>1 || 3>2);
console.log(!true);

// 逻辑表达式的返回值不一定是布尔值，eg↓
console.log(3 && 2)  // 返回值是第一个为假的值，或者最后一个为真的值
console.log(3 || 2)  // 返回值是第一个为真的值，或者最后一个为假的值

// 逻辑运算符的短路运算
// 逻辑与的短路运算：只要第一个表达式为假，则第二个表达式不会执行
console.log(3 && 2 && 0 && 123 && 456)
// 逻辑或的短路运算：只要第一个表达式为真，则第二个表达式不会执行
console.log(0 || undefined || '' || NaN || 123 || 456)

5、三元表达式

  条件表达式 ? 表达式1 : 表达式2   如果条件表达式为真，则执行表达式1，否则执行表达式2

let a = 50;
let b = 20;
let c = a > b ? a : b;
console.log(c);

7.JavaScript中的流程控制语句

1、条件语句

  根据不同的条件，执行不同的路径代码（执行代码多选一的过程）从而得到不同的结果

① if 语句

  条件成立执行 if 里面代码，否则执行 else 里面的代码

if(条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

② switch 语句

  多分支语句，它用于基于不同的条件来执行不同的代码

switch(表达式){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

2、循环语句

  重复多次执行有规律的代码, 可以使用循环来表示, 通过一个变量可以记录第几次循环, 已经循环的总次数

① for 循环

for(初始化变量; 条件表达式; 操作表达式 ){
    // 循环体
}

② do-while 循环

// do-while循环
do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式)
}

③ 跳出循环

  continue 跳出当前循环； break 跳出整个循环

// continue示例
for (let i = 1; i <= 5; i++) {
    if (i == 3) {
        console.log('这个包子不好吃，扔掉');
        continue; // 跳出本次循环，跳出的是第3次循环 
    }
    console.log('我正在吃第' + i + '个包子呢'); // i = 1 2 4 5
}
// break示例
for (let i = 1; i <= 5; i++) {
    if (i == 3) {
        console.log('吃饱了，再也吃不下了');
        break; // 直接退出整个for 循环，跳到整个for下面的语句
    }
    console.log('我正在吃第' + i + '个包子呢'); // i = 1 2
}

④ for-in 循环遍历对象

// 定义对象
let obj = {
    a: 1,
    b: 2,
    c: 3
}
// 遍历对象
for (var key in obj) {
    console.log(key)
    console.log(obj[key])
}
转载自:https://juejin.cn/post/7263382614785638437
评论
请登录