JavaScript: 字符串、数组、对象 的基本使用

文章目录

• • • 数据类型:
    • • number:
      • 3.1、字符串:
      • 3.2、数组
      • 3.3、对象:

数据类型:

数值、文本、图形、音频、视频

number:

js 不区分小数和整数

123 // 整数123
123.123 // 浮点数
1.123e3 // 科学计数法
-99     // 负数
NaN     // not a numbwe
Infinity // 表示无限大
           

3.1、字符串:

1、正常字符串我们使用 单引号,或者双引号包裹。

*2、注意转义字符 *

\'
\n     // 换行
\t     // 制表符
\u4e2d // \u#### unicode 字符
\x41   // ascii 字符
           

3、多行字符串编写:

let msg = `
            Hello
            World
         `
        console.log(msg);
           

4、模板字符串(字符串的拼接)

let name = "小潘同学";
   console.log(`你好,${name}`);

   // result: 你好,小潘同学
   // 注意: 不是单引号,也不是双引号,是 tab 键 上面的符号。
   // 与 EL 表达式类似,不再使用 '+' 进行连接字符串。
           

5、字符串长度:

<script>
        "use strict"
         let student = "student";
         // 获取字符串的长度
         console.log(student.length);
         // 获取字符串指定下标的值
         console.log(student[2]);
         // 字符串的可变性,不可变
         student[2] = "a";
         console.log(student);
    </script>
           

6、大小写转换:

// 注意,这里是方法,不是属性了,有返回值,转换后的结果是返回值,需要将返回值进行输出
// 转换为大写
student.toUpperCase();
// 转换为小写
student.toLowerCase();
           

7、student.indexOf(‘t’):

// 返回指定字符的下标  
console.log(student.indexOf('t'));
// result: 1
           

8、截取字符串:

// 从start 到最后
console.log(student.substr(2));

// 从 start 开始向后 length 个字符
console.log(student.substr(2,4));

// [) start --> end (不包括end)
console.log(     student.substring(2,5));
           

3.2、数组

Array 可以包含任意的数据类型。

1、定义一个数组:

2、数组的长度:

arr.length
           

数组的长度是可变的,可以改变某个位置的值。

<script>
        "use strict"

        let arr = [1,2,3,4,5,6,7];

        arr[2] = 90;

        console.log(arr);

    </script>

	// result: [1, 2, 90, 4, 5, 6, 7]
           

注意:假如给 arr.length 赋值,数组大小就会发生改变,如果赋值过小,元素就会丢失。

arr.length=10;
console.log(arr);
//result:(10) [1, 2, 90, 4, 5, 6, 7, empty × 3]
           

3、indexOf: 通过元素获得下标索引

console.log(arr.indexOf(5));
 // result: 4
           

4、slice: 字符串的截取:

类似 String 中 substring.

// 从 2 到最后
console.log(arr.slice(2));
// [): start -- > end(不包括end)
console.log(arr.slice(2,4));
           

5、push()、pop()、向数组尾部压入或弹出:

arr.push("a","b");
 console.log(arr);
 // result:(12)[1, 2, 90, 4, 5, 6, 7, empty × 3, "a", "b"]

 arr.pop();
 arr.pop();
 console.log(arr);
 // result:(10) [1, 2, 90, 4, 5, 6, 7, empty × 3]
           

6、unshift、shift、向数组头部压入或弹出:

arr.unshift("a","b","c");
console.log(arr);
// result:(13) ["a", "b", "c", 1, 2, 90, 4, 5, 6, 7, empty × 3]
arr.shift();
arr.shift();
console.log(arr);
// result:(11) ["c", 1, 2, 90, 4, 5, 6, 7, empty × 3]
           

7、排序:

console.log(arr.sort());
// result:(11) [1, 2, 4, 5, 6, 7, 90, "c", empty × 3]
           

8、反转:

console.log(arr.reverse())
// result:(11) [empty × 3, "c", 90, 7, 6, 5, 4, 2, 1]
           

9、连接两个数组concat():

console.log(arr.concat([8,9,10]));
  // result:(14) [empty × 3, "c", 90, 7, 6, 5, 4, 2, 1, 8, 9, 10]
           

注意: concat() 并没有修改数组.只是会返回一个新的数组。

10、连接符 join

打印拼接字符,使用特定的字符串连接:

console.log(arr.join('+'));
 // result:+++c+90+7+6+5+4+2+1
           

11、打印多维数组:

arr = [[1,2],[3,4],["a","b"]];
 console.log(arr[2][1]);
 // result: b
           

3.3、对象:

由若干个键值对组成。

JavaScript总所有的键都是字符串,值是任意对象。

let 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    ......
}
    
 <script>
        // 定义了一个Person对象,有 4 个属性
        let person = {
            name:"小潘同学",
            age:12,
            sex:'M',
            score:96
        }
        console.log(person);
 </script>
           

1、给对象的属性赋值:

person.name = "小蓝";
person.age = 23;

/*  result:
    {name: "小蓝", age: 23, sex: "M", score: 96}
*/

           

2、使用一个不存在的属性时:不会报错！ undefined.

person.haha
undefined
           

3、动态的删减属性:

delete person.name;
  console.log(person);
  // result:{age: 23, sex: "M", score: 96}
           

4、动态的添加属性:

// 直接给新的属性添加值即可
person.ha = "hello";
console.log(person);
// result:{age: 23, sex: "M", score: 96, ha: "hello"}
           

5、判断某个属性是否在该对象中:

console.log('age' in person);
// result: true        
console.log('a' in person);
// result: false

// 继承
console.log('toString' in person);
// result: true,g
           

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperity()

console.log(person.hasOwnProperty("toString"));
// result:false
console.log(person.hasOwnProperty("age"))
// result:true