JavaScript----第三章

目录

知识点

1. 函数

A. 函数的调用问题

B. IIEF(立即执行函数)

C. 函数与事件的集合

D. 函数结合事件操作文本值

E. 函数结合事件操作表单值

2. 预解析

3. 作用域

4. 对象

A. 创建对象的方式

B. 操作对象的属性和方法

C. 对象的特点

D. 遍历对象

知识点

1. 5中控制台输出方式

2. 初识window

3. 递归函数

3. 基本数据类型与复杂数据类型的区别

4. 数组

A. 创建数组

B. 数组的属性

C. 冒泡排序

D. 选择排序

1. 数组方法

A. 数组的核心方法

B. 数组的常规方法

C. 高阶数组方法

2. 数组去重

3. 字符串

A. 创建字符串的两种方式

B. 字符串的属性

3. 字符串的分类

A. 纯数字字符串

B. HTML字符串

C. 模板字符串

D. 查询字符串

E.JSON字符串

知识点

1. 字符的方法

2. 综合练习

---

知识点

1. 函数

A. 函数的调用问题

当我们调用一个函数的时候,函数名(fn)可以快速的找到某一个函数,后面的小括号的作用就是执行

比如

// 当我们调用一个函数的时候,函数名 fn 可以快速的找到一个函数
// 函数名后面的小括号的作用 => 执行
function fn(){
    console.log("我是一个无参无返回值的函数");
}
// fn();

console.log(fn()); //没有括号表示可以找到fn这个函数,但是没有执行Copy to clipboardErrorCopied

B. IIEF(立即执行函数)

函数会自己来运行自己 => 靠的就是小()

比如

//函数自调用(立即执行函数),IIFE
// 前面的() => 将一个函数的所有代码当做一个整体
// 后面的() => 执行这个函数,那么这个函数就可以立即执行
(function(){
    console.log("我是立即执行函数");
})()Copy to clipboardErrorCopied

C. 函数与事件的集合

1. on => JS的行为

2. click => 点击

3. onclick => 点击的时候,触发一个JS的行为(事件)

4. onclick = function () {} => 当我们点击某一个标签的时候,触发一个function匿名函数的运行

比如

<!-- 行内样式触发一个行为 -->
<button onclick="fn()">点我</button>
<!-- id => 就相当于button按钮这个身份证 -->
<button id="id1">点我</button>
<button id="id2">点我</button>
<script>
    /* 
        函数与事件的结合
            1. 事件 => 事件就是一种行为
                点击事件,输入事件,提交事件...
            2. 当我们点击某一个标签的时候,触发一个事件(行为)
            3. 就需要让标签处于一个唯一的状态,添加一个 ID , ID 在任意情况都是唯一
            4. 点我们点击某一个事件的时候,可以触发一个行为
                有两种编写方式
                    A. 行内书写JS
                    B. 标签触发一个行为
    */
    // console.log(id1);
    // console.log(id2);

    //行内触发一个行为
    function fn(){
        alert("我是fn函数")
    }

    //唯一的标签触发一个行为
    /* 
        on => js的行为
        click => 点击
        onclick => 点击行为
        onclick = function => 点击的时候,触发一个行为,让后面的匿名函数运行起来
    */
    id1.onclick = function(){
        alert("我是id1这个标签")
    }
</script>Copy to clipboardErrorCopied

D. 函数结合事件操作文本值

1. 身份证.innerHTML => 获取标签的文本值

2. 身份证.innerHTML = 123 => 将标签的文本修改成123

比如

<p id="p">获取了一个p标签</p>
<script>
    /* 
        语法:
            身份证.innerHTML => 获取标签的文本值
            身份证.innerHTML = xxx => 给标签的文本值赋值
    */
    // console.log(p);
    // 获取标签的文本值
    console.log(p.innerHTML);

    // 给标签的文本值赋值
    p.innerHTML = "xxx"
</script>Copy to clipboardErrorCopied

E. 函数结合事件操作表单值

1. 身份证.value => 获取表单的value值

2. 身份证.value = xxx

比如

<input type="text" id="i1" value="我是第一个表单"><br>
<select name="" id="i2">
    <option value="-1">请选择</option>
    <option value="1">长沙</option>
    <option value="2">武汉</option>
    <option value="3">南昌</option>
    <option value="4" selected>深圳</option>
</select>
<textarea name="" id="i3" cols="30" rows="10">我是表单</textarea>
<script>
    /* 
        获取元素的表单
            身份证.value => 获取表单的value值
            身份证.value = xxx => 修改表单的value值
    */
    //获取表单的value值
    console.log(i1.value);
    console.log(i2.value);
    console.log(i3.value);
    //修改表单的value值
    i1.value = "我是男生,可爱的男生"
    i2.value = "2"
    i3.value = "我是一个小小的石头"
</script>Copy to clipboardErrorCopied

案例

账号: <input type="text" placeholder="请输入账号" id="inp1"><br>
密码: <input type="password" placeholder="请输入密码" id="inp2"><br>
<button id="btn">登录</button>
<script>
    /* 
        当我们点击登录按钮之后,那么获取账号和密码
        如果账号的值为admin并且密码的值为123456,那么表单登录成功,否则登录失败
    */
    btn.onclick = function(){
        //获取用户收入账号或者密码
        var username = inp1.value;
        var password = inp2.value;
        //如果账号为admin,并且密码为123456,登录成功,否则登录失败
        if(username == 'admin' && password == '123456'){
            alert("登录成功")
        }else{
            alert("登录失败")
        }
    }

</script>Copy to clipboardErrorCopied

2. 预解析

JS引擎在运行JS代码的时候,会事先对JS代码进行一遍扫描

• 对var声明的变量进行提升,提升的是变量,而不提升变量的值

• 对function声明的函数进行提升,提升的是整个函数

• 在function函数的内部也会进行提升

• 当var声明的变量与function声明的函数名出现同名的情况下,那么function声明的函数的优先级高于var声明的变量

3. 作用域

作用域 : 作用的范围

1. 全局作用域

• 在script里面,function函数的外面

• 在全局作用域当中定义的变量,全局变量(在script里面任意范围可以访问)

• 在全局作用域当中,this=>window(混个眼熟)

1. 局部作用域(函数作用域)

• 在function的里面

• 局部作用域当中的定义的变量,只能在当前作用域当中进行访问

• 注意: 在局部作用域当中定义变量的时候,如果没有使用var关键字声明的话,那么这个也属于全局作用域

比如

/* 
    作用域:
        域: 范围 , 作用域: 作用的范围
        1. 全局作用域
            - 全局在script的里面,function函数的外面
            - 在全局作用域当中定义的变量,全局变量(script里面任意地方都可以访问的到)
            - 在全局作用域当中的this->window
        2. 局部作用域(函数作用域)
            - 局部作用域在function函数的里面
            - 局部作用域中定义的变量,只能在当中作用域当中进行访问,外部作用域无返访问
            - 局部作用域当中定义的变量,如果没有使用var关键字修饰,那么这个变量属于全局遍历
*/
// 全局作用域
var a = 10;
console.log(a);//在全局作用域当中定义的变量,全局变量(script里面任意地方都可以访问的到)

console.log(this);//在全局作用域当中的this->window

function fn(){
    //局部作用域
    var b = "陈锦"
    console.log(b);//局部作用域中定义的变量,只能在当中作用域当中进行访问

    //局部作用域当中定义变量的时候,如果没有使用var关键字修饰,那么这个变量就是全局变量
    c = "文渊"

    console.log(a);//在全局作用域当中定义的变量,全局变量(script里面任意地方都可以访问的到)
    function fun(){
        console.log(a);//在全局作用域当中定义的变量,全局变量(script里面任意地方都可以访问的到)
    }
    fun();
}
fn();

// console.log(b);//局部作用域当中的变量,外部作用域当中无法访问

console.log(c);

console.log(a);//在全局作用域当中定义的变量,全局变量(script里面任意地方都可以访问的到)Copy to clipboardErrorCopied

1. 作用域链

• 当我们访问一个变量的时候,那么这个变量有优先在当前作用域当中进行访问,如果能够访问的到,那么就使用,如果访问不到,那么就去外部作用域

• 如果在外部作用域当中访问的到,那么就使用,如果访问不到,那么就再取外部作用域

• 依次类推

• 一直要访问到全局作用域为止,如果在全局作用域当中访问的到,那么就使用,如果没有访问的到,那么就 xxx is not defined

比如

/* 
    1. 当我们访问一个变量的时候,优先在当前作用域当中进行访问,如果访问的到,那么就使用,如果访问不到,那么就去外部作用域当中查找
    2. 如果在外部作用域当中查找,如果查找的到,那么就使用,如果查找不到,那么就再去外部作用域
    3. 依次类推
    4. 一直要访问到全局作用域当中为止,如果可以访问,那么就使用,如果没有访问的到,那么就xxx is not defined
*/

// var a = 10;//全局变量

function outer(){

    // var a = 20;

    function content(){

        // var a = 30;

        function inner(){
            
            // var a = 40;

            console.log(a);
        }

        inner();

    }

    content();

}
outer();Copy to clipboardErrorCopied

4. 对象

A. 创建对象的方式

1. 使用字面量创建对象

语法

var 对象名 = {}Copy to clipboardErrorCopied

1. 使用内置构造函数创建对象

语法

//内置 => JS绑定内置,JS帮我们做好了
//构造 => new
//内置构造函数 => 别人已经帮我们把这个函数的功能都已经实现完毕了,我们可以使用拿过来使用就好了
//使用内置构造函数创建对象 => 
var 对象名 = new Object();Copy to clipboardErrorCopied

比如

//使用字面量创建对象 
var obj = {};
console.log(obj);

//使用内置构造函数创建对象
var obj1 = new Object();
console.log(obj1);Copy to clipboardErrorCopied

1. 再谈数据类型

• 基本数据类型 => number,string,boolean,null,undefined

• 复杂数据类型(引用数据类型) => Object {},对象是属于一个复杂数据类型

B. 操作对象的属性和方法

1. 点语法

• 对象的增 => 对象名.属性 = 属性值

• 对象的删 => delete 对象名.属性

• 对象的改 => 对象名.属性 = 属性值

• 对象的查 => 对象名.属性

比如

//创建一个对象
var obj = {}
//操作对象

//添加 => obj.属性 = 属性名
obj.name = "陈锦"
obj.gender = "男"

//删除 => delete obj.属性
delete obj.gender

//修改
obj.gender = "男"  //添加
obj.gender = "女"  //修改       有则修改,无则添加

//获取 => obj.属性 , 注意: 只有在有这个属性的时候,才可以获取的到,没有这个属性,那么就是undefined
console.log(obj.name);

console.log(obj);Copy to clipboardErrorCopied

1. 中括号操作对象

• 添加 => 对象[变量或者变量的值] = 属性值

• 删除 => delete 对象[变量或者变量的值]

• 修改 => 对象[变量或者变量的值] = 属性值

• 获取 => 对象[变量或者变量的值]

比如

//使用内置构造函数创建对象
var obj = new Object();

//添加 => obj[变量或者变量的值] = 属性值
//变量
var a = 'name'
obj[a] = "🍎"   //忘obj这个盒子里面添加了一个属性为那么,属性值为🍎
obj['gender'] = '吃'
obj['age'] = 18;

//删除 => delete obj[变量或者变量的值]
delete obj[a]   //将obj这个对象里面的name属性给删除掉
delete obj['age']


//修改 => 有则修改,无则添加
obj[a] = '🍊'
obj['name1'] = '🍑'


//获取 => obj[变量或者变量的值]
console.log(obj[a]);
console.log(obj['name1']);
console.log(obj);Copy to clipboardErrorCopied

注意: 中括号语法操作对象属性的时候,可以不遵守变量的命名规则

1. 操作对象的方法

比如

//内置构造函数创建对象
var obj = new Object();
//添加一个属性
obj.name = "陈锦"
obj['age'] = 88;

//添加方法(函数)
obj.eat = function(){
    console.log(obj.name + '在吃饭');
}
obj["walk a dog"] = function(){
    console.log(obj.name + '遛狗');
}
//删除方法
delete obj.eat
delete obj['walk a dog']

//修改
obj.eat = function(){
    console.log("文渊吃");
}
obj.eat = function(){
    console.log("陈锦吃");
}

//获取
console.log(obj.eat);

//方法(行为)可以调用
obj.eat();

console.log(obj);Copy to clipboardErrorCopied

C. 对象的特点

1. 存储的结构(key_value)键值对的形式的

2. 对象的key(键)是不能重复的

比如

/* 
    分析对象的存储结构
        1. 键值对(key_value)
        2. 其中对象的key(键),是不能重复的
*/
var obj = new Object();
obj.name = "张三"
obj.age = 18;
obj.eat = function(){console.log(obj.name+"吃");}

obj.age = 22;
console.log(obj);Copy to clipboardErrorCopied

D. 遍历对象

1. 遍历对象使用的 for in 遍历

比如

/* 使用字面量创建一个对象 */
var obj = {
    name:"张三",
    age:18,
    gender:"男",
    eat:function(){
        console.log(obj.name + "吃");
    }
}

/* 
    遍历对象 使用的是 for in
    语法:
        for(var key in 对象名){
            console.log(key,对象名[key]);
        }
        循环第一次 => key = name        obj[key] = 张三
        循环第二次 => key = age         obj[key] = 18
        循环第三次 => key = gender      obj[key] = '男'
        循环第四次 => key = eat         obj[key] = function(){obj.name+"吃"}
*/
for(var key in obj){
    console.log(key,obj[key]);
}

知识点

1. 5中控制台输出方式

1. console.log("你好"); => 正常输出

2. console.dir(btn) => 打印对象的属性与方法

3. console.group() => 分组打印 console.groupEnd()

4. cosnole.warn() => 打印一个警告信息

5. console.error => 打印一个错误信息

比如

<!-- 我们的所有HTML标签都是一个对象 -->
<button id="btn" class="c1" onclick="alert(1111)">btn</button>
<script>
        var obj = {
        name:"张三",
        eat:function(){
            console.log("我吃");
        }
    }
    // 正常输出
    // console.log("你好!1111");
    console.log(btn)
    
    //打印一个对象的属性与方法
    console.dir(btn)

    //分组打印
    console.group("组1")
    console.log("浩丰科技大花洒会计法汇顶科技数");
    console.log("浩丰科技大花洒会计法汇顶科技数");
    console.groupEnd();

    //打印一个警告信息
    console.warn("警告你")

    //打印一个错误信息,不阻塞代码
    console.error("错误你")

</script>Copy to clipboardErrorCopied

2. 初识window

1. window是一个对象,是浏览器当中顶级对象

2. 我们在全局作用域当中定义的变量,就是window的一个属性,我们在全局作用域当中定义的函数,那么就是window的一个方法(行为)

3. window在使用的过程当中,可以省略不写

比如

var obj = {
    name:'张三'
}
console.log(obj.name);

//我们在全局作用域当中定义的变量就是window的是一个属性
//我们在全局作用域当中定义的一个函数,就是window的一个方法

//定义一个变量
var a = 123;//就是window的属性
console.log(window.a);
console.log(a);
// alert("你好!")
//完整写法
// window.alert(111111111);

function aa(){
    //定义一个变量,不要使用var来修饰,那么这个变量就是一个全局变量
    aaa = 123;
    console.log("我是一个函数");
}
aa();


// //window可以省略不写
// 比如: window.a => 可以直接写a
//       window.alert()  => 可以直接写成alert()
//       window.aa() => 可以直接写aa

console.log(this);Copy to clipboardErrorCopied

3. 递归函数

1. 所谓的递归函数 => 就是函数自己调用自己,会有一个临界点

比如

//递归函数就是自己调用自己 =>递归的代码都有一个临界值
function fn(){
    var res = confirm("陀螺是否停止了转动?")
    if(res == true){
        window.alert("恭喜你,回到了现实世界!")
    }else{
        window.alert("还在梦境里面")
        fn();
    }
}
//是别人执行了这个函数
fn();Copy to clipboardErrorCopied

3. 基本数据类型与复杂数据类型的区别

1. 数据类型

• 基本数据类型

  • number,boolean,string,null,undefined

• 复杂数据类型

  • Object,Array,Function....

1. 基本数据类型存储就是普通值,复杂数据类型存储的是地址

案例1

var obj = {}
var obj1 = obj;
obj1.name = "王二麻子"

console.log(obj === obj1);
console.log(obj.name,obj1.name);
console.log(obj.name === obj1.name);

var o1 = {}
var o2 = {}Copy to clipboardErrorCopied

案例2

var obj = {};
var obj1 = obj;

obj.name = {}

console.log(obj.name === obj1.name);//trueCopy to clipboardErrorCopied

案例3

function fn(a,b){//a和b相当于局部变量
    // var aa = 1;
    // var bb = ①

    // aa = 20;
    // bb.abc = "ABC"
    a = 20;
    b.abc = "ABC"
}

var a = 1;
var b = {}
fn(a,b)

console.log(a,b);//1,{abc:ABC}Copy to clipboardErrorCopied

4. 数组

A. 创建数组

1. 数组是一个复杂数据类型

2. 创建数组

• 使用字面量创建数组

比如

//创建一个空数组
var arr1 = [];
console.log(arr1);

//创建一个有元素的数组
var arr2 = ['🍎','🍊','🍌','🍉','🍇']
console.log(arr2);Copy to clipboardErrorCopied

• 使用内置构造函数创建数组

比如

//创建一个空的数组
var arr1 = new Array();
console.log(arr1);

//创建一个长度为5的数组
//在Array里面写一个 数字 
var arr2 = new Array(6);//必须得是一个数字
console.log(arr2);

//创建一个有元素的数组
var arr3 = new Array('🌏','🏓','🏀','唱','跳')
console.log(arr3);Copy to clipboardErrorCopied

B. 数组的属性

1. 下标(索引)

• 数组的下标是可读可写

比如

// 数组的下标
var arr = ['🍎','🍊','🍐','🍇','🍌','🍑','🍉']
//下标(索引) 0    1     2    3     4    5     6

//根据下标获取元素
// console.log(arr[0]); //获取数组里面的第一个元素
// console.log(arr[1]); //获取数组里面的第二个元素
// console.log(arr[2]); //获取数组里面的第三个元素
// console.log(arr[3]); //获取数组里面的第四个元素
// console.log(arr[4]); //获取数组里面的第五个元素
// console.log(arr[5]); //获取数组里面的第六个元素
// console.log(arr[6]); //获取数组里面的第七个元素
// console.log(arr[7]); //获取数组里面的第八个元素

for(var i = 0 ; i < 8 ; i++){
    console.log(arr[i],i);
}Copy to clipboardErrorCopied

比如

//数组的下标是可读(可以获取的到)可写(可以根据数组的下标修改元素)
var arr = ["张三",'李四','王五']
//下标       0      1      2
//根据下标获取元素
console.log(arr[1]);

//根据下标修改元素
arr[1] = "陈锦"

console.log(arr);Copy to clipboardErrorCopied

1. 长度(length)

• 数组的长度也是可读可写

比如

var arr = ['🍎','🍊','🍌','🍇']

//获取数组的长度
console.log(arr.length);

// 修改数组的长度
// arr.length = 12;
arr.length = 2;

console.log(arr);Copy to clipboardErrorCopied

C. 冒泡排序

比如

for(var j = 0 ; j < arr.length - 1; j++){
    for(var i = 0 ; i < arr.length - j - 1 ; i++){
        if(arr[i]>arr[i+1]){
            var temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp;
        }
    }
}Copy to clipboardErrorCopied

D. 选择排序

比如

for (var j = 0; j < arr.length - 1; j++) {
    var maxIndex = j;
    for (var i = j+1; i < arr.length; i++) {
        if (arr[maxIndex] < arr[i]) {
            maxIndex = i;
        }
    }

    var temp = arr[j]
    arr[j] = arr[maxIndex]
    arr[maxIndex] = temp;

}

1. 数组方法

A. 数组的核心方法

• 特点: 改变原数组

• 使用: 数组.xxx() => xxx表示就是方法名

1. push => 往数组的默认添加一个元素

2. pop => 删除数组的末尾元素

3. unshift => 往数组的开头添加元素

4. shift => 删除数组的开头元素

5. sort => 对数组的元素进行排序

6. reverse => 翻转数组

7. splice => 对数组的增删改

比如

/* 
    数组的核心方法
        特点: 会改变原数组
        方法:
            1. push => 往数组的末尾添加元素
            2. pop => 删除的数组的末尾元素
            3. unshift => 往数组的开头添加元素
            4. shift => 删除数组的开头元素
            5. sort => 对数组进行排序
                10以内的排序 => 数组.sort();
                对数组进行从小到大的排序 => 数组.sort(function(a,b){return a-b})
                对数组进行从大到小的排序 => 数组.sort(function(a,b){return b-a})
            6. reverse => 翻转数组
            7. splice => 对数组进行增删改
        使用:
            数组.xxx() => xxx就是方法名
*/
// 1. push => 往数组的末尾添加元素,返回的就是新数组的长度
var arr = ['🍎','🍊','🍇']
var res = arr.push('🍑');
console.log(arr,res);

// 2. pop => 删除数组的末尾元素,返回的就是被删除的元素
var arr = ['🍎','🍊','🍇']
var res = arr.pop();
console.log(arr,res);

// 3. unshift => 往数组的开头添加元素,返回就是新数组的长度
var arr = ['🍎','🍊','🍇']
var res = arr.unshift("🍑");
console.log(arr,res);

// 4. shift => 删除是数组的开头元素,返回的就是被删除元素
var arr = ['🍎','🍊','🍇']
var res = arr.shift();
console.log(arr,res);

// 5. 排序 => 返回的就是排序之后的新数组
    sort => 对10以内的数组进行从小到大的排序
    sort(function(a,b){return a - b}) => 对数组进行从小到大的排序
    sort(function(a,b){return b - a}) => 对数组进行从大到小的排序

// 6. sort => 10以内
var arr = [3,4,1,2,5,11]
var res = arr.sort();
console.log(arr,res);

// sort(function(a,b){return a -  b})
var arr = [3,4,1,2,5,11]
var res = arr.sort(function(a,b){return a - b})
console.log(arr,res);

// sort(function(a,b){return b - a})
var arr = [3,4,1,2,5,11]
var res = arr.sort(function(a,b){return b - a})
console.log(arr,res);

// reverse => 翻转数组,返回就是翻转之后的新数组
var arr = ['🍎','🌏','🏀']
var res = arr.reverse();
console.log(arr,res);

// 7. splice => 对数组进行增删改,返回的就是被删除的元素组成的一个新数组
// 参数一 => 增删改指定的下标
// 参数二 => 删除元素的长度
// 参数三往后 => 添加的元素
var arr = ['🍎','🍊','🍑','🍌','🍉']
// 从下标为1开始,删除一个元素
var res = arr.splice(1,1)
console.log(arr,res);

// 从下标为为2开始,删除3个元素
var res = arr.splice(2,3)
console.log(arr,res);

// 将数组的下标为3的地方新增一个🌏
var res = arr.splice(3,0,'🌏')
console.log(arr,res);

// 将数组的下标为2的地方,新增一个陈锦,🏀
var res = arr.splice(2,0,'陈锦','🏀')
console.log(arr,res);

// 将🍑替换成子涛
var res = arr.splice(2,1,'子涛')
console.log(arr,res);Copy to clipboardErrorCopied

B. 数组的常规方法

• 特点: 不改变原数组

• 使用: 使用: 数组.xxx() => xxx表示就是方法名

1. concat => 合并数组

2. indexOf => 根据下标找元素,从前面往后面找,找到了,那么就使用,找不到就是-1

3. lastIndexOf => 根据下标找元素,从后面往前面找,找到了,那么就使用,找不到,那么就-1

4. slice => 截取数组

• 特点1: 包头不包尾

• 特点2: 可以写负数,负数表示从后面往前面找,比如-1:从后面1位开始往前面找,-2:从后面2位开始往前面找

1. join => 将数组转换成字符串

比如

/* 
    数组的常规方法:
        特点: 不改变原数组
        使用: 数组.xxx() => xxx表示就是方法名
        1. concat => 合并数组
        2. indexOf => 从前面往后面找元素,找到了就使用,找不到就-1
        3. lastIndexOf => 从后面往前面找元素,找到了就使用,找不到就-1
        4. slice => 截取数组,可以写负数
        5. join => 将数组转换成字符串
*/
// 1. concat => 合并数组,返回的就是合并之后的新数组
var arr1 = [1,2,3]
var arr2 = ['🍎','🍊','🍑']
var res = arr1.concat(arr2)
console.log(arr1,arr2,res);

var res1 = arr1.concat(arr2,['张三','李四','王五'])
console.log(arr1,arr2,res1);


// 2. indexOf => 从前面找往后找元素,找到了,那么就使用,找不到就-1,返回的就是找到的下标
var arr = ['🏀','⚾','⚽','🏓','🏸','⚽']
var res = arr.indexOf('⚽')
console.log(arr,res);

var res = arr.indexOf('⚽1')
console.log(arr,res);


// 3. lastIndexOf => 从后面往前面找元素,找到了,就使用,找不到就-1,返回的是找到的下标
var arr = ['🏀','⚾','⚽','🏓','🏀','🏸']
var res = arr.lastIndexOf('🏀')
console.log(arr,res);

var res = arr.lastIndexOf('🏀🏀')
console.log(arr,res);


// 4. slice => 截取(参数一:截取的下标,参数二:截取到末尾的下标),特点:包头不包尾,左闭右开,还可以写负数
var arr = ['🏀','⚾','⚽','🏓','🏀','🏸'];
var res = arr.slice(1,3)
console.log(arr,res);

var res = arr.slice(2,4)
console.log(arr,res);

// 写负数
var res = arr.slice(1,-1)
console.log(arr,res);

var res = arr.slice(2,-2)
console.log(arr,res);


// join => 将数组转换成字符串,默认使用的是 逗号 ,
var arr = ['🏀','⚾','⚽','🏓','🏀','🏸'];
var res = arr.join()
console.log(arr,res);

var res = arr.join('-')
console.log(arr,res);Copy to clipboardErrorCopied

C. 高阶数组方法

• 使用: 方法(function(元素,下标,原数组){})

1. forEach => 普通遍历数组,没有返回值

2. map => 批量加工数组,返回的是加工之后的新数组

3. filter => 过滤,过滤掉不满足要求的内容,返回的是满足要求组成的一个新数组

4. every => 当每一个元素都满足要求,那么就返回true,但凡有一个不满足要求,那么就返回false

5. some => 但凡有一个满足要求,那么就返回true,全部都不满足要求,那么就返回false

6. find => 在数组里面找满足要求的元素,找到了返回对应的元素,找不到就返回undefined

7. findIndex => 在数组里面找满足要求的元素,找到了返回对应的下标,找不到就返回-1

比如

/* 
    使用: 方法(function(元素,下标,原数组){

    })
    1. forEach => 普通遍历数组,没有返回值
    2. map => 批量加工数组,返回的是加工完毕的数组
    3. filter => 过滤掉不要满足要求的元素,返回的是满足要求的新数组
    4. some => 但凡有一个满足要求,那么就返回true,如果全部都不满足要求,那么就返回false
    5. every => 但凡有一个不满足要求,那么就返回false,全部都满足要求,那么就返回true
    6. find => 从数组里面找元素,找到了就返回这个元素,找不到就返回undefined
    7. findIndex => 从数组里面找元素,找到了就返回这个元素的下标,找不到就返回-1
*/

// 1. forEach => 普通遍历
var arr = ['🍎','🍉','🍑','🍌','🍇']
arr.forEach(function(item,index,arr){
    console.log(item,index,arr);
})


// 2. map => 批量加工数组,返回的是加工完毕的新数组
var arr = [1,2,3,4,5,6,7,8,9]
// 将数组里面的每一个元素都*2
var result = arr.map(function(item,index,arr){
    //有返回值 => 有return
    // console.log(item,index,arr);
    return item * 2;
})
console.log(result);


// 3. filter => 对数组里面的元素进行过滤,过滤掉不满足要求的元素,返回的是满足要求组成的一个新数组
var arr = [1,2,3,4,5,6,7,8,9]
var result = arr.filter(function(item,index,arr){
    //将数组里面的奇数去除
    // console.log(item,index,arr);
    return item % 2
})
console.log(result);


// 4. some  => 但凡有一个满足要求,那么就返回true,如果都不满足要求,那么就返回false
var arr = [1,2,3,4,5,6,7,8,9]
var result = arr.some(function(item,index,arr){
    console.log(item,index,arr);
    return item % 2 ;//只要有一个奇数存在,那么就返回true,如果都不是技术,那么返回false
    return item == 2;
    return item === 333;
})
console.log(result);


// 5. every => 如果都满足要求,那么就返回true,但凡有一个不满足要求,那么就返回false
var arr = [1,3,5,7,9,11,2]
var result = arr.every(function(item,index,arr){
    // console.log(item,index,arr);
    return item % 2;//判断数组里面是否全部都是奇数
})
console.log(result);


// 6. find => 从数组里面找元素,如果找到了,那么就返回这个元素,找不到就返回undefined
var arr = ['🍎','🍉','🍑','🍌','🍇']
var result = arr.find(function(item,index,arr){
    // console.log(item,index,arr);
    return item == '🍎1'
})
console.log(result);


// 7. findIndex => 从数组里面找元素,找到了,那么就返回这个元素的下标,找不到就返回-1
var arr = ['🍎','🍇','🍉','🍑','🍌','🍇']
var result = arr.findIndex(function(item,index,arr){
    return item == '🍇'
})
console.log(result);Copy to clipboardErrorCopied

2. 数组去重

方式一

var arr = [1,1,2,2,4]
/* 
    思路:
        1. 定义一个新的数组 var newArr = []
        2. 遍历老的数组,如果老数组的里面的元素在新数组里面不存在,那么就把这个元素放入到新数组当中
*/
var newArr = [];
arr.forEach(function(item,index){
    // console.log(item);
    // 如果item在新数组当中不存在,那么就把这个元素放入到新的数组里面去
    if(newArr.indexOf(item) == -1){
        newArr.push(item)
    }
})
console.log(newArr);Copy to clipboardErrorCopied

方式二

var arr = [1,1,2,2,4,2]
//先排序
arr.sort(function(a,b){return a - b});
//         0 1 2 3 4
/* 
    思路:
        1. 将数组倒循环,如果前面的元素与后面的元素一样,那么就删除一个
            i = 4       4       2,4 => 不一样,不删
            i = 3       2       2,2 => 一样,删除前面的 1,1,2,4
            i = 2       2       1,2 => 不一样,不删
            i = 1       1       1,1 => 一样,删除  1,2,4
*/
for(var i = arr.length - 1 ; i >= 0; i--){
    if(arr[i-1] == arr[i]){
        arr.splice(i,1)
    }
}
console.log(arr);Copy to clipboardErrorCopied

方式三

var arr = [1,1,2,2,4,2]
//先排序
arr.sort();//1,1,2,2,2,4
/* 
    数组塌陷
        1,1,2,2,2,4
        开始循环
            i = 0;  1       1,1 => 删 [1,2,2,2,4]
            i = 1;  2       2,2 => 删 [1,2,2,4]
            i = 2;  2       2,4 => 不 [1,2,2,4]

        1,1,2,2,2,4

        只要删除了,就不要让i++,我们要让这个下标回到之前的位置,i--
        开始循环
            i = 0   1       1,1 => 删 [1,2,2,2,4]   =>  i--
            i = 0   1       1,2 => 不 [1,2,2,2,4]
            i = 1   2       2,2 => 删 [1,2,2,4] => i--
            i = 1   2       2,2 => 删 [1,2,4] => i--
            i = 1   2       2,4 => 不
*/
for(var i = 0 ; i < arr.length ; i++){
    if(arr[i] == arr[i+1]){
        arr.splice(i,1);
        i--;
    }
}
console.log(arr);Copy to clipboardErrorCopied

方式四

var arr = [1, 1, 2, 2, 4, 2]
/* 
    利用对象的key值
        key值是唯一的,当对象的key出现重复的时候,后面的会覆盖前面的key值
        操作对象的属性 => 点语法,中括号语法(可以不遵守变量的命名规则)
    思路:
        1. 定义一个对象 => var obj = {}
        2. 遍历数组,将数组里面的每一个元素都存储到对象的key当中,value无所谓
            1,1,2,2,4,2
                
            i = 0       1  => 将元素存储到对象的key值当中 {1:无所谓}
            i = 1       1  => 将元素存储到对象的key值当中 {1:无所谓}
            i = 2       2  => 将元素存储到对象的key值当中 {1:无所谓;2:无所谓}
            i = 3       2  => 将元素存储到对象的key值当中 {1:无所谓,2:无所谓}
            i = 4       4  => 将元素存储到对象的key值当中 {1:无所谓,2:无所谓,4:无所谓}
            i = 5       2  => 将元素存储到对象的key值当中 {1:无所谓,2:无所谓,4:无所谓}
        3. 定义一个新的数组,将对象的key存储到这个数组里面去(注意:数据类型)
*/
var obj = {}
arr.forEach(function(item){
    //将item当做对象的key值,value无所谓
    obj[item] = "无所谓"
})
var newArr = []
//获取对象的key => for in
for(var key in obj){
    // console.log(key);
    newArr.push(+key)
}
console.log(newArr);Copy to clipboardErrorCopied

方式五

var arr = [1, 1, 2, 2, 4, 2]
// Set 有一个特点 => 里面的内容不能重复
var s = [...new Set(arr)]
console.log(s);Copy to clipboardErrorCopied

3. 字符串

A. 创建字符串的两种方式

1. 使用字面量创建字符串 => var str = ""

2. 使用内置构造函数创建字符型 => var str = new String()

比如

// 字面量
var str1 = "hello world";
console.log(str1);

// 内置构造函数创建字符串
var str2 = new String();
console.log(str2);

var str3 = new String("hello world")
console.log(str3);Copy to clipboardErrorCopied

B. 字符串的属性

1. 下标 => 只读

2. 长度 => 只读

比如

/* 
    字符串的属性
        1. 下标(索引) => 只读
        2. 长度(length) => 只读
*/
var str = new String("hello world")
//                    01234567890
// console.log(str[0]);
// console.log(str[1]);
// console.log(str[2]);
// console.log(str[3]);
// console.log(str[4]);
// console.log(str[5]);
// console.log(str[6]);
// console.log(str[7]);
// console.log(str[8]);
// console.log(str[9]);
// console.log(str[10]);
// console.log(str[11]);

for(var i = 0 ; i < 11 ; i++){
    console.log(str[i]);
}

// 不能根据字符串的下标修改字符串的内容
str[2] = "陈锦"
console.log(str);

// str.length = 2; // 也不能修改字符串的长度
console.log(str.length);
console.log(str);

for(var i = 0 ; i < str.length ; i++){
    console.log(str[i]);
}Copy to clipboardErrorCopied

3. 字符串的分类

A. 纯数字字符串

比如

//纯数字字符串
var str1 = "1234567890"
console.log(str1);Copy to clipboardErrorCopied

B. HTML字符串

比如

//HTML字符串
var str2 = "<p>放了一个p标签</p>"
console.log(str2);Copy to clipboardErrorCopied

C. 模板字符串

• 可以换行

• 可以写变量

比如

//模板字符串 => 可以换行,可以写变量
var str3 = `
    <p>${str1}</p>
`
console.log(str3);Copy to clipboardErrorCopied

D. 查询字符串

比如

var str = "username=admin&password=123456"Copy to clipboardErrorCopied

E.JSON字符串

• 将JSON字符串转换成对象 => JSON.parse(JSON字符串)

• 将对象转换成JSON字符串 => JSON.stringify(JS对象)

注意:和对象的区别,对应的key不需要添加双引号

比如

//定义一个对象
var str = {name:"张三",age:18,gender:"男"}

//将对象转换成JSON字符串 => JSON.stringify(对象)
var jsonstring = JSON.stringify(str)

//将JSON字符串转换成对象 => JSON.parse(JSON字符串)
var obj = JSON.parse(jsonstring)

console.log(jsonstring);
console.log(obj);

知识点

1. 字符的方法

1. charAt => 根据下标找字符串

2. charCodeAt => 根据下标找字符串的编码

3. toUpperCase => 将字符串里面的字母转换成大写

4. toLowerCase => 将字符串里面的字母转换成小写

5. slice => 截取,包头不包尾,可以写负数,参数一:开始截取的下标,参数二:结束截取下标

6. substr => 截取,参数一:开始截取的下标,参数二:截取的长度

7. substring => 截取: 参数一:开始截取的下标,参数二:结束截取的下标

8. indexOf => 查找字符串里面对应的字符串的下标

9. trim => 去除字符串两边的空格

10. trimStart => 去除字符串开始的空格

11. trimEnd => 去除字符串结束的空格

12. trimLeft => 去除字符串左边的空格

13. trimRight => 去除字符串右边的空格

14. replace => 替换字符串

15. replaceAll => 批量替换字符串

16. startsWith => 判断字符串是否以某某开头

17. endsWidth => 判断字符串是否以某某结尾

18. split => 切割字符串

19. includes => 判断字符串里面是否包含某一个字符串

20. concat => 合并字符串

21. lastIndexOf => 根据下标找字符串,从后面往前面找

比如

/* 
字符串的方法
    1. charAt => 根据下标找字符
    2. charCodeAt => 根据下标找字符的编码
    3. toUpperCase => 将字符串中的字母转换成大写
    4. toLowerCase => 将字符串中的字母转换成小写
    5. slice => 截取
    6. substr => 截取
    7. substring => 截取
    8. trim => 去除字符串两边的空格
    9. trimStart => 去除字符串开头的空格
    10. trimEnd => 去除字符串结尾的空格
    11. trimLeft => 去除字符串左边的空格
    12. trimRight => 去除字符串右边的空格
    13. replace => 替换字符串
    14. replaceAll => 批量替换字符串
    15. startsWith => 判断字符串是否以某某开头
    16. endsWith => 判断字符串是否以某某结尾
    17. split => 切割字符串
    18. indexOf => 根据字符串找下标,从前面往后面找
    19. lastIndexOf => 根据字符串找下标,从后面往前面找
    20. concat => 合并字符串
    21. includes => 判断字符串是否包含某一个字符
*/
// 1. charAt => 根据下标找字符串
var str = "我爱javascript"
//         0 1 234565789
console.log(str.charAt(1));


// 2. charCodeAt => 根据下标找字符的编码 a:97,A:65
var str = "我爱javascript"
console.log(str.charCodeAt(3));


// 3. toUpperCase => 将字符串里面的字母转换成大写
var str = "我爱javascript"
console.log(str.toUpperCase());


// 4. toLowerCase => 将字符串里面的字母转换成小写
var str = "我爱JavasCript"
console.log(str.toLowerCase());


// 5. slice => 截取,包头不包尾,可以写负数
var str = "我爱javascript"
console.log(str.slice(1,3));
console.log(str.slice(1,-1));


// 6. substr => 截取 参数一: 开始截取的下标,参数二:截取的长度
var str = "我爱javascript"
    // 0 1 2345678901
console.log(str.substr(3,2));
console.log(str.substr(1,3));


// 7. substring => 截取 参数一: 开始截取的下标,参数二:结束截取的下标,包头不包尾
var str = "我爱javascript"
console.log(str.substring(1,3));
console.log(str.substring(3,6));


// 8. trim => 去除两边的空格
// 9. trimStart => 去除开头的空格
// 10. trimEnd => 去除结尾的空格
// 11. trimLeft => 去除左边的空格
// 12. trimRight => 去除右边的空格
var str = "   我爱javascript  "
console.log(str.trim());
console.log(str.trimStart());
console.log(str.trimEnd());
console.log(str.trimLeft());
console.log(str.trimRight());


// 13. replace => 替换字符串
// 参数一: 换下字符
// 参数二: 换上字符
var str = "我爱javascript"
console.log(str.replace('a','陈锦'));


// 14. replaceAll => 批量替换字符串
//参数一 : 换下字符串
//参数二 : 换上字符串
var str = "我爱javascript"
console.log(str.replaceAll('a','陈锦'));

var str = "你这个水平就是一个青铜水平,NN,拖死我了"
console.log(str.replaceAll("N","*"));


//15. startsWith => 判断字符是否以某某开头
var str = "我爱javascript"
console.log(str.startsWith("我"));
console.log(str.startsWith("我爱"));


// 16. 判断字符是否以某某结尾
var str = "我爱javascript";
console.log(str.endsWith("pt"));
console.log(str.endsWith("tp"));


// 17. split => 切割字符串,切割得到的结果是一个数组
var str = "我爱javascript"
var res = str.split("a")
console.log(res);


// 18. indexOf
var str = "我爱javascript"
console.log(str.indexOf('a'));
console.log(str.indexOf('a',4));//表示从下标为4开始查找


// 19. lastIndexOf
var str = "我爱javascript"
console.log(str.lastIndexOf('a'));
console.log(str.lastIndexOf('a',4));//从下标为4的地方开始往前面找


// 20. concat => 合并字符串
var str1 = "陈锦"
var str2 = "唱,跳,rap,🏀,music"
console.log(str1.concat(str2,"唱的一般"));


// 21. includes => 判断字符串里面是否包含某一个字符
var str = "我爱javascript"
console.log(str.includes('爱'));
console.log(str.includes('a'));
console.log(str.includes('a1'));Copy to clipboardErrorCopied

2. 综合练习

案例一

// 比如我要过滤 "NH,NN"
var str = 'asdasdNHasdaNNsdasdNHsdasdasdNHsadaNNsd'
/* 
    思路：
        1. 定义数组,数组里面存储就是你要过滤的字符串 var arr = ["NH","NN"]
        2. 遍历数组,将数组里面的元素一个一个的取出来,然后再进行批量替换(replaceAll)
*/
var arr = ["NH","NN"]
arr.forEach(function(item){
    // console.log(item);
    str = str.replaceAll(item,"**");
})
console.log(str);Copy to clipboardErrorCopied

案例二

//翻转字符串
var str = 'abcdefg'
/* 
    思路:
        1. 将字符串转换成数组 => split => [a,b,c,d,e,f,g]
        2. 翻转数组 => [g,f,e,d,c,b,a]
        3. 将数组合并成一个字符串 "gfedcba"
*/
var res = str.split("") //-> [a,b,c,d,e,f,g]
res.reverse()   //[g,f,e,d,c,b,a]
var result = res.join("") //=>"gfedcba"
console.log(result);Copy to clipboardErrorCopied

案例三

// 统计字符串中每个字符的个数
// var str = 'abcdacbabcbababcbabcabd'
var str = "abcdacbabcbaba"
/* 
    思路:
        1. 先定义一个对象
        2. 遍历字符串,将字符串里面的字符一个一个遍历出来
            将字符串里面字符存储到对象的key当中
                如果是第一次存储,那么value值1
                如果是第二次往后,那么value++
    分析:
        var obj = {}
        遍历字符串 => abcdacbabc
        //           0123456789
        i = 0   a       => {a:1}
        i = 1   b       => {a:1,b:1}
        i = 2   c       => {a:1,b:1,c:1}
        i = 3   d       => {a:1,b:1,c:1,d:1}
        i = 4   a       => {a:2,b:1,c:1,d:1}
        i = 5   c       => {a:2,b:1,c:2,d:1}
        i = 6   b       => {a:2,b:2,c:2,d:1}
        i = 7   a       => {a:3,b:2,c:2,d:1}
        i = 8   b       => {a:3,b:3,c:2,d:1}
        i = 9   c       => {a:3,b:3,c:3:d:1}
*/
var obj = {}
//遍历字符串
for(var i = 0 ; i < str.length ; i++){
    //我们将应该要将字符串里面的字符一个一个取出来
    var key = str[i]
    //取出来,要存储到对象的key值里面去,如果是第一次存储的时候,那么value=1,第二次往后,value++
    if(!obj[key]){
        obj[key] = 1;
    }else{
        obj[key]++
    }
}
console.log(obj);Copy to clipboardErrorCopied

案例四

/* 
    思路:
        1. 定义一个空的字符串
        2. 遍历对象
            第一次
                key => username,value => admin
            第二次
                key => password,value => 123456
*/
var obj = {username:"admin",password:123456};
var str = "";
//遍历对象
for(var key in obj){
    // username=admin&password=123456
    // console.log(key,obj[key]);
    /* 
        循环第一次 key => username,value => admin
            str = username=admin&
        循环第二次 key => password,value => 123456
            str = username=admin&password=123456&
    */
    str += `${key}=${obj[key]}&`
}
//把最后这个&符号给删除掉
str = str.slice(0,-1)
console.log(str);Copy to clipboardErrorCopied

案例五

// username=admin&password=123456 => {username:"admin",password:123456}
var str = "username=admin&password=123456";
/* 
    思路:
        0. 先定义空的对象

        1. 按 & 符号进行切割
            [username=admin,password=123456]
        2. 遍历数组
            循环第一次 username=admin
                又要切割 => 按等号切割
                [username,admin]
                obj[username] = admin
            循环第二次 password=123456
                又要切割 => 按等号七个
                [password,123456]
                obj[password] = 123456
*/
var obj = {}
var arr = str.split("&")
// console.log(arr); => ['username=admin', 'password=123456']
arr.forEach(function(item){
    // console.log(item);  //循环第一次 username=admin  循环第二次 password=123456
    var arr1 = item.split("=")
    // console.log(arr1);//[username,admin],[password,123465]
    // console.log(arr1[0],arr1[1]);
    var key = arr1[0]
    var value = arr1[1]
    obj[key] = value;
})
console.log(obj);Copy to clipboardErrorCopied

案例六

/* 
    对象数组(一个数组当中,存储都是对象)
    目的: 
        对对象数组进行排序
*/
var arr = [
    {id:1,name:"陈锦",age:23,gender:"男"},
    {id:2,name:"张三",age:18,gender:"男"},
    {id:3,name:"李四",age:21,gender:"男"},
    {id:4,name:"王五",age:20,gender:"女"},
    {id:5,name:"赵六",age:17,gender:"男"}
]

arr.sort(function(a,b){
    // console.log(a,b);
    // return a.age - b.age
    return b.age - a.age
})
console.log(arr);Copy to clipboardErrorCopied

案例七

<table border="1">
    <thead>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th onclick="order()">商品价格</th>
            <th>商品描述</th>
        </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>
<script>
    /* 
        1. 模拟服务器的数据(对象数组)
        2. 在对象数组当中一个对象对应的这tr
            A. 我们想要将数组里面的内容取出来,那么一定要遍历数组
                在数组里面有三个对象,每一个对象都对应着一个tr
    */
    // 数据驱动视图 => 当我们的数据发生改变之后,那么视图也要改变
    var arr = [
        { id: 1, name: "华为p40", price: 998, desc: "华为你值的拥有" },
        { id: 2, name: "魅族240", price: 9.9, desc: "打5折" },
        { id: 3, name: "锤子手机", price: 99, desc: "买锤子手机,你还买个锤子" }
    ]
    //遍历数组
    arr.forEach(function (item, index) {
        //一个对象,对应着一个tr
        var str = `
        <tr align="center">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.price}</td>
            <td>${item.desc}</td>
        </tr>
        `
        // console.log(str);
        tbody.innerHTML += str;
    })


    //点击排序
    function order() {
        //让数组排序
        arr.sort(function (a, b) {
            return a.price - b.price
        })

        //数据改变了,但是页面没有改变,我们数据改变量了之后,
        // 要让页面重新改变

        tbody.innerHTML = "";

        // 在重新渲染页面之前,要把tbody里面的内容全部清除
        arr.forEach(function (item, index) {
            //一个对象,对应着一个tr
            var str = `
            <tr align="center">
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.price}</td>
                <td>${item.desc}</td>
            </tr>
            `
            // console.log(str);
            tbody.innerHTML += str;
        })
    }
</script>